@charset "UTF-8"; /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /*! * Global Variables * Tất cả variables của theme được định nghĩa ở đây * Sử dụng các giá trị từ _global-variables.scss */ /*! * OneLab Design System Variables * Tất cả variables của theme được định nghĩa theo design system */ /*! * Responsive Mixins * Tự động scale font size, spacing, và layout theo breakpoints */ .ol-button { display: block; background-color: #00704a; color: #ffffff; padding: 12px 30px; border-radius: 8px; text-decoration: none; font-size: 16px; font-weight: 500; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .ol-button:hover { opacity: 0.8; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } /*-------------------------------------------------------------- # Generic --------------------------------------------------------------*/ /* Normalize --------------------------------------------- */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; -webkit-text-size-adjust: 100%; } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; text-wrap: pretty; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; font-size: 1em; } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type=checkbox], [type=radio] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /* Box sizing --------------------------------------------- */ /* Inherit box-sizing to more easily change it's value on a component level. @link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ *, *::before, *::after { -webkit-box-sizing: inherit; box-sizing: inherit; } html { -webkit-box-sizing: border-box; box-sizing: border-box; } /*-------------------------------------------------------------- # Base --------------------------------------------------------------*/ /* Typography --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /* ============================================ LOCAL FONTS - @font-face Declarations ============================================ */ /* Be Vietnam Pro - Body Font */ @font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 300; font-display: swap; src: url("/wp-content/themes/one-lab/assets/fonts/BeVietnamPro-Light.woff2") format("woff2"); } @font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/wp-content/themes/one-lab/assets/fonts/BeVietnamPro-Regular.woff2") format("woff2"); } @font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("/wp-content/themes/one-lab/assets/fonts/BeVietnamPro-Medium.woff2") format("woff2"); } @font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("/wp-content/themes/one-lab/assets/fonts/BeVietnamPro-SemiBold.woff2") format("woff2"); } @font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("/wp-content/themes/one-lab/assets/fonts/BeVietnamPro-Bold.woff2") format("woff2"); } @font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 800; font-display: swap; src: url("/wp-content/themes/one-lab/assets/fonts/BeVietnamPro-ExtraBold.woff2") format("woff2"); } /* Montserrat - Heading Font (Variable Font) */ @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/wp-content/themes/one-lab/assets/fonts/Montserrat-VariableFont_wght.woff2") format("woff2"); } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ h1, h2, h3, h4, h5, h6 { clear: both; } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ p { margin-bottom: 1.5em; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; } address { margin: 0 0 1.5em; } pre { background: #bbbbbb; font-family: "Courier 10 Pitch", courier, monospace; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } abbr, acronym { border-bottom: 1px dotted #aaaaaa; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } big { font-size: 125%; } body, button, input, select, optgroup, textarea { color: #312020; font-family: "Be Vietnam Pro", sans-serif; font-size: 1rem; line-height: 1.5; } /* Elements --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ body { background: #ffffff; } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ hr { background-color: #bbbbbb; border: 0; height: 1px; margin-bottom: 1.5em; } ul, ol { margin: 0 0 1.5em 3em; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: 700; } dd { margin: 0 1.5em 1.5em; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object { max-width: 100%; } img { height: auto; max-width: 100%; } figure { margin: 1em 0; } table { margin: 0 0 1.5em; width: 100%; } /* Links --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ a { color: #00704a; } a:visited { color: #00723f; } a:hover, a:focus, a:active { color: #00723f; } a:focus { outline: none; } a:hover, a:active { outline: none; } /* Forms --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ button, input[type=button], input[type=reset], input[type=submit] { border: 1px solid; border-color: #bbbbbb #bbbbbb #aaaaaa; border-radius: 3px; background: #bbbbbb; color: rgba(0, 0, 0, 0.8); line-height: 1; padding: 0.6em 1em 0.4em; } button:hover, input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover { border-color: #bbbbbb #aaaaaa #aaaaaa; } button:active, button:focus, input[type=button]:active, input[type=button]:focus, input[type=reset]:active, input[type=reset]:focus, input[type=submit]:active, input[type=submit]:focus { border-color: #aaaaaa #aaaaaa #aaaaaa; } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ input[type=text], input[type=email], input[type=url], input[type=password], input[type=search], input[type=number], input[type=tel], input[type=range], input[type=date], input[type=month], input[type=week], input[type=time], input[type=datetime], input[type=datetime-local], input[type=color], textarea { color: #aaaaaa; border: 1px solid #bbbbbb; border-radius: 3px; padding: 3px; } input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, input[type=password]:focus, input[type=search]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=range]:focus, input[type=date]:focus, input[type=month]:focus, input[type=week]:focus, input[type=time]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=color]:focus, textarea:focus { color: #312020; } select { border: none; border-radius: 8px; padding: 0 32px 0 16px; font-size: 16px; font-family: "Be Vietnam Pro", sans-serif; background-color: #ffffff; color: #00704a; width: 100%; min-height: 40px; cursor: pointer; -webkit-transition: background-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("/wp-content/themes/one-lab/assets/images/icons/arrow-down.svg"); background-size: 16px 16px; background-repeat: no-repeat; background-position: right 12px center; } select:hover { background-color: #f8f9fa; } select:disabled { background-color: #bbbbbb; color: #aaaaaa; cursor: not-allowed; opacity: 0.6; -webkit-box-shadow: none; box-shadow: none; } select.select2-hidden-accessible { background-image: none; padding-right: 16px; } @media screen and (max-width: 768px) { select { font-size: 16px; padding: 0 32px 0 16px; min-height: 44px; background-position: right 16px center; background-size: 14px 14px; } } textarea { width: 100%; } /* Select2 Custom Styles --------------------------------------------- */ .select2-container { width: 100% !important; } .select2-container .select2-selection__clear { display: none !important; } .select2-container .select2-selection { border: none; border-radius: 8px; min-height: 40px; background-color: #ffffff; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); -webkit-transition: background-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; } .select2-container .select2-selection:hover { background-color: #f8f9fa; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); } .select2-container .select2-selection.select2-selection--multiple { min-height: 44px; color: #bbb; padding: 0; border-radius: 8px; border-color: #bbbbbb; line-height: 1.5; font-size: 14px; } .select2-container .select2-selection.select2-selection--single .select2-selection__rendered { color: #000000; padding: 0; border-radius: 8px; border-color: #bbbbbb; line-height: 1.5; font-size: 14px; } @media screen and (max-width: 992px) { .select2-container .select2-selection.select2-selection--single .select2-selection__rendered { font-size: 14px; } } @media screen and (max-width: 768px) { .select2-container .select2-selection.select2-selection--single .select2-selection__rendered { font-size: 13px; } } .select2-container .select2-selection.select2-selection--single .select2-selection__placeholder { color: #999; } .select2-container .select2-selection.select2-selection--single .select2-selection__arrow { height: 40px; right: 0px; top: 0; } .select2-container .select2-selection.select2-selection--single .select2-selection__arrow b { border-color: #666 transparent transparent transparent; border-width: 6px 6px 0 6px; } @media screen and (max-width: 992px) { .select2-container .select2-selection.select2-selection--single .select2-selection__arrow b { border-width: 5px 5px 0 5px; } } @media screen and (max-width: 768px) { .select2-container .select2-selection.select2-selection--single .select2-selection__arrow b { border-width: 4px 4px 0 4px; } } .select2-container .select2-selection.select2-selection--multiple .select2-selection__rendered { padding: 10px 12px 0px !important; line-height: 1.5; } .select2-container .select2-selection.select2-selection--multiple .select2-selection__rendered .select2-selection__choice { background-color: #fff; color: #312020; border: 1px solid #00704a; border-radius: 8px; padding: 2px 8px; margin: 0px 6px 4px 0; font-size: 14px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .select2-container .select2-selection.select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove { width: 16px; height: 16px; padding: 0; display: inline-block; font-size: 0; color: transparent; border: none; outline: none; -webkit-box-shadow: none; box-shadow: none; background-color: transparent !important; background-image: url("/wp-content/themes/one-lab/assets/images/icons/x.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; cursor: pointer; vertical-align: middle; position: relative; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .select2-container .select2-selection.select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove::before { content: ""; } .select2-container .select2-selection.select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover { opacity: 1; background-color: #00704a; } .select2-container .select2-selection.select2-selection--multiple .select2-selection__rendered .select2-selection__placeholder { color: #999; margin-top: 4px; } .select2-container .select2-dropdown { border: none; border-radius: 12px !important; -webkit-box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25); box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25); font-family: "Be Vietnam Pro", sans-serif; font-size: 16px; overflow: hidden; } @media screen and (max-width: 992px) { .select2-container .select2-dropdown { font-size: 14px; } } @media screen and (max-width: 768px) { .select2-container .select2-dropdown { font-size: 13px; } } .select2-container .select2-dropdown .select2-results__option { padding: 8px 12px; font-family: "Be Vietnam Pro", sans-serif; font-size: 16px; } @media screen and (max-width: 992px) { .select2-container .select2-dropdown .select2-results__option { font-size: 14px; } } @media screen and (max-width: 768px) { .select2-container .select2-dropdown .select2-results__option { font-size: 13px; } } .select2-container .select2-dropdown .select2-results__option--highlighted, .select2-container .select2-dropdown .select2-results__option:hover { background-color: rgba(187, 187, 187, 0.2); color: #00704a; } .select2-container .select2-dropdown .select2-results__option--selected { background-color: #EFEFEF; color: #00704a; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .select2-container .select2-search--dropdown { padding: 8px; } .select2-container .select2-search--dropdown .select2-search__field { border: none; border-radius: 8px; padding: 12px 16px; width: 100%; font-size: 16px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-color: #ffffff; } @media screen and (max-width: 992px) { .select2-container .select2-search--dropdown .select2-search__field { font-size: 14px; padding: 10px 14px; } } @media screen and (max-width: 768px) { .select2-container .select2-search--dropdown .select2-search__field { font-size: 13px; padding: 8px 12px; } } .acf-field .select2-container { margin-top: 0; } @media (max-width: 768px) { .select2-container .select2-selection { min-height: 42px; } .select2-container .select2-selection.select2-selection--single .select2-selection__arrow { height: 40px; } } /*-------------------------------------------------------------- # Layouts --------------------------------------------------------------*/ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /* Container Layout * Defines the main content container width and responsive behavior */ .container { max-width: 1440px; margin: 0 auto; padding: 0 20px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 1770px) { .container { max-width: 80%; } } @media screen and (max-width: 1440px) { .container { padding: 0 15px; width: 80%; } } @media screen and (max-width: 992px) { .container { width: 84%; } } @media screen and (max-width: 768px) { .container { padding: 0 10px; max-width: 80%; } } @media screen and (max-width: 576px) { .container { max-width: 90%; width: 90%; } } /*-------------------------------------------------------------- # Pages --------------------------------------------------------------*/ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .homepage .background-section { margin-top: -304px; margin-bottom: -452px; height: 756px; background-image: url("../images/background-2.webp"); background-size: cover; background-position: center top; background-repeat: no-repeat; width: 100%; z-index: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (max-width: 992px) { .homepage .background-section { height: 550px; margin-top: -175px; margin-bottom: -275px; } } @media screen and (max-width: 768px) { .homepage .background-section { height: 500px; margin-top: -250px; margin-bottom: -250px; } } @media screen and (max-width: 480px) { .homepage .background-section { height: 450px; margin-top: -225px; margin-bottom: -225px; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * About Page Styles * Styles for the Giới thiệu (About) page template * * @package One_Lab */ .about-page { text-wrap: pretty; } .about-hero { position: relative; width: 100%; aspect-ratio: 1920/670; overflow: hidden; background-color: #312020; } @media (max-width: 768px) { .about-hero { aspect-ratio: 16/9; } } .about-hero__image { width: 100%; height: 100%; } .about-hero__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .about-hero__video { position: relative; width: 100%; height: 100%; } .about-hero__video--youtube iframe { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); pointer-events: none; border: 0; } @supports (aspect-ratio: 1920/670) { .about-hero__video--youtube iframe { min-width: 100%; min-height: 100%; width: auto; height: auto; } } .about-hero__video--native video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .about-intro { padding: 50px 0 36px; } @media (max-width: 1770px) { .about-intro { padding: 45px 0 32px; } } @media (max-width: 1440px) { .about-intro { padding: 40px 0 29px; } } @media (max-width: 1200px) { .about-intro { padding: 35px 0 25px; } } @media (max-width: 992px) { .about-intro { padding: 30px 0 22px; } } @media (max-width: 768px) { .about-intro { padding: 25px 0 18px; } } @media (max-width: 640px) { .about-intro { padding: 20px 0 14px; } } @media (max-width: 480px) { .about-intro { padding: 25px 0 18px; } } .about-intro__grid { display: grid; grid-template-columns: 1fr 669px; gap: 78px; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } @media (max-width: 1770px) { .about-intro__grid { grid-template-columns: 1fr 602px; gap: 70px; } } @media (max-width: 1440px) { .about-intro__grid { grid-template-columns: 1fr 535px; gap: 62px; } } @media (max-width: 1200px) { .about-intro__grid { grid-template-columns: 1fr 1fr; gap: 55px; } } @media (max-width: 992px) { .about-intro__grid { grid-template-columns: 1fr; gap: 47px; } } @media (max-width: 768px) { .about-intro__grid { gap: 39px; } } @media (max-width: 640px) { .about-intro__grid { gap: 31px; } } @media (max-width: 480px) { .about-intro__grid { gap: 39px; } } .about-intro__text { padding: 65px 0; } @media (max-width: 1770px) { .about-intro__text { padding: 59px 0; } } @media (max-width: 1440px) { .about-intro__text { padding: 52px 0; } } @media (max-width: 1200px) { .about-intro__text { padding: 46px 0; } } @media (max-width: 992px) { .about-intro__text { padding: 39px 0; } } @media (max-width: 768px) { .about-intro__text { padding: 33px 0; } } @media (max-width: 640px) { .about-intro__text { padding: 26px 0; } } @media (max-width: 480px) { .about-intro__text { padding: 33px 0; } } .about-intro__text h2 { font-size: 36px; font-weight: 700; color: #00704a; line-height: 55px; margin: 0 0 30px; } @media (max-width: 1770px) { .about-intro__text h2 { font-size: 31px; line-height: 50px; margin: 0 0 27px; } } @media (max-width: 1440px) { .about-intro__text h2 { font-size: 27px; line-height: 44px; margin: 0 0 24px; } } @media (max-width: 1200px) { .about-intro__text h2 { font-size: 23px; line-height: 38px; margin: 0 0 21px; } } @media (max-width: 992px) { .about-intro__text h2 { font-size: 20px; line-height: 32px; margin: 0 0 18px; } } @media (max-width: 768px) { .about-intro__text h2 { font-size: 18px; line-height: 28px; margin: 0 0 15px; } } @media (max-width: 640px) { .about-intro__text h2 { font-size: 16px; line-height: 24px; margin: 0 0 12px; } } @media (max-width: 480px) { .about-intro__text h2 { font-size: 16px; line-height: 24px; margin: 0 0 12px; } } .about-intro__content { font-size: 16px; line-height: 150%; color: #312020; text-align: justify; } @media (max-width: 1770px) { .about-intro__content { font-size: 14px; line-height: 145%; } } @media (max-width: 1440px) { .about-intro__content { font-size: 14px; line-height: 145%; } } @media (max-width: 1200px) { .about-intro__content { font-size: 14px; line-height: 145%; } } @media (max-width: 992px) { .about-intro__content { font-size: 14px; line-height: 145%; } } @media (max-width: 768px) { .about-intro__content { font-size: 14px; line-height: 140%; } } @media (max-width: 640px) { .about-intro__content { font-size: 14px; } } @media (max-width: 480px) { .about-intro__content { font-size: 14px; } } .about-intro__content a, .about-intro__content strong, .about-intro__content b { color: #00704a; text-decoration: none; font-weight: 700; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .about-intro__content a:hover, .about-intro__content strong:hover, .about-intro__content b:hover { color: #00723f; } .about-intro__content p { margin-bottom: 12px; } @media (max-width: 640px) { .about-intro__content p { margin-bottom: 10px; } } @media (max-width: 480px) { .about-intro__content p { margin-bottom: 8px; } } .about-intro__content p:last-child { margin-bottom: 0; } @media (max-width: 992px) { .about-intro__media { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } } .about-intro__image-wrapper { position: relative; border-radius: 12px; overflow: hidden; -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .about-intro__image-wrapper::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(0, 112, 74, 0.1) 0%, rgba(0, 112, 74, 0) 50%); opacity: 0; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; z-index: 1; pointer-events: none; } .about-intro__image-wrapper:hover { -webkit-transform: translateY(-8px); transform: translateY(-8px); -webkit-box-shadow: 0 20px 40px rgba(0, 112, 74, 0.15); box-shadow: 0 20px 40px rgba(0, 112, 74, 0.15); } .about-intro__image-wrapper:hover::before { opacity: 1; } .about-intro__image-wrapper:hover img { -webkit-transform: scale(1.05); transform: scale(1.05); } .about-intro__image-wrapper img { width: 100%; height: auto; display: block; -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: -webkit-transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 12px; } .about-intro__video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; } .about-intro__video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .about-vision-mission { padding: 60px 0; } @media (max-width: 1770px) { .about-vision-mission { padding: 54px 0; } } @media (max-width: 1440px) { .about-vision-mission { padding: 48px 0; } } @media (max-width: 1200px) { .about-vision-mission { padding: 42px 0; } } @media (max-width: 992px) { .about-vision-mission { padding: 36px 0; } } @media (max-width: 768px) { .about-vision-mission { padding: 30px 0; } } @media (max-width: 640px) { .about-vision-mission { padding: 24px 0; } } @media (max-width: 480px) { .about-vision-mission { padding: 30px 0; } } .about-vision-mission__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; } @media (max-width: 1770px) { .about-vision-mission__grid { gap: 32px; } } @media (max-width: 1440px) { .about-vision-mission__grid { gap: 29px; } } @media (max-width: 1200px) { .about-vision-mission__grid { gap: 25px; } } @media (max-width: 992px) { .about-vision-mission__grid { gap: 22px; } } @media (max-width: 768px) { .about-vision-mission__grid { grid-template-columns: 1fr; gap: 18px; } } @media (max-width: 640px) { .about-vision-mission__grid { gap: 14px; } } @media (max-width: 480px) { .about-vision-mission__grid { gap: 18px; } } .about-card { height: 256px; padding: 32px 64px; border-radius: 24px; border: 1px solid #00704a; -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; } @media (max-width: 1770px) { .about-card { padding: 29px 58px; height: auto; min-height: 240px; } } @media (max-width: 1440px) { .about-card { padding: 26px 51px; height: auto; min-height: 220px; } } @media (max-width: 1200px) { .about-card { padding: 22px 45px; height: auto; min-height: 210px; } } @media (max-width: 992px) { .about-card { padding: 19px 38px; height: auto; min-height: 145px; } } @media (max-width: 768px) { .about-card { padding: 16px 32px; height: auto; border-radius: 16px; gap: 16px; } } @media (max-width: 640px) { .about-card { padding: 13px 26px; border-radius: 14px; } } @media (max-width: 480px) { .about-card { padding: 16px 24px; border-radius: 12px; gap: 14px; } } .about-card::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(0, 112, 74, 0.05)), to(transparent)); background: linear-gradient(90deg, transparent, rgba(0, 112, 74, 0.05), transparent); -webkit-transition: left 0.6s ease; transition: left 0.6s ease; z-index: 0; } .about-card > * { position: relative; z-index: 1; } .about-card:hover { -webkit-transform: translateY(-6px); transform: translateY(-6px); border-color: #00723f; -webkit-box-shadow: 0 12px 32px rgba(0, 112, 74, 0.2); box-shadow: 0 12px 32px rgba(0, 112, 74, 0.2); background: linear-gradient(135deg, rgba(0, 112, 74, 0.02) 0%, transparent 100%); } .about-card:hover::before { left: 100%; } .about-card:hover .about-card__icon { -webkit-transform: scale(1.1) rotate(5deg); transform: scale(1.1) rotate(5deg); } .about-card:hover h3 { color: #00723f; } .about-card__icon { width: 64px; height: 64px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: 1770px) { .about-card__icon { width: 58px; height: 58px; } } @media (max-width: 1440px) { .about-card__icon { width: 51px; height: 51px; } } @media (max-width: 1200px) { .about-card__icon { width: 45px; height: 45px; } } @media (max-width: 992px) { .about-card__icon { width: 38px; height: 38px; } } @media (max-width: 768px) { .about-card__icon { width: 32px; height: 32px; } } @media (max-width: 640px) { .about-card__icon { width: 26px; height: 26px; } } @media (max-width: 480px) { .about-card__icon { width: 32px; height: 32px; } } .about-card__icon img { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; -webkit-filter: drop-shadow(0 2px 4px rgba(0, 112, 74, 0)); filter: drop-shadow(0 2px 4px rgba(0, 112, 74, 0)); -webkit-transition: -webkit-filter 0.3s ease; transition: -webkit-filter 0.3s ease; transition: filter 0.3s ease; transition: filter 0.3s ease, -webkit-filter 0.3s ease; } .about-card:hover .about-card__icon img { -webkit-filter: drop-shadow(0 4px 8px rgba(0, 112, 74, 0.3)); filter: drop-shadow(0 4px 8px rgba(0, 112, 74, 0.3)); } .about-card__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 32px; } @media (max-width: 1770px) { .about-card__header { gap: 29px; } } @media (max-width: 1440px) { .about-card__header { gap: 26px; } } @media (max-width: 1200px) { .about-card__header { gap: 22px; } } @media (max-width: 992px) { .about-card__header { gap: 19px; } } @media (max-width: 768px) { .about-card__header { gap: 16px; } } @media (max-width: 640px) { .about-card__header { gap: 13px; } } @media (max-width: 480px) { .about-card__header { gap: 14px; } } .about-card__header h3 { font-family: "Montserrat", sans-serif; font-size: 24px; font-weight: 700; color: #00704a; text-transform: uppercase; margin: 0; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } @media (max-width: 1770px) { .about-card__header h3 { font-size: 20px; } } @media (max-width: 1440px) { .about-card__header h3 { font-size: 18px; } } @media (max-width: 1200px) { .about-card__header h3 { font-size: 16px; } } @media (max-width: 992px) { .about-card__header h3 { font-size: 14px; } } @media (max-width: 768px) { .about-card__header h3 { font-size: 14px; } } @media (max-width: 640px) { .about-card__header h3 { font-size: 14px; } } @media (max-width: 480px) { .about-card__header h3 { font-size: 13px; } } .about-card p, .about-card__content { font-size: 20px; color: #312020; margin: 0; } @media (max-width: 1770px) { .about-card p, .about-card__content { font-size: 17px; } } @media (max-width: 1440px) { .about-card p, .about-card__content { font-size: 15px; } } @media (max-width: 1200px) { .about-card p, .about-card__content { font-size: 14px; line-height: 140%; } } @media (max-width: 992px) { .about-card p, .about-card__content { font-size: 14px; line-height: 140%; } } @media (max-width: 768px) { .about-card p, .about-card__content { font-size: 14px; line-height: 140%; } } @media (max-width: 640px) { .about-card p, .about-card__content { font-size: 14px; } } @media (max-width: 480px) { .about-card p, .about-card__content { font-size: 14px; } } .about-core-values { padding: 48px 0; background-color: #ffffff; } @media (max-width: 1770px) { .about-core-values { padding: 43px 0; } } @media (max-width: 1440px) { .about-core-values { padding: 38px 0; } } @media (max-width: 1200px) { .about-core-values { padding: 34px 0; } } @media (max-width: 992px) { .about-core-values { padding: 29px 0; } } @media (max-width: 768px) { .about-core-values { padding: 24px 0; } } @media (max-width: 640px) { .about-core-values { padding: 19px 0; } } @media (max-width: 480px) { .about-core-values { padding: 24px 0; } } .about-core-values .section-header { text-align: center; margin-bottom: 40px; } @media (max-width: 1770px) { .about-core-values .section-header { margin-bottom: 36px; } } @media (max-width: 1440px) { .about-core-values .section-header { margin-bottom: 32px; } } @media (max-width: 1200px) { .about-core-values .section-header { margin-bottom: 28px; } } @media (max-width: 992px) { .about-core-values .section-header { margin-bottom: 24px; } } @media (max-width: 768px) { .about-core-values .section-header { margin-bottom: 20px; } } @media (max-width: 640px) { .about-core-values .section-header { margin-bottom: 16px; } } @media (max-width: 480px) { .about-core-values .section-header { margin-bottom: 20px; } } .about-core-values .section-eyebrow { font-size: 36px; font-weight: 700; line-height: 55px; color: #00704a; margin: 0 0 44px; } @media (max-width: 1770px) { .about-core-values .section-eyebrow { font-size: 31px; line-height: 50px; margin: 0 0 40px; } } @media (max-width: 1440px) { .about-core-values .section-eyebrow { font-size: 27px; line-height: 44px; margin: 0 0 35px; } } @media (max-width: 1200px) { .about-core-values .section-eyebrow { font-size: 23px; line-height: 38px; margin: 0 0 30px; } } @media (max-width: 992px) { .about-core-values .section-eyebrow { font-size: 20px; line-height: 32px; margin: 0 0 25px; } } @media (max-width: 768px) { .about-core-values .section-eyebrow { font-size: 18px; line-height: 28px; margin: 0 0 20px; } } @media (max-width: 640px) { .about-core-values .section-eyebrow { font-size: 16px; line-height: 24px; margin: 0 0 16px; } } @media (max-width: 480px) { .about-core-values .section-eyebrow { font-size: 16px; line-height: 24px; margin: 0 0 16px; } } .about-core-values .core-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 24px; } @media (max-width: 1770px) { .about-core-values .core-values-grid { gap: 22px; } } @media (max-width: 1440px) { .about-core-values .core-values-grid { gap: 19px; } } @media (max-width: 1200px) { .about-core-values .core-values-grid { gap: 17px; } } @media (max-width: 992px) { .about-core-values .core-values-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 14px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .about-core-values .core-values-grid .div1, .about-core-values .core-values-grid .div2, .about-core-values .core-values-grid .div3, .about-core-values .core-values-grid .div4, .about-core-values .core-values-grid .div5, .about-core-values .core-values-grid .div6 { grid-area: auto; width: calc(50% - 7px); } .about-core-values .core-values-grid .div2 { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 0; } .about-core-values .core-values-grid .div2 img { max-width: 180px; } .about-core-values .core-values-grid .div6 { width: 100%; } } @media (max-width: 768px) { .about-core-values .core-values-grid { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } .about-core-values .core-values-grid .div1, .about-core-values .core-values-grid .div2, .about-core-values .core-values-grid .div3, .about-core-values .core-values-grid .div4, .about-core-values .core-values-grid .div5, .about-core-values .core-values-grid .div6 { width: 100%; } } @media (max-width: 640px) { .about-core-values .core-values-grid { gap: 10px; } } @media (max-width: 480px) { .about-core-values .core-values-grid { gap: 12px; } } .about-core-values .div1 { grid-area: 1/1/2/2; text-align: right; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .about-core-values .div1 p { width: 314px; } @media (max-width: 1770px) { .about-core-values .div1 p { width: 283px; } } @media (max-width: 1440px) { .about-core-values .div1 p { width: 251px; } } @media (max-width: 1200px) { .about-core-values .div1 p { width: 220px; } } @media (max-width: 992px) { .about-core-values .div1 p { width: 100%; max-width: 314px; } } @media (max-width: 768px) { .about-core-values .div1 p { width: 100%; max-width: 100%; } } @media (max-width: 1440px) { .about-core-values .div1 p { width: 100%; max-width: 314px; } } @media (max-width: 1280px) { .about-core-values .div1 p { max-width: 300px; } } @media (max-width: 992px) { .about-core-values .div1 { text-align: left; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } @media (max-width: 480px) { .about-core-values .div1 { min-height: 65px !important; } } .about-core-values .div2 { width: 468px; height: 449px; grid-area: 1/2/3/3; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } @media (max-width: 1770px) { .about-core-values .div2 { width: 421px; height: 404px; } } @media (max-width: 1440px) { .about-core-values .div2 { width: 374px; height: 359px; } } @media (max-width: 1200px) { .about-core-values .div2 { width: 328px; height: 314px; } } @media (max-width: 992px) { .about-core-values .div2 { width: 281px; height: 269px; } } @media (max-width: 768px) { .about-core-values .div2 { width: 234px; height: 224px; } .about-core-values .div2 img { max-width: 234px; } } @media (max-width: 640px) { .about-core-values .div2 { width: 187px; height: 179px; } .about-core-values .div2 img { max-width: 187px; } } @media (max-width: 480px) { .about-core-values .div2 { width: 234px; min-height: 65px !important; } .about-core-values .div2 img { max-width: 234px; } } @media (max-width: 1770px) { .about-core-values .div2 { width: 100%; height: 100%; } } .about-core-values .div3 { grid-area: 1/3/2/4; width: 321px; } @media (max-width: 1770px) { .about-core-values .div3 { width: 289px; } } @media (max-width: 1440px) { .about-core-values .div3 { width: 257px; } } @media (max-width: 1200px) { .about-core-values .div3 { width: 225px; } } @media (max-width: 992px) { .about-core-values .div3 { width: 100%; max-width: 321px; } } @media (max-width: 768px) { .about-core-values .div3 { width: 100%; max-width: 100%; } } @media (max-width: 1440px) { .about-core-values .div3 { width: 100%; max-width: 321px; } } @media (max-width: 1280px) { .about-core-values .div3 { max-width: 310px; } } .about-core-values .div4 { grid-area: 2/1/3/2; text-align: right; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin-right: -24px; margin-top: -32px; } @media (max-width: 1770px) { .about-core-values .div4 { margin-right: -22px; margin-top: -29px; } } @media (max-width: 1440px) { .about-core-values .div4 { margin-right: -19px; margin-top: -26px; } } @media (max-width: 1200px) { .about-core-values .div4 { margin-right: -17px; margin-top: -24px; } } @media (max-width: 992px) { .about-core-values .div4 { margin-right: -14px; margin-top: -21px; } } @media (max-width: 768px) { .about-core-values .div4 { margin-right: -12px; margin-top: 0; } } @media (max-width: 640px) { .about-core-values .div4 { margin-right: 0; margin-top: 0; } } @media (max-width: 480px) { .about-core-values .div4 { margin-right: -12px; margin-top: -18px; } } @media (max-width: 992px) { .about-core-values .div4 { text-align: left; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .about-core-values .div4 p { width: 340px; } @media (max-width: 1770px) { .about-core-values .div4 p { width: 306px; } } @media (max-width: 1440px) { .about-core-values .div4 p { width: 272px; } } @media (max-width: 1200px) { .about-core-values .div4 p { width: 238px; } } @media (max-width: 992px) { .about-core-values .div4 p { width: 100%; max-width: 340px; text-align: left; } } @media (max-width: 768px) { .about-core-values .div4 p { width: 100%; text-align: left; } } @media (max-width: 1440px) { .about-core-values .div4 p { width: 100%; max-width: 340px; } } @media (max-width: 1280px) { .about-core-values .div4 p { max-width: 330px; } } .about-core-values .div5 { grid-area: 2/3/3/4; margin-left: -24px; margin-top: -32px; } @media (max-width: 1770px) { .about-core-values .div5 { margin-left: -22px; margin-top: -29px; } } @media (max-width: 1440px) { .about-core-values .div5 { margin-left: -19px; margin-top: -26px; } } @media (max-width: 1200px) { .about-core-values .div5 { margin-left: -17px; margin-top: -24px; } } @media (max-width: 992px) { .about-core-values .div5 { margin-left: -14px; margin-top: -21px; } } @media (max-width: 768px) { .about-core-values .div5 { margin-left: -12px; margin-top: 0; } } @media (max-width: 640px) { .about-core-values .div5 { margin-left: 0; margin-top: 0; } } @media (max-width: 480px) { .about-core-values .div5 { margin-left: -12px; margin-top: -18px; } } @media (max-width: 1024px) { .about-core-values .div5 { margin-left: 0; } } .about-core-values .div5 p { width: 392px; } @media (max-width: 1770px) { .about-core-values .div5 p { width: 353px; } } @media (max-width: 1440px) { .about-core-values .div5 p { width: 314px; } } @media (max-width: 1200px) { .about-core-values .div5 p { width: 274px; } } @media (max-width: 992px) { .about-core-values .div5 p { width: 100%; max-width: 392px; } } @media (max-width: 768px) { .about-core-values .div5 p { width: 100%; } } @media (max-width: 1440px) { .about-core-values .div5 p { width: 100%; max-width: 392px; } } @media (max-width: 1280px) { .about-core-values .div5 p { max-width: 380px; } } .about-core-values .div6 { grid-area: 3/2/4/4; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: -23px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @media (max-width: 1770px) { .about-core-values .div6 { margin-top: -65px; } } @media (max-width: 1440px) { .about-core-values .div6 { margin-top: -58px; } } @media (max-width: 1200px) { .about-core-values .div6 { margin-top: -50px; } } @media (max-width: 992px) { .about-core-values .div6 { margin-top: -43px; } } @media (max-width: 768px) { .about-core-values .div6 { margin-top: -36px; } } @media (max-width: 640px) { .about-core-values .div6 { margin-top: 0; } } @media (max-width: 480px) { .about-core-values .div6 { margin-top: -36px; } } @media (max-width: 1770px) { .about-core-values .div6 { width: 100%; grid-area: 3/1/4/4; } } @media (max-width: 992px) { .about-core-values .div6 { margin-top: 0; text-align: left; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .about-core-values .div6 p { width: 452px; } @media (max-width: 1770px) { .about-core-values .div6 p { width: 407px; } } @media (max-width: 1440px) { .about-core-values .div6 p { width: 362px; } } @media (max-width: 1200px) { .about-core-values .div6 p { width: 316px; } } @media (max-width: 992px) { .about-core-values .div6 p { width: 100%; max-width: 452px; text-align: left; } } @media (max-width: 768px) { .about-core-values .div6 p { width: 100%; text-align: left; } } @media (max-width: 1770px) { .about-core-values .div6 p { width: 100%; max-width: 452px; } } @media (max-width: 1440px) { .about-core-values .div6 p { width: 100%; max-width: 452px; } } @media (max-width: 1280px) { .about-core-values .div6 p { max-width: 440px; } } .about-core-values .core-value-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; height: 100%; } @media (max-width: 992px) { .about-core-values .core-value-item { height: 106px; } } @media (max-width: 768px) { .about-core-values .core-value-item { height: auto; } } @media (max-width: 480px) { .about-core-values .core-value-item { text-align: justify; min-height: 89px; } } .about-core-values .core-value-item:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); } .about-core-values .core-value-item:hover h3 { color: #00723f; } .about-core-values .core-value-image { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: -64px; margin-left: -8px; -webkit-transition: -webkit-transform 0.4s ease; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; } @media (max-width: 1770px) { .about-core-values .core-value-image { margin-top: -58px; margin-left: -7px; } } @media (max-width: 1440px) { .about-core-values .core-value-image { margin-top: -51px; margin-left: -6px; } } @media (max-width: 1200px) { .about-core-values .core-value-image { margin-top: -45px; margin-left: -6px; } } @media (max-width: 992px) { .about-core-values .core-value-image { margin-top: -38px; margin-left: -5px; } } @media (max-width: 768px) { .about-core-values .core-value-image { margin-top: 0; margin-left: 0; } } @media (max-width: 640px) { .about-core-values .core-value-image { margin-top: 0; margin-left: 0; } } @media (max-width: 480px) { .about-core-values .core-value-image { margin-top: -32px; margin-left: -4px; } } .about-core-values .core-value-image:hover { -webkit-transform: scale(1.02) rotate(1.5deg); transform: scale(1.02) rotate(1.5deg); } .about-core-values .core-value-image:hover img { -webkit-filter: drop-shadow(0 8px 16px rgba(0, 112, 74, 0.2)); filter: drop-shadow(0 8px 16px rgba(0, 112, 74, 0.2)); } .about-core-values .core-value-image img { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; -webkit-transition: -webkit-filter 0.4s ease; transition: -webkit-filter 0.4s ease; transition: filter 0.4s ease; transition: filter 0.4s ease, -webkit-filter 0.4s ease; } .core-value, .about-core-values .core-value-item { -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .core-value h3, .about-core-values .core-value-item h3 { font-family: "Be Vietnam Pro", sans-serif; font-size: 24px; line-height: 48.7px; font-weight: 700; color: #312020; margin: 0; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } @media (max-width: 1770px) { .core-value h3, .about-core-values .core-value-item h3 { font-size: 20px; line-height: 41px; } } @media (max-width: 1440px) { .core-value h3, .about-core-values .core-value-item h3 { font-size: 18px; line-height: 37px; } } @media (max-width: 1200px) { .core-value h3, .about-core-values .core-value-item h3 { font-size: 16px; line-height: 32px; } } @media (max-width: 992px) { .core-value h3, .about-core-values .core-value-item h3 { font-size: 14px; line-height: 28px; } } @media (max-width: 768px) { .core-value h3, .about-core-values .core-value-item h3 { font-size: 14px; line-height: 24px; } } @media (max-width: 640px) { .core-value h3, .about-core-values .core-value-item h3 { font-size: 14px; line-height: 22px; } } @media (max-width: 480px) { .core-value h3, .about-core-values .core-value-item h3 { font-size: 13px; line-height: 20px; } } .core-value p, .about-core-values .core-value-item p { font-size: 16px; color: #312020; margin: 0; font-family: "Be Vietnam Pro", sans-serif; padding-right: 0px; line-height: 150%; } @media (max-width: 1770px) { .core-value p, .about-core-values .core-value-item p { font-size: 14px; line-height: 145%; } } @media (max-width: 1440px) { .core-value p, .about-core-values .core-value-item p { font-size: 14px; line-height: 145%; } } @media (max-width: 1200px) { .core-value p, .about-core-values .core-value-item p { font-size: 14px; line-height: 145%; } } @media (max-width: 992px) { .core-value p, .about-core-values .core-value-item p { font-size: 14px; line-height: 1.4; } } @media (max-width: 768px) { .core-value p, .about-core-values .core-value-item p { font-size: 14px; line-height: 1.4; } } @media (max-width: 640px) { .core-value p, .about-core-values .core-value-item p { font-size: 13px; } } @media (max-width: 480px) { .core-value p, .about-core-values .core-value-item p { font-size: 12px; } } .core-value--center { background: #00704a; color: #ffffff; } .core-value--center h3 { color: #ffffff; } .core-value--center p { color: rgba(255, 255, 255, 0.9); } .core-value--center:hover { background: #00723f; } .core-value__badge { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 48px; height: 48px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 12px; color: #ffffff; } @media (max-width: 1770px) { .core-value__badge { width: 43px; height: 43px; font-size: 16px; } } @media (max-width: 1440px) { .core-value__badge { width: 38px; height: 38px; font-size: 14px; } } @media (max-width: 1200px) { .core-value__badge { width: 34px; height: 34px; font-size: 13px; } } @media (max-width: 992px) { .core-value__badge { width: 29px; height: 29px; font-size: 12px; } } @media (max-width: 768px) { .core-value__badge { width: 32px; height: 32px; font-size: 14px; } } @media (max-width: 640px) { .core-value__badge { width: 28px; height: 28px; font-size: 12px; } } @media (max-width: 480px) { .core-value__badge { width: 32px; height: 32px; font-size: 12px; } } .about-testimonials { padding: 48px 0; background: linear-gradient(135deg, #312020 0%, rgba(49, 32, 32, 0.05) 100%); } @media (max-width: 768px) { .about-testimonials { padding: 32px 0; } } .about-testimonials .section-header { text-align: center; margin-bottom: 40px; } .about-testimonials .section-eyebrow { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.7); margin-bottom: 8px; } .about-testimonials h2 { font-family: "Montserrat", sans-serif; font-size: 32px; font-weight: 700; color: #ffffff; } @media (max-width: 768px) { .about-testimonials h2 { font-size: 24px; } } .about-testimonials__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-bottom: 32px; } @media (max-width: 480px) { .about-testimonials__list { grid-template-columns: 1fr; } } .about-testimonials__nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8px; } .about-testimonials__nav .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); cursor: pointer; -webkit-transition: background 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: background 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: background 0.3s ease-in-out, transform 0.3s ease-in-out; transition: background 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } .about-testimonials__nav .dot:hover { background: rgba(255, 255, 255, 0.5); } .about-testimonials__nav .dot.is-active { background: #00704a; -webkit-transform: scale(1.2); transform: scale(1.2); } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * Service Archive Page Styles * * Page-specific styles cho trang archive của service post type */ .service-archive { padding: 0 0 79px; } @media screen and (max-width: 1023) { .service-archive { padding: 0 0 50px; } } .service-archive__container { margin: 50px auto 0; padding: 0 20px; } .service-archive__wrapper { display: grid; grid-template-columns: 320px 1fr; gap: 50px; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } @media (max-width: 1200px) { .service-archive__wrapper { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 1550px) { .service-archive__wrapper { grid-template-columns: 280px 1fr; gap: 40px; padding-inline: 12px; } .service-archive__wrapper .service-filter-sidebar { padding-right: 20px; } } @media (max-width: 1280px) { .service-archive__wrapper { grid-template-columns: 280px 1fr; gap: 32px; } } @media (max-width: 1200px) { .service-archive__wrapper { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 992px) { .service-archive__wrapper { grid-template-columns: 1fr; gap: 24px; padding: 0; } } .service-archive__content { min-height: 100dvh; position: relative; padding: 30px 0 0; } .service-archive__reset-bar { margin: 12px 0 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; gap: 8px; } .service-archive__reset-bar.is-hidden { display: none !important; } .service-archive__reset-bar .btn-reset { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid #e6ebf2; border-radius: 8px; background: #f7f9fb; color: #312020; font-size: 13px; font-weight: 500; cursor: pointer; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; line-height: 1.4; } .service-archive__reset-bar .btn-reset:hover { background: #eef6f0; border-color: #00704a; color: #00704a; } @media (max-width: 576px) { .service-archive__reset-bar .btn-reset { width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media (max-width: 768px) { .service-archive__reset-bar { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin: 10px 0 14px; } } .services-archive__loading { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.8); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 1020; } .services-archive__loading .spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #00704a; border-radius: 50%; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .services-archive__grid { position: relative; } .services-archive__grid.is-loading { opacity: 0.5; pointer-events: none; } .no-results { padding: 48px 20px; text-align: center; color: #666; font-size: 16px; font-family: "Be Vietnam Pro", sans-serif; } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * Service Archive Responsive & Offcanvas Styles * * @package One_Lab */ .service-archive__filter-toggle { display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; padding: 12px 20px; background: #ffffff; border: 1px solid #e1e6ef; border-radius: 8px; font-size: 14px; font-weight: 500; font-family: "Montserrat", sans-serif; color: #312020; cursor: pointer; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; margin-bottom: 16px; } .service-archive__filter-toggle svg { -ms-flex-negative: 0; flex-shrink: 0; } .service-archive__filter-toggle:hover { background: #f9fafb; border-color: #00704a; color: #00704a; } @media (max-width: 1200px) { .service-archive__filter-toggle { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } } @media (max-width: 576px) { .service-archive__filter-toggle { width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .service-archive__sidebar { height: 100%; } @media (max-width: 1200px) { .service-archive__sidebar--desktop { display: none; } } .service-archive__offcanvas { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1040; visibility: hidden; opacity: 0; -webkit-transition: visibility 0.3s, opacity 0.3s; transition: visibility 0.3s, opacity 0.3s; } .service-archive__offcanvas.is-open { visibility: visible; opacity: 1; } .service-archive__offcanvas.is-open .service-archive__offcanvas-overlay { opacity: 1; } .service-archive__offcanvas.is-open .service-archive__offcanvas-panel { -webkit-transform: translateX(0); transform: translateX(0); } .service-archive__offcanvas-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; cursor: pointer; } .service-archive__offcanvas-panel { position: absolute; top: 0; left: 0; bottom: 0; width: 85%; max-width: 376px; background: #ffffff; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15); box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15); } @media (max-width: 480px) { .service-archive__offcanvas-panel { width: 90%; max-width: 320px; } } .service-archive__offcanvas-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #e1e6ef; -ms-flex-negative: 0; flex-shrink: 0; } .service-archive__offcanvas-title { font-size: 18px; font-weight: 600; font-family: "Montserrat", sans-serif; color: #312020; margin: 0; } .service-archive__offcanvas-close { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: none; color: #312020; cursor: pointer; border-radius: 6px; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .service-archive__offcanvas-close:hover { background: #f9fafb; color: #00704a; } .service-archive__offcanvas .service-filter-sidebar { border: none; } .service-archive__offcanvas-body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow-y: auto; overflow-x: hidden; padding: 24px 0 24px 24px; -webkit-overflow-scrolling: touch; } .service-archive__offcanvas-body::-webkit-scrollbar { width: 6px; } .service-archive__offcanvas-body::-webkit-scrollbar-track { background: #f1f1f1; } .service-archive__offcanvas-body::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; } .service-archive__offcanvas-body::-webkit-scrollbar-thumb:hover { background: #a1a1a1; } @media (min-width: 1201px) { .service-archive__offcanvas { display: none; } } @media (max-width: 992px) { .service-archive__container { margin-top: 30px; } .service-archive__wrapper { grid-template-columns: 1fr; gap: 20px; } } @media (max-width: 768px) { .service-archive { padding: 24px 0; } .service-archive__container { margin-top: 20px; padding: 0 16px; } } @media (max-width: 576px) { .service-archive { padding: 20px 0; } .service-archive__container { padding: 0; } } body.offcanvas-open { overflow: hidden; position: fixed; width: 100%; } .single-service { padding-bottom: 60px; } .single-service__wrapper { max-width: 800px; margin: 0 auto; background: #fff; padding: 40px; border-radius: 8px; -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .single-service__header { margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 20px; } .single-service__title { font-size: 2.5rem; font-weight: 700; color: var(--color-primary); margin-bottom: 15px; line-height: 1.2; } .single-service__price-wrapper { font-size: 1.5rem; } .single-service__price-wrapper .service-card__price { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .single-service__price-wrapper .price-sale { color: #d63638; font-weight: 700; font-size: 1.8rem; } .single-service__price-wrapper .price-regular { color: #666; text-decoration: line-through; font-size: 1.2rem; } .single-service__thumbnail { margin-bottom: 30px; border-radius: 8px; overflow: hidden; -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .single-service__thumbnail img { width: 100%; height: auto; display: block; -o-object-fit: cover; object-fit: cover; } .single-service__content { margin-bottom: 40px; line-height: 1.8; color: #333; font-size: 1.1rem; } .single-service__content h2 { font-size: 1.8rem; color: var(--color-secondary); margin-top: 40px; margin-bottom: 20px; font-weight: 700; } .single-service__content h3 { font-size: 1.5rem; color: var(--color-secondary); margin-top: 30px; margin-bottom: 15px; font-weight: 600; } .single-service__content p { margin-bottom: 20px; } .single-service__content ul, .single-service__content ol { margin-bottom: 20px; padding-left: 20px; } .single-service__content ul li, .single-service__content ol li { margin-bottom: 10px; } .single-service__actions { border-top: 1px solid #eee; padding-top: 30px; text-align: center; } .single-service__actions .btn-add-quote { min-width: 250px; padding: 15px 30px; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; } @media (max-width: 768px) { .single-service__wrapper { padding: 20px; } .single-service__title { font-size: 1.8rem; } .single-service__price-wrapper .price-sale { font-size: 1.5rem; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ @-webkit-keyframes float-up-down { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes float-up-down { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } .single-service-package .sp-hero { position: relative; width: 100%; height: 670px; aspect-ratio: 1920/670; overflow: hidden; background-color: #312020; background-size: cover; background-position: center; background-repeat: no-repeat; } @media (max-width: 1770px) { .single-service-package .sp-hero { height: 603px; } } @media (max-width: 1440px) { .single-service-package .sp-hero { height: 536px; } } @media (max-width: 1200px) { .single-service-package .sp-hero { height: 469px; } } @media (max-width: 992px) { .single-service-package .sp-hero { height: 402px; } } @media (max-width: 768px) { .single-service-package .sp-hero { height: 335px; aspect-ratio: 16/9; } } @media (max-width: 640px) { .single-service-package .sp-hero { height: 268px; } } @media (max-width: 480px) { .single-service-package .sp-hero { height: 335px; } } .single-service-package .sp-hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: conic-gradient(from 180deg at 50% 50%, #101010 0deg, #000000 360deg); opacity: 0.3; pointer-events: none; } .single-service-package .sp-hero .container { position: relative; z-index: 1; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .single-service-package .sp-hero__grid { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 32px; } @media (max-width: 1770px) { .single-service-package .sp-hero__grid { gap: 29px; } } @media (max-width: 1440px) { .single-service-package .sp-hero__grid { gap: 26px; } } @media (max-width: 1200px) { .single-service-package .sp-hero__grid { gap: 22px; } } @media (max-width: 992px) { .single-service-package .sp-hero__grid { grid-template-columns: 1fr; gap: 19px; } } @media (max-width: 768px) { .single-service-package .sp-hero__grid { gap: 16px; } } @media (max-width: 640px) { .single-service-package .sp-hero__grid { gap: 13px; } } @media (max-width: 480px) { .single-service-package .sp-hero__grid { gap: 16px; } } .single-service-package .sp-hero__title { font-family: "Montserrat", sans-serif; color: #fff; font-size: 48px; font-weight: 700; margin: 0; line-height: 130%; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } @media (max-width: 1770px) { .single-service-package .sp-hero__title { font-size: 43px; } } @media (max-width: 1440px) { .single-service-package .sp-hero__title { font-size: 38px; } } @media (max-width: 1200px) { .single-service-package .sp-hero__title { font-size: 34px; } } @media (max-width: 992px) { .single-service-package .sp-hero__title { font-size: 29px; } } @media (max-width: 768px) { .single-service-package .sp-hero__title { font-size: 24px; } } @media (max-width: 640px) { .single-service-package .sp-hero__title { font-size: 19px; } } @media (max-width: 480px) { .single-service-package .sp-hero__title { font-size: 24px; } } .single-service-package .sp-hero__subtitle { font-size: 20px; line-height: 150%; text-transform: uppercase; margin: 0 0 29px; color: #ffffff; font-family: "Montserrat", sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } @media (max-width: 1770px) { .single-service-package .sp-hero__subtitle { font-size: 18px; margin-bottom: 26px; } } @media (max-width: 1440px) { .single-service-package .sp-hero__subtitle { font-size: 16px; margin-bottom: 23px; } } @media (max-width: 1200px) { .single-service-package .sp-hero__subtitle { font-size: 14px; margin-bottom: 20px; } } @media (max-width: 992px) { .single-service-package .sp-hero__subtitle { font-size: 12px; margin-bottom: 17px; } } @media (max-width: 768px) { .single-service-package .sp-hero__subtitle { font-size: 10px; margin-bottom: 14px; } } @media (max-width: 640px) { .single-service-package .sp-hero__subtitle { font-size: 8px; margin-bottom: 11px; } } @media (max-width: 480px) { .single-service-package .sp-hero__subtitle { font-size: 12px; margin-bottom: 14px; } } .single-service-package .sp-hero__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; padding: 20px 0; } .single-service-package .sp-hero__actions-label { font-family: "Montserrat", sans-serif; color: #ffffff; font-size: 24px; font-weight: 600; line-height: 150%; text-transform: uppercase; margin: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } .single-service-package .sp-hero__buttons { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 24px; } @media (max-width: 1770px) { .single-service-package .sp-hero__buttons { gap: 22px; } } @media (max-width: 1440px) { .single-service-package .sp-hero__buttons { gap: 19px; } } @media (max-width: 1200px) { .single-service-package .sp-hero__buttons { gap: 17px; } } @media (max-width: 992px) { .single-service-package .sp-hero__buttons { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } } @media (max-width: 768px) { .single-service-package .sp-hero__buttons { gap: 10px; } } @media (max-width: 640px) { .single-service-package .sp-hero__buttons { gap: 8px; } } @media (max-width: 480px) { .single-service-package .sp-hero__buttons { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px; } } .single-service-package .sp-hero__btn { padding: 15px 31px; border-radius: 8px; font-weight: 700; font-size: 20px; line-height: 150%; text-transform: uppercase; font-family: "Montserrat", sans-serif; color: #00704a; background: #00704a; border: none; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #fff; text-decoration: none; outline: none; font-family: "Montserrat", sans-serif; } .single-service-package .sp-hero__btn:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .single-service-package .sp-hero__btn:active { -webkit-transform: translateY(-1px); transform: translateY(-1px); } @media (max-width: 1770px) { .single-service-package .sp-hero__btn { padding: 14px 28px; font-size: 18px; } } @media (max-width: 1440px) { .single-service-package .sp-hero__btn { padding: 13px 25px; font-size: 16px; } } @media (max-width: 1200px) { .single-service-package .sp-hero__btn { padding: 11px 22px; font-size: 14px; } } @media (max-width: 992px) { .single-service-package .sp-hero__btn { padding: 9px 19px; font-size: 12px; } } @media (max-width: 768px) { .single-service-package .sp-hero__btn { padding: 8px 16px; font-size: 10px; } } @media (max-width: 640px) { .single-service-package .sp-hero__btn { padding: 6px 12px; font-size: 8px; } } @media (max-width: 480px) { .single-service-package .sp-hero__btn { padding: 10px 18px; font-size: 12px; } } .single-service-package .sp-hero__btn-book { background: #00704a; color: #ffffff; } .single-service-package .sp-hero__btn-book:hover { background: #00723f; -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.3); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.3); } .single-service-package .sp-hero__btn-icon { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 32px; height: 32px; -ms-flex-negative: 0; flex-shrink: 0; } @media (max-width: 1770px) { .single-service-package .sp-hero__btn-icon { width: 29px; height: 29px; } } @media (max-width: 1440px) { .single-service-package .sp-hero__btn-icon { width: 26px; height: 26px; } } @media (max-width: 1200px) { .single-service-package .sp-hero__btn-icon { width: 22px; height: 22px; } } @media (max-width: 992px) { .single-service-package .sp-hero__btn-icon { width: 19px; height: 19px; } } @media (max-width: 768px) { .single-service-package .sp-hero__btn-icon { width: 16px; height: 16px; } } @media (max-width: 640px) { .single-service-package .sp-hero__btn-icon { width: 13px; height: 13px; } } @media (max-width: 480px) { .single-service-package .sp-hero__btn-icon { width: 16px; height: 16px; } } .single-service-package .sp-hero__btn-icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .single-service-package .sp-hero__visual { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; } @media (max-width: 992px) { .single-service-package .sp-hero__visual { display: none; } } .single-service-package .sp-hero__benefit-image { display: block; width: 100%; max-width: 435px; height: auto; border-radius: 14px; will-change: transform, box-shadow, filter; -webkit-transition: -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease, -webkit-filter 0.4s ease; transition: -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease, -webkit-filter 0.4s ease; transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease; transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease, -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease, -webkit-filter 0.4s ease; } .single-service-package .sp-hero__benefit-image:hover { -webkit-transform: translateY(-10px) scale(1.03); transform: translateY(-10px) scale(1.03); } @media (max-width: 1770px) { .single-service-package .sp-hero__benefit-image { max-width: 391px; } } @media (max-width: 1440px) { .single-service-package .sp-hero__benefit-image { max-width: 348px; } } @media (max-width: 1200px) { .single-service-package .sp-hero__benefit-image { max-width: 305px; } } @media (max-width: 992px) { .single-service-package .sp-hero__benefit-image { display: none; } } .single-service-package .sp-hero__image { width: 100%; max-width: 515px; } .single-service-package .sp-hero__image img { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; border-radius: 12px; -webkit-box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35); box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35); } @media (max-width: 992px) { .single-service-package .sp-hero { padding: 60px 0; } .single-service-package .sp-hero__grid { grid-template-columns: 1fr; } .single-service-package .sp-hero__title { font-size: 36px; } } @media (max-width: 640px) { .single-service-package .sp-hero__title { font-size: 30px; } .single-service-package .sp-hero__subtitle { font-size: 16px; } } .single-service-package .sp-intro { padding: 86px 0 32px; } @media (max-width: 1770px) { .single-service-package .sp-intro { padding: 77px 0 29px; } } @media (max-width: 1440px) { .single-service-package .sp-intro { padding: 69px 0 26px; } } @media (max-width: 1200px) { .single-service-package .sp-intro { padding: 60px 0 22px; } } @media (max-width: 992px) { .single-service-package .sp-intro { padding: 52px 0 19px; } } @media (max-width: 768px) { .single-service-package .sp-intro { padding: 43px 0 16px; } } @media (max-width: 640px) { .single-service-package .sp-intro { padding: 34px 0 13px; } } @media (max-width: 480px) { .single-service-package .sp-intro { padding: 43px 0 16px; } } .single-service-package .sp-intro__grid { display: grid; grid-template-columns: 506px 1fr; gap: 32px; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } @media (max-width: 1770px) { .single-service-package .sp-intro__grid { grid-template-columns: 455px 1fr; gap: 29px; } } @media (max-width: 1440px) { .single-service-package .sp-intro__grid { grid-template-columns: 405px 1fr; gap: 26px; } } @media (max-width: 1200px) { .single-service-package .sp-intro__grid { grid-template-columns: 354px 1fr; gap: 22px; } } @media (max-width: 992px) { .single-service-package .sp-intro__grid { grid-template-columns: 1fr; gap: 19px; } } @media (max-width: 768px) { .single-service-package .sp-intro__grid { gap: 16px; } } @media (max-width: 640px) { .single-service-package .sp-intro__grid { gap: 13px; } } @media (max-width: 480px) { .single-service-package .sp-intro__grid { gap: 16px; } } .single-service-package .sp-intro__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .single-service-package .sp-intro__kicker { font-family: "Montserrat", sans-serif; font-size: 36px; font-weight: 400; color: #00704a; margin: 0 0 4px; line-height: 150%; } @media (max-width: 1770px) { .single-service-package .sp-intro__kicker { font-size: 32px; } } @media (max-width: 1440px) { .single-service-package .sp-intro__kicker { font-size: 29px; } } @media (max-width: 1200px) { .single-service-package .sp-intro__kicker { font-size: 25px; } } @media (max-width: 992px) { .single-service-package .sp-intro__kicker { font-size: 22px; } } @media (max-width: 768px) { .single-service-package .sp-intro__kicker { font-size: 18px; } } @media (max-width: 640px) { .single-service-package .sp-intro__kicker { font-size: 14px; } } @media (max-width: 480px) { .single-service-package .sp-intro__kicker { font-size: 18px; } } .single-service-package .sp-intro__title { font-family: "Montserrat", sans-serif; font-size: 36px; font-weight: 700; color: #00704a; margin: 0 0 16px; line-height: 150%; } @media (max-width: 1770px) { .single-service-package .sp-intro__title { font-size: 32px; margin-bottom: 14px; } } @media (max-width: 1440px) { .single-service-package .sp-intro__title { font-size: 29px; margin-bottom: 13px; } } @media (max-width: 1200px) { .single-service-package .sp-intro__title { font-size: 25px; margin-bottom: 11px; } } @media (max-width: 992px) { .single-service-package .sp-intro__title { font-size: 22px; margin-bottom: 10px; } } @media (max-width: 768px) { .single-service-package .sp-intro__title { font-size: 18px; margin-bottom: 8px; } } @media (max-width: 640px) { .single-service-package .sp-intro__title { font-size: 14px; margin-bottom: 6px; } } @media (max-width: 480px) { .single-service-package .sp-intro__title { font-size: 18px; margin-bottom: 8px; } } .single-service-package .sp-intro__button { -ms-flex-item-align: start; align-self: flex-start; padding: 24px 32px; border-radius: 8px; background: #00704a; color: #ffffff; border: none; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-box-shadow: 0px 2px 20.3px 0px rgba(0, 112, 74, 0.2); box-shadow: 0px 2px 20.3px 0px rgba(0, 112, 74, 0.2); font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 16px; line-height: 150%; text-transform: uppercase; } .single-service-package .sp-intro__button:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); -webkit-box-shadow: 0px 4px 25px 0px rgba(0, 112, 74, 0.3); box-shadow: 0px 4px 25px 0px rgba(0, 112, 74, 0.3); background: #00723f; } .single-service-package .sp-intro__button:active { -webkit-transform: translateY(-1px); transform: translateY(-1px); } @media (max-width: 1770px) { .single-service-package .sp-intro__button { padding: 22px 29px; font-size: 14px; } } @media (max-width: 1440px) { .single-service-package .sp-intro__button { padding: 19px 26px; font-size: 13px; } } @media (max-width: 1200px) { .single-service-package .sp-intro__button { padding: 17px 22px; font-size: 11px; } } @media (max-width: 992px) { .single-service-package .sp-intro__button { padding: 14px 19px; font-size: 10px; } } @media (max-width: 768px) { .single-service-package .sp-intro__button { padding: 12px 16px; font-size: 8px; } } @media (max-width: 640px) { .single-service-package .sp-intro__button { padding: 10px 13px; font-size: 6px; width: 100%; } } @media (max-width: 480px) { .single-service-package .sp-intro__button { padding: 12px 16px; font-size: 8px; width: 100%; } } .single-service-package .sp-intro__boxes { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 32px; } @media (max-width: 1770px) { .single-service-package .sp-intro__boxes { gap: 29px; } } @media (max-width: 1440px) { .single-service-package .sp-intro__boxes { gap: 26px; } } @media (max-width: 1200px) { .single-service-package .sp-intro__boxes { gap: 22px; } } @media (max-width: 992px) { .single-service-package .sp-intro__boxes { gap: 19px; } } @media (max-width: 768px) { .single-service-package .sp-intro__boxes { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; } } @media (max-width: 640px) { .single-service-package .sp-intro__boxes { gap: 13px; } } @media (max-width: 480px) { .single-service-package .sp-intro__boxes { gap: 16px; } } .single-service-package .sp-intro__box { padding: 32px; border-radius: 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .single-service-package .sp-intro__box:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } @media (max-width: 1770px) { .single-service-package .sp-intro__box { padding: 29px; gap: 22px; } } @media (max-width: 1440px) { .single-service-package .sp-intro__box { padding: 26px; gap: 19px; } } @media (max-width: 1200px) { .single-service-package .sp-intro__box { padding: 22px; gap: 17px; } } @media (max-width: 992px) { .single-service-package .sp-intro__box { padding: 19px; gap: 14px; } } @media (max-width: 768px) { .single-service-package .sp-intro__box { padding: 16px; gap: 12px; } } @media (max-width: 640px) { .single-service-package .sp-intro__box { padding: 13px; gap: 10px; } } @media (max-width: 480px) { .single-service-package .sp-intro__box { padding: 16px; gap: 12px; } } .single-service-package .sp-intro__box--white { background: #ffffff; border: 1px solid rgb(232, 233, 234); } .single-service-package .sp-intro__box--white:hover { border-color: rgba(232, 233, 234, 0.8); } .single-service-package .sp-intro__box--green { background: #3da674; } .single-service-package .sp-intro__box--green:hover { background: #359a66; } .single-service-package .sp-intro__box-title { font-family: "Be Vietnam Pro", sans-serif; font-weight: 700; font-size: 20px; line-height: 150%; margin: 0; } @media (max-width: 1770px) { .single-service-package .sp-intro__box-title { font-size: 18px; } } @media (max-width: 1440px) { .single-service-package .sp-intro__box-title { font-size: 16px; } } @media (max-width: 1200px) { .single-service-package .sp-intro__box-title { font-size: 14px; } } @media (max-width: 992px) { .single-service-package .sp-intro__box-title { font-size: 12px; } } @media (max-width: 768px) { .single-service-package .sp-intro__box-title { font-size: 10px; } } @media (max-width: 640px) { .single-service-package .sp-intro__box-title { font-size: 8px; } } @media (max-width: 480px) { .single-service-package .sp-intro__box-title { font-size: 10px; } } .single-service-package .sp-intro__box-title-white { color: #ffffff; } .single-service-package .sp-intro__box-title-green { color: #00704a; } .single-service-package .sp-intro__box-list { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } @media (max-width: 1770px) { .single-service-package .sp-intro__box-list { gap: 11px; } } @media (max-width: 1440px) { .single-service-package .sp-intro__box-list { gap: 10px; } } @media (max-width: 1200px) { .single-service-package .sp-intro__box-list { gap: 8px; } } @media (max-width: 992px) { .single-service-package .sp-intro__box-list { gap: 7px; } } @media (max-width: 768px) { .single-service-package .sp-intro__box-list { gap: 6px; } } @media (max-width: 640px) { .single-service-package .sp-intro__box-list { gap: 5px; } } @media (max-width: 480px) { .single-service-package .sp-intro__box-list { gap: 6px; } } .single-service-package .sp-intro__box-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 12px; line-height: 150%; padding: 10px 12px; border-radius: 10px; -webkit-transition: background-color 0.25s ease, -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease; transition: background-color 0.25s ease, -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease; transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease; } @media (max-width: 1770px) { .single-service-package .sp-intro__box-item { gap: 11px; padding: 9px 11px; } } @media (max-width: 1440px) { .single-service-package .sp-intro__box-item { gap: 10px; padding: 8px 10px; } } @media (max-width: 1200px) { .single-service-package .sp-intro__box-item { gap: 8px; padding: 7px 8px; } } @media (max-width: 992px) { .single-service-package .sp-intro__box-item { gap: 7px; padding: 6px 7px; } } @media (max-width: 768px) { .single-service-package .sp-intro__box-item { gap: 6px; padding: 5px 6px; } } @media (max-width: 640px) { .single-service-package .sp-intro__box-item { gap: 5px; padding: 4px 5px; } } @media (max-width: 480px) { .single-service-package .sp-intro__box-item { gap: 6px; padding: 5px 6px; } } .sp-intro__box--white .single-service-package .sp-intro__box-item { color: #312020; } .sp-intro__box--green .single-service-package .sp-intro__box-item { color: #ffffff; } .single-service-package .sp-intro__box-item:hover { -webkit-transform: translateX(4px); transform: translateX(4px); } .sp-intro__box--white .single-service-package .sp-intro__box-item:hover { background: rgba(0, 112, 74, 0.06); -webkit-box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); } .sp-intro__box--green .single-service-package .sp-intro__box-item:hover { background: rgba(255, 255, 255, 0.08); -webkit-box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); } .single-service-package .sp-intro__box-icon { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 20px; height: 20px; } .single-service-package .sp-intro__box-icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; margin-top: 4px; } .single-service-package .sp-intro__box-text { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-family: "Be Vietnam Pro", sans-serif; font-weight: 400; font-size: 16px; line-height: 150%; } @media (max-width: 1770px) { .single-service-package .sp-intro__box-text { font-size: 14px; } } @media (max-width: 1440px) { .single-service-package .sp-intro__box-text { font-size: 13px; } } @media (max-width: 1200px) { .single-service-package .sp-intro__box-text { font-size: 11px; } } @media (max-width: 992px) { .single-service-package .sp-intro__box-text { font-size: 10px; } } @media (max-width: 768px) { .single-service-package .sp-intro__box-text { font-size: 8px; } } @media (max-width: 640px) { .single-service-package .sp-intro__box-text { font-size: 6px; } } @media (max-width: 480px) { .single-service-package .sp-intro__box-text { font-size: 8px; } } .single-service-package .sp-intro__box-text-white { color: #ffffff; } .single-service-package .sp-intro__box-text-green { color: #312020; } .single-service-package .sp-why { padding: 0; } .single-service-package .sp-why .container { background: rgb(249, 249, 251); padding: 70px 38px 75px; } @media (max-width: 1770px) { .single-service-package .sp-why .container { padding: 63px 34px 68px; } } @media (max-width: 1440px) { .single-service-package .sp-why .container { padding: 56px 30px 60px; } } @media (max-width: 1200px) { .single-service-package .sp-why .container { padding: 49px 27px 53px; } } @media (max-width: 992px) { .single-service-package .sp-why .container { padding: 42px 23px 45px; } } @media (max-width: 768px) { .single-service-package .sp-why .container { padding: 35px 19px 38px; } } @media (max-width: 640px) { .single-service-package .sp-why .container { padding: 28px 15px 30px; } } @media (max-width: 480px) { .single-service-package .sp-why .container { padding: 35px 19px 38px; } } .single-service-package .sp-why .sp-section-header { text-align: center; margin: 0 0 59px; } @media (max-width: 1770px) { .single-service-package .sp-why .sp-section-header { margin-bottom: 53px; } } @media (max-width: 1440px) { .single-service-package .sp-why .sp-section-header { margin-bottom: 47px; } } @media (max-width: 1200px) { .single-service-package .sp-why .sp-section-header { margin-bottom: 41px; } } @media (max-width: 992px) { .single-service-package .sp-why .sp-section-header { margin-bottom: 35px; } } @media (max-width: 768px) { .single-service-package .sp-why .sp-section-header { margin-bottom: 30px; } } @media (max-width: 640px) { .single-service-package .sp-why .sp-section-header { margin-bottom: 24px; } } @media (max-width: 480px) { .single-service-package .sp-why .sp-section-header { margin-bottom: 30px; } } .single-service-package .sp-why .sp-section-header h2 { font-family: "Montserrat", sans-serif; color: #00704a; font-weight: 700; font-size: 36px; line-height: 150%; text-align: center; margin: 0; } @media (max-width: 1770px) { .single-service-package .sp-why .sp-section-header h2 { font-size: 32px; } } @media (max-width: 1440px) { .single-service-package .sp-why .sp-section-header h2 { font-size: 29px; } } @media (max-width: 1200px) { .single-service-package .sp-why .sp-section-header h2 { font-size: 25px; } } @media (max-width: 992px) { .single-service-package .sp-why .sp-section-header h2 { font-size: 22px; } } @media (max-width: 768px) { .single-service-package .sp-why .sp-section-header h2 { font-size: 18px; } } @media (max-width: 640px) { .single-service-package .sp-why .sp-section-header h2 { font-size: 14px; } } @media (max-width: 480px) { .single-service-package .sp-why .sp-section-header h2 { font-size: 18px; } } .single-service-package .sp-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 1770px) { .single-service-package .sp-why__grid { gap: 22px; } } @media (max-width: 1440px) { .single-service-package .sp-why__grid { gap: 19px; } } @media (max-width: 1200px) { .single-service-package .sp-why__grid { gap: 17px; } } @media (max-width: 992px) { .single-service-package .sp-why__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; row-gap: 32px; } } @media (max-width: 768px) { .single-service-package .sp-why__grid { grid-template-columns: 1fr; gap: 12px; row-gap: 22px; } } @media (max-width: 640px) { .single-service-package .sp-why__grid { gap: 10px; row-gap: 18px; } } @media (max-width: 480px) { .single-service-package .sp-why__grid { gap: 12px; row-gap: 22px; } } .single-service-package .sp-why__item { background: #ffffff; border-radius: 12px; padding: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; gap: 29px; -webkit-box-shadow: 0px 4px 27.7px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 4px 27.7px 0px rgba(0, 0, 0, 0.1); -webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease; transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease; } .single-service-package .sp-why__item:hover { -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-box-shadow: 0px 8px 35px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 8px 35px 0px rgba(0, 0, 0, 0.15); } @media (max-width: 1770px) { .single-service-package .sp-why__item { padding: 29px; gap: 26px; } } @media (max-width: 1440px) { .single-service-package .sp-why__item { padding: 26px; gap: 23px; } } @media (max-width: 1200px) { .single-service-package .sp-why__item { padding: 22px; gap: 20px; } } @media (max-width: 992px) { .single-service-package .sp-why__item { padding: 19px; gap: 17px; } } @media (max-width: 768px) { .single-service-package .sp-why__item { padding: 16px; gap: 15px; } } @media (max-width: 640px) { .single-service-package .sp-why__item { padding: 13px; gap: 12px; } } @media (max-width: 480px) { .single-service-package .sp-why__item { padding: 16px; gap: 15px; } } .single-service-package .sp-why__icon-wrapper { width: 100px; height: 100px; background: #00704a; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-negative: 0; flex-shrink: 0; margin-top: -65px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .single-service-package .sp-why__icon-wrapper:hover { -webkit-transform: scale(1.05); transform: scale(1.05); } @media (max-width: 1770px) { .single-service-package .sp-why__icon-wrapper { width: 90px; height: 90px; margin-top: -59px; } } @media (max-width: 1440px) { .single-service-package .sp-why__icon-wrapper { width: 80px; height: 80px; margin-top: -52px; } } @media (max-width: 1200px) { .single-service-package .sp-why__icon-wrapper { width: 70px; height: 70px; margin-top: -46px; } } @media (max-width: 992px) { .single-service-package .sp-why__icon-wrapper { width: 60px; height: 60px; margin-top: -39px; } } @media (max-width: 768px) { .single-service-package .sp-why__icon-wrapper { width: 50px; height: 50px; margin-top: -33px; } } @media (max-width: 640px) { .single-service-package .sp-why__icon-wrapper { width: 40px; height: 40px; margin-top: -26px; } } @media (max-width: 480px) { .single-service-package .sp-why__icon-wrapper { width: 50px; height: 50px; margin-top: -33px; } } .single-service-package .sp-why__icon { width: 52px; height: 52px; -o-object-fit: contain; object-fit: contain; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .sp-why__item:hover .single-service-package .sp-why__icon { -webkit-transform: scale(1.1); transform: scale(1.1); } @media (max-width: 1770px) { .single-service-package .sp-why__icon { width: 47px; height: 47px; } } @media (max-width: 1440px) { .single-service-package .sp-why__icon { width: 42px; height: 42px; } } @media (max-width: 1200px) { .single-service-package .sp-why__icon { width: 36px; height: 36px; } } @media (max-width: 992px) { .single-service-package .sp-why__icon { width: 31px; height: 31px; } } @media (max-width: 768px) { .single-service-package .sp-why__icon { width: 26px; height: 26px; } } @media (max-width: 640px) { .single-service-package .sp-why__icon { width: 21px; height: 21px; } } @media (max-width: 480px) { .single-service-package .sp-why__icon { width: 26px; height: 26px; } } .single-service-package .sp-why__description { font-family: "Be Vietnam Pro", sans-serif; font-size: 16px; font-weight: 400; color: #312020; line-height: 150%; margin: 0; } @media (max-width: 1770px) { .single-service-package .sp-why__description { font-size: 14px; } } @media (max-width: 1440px) { .single-service-package .sp-why__description { font-size: 13px; } } @media (max-width: 1200px) { .single-service-package .sp-why__description { font-size: 11px; } } @media (max-width: 992px) { .single-service-package .sp-why__description { font-size: 10px; } } @media (max-width: 768px) { .single-service-package .sp-why__description { font-size: 8px; } } @media (max-width: 640px) { .single-service-package .sp-why__description { font-size: 6px; } } @media (max-width: 480px) { .single-service-package .sp-why__description { font-size: 8px; } } .single-service-package .sp-packages { padding: 84px 0; } @media (max-width: 1770px) { .single-service-package .sp-packages { padding: 76px 0; } } @media (max-width: 1440px) { .single-service-package .sp-packages { padding: 67px 0; } } @media (max-width: 1200px) { .single-service-package .sp-packages { padding: 59px 0; } } @media (max-width: 992px) { .single-service-package .sp-packages { padding: 50px 0; } } @media (max-width: 768px) { .single-service-package .sp-packages { padding: 42px 0; } } @media (max-width: 640px) { .single-service-package .sp-packages { padding: 34px 0; } } @media (max-width: 480px) { .single-service-package .sp-packages { padding: 42px 0; } } .single-service-package .sp-packages .sp-section-header { text-align: center; margin-bottom: 48px; } @media (max-width: 1770px) { .single-service-package .sp-packages .sp-section-header { margin-bottom: 43px; } } @media (max-width: 1440px) { .single-service-package .sp-packages .sp-section-header { margin-bottom: 38px; } } @media (max-width: 1200px) { .single-service-package .sp-packages .sp-section-header { margin-bottom: 34px; } } @media (max-width: 992px) { .single-service-package .sp-packages .sp-section-header { margin-bottom: 29px; } } @media (max-width: 768px) { .single-service-package .sp-packages .sp-section-header { margin-bottom: 24px; } } @media (max-width: 640px) { .single-service-package .sp-packages .sp-section-header { margin-bottom: 19px; } } @media (max-width: 480px) { .single-service-package .sp-packages .sp-section-header { margin-bottom: 24px; } } .single-service-package .sp-packages .sp-section-header h2 { font-family: "Montserrat", sans-serif; color: #00704a; font-weight: 700; font-size: 36px; line-height: 150%; text-align: center; margin: 0; } @media (max-width: 1770px) { .single-service-package .sp-packages .sp-section-header h2 { font-size: 32px; } } @media (max-width: 1440px) { .single-service-package .sp-packages .sp-section-header h2 { font-size: 29px; } } @media (max-width: 1200px) { .single-service-package .sp-packages .sp-section-header h2 { font-size: 25px; } } @media (max-width: 992px) { .single-service-package .sp-packages .sp-section-header h2 { font-size: 22px; } } @media (max-width: 768px) { .single-service-package .sp-packages .sp-section-header h2 { font-size: 18px; } } @media (max-width: 640px) { .single-service-package .sp-packages .sp-section-header h2 { font-size: 14px; } } @media (max-width: 480px) { .single-service-package .sp-packages .sp-section-header h2 { font-size: 18px; } } .single-service-package .sp-packages__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } @media (max-width: 1770px) { .single-service-package .sp-packages__grid { gap: 29px; } } @media (max-width: 1440px) { .single-service-package .sp-packages__grid { gap: 26px; } } @media (max-width: 1200px) { .single-service-package .sp-packages__grid { gap: 22px; } } @media (max-width: 992px) { .single-service-package .sp-packages__grid { grid-template-columns: repeat(2, 1fr); gap: 19px; } } @media (max-width: 768px) { .single-service-package .sp-packages__grid { grid-template-columns: 1fr; gap: 16px; } } @media (max-width: 640px) { .single-service-package .sp-packages__grid { gap: 13px; } } @media (max-width: 480px) { .single-service-package .sp-packages__grid { gap: 16px; } } .single-service-package .sp-package-card { background: rgba(255, 255, 255, 0.03); border-radius: 8px; padding: 30px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; -webkit-box-shadow: 2px 2px 24.1px 0px rgba(0, 0, 0, 0.1); box-shadow: 2px 2px 24.1px 0px rgba(0, 0, 0, 0.1); -webkit-transition: background 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease; transition: background 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease; } .single-service-package .sp-package-card:hover { -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-box-shadow: 4px 4px 30px 0px rgba(8, 86, 12, 0.2); box-shadow: 4px 4px 30px 0px rgba(8, 86, 12, 0.2); background: rgba(255, 255, 255, 0.05); } .single-service-package .sp-package-card:hover .sp-package-card__badge { background: #00723f; } @media (max-width: 1770px) { .single-service-package .sp-package-card { padding: 27px; } } @media (max-width: 1440px) { .single-service-package .sp-package-card { padding: 24px; } } @media (max-width: 1200px) { .single-service-package .sp-package-card { padding: 21px; } } @media (max-width: 992px) { .single-service-package .sp-package-card { padding: 18px; } } @media (max-width: 768px) { .single-service-package .sp-package-card { padding: 15px; gap: 13px; } } @media (max-width: 640px) { .single-service-package .sp-package-card { padding: 12px; gap: 10px; } } @media (max-width: 480px) { .single-service-package .sp-package-card { padding: 15px; gap: 13px; } } .single-service-package .sp-package-card__thumb { width: 100%; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 12px; overflow: hidden; border: 1px solid rgb(232, 232, 232); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .sp-package-card:hover .single-service-package .sp-package-card__thumb { border-color: rgba(232, 232, 232, 0.6); } .single-service-package .sp-package-card__thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .sp-package-card:hover .single-service-package .sp-package-card__thumb img { -webkit-transform: scale(1.05); transform: scale(1.05); } .single-service-package .sp-package-card__desc { font-family: "Be Vietnam Pro", sans-serif; font-size: 18px; font-weight: 400; color: #312020; line-height: 150%; margin: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: left; gap: 16px; } @media (max-width: 1770px) { .single-service-package .sp-package-card__desc { gap: 14px; } } @media (max-width: 1440px) { .single-service-package .sp-package-card__desc { font-size: 16px; gap: 13px; } } @media (max-width: 1200px) { .single-service-package .sp-package-card__desc { font-size: 14px; gap: 11px; } } @media (max-width: 992px) { .single-service-package .sp-package-card__desc { font-size: 12px; gap: 10px; } } @media (max-width: 768px) { .single-service-package .sp-package-card__desc { font-size: 12px; gap: 8px; } } @media (max-width: 640px) { .single-service-package .sp-package-card__desc { font-size: 12px; gap: 6px; } } @media (max-width: 480px) { .single-service-package .sp-package-card__desc { font-size: 12px; gap: 8px; } } .single-service-package .sp-package-card__desc p { margin: 0; } .single-service-package .sp-package-card__badge { width: 50px; -ms-flex-negative: 0; flex-shrink: 0; height: 50px; background: #00704a; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #ffffff; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 24px; line-height: 100%; z-index: 1; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media (max-width: 1770px) { .single-service-package .sp-package-card__badge { width: 45px; height: 45px; font-size: 22px; } } @media (max-width: 1440px) { .single-service-package .sp-package-card__badge { width: 40px; height: 40px; font-size: 19px; } } @media (max-width: 1200px) { .single-service-package .sp-package-card__badge { width: 35px; height: 35px; font-size: 17px; } } @media (max-width: 992px) { .single-service-package .sp-package-card__badge { width: 30px; height: 30px; font-size: 14px; } } @media (max-width: 768px) { .single-service-package .sp-package-card__badge { width: 25px; height: 25px; font-size: 12px; } } @media (max-width: 640px) { .single-service-package .sp-package-card__badge { width: 20px; height: 20px; font-size: 10px; } } @media (max-width: 480px) { .single-service-package .sp-package-card__badge { width: 25px; height: 25px; font-size: 12px; } } .single-service-package .sp-package-card__link { -ms-flex-item-align: center; align-self: center; margin-top: auto; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .single-service-package .sp-package-card__link:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.25); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.25); } .single-service-package .sp-process { padding: 0; } @media (max-width: 991px) { .single-service-package .sp-process { padding: 0 0 60px; } } .single-service-package .sp-process .sp-section-header { margin-bottom: 66px; } @media (max-width: 1770px) { .single-service-package .sp-process .sp-section-header { margin-bottom: 60px; } } @media (max-width: 1440px) { .single-service-package .sp-process .sp-section-header { margin-bottom: 56px; } } @media (max-width: 1280px) { .single-service-package .sp-process .sp-section-header { margin-bottom: 52px; } } @media (max-width: 1023px) { .single-service-package .sp-process .sp-section-header { margin-bottom: 48px; } } @media (max-width: 992px) { .single-service-package .sp-process .sp-section-header { margin-bottom: 44px; } } @media (max-width: 768px) { .single-service-package .sp-process .sp-section-header { margin-bottom: 38px; } } @media (max-width: 480px) { .single-service-package .sp-process .sp-section-header { margin-bottom: 32px; } } .single-service-package .sp-process__title { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 36px; line-height: 150%; margin: 0 0 10px; color: #00704a; } @media (max-width: 1440px) { .single-service-package .sp-process__title { font-size: 32px; } } @media (max-width: 1280px) { .single-service-package .sp-process__title { font-size: 30px; margin-bottom: 9px; } } @media (max-width: 1023px) { .single-service-package .sp-process__title { font-size: 28px; margin-bottom: 8px; } } @media (max-width: 768px) { .single-service-package .sp-process__title { font-size: 26px; margin-bottom: 8px; } } @media (max-width: 480px) { .single-service-package .sp-process__title { font-size: 24px; margin-bottom: 8px; } } .single-service-package .sp-process__subtitle { font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 18px; line-height: 150%; margin: 0; color: #312020; } @media (max-width: 1440px) { .single-service-package .sp-process__subtitle { font-size: 17px; } } @media (max-width: 1280px) { .single-service-package .sp-process__subtitle { font-size: 16.5px; } } @media (max-width: 1023px) { .single-service-package .sp-process__subtitle { font-size: 16px; } } @media (max-width: 768px) { .single-service-package .sp-process__subtitle { font-size: 15px; } } @media (max-width: 480px) { .single-service-package .sp-process__subtitle { font-size: 14px; } } .single-service-package .sp-process__body { display: grid; grid-template-columns: 600px 1fr; gap: 40px; -webkit-box-align: start; -ms-flex-align: start; align-items: start; padding: 0 135px 0 120px; } @media (max-width: 1770px) { .single-service-package .sp-process__body { grid-template-columns: 550px 1fr; padding: 0 120px 0 110px; } } @media (max-width: 1440px) { .single-service-package .sp-process__body { grid-template-columns: 500px 1fr; padding: 0 100px 0 90px; } } @media (max-width: 1280px) { .single-service-package .sp-process__body { grid-template-columns: 450px 1fr; padding: 0 80px 0 70px; } } @media (max-width: 1023px) { .single-service-package .sp-process__body { grid-template-columns: 1fr; gap: 30px; padding: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media (max-width: 992px) { .single-service-package .sp-process__body { gap: 20px; } } @media (max-width: 768px) { .single-service-package .sp-process__body { gap: 20px; } } @media (max-width: 480px) { .single-service-package .sp-process__body { gap: 20px; } } .single-service-package .sp-process__steps { max-width: 600px; list-style: none; margin: -20px 0 0; padding: 0; position: relative; padding-left: 40px; } @media (max-width: 1770px) { .single-service-package .sp-process__steps { max-width: 550px; } } @media (max-width: 1440px) { .single-service-package .sp-process__steps { max-width: 500px; } } @media (max-width: 1280px) { .single-service-package .sp-process__steps { max-width: 450px; } } @media (max-width: 1023px) { .single-service-package .sp-process__steps { max-width: 400px; } } @media (max-width: 768px) { .single-service-package .sp-process__steps { max-width: 350px; } } @media (max-width: 480px) { .single-service-package .sp-process__steps { max-width: 300px; } } .single-service-package .sp-process__steps::before { content: ""; position: absolute; left: 30px; top: 50px; bottom: 50px; width: 2px; background: rgb(232, 233, 234); } @media (max-width: 992px) { .single-service-package .sp-process__steps { padding-left: 40px; margin: -20px 0 0; } .single-service-package .sp-process__steps::before { left: 30px; top: 50px; bottom: 50px; display: block; } } @media (max-width: 768px) { .single-service-package .sp-process__steps { padding-left: 35px; margin: -20px 0 0; } .single-service-package .sp-process__steps::before { left: 25px; } } @media (max-width: 480px) { .single-service-package .sp-process__steps { padding-left: 30px; } .single-service-package .sp-process__steps::before { left: 20px; } } @-webkit-keyframes sp-step-pulse { 0% { opacity: 0.5; -webkit-transform: scale(0.85); transform: scale(0.85); } 60% { opacity: 0.08; -webkit-transform: scale(1.25); transform: scale(1.25); } 100% { opacity: 0; -webkit-transform: scale(1.4); transform: scale(1.4); } } @keyframes sp-step-pulse { 0% { opacity: 0.5; -webkit-transform: scale(0.85); transform: scale(0.85); } 60% { opacity: 0.08; -webkit-transform: scale(1.25); transform: scale(1.25); } 100% { opacity: 0; -webkit-transform: scale(1.4); transform: scale(1.4); } } @-webkit-keyframes sp-step-border-pulse { 0% { -webkit-box-shadow: 0 0 0 6px rgba(0, 113, 74, 0.2); box-shadow: 0 0 0 6px rgba(0, 113, 74, 0.2); } 50% { -webkit-box-shadow: 0 0 0 12px rgba(0, 113, 74, 0.1); box-shadow: 0 0 0 12px rgba(0, 113, 74, 0.1); } 100% { -webkit-box-shadow: 0 0 0 6px rgba(0, 113, 74, 0.2); box-shadow: 0 0 0 6px rgba(0, 113, 74, 0.2); } } @keyframes sp-step-border-pulse { 0% { -webkit-box-shadow: 0 0 0 6px rgba(0, 113, 74, 0.2); box-shadow: 0 0 0 6px rgba(0, 113, 74, 0.2); } 50% { -webkit-box-shadow: 0 0 0 12px rgba(0, 113, 74, 0.1); box-shadow: 0 0 0 12px rgba(0, 113, 74, 0.1); } 100% { -webkit-box-shadow: 0 0 0 6px rgba(0, 113, 74, 0.2); box-shadow: 0 0 0 6px rgba(0, 113, 74, 0.2); } } .single-service-package .sp-process__step { position: relative; background: #ffffff; padding: 20px 0px 24px 42px; margin-bottom: 26px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 20px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .single-service-package .sp-process__step:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); } .single-service-package .sp-process__step:hover .sp-process__step-badge--inbox { background-color: #00704a; color: #fff; -webkit-box-shadow: 0 0 0 6px rgba(0, 113, 74, 0.2); box-shadow: 0 0 0 6px rgba(0, 113, 74, 0.2); -webkit-animation: sp-step-border-pulse 1.5s ease-out infinite; animation: sp-step-border-pulse 1.5s ease-out infinite; } .single-service-package .sp-process__step:hover .sp-process__step-badge--inbox::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; opacity: 0; -webkit-transform: scale(0.85); transform: scale(0.85); -webkit-animation: sp-step-pulse 1.6s ease-out infinite; animation: sp-step-pulse 1.6s ease-out infinite; } .single-service-package .sp-process__step:last-child { margin-bottom: 0; } @media (max-width: 1770px) { .single-service-package .sp-process__step { padding: 20px 0px 24px 44px; margin-bottom: 24px; } } @media (max-width: 1440px) { .single-service-package .sp-process__step { padding: 20px 0px 24px 48px; margin-bottom: 22px; } } @media (max-width: 1280px) { .single-service-package .sp-process__step { padding: 20px 0px 24px 40px; margin-bottom: 20px; } } @media (max-width: 992px) { .single-service-package .sp-process__step { padding: 20px 0px 24px 42px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-bottom: 26px; } .single-service-package .sp-process__step:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); } } @media (max-width: 768px) { .single-service-package .sp-process__step { padding: 20px 0px 24px 40px; gap: 20px; margin-bottom: 24px; } } @media (max-width: 480px) { .single-service-package .sp-process__step { padding: 18px 0px 22px 38px; gap: 18px; margin-bottom: 20px; } } .single-service-package .sp-process__step-badge { position: absolute; left: -62px; top: -3px; width: 106px; height: 106px; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-negative: 0; flex-shrink: 0; z-index: 1; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; padding: 23px; } .single-service-package .sp-process__step-badge--outbox { width: 106px; height: 106px; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #fff; } .single-service-package .sp-process__step-badge--inbox { width: 60px; height: 60px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-family: "Montserrat", sans-serif; font-size: 24px; background-color: #fff; border-radius: 50%; font-weight: 700; color: rgb(95, 95, 95); line-height: 100%; letter-spacing: -0.4px; -webkit-transition: all 0.3s ease, background-color 0.3s ease, -webkit-box-shadow 0.3s ease; transition: all 0.3s ease, background-color 0.3s ease, -webkit-box-shadow 0.3s ease; transition: all 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; transition: all 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease; -webkit-box-shadow: 0px 3px 21.1px 0px rgba(142, 142, 142, 0.16); box-shadow: 0px 3px 21.1px 0px rgba(142, 142, 142, 0.16); position: relative; overflow: visible; } @media (max-width: 768px) { .single-service-package .sp-process__step-badge--inbox { width: 56px; height: 56px; } } @media (max-width: 480px) { .single-service-package .sp-process__step-badge--inbox { width: 48px; height: 48px; } } .sp-process__step:hover .single-service-package .sp-process__step-badge { -webkit-transform: scale(1.05); transform: scale(1.05); background: #00723f; } @media (max-width: 1440px) { .single-service-package .sp-process__step-badge { width: 95px; height: 95px; left: -58px; border: 20px solid #fff; font-size: 22px; } } @media (max-width: 1280px) { .single-service-package .sp-process__step-badge { width: 90px; height: 90px; left: -56px; border: 18px solid #fff; font-size: 21px; } } @media (max-width: 992px) { .single-service-package .sp-process__step-badge { position: absolute; left: -62px; top: -3px; width: 106px; height: 106px; padding: 23px; margin-bottom: 0; } } @media (max-width: 768px) { .single-service-package .sp-process__step-badge { width: 95px; height: 95px; left: -58px; padding: 20px; } } @media (max-width: 480px) { .single-service-package .sp-process__step-badge { width: 85px; height: 85px; left: -55px; padding: 18px; } } .single-service-package .sp-process__step-content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .single-service-package .sp-process__step-title { font-family: "Be Vietnam Pro", sans-serif; font-weight: 600; font-size: 18px; line-height: 100%; letter-spacing: -4%; margin: 0 0 8px; color: #00704a; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } .sp-process__step:hover .single-service-package .sp-process__step-title { color: #00723f; } @media (max-width: 1440px) { .single-service-package .sp-process__step-title { font-size: 17.5px; } } @media (max-width: 1280px) { .single-service-package .sp-process__step-title { font-size: 17px; } } @media (max-width: 1023px) { .single-service-package .sp-process__step-title { font-size: 17px; } } @media (max-width: 768px) { .single-service-package .sp-process__step-title { font-size: 16px; } } @media (max-width: 480px) { .single-service-package .sp-process__step-title { font-size: 15px; } } .single-service-package .sp-process__step-desc { font-family: "Be Vietnam Pro", sans-serif; font-weight: 400; font-size: 16px; line-height: auto; letter-spacing: -0.4px; margin: 0; color: rgb(48, 48, 48); } @media (max-width: 1440px) { .single-service-package .sp-process__step-desc { font-size: 15.5px; } } @media (max-width: 1280px) { .single-service-package .sp-process__step-desc { font-size: 15px; } } @media (max-width: 1023px) { .single-service-package .sp-process__step-desc { font-size: 15px; } } @media (max-width: 768px) { .single-service-package .sp-process__step-desc { font-size: 14.5px; } } @media (max-width: 480px) { .single-service-package .sp-process__step-desc { font-size: 14px; } } .single-service-package .sp-process__step-desc .nowrap { white-space: nowrap; } .single-service-package .sp-process__images { position: relative; width: 600px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 1770px) { .single-service-package .sp-process__images { width: 550px; } } @media (max-width: 1440px) { .single-service-package .sp-process__images { width: 500px; } } @media (max-width: 1280px) { .single-service-package .sp-process__images { width: 480px; } } @media (max-width: 1023px) { .single-service-package .sp-process__images { width: 450px; margin: 0 auto; } } @media (max-width: 992px) { .single-service-package .sp-process__images { width: 420px; gap: 20px; } } @media (max-width: 768px) { .single-service-package .sp-process__images { width: 400px; gap: 16px; } } @media (max-width: 480px) { .single-service-package .sp-process__images { width: 100%; max-width: 400px; gap: 12px; } } .single-service-package .sp-process__image { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .single-service-package .sp-process__image:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); } @media (max-width: 1440px) { .single-service-package .sp-process__image { border: 3.5px solid rgb(255, 255, 255); } } @media (max-width: 768px) { .single-service-package .sp-process__image { border: 2px solid rgb(255, 255, 255); } } .single-service-package .sp-testimonials { padding: 0 0 50px; } .single-service-package .sp-testimonials .container { overflow: hidden; } .single-service-package .sp-testimonials .sp-section-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 48px; } @media (max-width: 1770px) { .single-service-package .sp-testimonials .sp-section-header { margin-bottom: 43px; } } @media (max-width: 1440px) { .single-service-package .sp-testimonials .sp-section-header { margin-bottom: 38px; } } @media (max-width: 1200px) { .single-service-package .sp-testimonials .sp-section-header { margin-bottom: 34px; } } @media (max-width: 992px) { .single-service-package .sp-testimonials .sp-section-header { margin-bottom: 29px; } } @media (max-width: 768px) { .single-service-package .sp-testimonials .sp-section-header { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 20px; margin-bottom: 24px; } } @media (max-width: 640px) { .single-service-package .sp-testimonials .sp-section-header { gap: 16px; margin-bottom: 19px; } } @media (max-width: 480px) { .single-service-package .sp-testimonials .sp-section-header { margin-bottom: 24px; gap: 20px; } } .single-service-package .sp-testimonials__title { font-family: "Montserrat", sans-serif; font-size: 36px; font-weight: 700; color: #00704a; margin: 0; line-height: 130%; } @media (max-width: 1770px) { .single-service-package .sp-testimonials__title { font-size: 32px; } } @media (max-width: 1440px) { .single-service-package .sp-testimonials__title { font-size: 29px; } } @media (max-width: 1200px) { .single-service-package .sp-testimonials__title { font-size: 25px; } } @media (max-width: 992px) { .single-service-package .sp-testimonials__title { font-size: 22px; } } @media (max-width: 768px) { .single-service-package .sp-testimonials__title { font-size: 18px; } } @media (max-width: 640px) { .single-service-package .sp-testimonials__title { font-size: 14px; } } @media (max-width: 480px) { .single-service-package .sp-testimonials__title { font-size: 18px; } } .single-service-package .sp-testimonials__navigation { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; } @media (max-width: 768px) { .single-service-package .sp-testimonials__navigation { gap: 13px; width: 100%; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } } @media (max-width: 640px) { .single-service-package .sp-testimonials__navigation { gap: 10px; } } @media (max-width: 480px) { .single-service-package .sp-testimonials__navigation { gap: 13px; } } .single-service-package .sp-testimonials__nav-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid transparent; background: transparent; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; color: rgba(0, 0, 0, 0.5); padding: 0; } .single-service-package .sp-testimonials__nav-btn:hover { background: rgba(0, 112, 74, 0.1); color: #ffffff; border-color: #00704a; } .single-service-package .sp-testimonials__nav-btn:disabled { opacity: 0.3; cursor: not-allowed; } .single-service-package .sp-testimonials__nav-btn:disabled:hover { -webkit-transform: none; transform: none; background: transparent; color: rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.2); } .single-service-package .sp-testimonials__nav-btn svg { width: 10px; height: 19px; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } @media (max-width: 1770px) { .single-service-package .sp-testimonials__nav-btn { width: 33px; height: 33px; } .single-service-package .sp-testimonials__nav-btn svg { width: 9px; height: 17px; } } @media (max-width: 1440px) { .single-service-package .sp-testimonials__nav-btn { width: 29px; height: 29px; } .single-service-package .sp-testimonials__nav-btn svg { width: 8px; height: 15px; } } @media (max-width: 1200px) { .single-service-package .sp-testimonials__nav-btn { width: 25px; height: 25px; } .single-service-package .sp-testimonials__nav-btn svg { width: 7px; height: 13px; } } @media (max-width: 992px) { .single-service-package .sp-testimonials__nav-btn { width: 22px; height: 22px; } .single-service-package .sp-testimonials__nav-btn svg { width: 6px; height: 11px; } } @media (max-width: 768px) { .single-service-package .sp-testimonials__nav-btn { width: 18px; height: 18px; } .single-service-package .sp-testimonials__nav-btn svg { width: 5px; height: 9px; } } @media (max-width: 640px) { .single-service-package .sp-testimonials__nav-btn { width: 14px; height: 14px; } .single-service-package .sp-testimonials__nav-btn svg { width: 4px; height: 7px; } } @media (max-width: 480px) { .single-service-package .sp-testimonials__nav-btn { width: 18px; height: 18px; } .single-service-package .sp-testimonials__nav-btn svg { width: 5px; height: 9px; } } .single-service-package .sp-testimonials__swiper { overflow: visible; padding-bottom: 20px; } .single-service-package .sp-testimonial-card { background: #ffffff; border-radius: 8px; padding: 40px 30px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-shadow: 2px 2px 24.1px 0px rgba(0, 0, 0, 0.1); box-shadow: 2px 2px 24.1px 0px rgba(0, 0, 0, 0.1); position: relative; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .single-service-package .sp-testimonial-card:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .single-service-package .sp-testimonial-card:hover .sp-testimonial-card__quote { -webkit-transform: scale(1.1); transform: scale(1.1); } .single-service-package .sp-testimonial-card:hover .sp-testimonial-card__star { -webkit-transform: scale(1.1); transform: scale(1.1); } .single-service-package .sp-testimonial-card:hover .sp-testimonial-card__avatar { -webkit-transform: scale(1.05); transform: scale(1.05); } .single-service-package .sp-testimonial-card:hover .sp-testimonial-card__meta { -webkit-transform: translateX(2px); transform: translateX(2px); } @media (max-width: 1440px) { .single-service-package .sp-testimonial-card { padding: 32px 24px; } } @media (max-width: 1200px) { .single-service-package .sp-testimonial-card { padding: 28px 21px; } } @media (max-width: 992px) { .single-service-package .sp-testimonial-card { padding: 24px 18px; } } @media (max-width: 768px) { .single-service-package .sp-testimonial-card { padding: 20px 15px; } } @media (max-width: 480px) { .single-service-package .sp-testimonial-card { padding: 16px 12px; } } .single-service-package .sp-testimonial-card__quote { width: 65px; height: 65px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #fff; border-radius: 50%; background-color: #00704a; -o-object-fit: contain; object-fit: contain; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; -ms-flex-negative: 0; flex-shrink: 0; } .single-service-package .sp-testimonial-card__quote img { width: 29px; height: 27px; -o-object-fit: contain; object-fit: contain; } @media (max-width: 1440px) { .single-service-package .sp-testimonial-card__quote { width: 52px; height: 52px; } .single-service-package .sp-testimonial-card__quote img { width: 23px; height: 22px; } } @media (max-width: 1200px) { .single-service-package .sp-testimonial-card__quote { width: 46px; height: 46px; } .single-service-package .sp-testimonial-card__quote img { width: 20px; height: 19px; } } @media (max-width: 992px) { .single-service-package .sp-testimonial-card__quote { width: 39px; height: 39px; } .single-service-package .sp-testimonial-card__quote img { width: 17px; height: 16px; } } @media (max-width: 768px) { .single-service-package .sp-testimonial-card__quote { width: 33px; height: 33px; } .single-service-package .sp-testimonial-card__quote img { width: 15px; height: 14px; } } @media (max-width: 480px) { .single-service-package .sp-testimonial-card__quote { width: 26px; height: 26px; } .single-service-package .sp-testimonial-card__quote img { width: 12px; height: 11px; } } .single-service-package .sp-testimonial-card__rating { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 5px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .single-service-package .sp-testimonial-card__star { width: 20px; height: 20px; -o-object-fit: contain; object-fit: contain; opacity: 1; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; -ms-flex-negative: 0; flex-shrink: 0; } .single-service-package .sp-testimonial-card__star--filled { opacity: 1; -webkit-filter: brightness(0) saturate(100%) invert(75%) sepia(97%) saturate(1853%) hue-rotate(357deg) brightness(105%) contrast(104%); filter: brightness(0) saturate(100%) invert(75%) sepia(97%) saturate(1853%) hue-rotate(357deg) brightness(105%) contrast(104%); } @media (max-width: 1440px) { .single-service-package .sp-testimonial-card__star { width: 16px; height: 16px; } } @media (max-width: 1200px) { .single-service-package .sp-testimonial-card__star { width: 14px; height: 14px; } } @media (max-width: 992px) { .single-service-package .sp-testimonial-card__star { width: 12px; height: 12px; } } @media (max-width: 768px) { .single-service-package .sp-testimonial-card__star { width: 10px; height: 10px; } } @media (max-width: 480px) { .single-service-package .sp-testimonial-card__star { width: 8px; height: 8px; } } .single-service-package .sp-testimonial-card__content { font-family: "Be Vietnam Pro", sans-serif; font-size: 16px; font-weight: 400; color: #312020; line-height: 150%; margin: 0 0 24px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } @media (max-width: 1440px) { .single-service-package .sp-testimonial-card__content { font-size: 14px; margin-bottom: 22px; } } @media (max-width: 1200px) { .single-service-package .sp-testimonial-card__content { font-size: 13px; margin-bottom: 19px; } } @media (max-width: 992px) { .single-service-package .sp-testimonial-card__content { font-size: 12px; margin-bottom: 16px; } } @media (max-width: 768px) { .single-service-package .sp-testimonial-card__content { font-size: 11px; margin-bottom: 14px; } } @media (max-width: 480px) { .single-service-package .sp-testimonial-card__content { font-size: 10px; margin-bottom: 12px; } } .single-service-package .sp-testimonial-card__meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; margin-top: auto; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } @media (max-width: 1440px) { .single-service-package .sp-testimonial-card__meta { gap: 10px; } } @media (max-width: 1200px) { .single-service-package .sp-testimonial-card__meta { gap: 9px; } } @media (max-width: 992px) { .single-service-package .sp-testimonial-card__meta { gap: 8px; } } @media (max-width: 768px) { .single-service-package .sp-testimonial-card__meta { gap: 7px; } } @media (max-width: 480px) { .single-service-package .sp-testimonial-card__meta { gap: 6px; } } .single-service-package .sp-testimonial-card__avatar { width: 48px; height: 48px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; background-color: #f5f5f5; } @media (max-width: 1440px) { .single-service-package .sp-testimonial-card__avatar { width: 44px; height: 44px; } } .single-service-package .sp-testimonial-card__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .single-service-package .sp-testimonial-card__name { font-family: "Be Vietnam Pro", sans-serif; font-size: 18px; font-weight: 700; color: #312020; margin: 0 0 4px 0; line-height: 1.4; } @media (max-width: 1440px) { .single-service-package .sp-testimonial-card__name { font-size: 16px; margin-bottom: 3px; } } @media (max-width: 1200px) { .single-service-package .sp-testimonial-card__name { font-size: 14px; margin-bottom: 3px; } } @media (max-width: 992px) { .single-service-package .sp-testimonial-card__name { font-size: 12px; margin-bottom: 2px; } } @media (max-width: 768px) { .single-service-package .sp-testimonial-card__name { font-size: 12px; margin-bottom: 2px; } } @media (max-width: 480px) { .single-service-package .sp-testimonial-card__name { font-size: 12px; margin-bottom: 2px; } } .single-service-package .sp-testimonial-card__position { font-family: "Be Vietnam Pro", sans-serif; font-size: 14px; font-weight: 400; color: rgba(48, 48, 48, 0.6); line-height: 1.4; margin: 0; } @media (max-width: 1440px) { .single-service-package .sp-testimonial-card__position { font-size: 13px; } } @media (max-width: 1200px) { .single-service-package .sp-testimonial-card__position { font-size: 13px; } } @media (max-width: 992px) { .single-service-package .sp-testimonial-card__position { font-size: 13px; } } @media (max-width: 768px) { .single-service-package .sp-testimonial-card__position { font-size: 13px; } } @media (max-width: 480px) { .single-service-package .sp-testimonial-card__position { font-size: 13px; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .single-strategic-product .stp-hero { height: 670px; display: grid; grid-template-columns: 1fr 992px; gap: 29px; position: relative; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; } @media screen and (max-width: 1200px) { .single-strategic-product .stp-hero { background-image: var(--bg-mobile) !important; } } @media screen and (max-width: 1770px) { .single-strategic-product .stp-hero { grid-template-columns: 1fr auto; gap: 24px; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-hero { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 32px; padding: 50px 0 0; } } @media screen and (max-width: 576px) { .single-strategic-product .stp-hero { height: auto; min-height: unset; } } .single-strategic-product .stp-hero::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; background: radial-gradient(circle, rgb(0, 112, 74) 0%, #9defd3 100%); opacity: 0.4; pointer-events: none; } @media screen and (min-width: 1201px) { .single-strategic-product .stp-hero::after { display: none; } } .single-strategic-product .stp-hero__inner { grid-column: 1; position: relative; z-index: 1; } .single-strategic-product .stp-hero__content { width: 80%; height: 100%; color: #ffffff; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 1; margin: 0 auto; } @media screen and (max-width: 1200px) { .single-strategic-product .stp-hero__content { max-width: 100%; text-align: center; padding: 0 20px; } } @media screen and (max-width: 576px) { .single-strategic-product .stp-hero__content { padding: 0 12px; } } .single-strategic-product .stp-hero__title { font-size: 72px; font-weight: 700; line-height: 150%; margin: 0; text-transform: uppercase; color: #ffffff; font-family: "Montserrat", sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } @media screen and (max-width: 1920px) { .single-strategic-product .stp-hero__title { font-size: 72px; line-height: 130%; } } @media screen and (max-width: 1440px) { .single-strategic-product .stp-hero__title { font-size: 60px; line-height: 125%; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-hero__title { font-size: 48px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-hero__title { font-size: 48px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-hero__title { font-size: 48px; } } .single-strategic-product .stp-hero__subtitle { font-size: 24px; line-height: 150%; font-weight: 600; margin: 0 0 32px; color: #fff; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } .single-strategic-product .stp-hero__subtitle p { margin: 0; } @media screen and (max-width: 1920px) { .single-strategic-product .stp-hero__subtitle { font-size: 24px; } } @media screen and (max-width: 1440px) { .single-strategic-product .stp-hero__subtitle { font-size: 24px; margin: 0 0 24px; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-hero__subtitle { font-size: 22px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-hero__subtitle { font-size: 20px; } } .single-strategic-product .stp-hero__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24px; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (max-width: 1200px) { .single-strategic-product .stp-hero__actions { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-hero__actions { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; gap: 16px; } } .single-strategic-product .stp-hero__cta { height: 64px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 12px; font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 700; line-height: 150%; padding: 16px 32px; border-radius: 12px; text-decoration: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; background-color: #ffffff; color: #00704a; border: none; outline: none; cursor: pointer; white-space: nowrap; text-shadow: none; } @media screen and (max-width: 1700px) { .single-strategic-product .stp-hero__cta { height: 56px; width: 290px; padding: 14px 28px; font-size: 16px; } } @media screen and (max-width: 1440px) { .single-strategic-product .stp-hero__cta { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-hero__cta { width: 100%; height: 52px; padding: 14px 24px; font-size: 15px; } } .single-strategic-product .stp-hero__cta:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .single-strategic-product .stp-hero__cta-text { font-weight: 700; } .single-strategic-product .stp-hero__cta-text--2 { font-weight: 600; } .single-strategic-product .stp-hero__cta-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 32px; height: 32px; -ms-flex-negative: 0; flex-shrink: 0; } .single-strategic-product .stp-hero__cta-icon--2 { width: 24px; height: 24px; } .single-strategic-product .stp-hero__cta-icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .single-strategic-product .stp-hero__media { grid-column: 2; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; height: 100%; } @media screen and (min-width: 1201px) { .single-strategic-product .stp-hero__media { display: none; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-hero__media { grid-column: 1; grid-row: 2; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: auto; min-height: 300px; display: -webkit-box; display: -ms-flexbox; display: flex; } } @media screen and (max-width: 576px) { .single-strategic-product .stp-hero__media { min-height: unset; } } .single-strategic-product .stp-hero__image-wrapper { height: 100%; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: visible; position: relative; } @media screen and (max-width: 1200px) { .single-strategic-product .stp-hero__image-wrapper { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .single-strategic-product .stp-hero__image-wrapper img { height: 100%; width: auto; max-width: none; -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 576px) { .single-strategic-product .stp-hero__image-wrapper img { height: auto; width: 100%; } } .single-strategic-product .stp-advantages { padding: 86px 0 49px; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-advantages { padding: 66px 0 40px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-advantages { padding: 56px 0 32px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-advantages { padding: 24px 0 24px; } } .single-strategic-product .stp-advantages .stp-section-header { margin-bottom: 49px; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-advantages .stp-section-header { margin-bottom: 40px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-advantages .stp-section-header { margin-bottom: 32px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-advantages .stp-section-header { margin-bottom: 24px; } } .single-strategic-product .stp-advantages .stp-section-header h2 { font-size: 36px; font-weight: 700; line-height: 150%; color: #00704a; margin: 0; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-advantages .stp-section-header h2 { font-size: 32px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-advantages .stp-section-header h2 { font-size: 30px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-advantages .stp-section-header h2 { font-size: 28px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-advantages .stp-section-header h2 { font-size: 24px; line-height: 140%; } } .single-strategic-product .stp-advantages__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-advantages__grid { gap: 16px; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-advantages__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-advantages__grid { gap: 14px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-advantages__grid { grid-template-columns: 1fr; gap: 12px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-advantages__grid { gap: 10px; } } .single-strategic-product .stp-advantages__item { padding: 30px; border-radius: 12px; background-color: #49a888; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.05); -webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease; transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-advantages__item { padding: 28px 24px; gap: 14px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-advantages__item { padding: 26px 20px; gap: 12px; border-radius: 10px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-advantages__item { padding: 24px 20px; gap: 12px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-advantages__item { padding: 20px 16px; gap: 10px; border-radius: 8px; } } .single-strategic-product .stp-advantages__item:nth-child(even) { background-color: #ffffff; color: #00704a; text-shadow: none; -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } @media screen and (max-width: 480px) { .single-strategic-product .stp-advantages__item:nth-child(even) { background-color: #ffffff; color: #00704a; text-shadow: none; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } } @media screen and (max-width: 1200px) and (min-width: 769px) { .single-strategic-product .stp-advantages__item:nth-child(4n+1), .single-strategic-product .stp-advantages__item:nth-child(4n) { background-color: #49a888; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.05); -webkit-box-shadow: none; box-shadow: none; } } @media screen and (max-width: 1200px) and (min-width: 769px) { .single-strategic-product .stp-advantages__item:nth-child(4n+2), .single-strategic-product .stp-advantages__item:nth-child(4n+3) { background-color: #ffffff; color: #00704a; text-shadow: none; -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } } .single-strategic-product .stp-advantages__item:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } @media screen and (max-width: 768px) { .single-strategic-product .stp-advantages__item:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } } @media screen and (max-width: 480px) { .single-strategic-product .stp-advantages__item:hover { -webkit-transform: none; transform: none; -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } } .single-strategic-product .stp-advantages__item-title { font-size: 20px; font-weight: 700; line-height: 112%; margin: 0; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-advantages__item-title { font-size: 18px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-advantages__item-title { font-size: 17px; line-height: 120%; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-advantages__item-title { font-size: 17px; margin-bottom: 10px; line-height: 125%; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-advantages__item-title { font-size: 16px; margin-bottom: 8px; line-height: 130%; } } .single-strategic-product .stp-advantages__item-desc { font-size: 16px; font-weight: 400; line-height: 112%; margin: 0; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-advantages__item-desc { font-size: 15px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-advantages__item-desc { font-size: 14px; line-height: 140%; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-advantages__item-desc { font-size: 14px; line-height: 150%; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-advantages__item-desc { font-size: 13px; line-height: 160%; } } .single-strategic-product .stp-principle { margin-top: 118px; padding: 47px 0; background-color: #f9fbfa; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-principle { padding: 50px 0; margin-top: 90px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-principle { padding: 40px 0; margin-top: 60px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-principle { padding: 32px 0; margin-top: 40px; } } .single-strategic-product .stp-principle__wrapper { display: grid; grid-template-columns: 755px 1fr; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } @media screen and (max-width: 1770px) { .single-strategic-product .stp-principle__wrapper { grid-template-columns: 650px 1fr; } } @media screen and (max-width: 1440px) { .single-strategic-product .stp-principle__wrapper { grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-principle__wrapper { grid-template-columns: 1fr; gap: 12px; } } .single-strategic-product .stp-principle__title { font-size: 36px; font-weight: 700; line-height: 150%; color: #00704a; margin: 0 0 60px; font-family: "Montserrat", sans-serif; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-principle__title { font-size: 32px; margin-bottom: 20px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-principle__title { font-size: 30px; margin-bottom: 18px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-principle__title { font-size: 28px; margin-bottom: 16px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-principle__title { font-size: 24px; margin-bottom: 14px; line-height: 140%; } } .single-strategic-product .stp-principle__description { padding-right: 60px; } @media screen and (max-width: 992px) { .single-strategic-product .stp-principle__description { padding-right: 0; } } .single-strategic-product .stp-principle__description p { font-size: 16px; font-weight: 400; line-height: 180%; color: #312020; margin: 0 0 29px; font-family: "Be Vietnam Pro", sans-serif; max-width: 592px; text-align: justify; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-principle__description p { font-size: 15px; line-height: 175%; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-principle__description p { font-size: 14px; line-height: 170%; margin-bottom: 16px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-principle__description p { font-size: 13px; line-height: 165%; margin-bottom: 14px; } } .single-strategic-product .stp-principle__description:last-child { margin-bottom: 0; } .single-strategic-product .stp-principle__visual { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .single-strategic-product .stp-principle__image-wrapper { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: -140px; } @media screen and (max-width: 1770px) { .single-strategic-product .stp-principle__image-wrapper { margin-left: 0; } } @media screen and (max-width: 991px) { .single-strategic-product .stp-principle__image-wrapper { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .single-strategic-product .stp-principle__image-wrapper img { width: 100%; height: auto; max-width: 500px; -o-object-fit: contain; object-fit: contain; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .single-strategic-product .stp-principle__image-wrapper img:hover { -webkit-transform: scale(1.02); transform: scale(1.02); -webkit-animation: float 1s ease-in-out infinite; animation: float 1s ease-in-out infinite; } @media screen and (max-width: 992px) { .single-strategic-product .stp-principle__image-wrapper img { max-width: 400px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-principle__image-wrapper img { max-width: 100%; } } @-webkit-keyframes float { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } } @keyframes float { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } } .single-strategic-product .stp-benefits { padding: 60px 0 50px; margin-bottom: 100px; } @media screen and (max-width: 1770px) { .single-strategic-product .stp-benefits { padding: 55px 0 48px; margin-bottom: 90px; } } @media screen and (max-width: 1600px) { .single-strategic-product .stp-benefits { padding: 52px 0 46px; margin-bottom: 85px; } } @media screen and (max-width: 1440px) { .single-strategic-product .stp-benefits { padding: 50px 0; margin-bottom: 80px; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-benefits { padding: 45px 0; margin-bottom: 70px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-benefits { padding: 42px 0; margin-bottom: 60px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-benefits { padding: 40px 0; margin-bottom: 50px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-benefits { padding: 32px 0; margin-bottom: 40px; } } .single-strategic-product .stp-benefits__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; padding: 0 129px; } @media screen and (max-width: 1770px) { .single-strategic-product .stp-benefits__grid { gap: 30px; padding: 0 100px; } } @media screen and (max-width: 1600px) { .single-strategic-product .stp-benefits__grid { gap: 28px; padding: 0 80px; } } @media screen and (max-width: 1440px) { .single-strategic-product .stp-benefits__grid { gap: 20px; padding: 0 60px; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-benefits__grid { gap: 19px; padding: 0 50px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-benefits__grid { gap: 18px; padding: 0 40px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-benefits__grid { grid-template-columns: 1fr; gap: 16px; padding: 0 20px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-benefits__grid { gap: 14px; padding: 0 10px; } } .single-strategic-product .stp-benefits__note { padding: 0 129px; } @media screen and (max-width: 1770px) { .single-strategic-product .stp-benefits__note { padding: 0 100px; } } @media screen and (max-width: 1600px) { .single-strategic-product .stp-benefits__note { padding: 0 80px; } } @media screen and (max-width: 1440px) { .single-strategic-product .stp-benefits__note { padding: 0 60px; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-benefits__note { padding: 0 50px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-benefits__note { padding: 0 40px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-benefits__note { padding: 0 20px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-benefits__note { padding: 0 10px; } } .single-strategic-product .stp-benefits__item { padding: 24px; border: 1px solid #00704a; border-radius: 12px; background-color: #ffffff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 15px; -webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease; transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease; } @media screen and (max-width: 1770px) { .single-strategic-product .stp-benefits__item { padding: 23px; gap: 16px; } } @media screen and (max-width: 1600px) { .single-strategic-product .stp-benefits__item { padding: 22px; gap: 16px; } } @media screen and (max-width: 1440px) { .single-strategic-product .stp-benefits__item { padding: 22px; gap: 18px; border-radius: 14px; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-benefits__item { padding: 21px; gap: 17px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-benefits__item { padding: 20px; gap: 16px; border-radius: 12px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-benefits__item { padding: 20px; gap: 14px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-benefits__item { padding: 18px; gap: 12px; border-radius: 10px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .single-strategic-product .stp-benefits__item:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-box-shadow: 0 4px 12px rgba(73, 168, 136, 0.12); box-shadow: 0 4px 12px rgba(73, 168, 136, 0.12); } @media screen and (max-width: 768px) { .single-strategic-product .stp-benefits__item:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 2px 8px rgba(73, 168, 136, 0.1); box-shadow: 0 2px 8px rgba(73, 168, 136, 0.1); } } @media screen and (max-width: 480px) { .single-strategic-product .stp-benefits__item:hover { -webkit-transform: none; transform: none; -webkit-box-shadow: none; box-shadow: none; } } .single-strategic-product .stp-benefits__item:hover .stp-benefits__item-title { color: #00704a; } .single-strategic-product .stp-benefits__item:hover .stp-benefits__item-desc { color: #00704a; } .single-strategic-product .stp-benefits__icon-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-negative: 0; flex-shrink: 0; } .single-strategic-product .stp-benefits__icon { width: 85px; height: 85px; -o-object-fit: contain; object-fit: contain; -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (max-width: 1770px) { .single-strategic-product .stp-benefits__icon { width: 80px; height: 80px; } } @media screen and (max-width: 1600px) { .single-strategic-product .stp-benefits__icon { width: 78px; height: 78px; } } @media screen and (max-width: 1440px) { .single-strategic-product .stp-benefits__icon { width: 75px; height: 75px; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-benefits__icon { width: 70px; height: 70px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-benefits__icon { width: 65px; height: 65px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-benefits__icon { width: 55px; height: 55px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-benefits__icon { width: 50px; height: 50px; } } .single-strategic-product .stp-benefits__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } @media screen and (max-width: 1770px) { .single-strategic-product .stp-benefits__content { gap: 11px; } } @media screen and (max-width: 1600px) { .single-strategic-product .stp-benefits__content { gap: 11px; } } @media screen and (max-width: 1440px) { .single-strategic-product .stp-benefits__content { gap: 10px; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-benefits__content { gap: 10px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-benefits__content { gap: 9px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-benefits__content { gap: 10px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-benefits__content { gap: 8px; } } .single-strategic-product .stp-benefits__item-title { font-size: 20px; font-weight: 700; line-height: 112%; color: #202020; margin: 0; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 1770px) { .single-strategic-product .stp-benefits__item-title { font-size: 19px; } } @media screen and (max-width: 1600px) { .single-strategic-product .stp-benefits__item-title { font-size: 19px; } } @media screen and (max-width: 1440px) { .single-strategic-product .stp-benefits__item-title { font-size: 18px; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-benefits__item-title { font-size: 18px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-benefits__item-title { font-size: 17px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-benefits__item-title { font-size: 16px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-benefits__item-title { font-size: 15px; } } .single-strategic-product .stp-benefits__item-desc { font-size: 16px; font-weight: 400; line-height: 150%; color: #202020; margin: 0; font-family: "Be Vietnam Pro", sans-serif; } .single-strategic-product .stp-benefits__item-desc p { margin: 0 0 8px; } .single-strategic-product .stp-benefits__item-desc p:last-child { margin-bottom: 0; } @media screen and (max-width: 1770px) { .single-strategic-product .stp-benefits__item-desc { font-size: 15.5px; } } @media screen and (max-width: 1600px) { .single-strategic-product .stp-benefits__item-desc { font-size: 15.5px; } } @media screen and (max-width: 1440px) { .single-strategic-product .stp-benefits__item-desc { font-size: 15px; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-benefits__item-desc { font-size: 15px; line-height: 148%; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-benefits__item-desc { font-size: 14px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-benefits__item-desc { font-size: 14px; line-height: 145%; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-benefits__item-desc { font-size: 13px; line-height: 142%; } } .single-strategic-product .stp-benefits__note { margin-top: 16px; font-size: 16px; font-weight: 400; line-height: 150%; color: #202020; font-family: "Be Vietnam Pro", sans-serif; float: right; } .single-strategic-product .stp-benefits__note p { margin: 0; } @media screen and (max-width: 1770px) { .single-strategic-product .stp-benefits__note { margin-top: 20px; font-size: 16px; } } @media screen and (max-width: 1600px) { .single-strategic-product .stp-benefits__note { margin-top: 22px; font-size: 16px; } } @media screen and (max-width: 1440px) { .single-strategic-product .stp-benefits__note { margin-top: 28px; font-size: 14px; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-benefits__note { margin-top: 26px; font-size: 12px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-benefits__note { margin-top: 24px; font-size: 12px; float: none; text-align: right; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-benefits__note { margin-top: 24px; font-size: 12px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-benefits__note { margin-top: 20px; font-size: 12px; line-height: 145%; } } .single-strategic-product .stp-panels { padding: 81px 0; background-color: #00704a; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; overflow: hidden; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-panels { padding: 70px 0; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-panels { padding: 60px 0; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-panels { padding: 50px 0; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-panels { padding: 40px 0; } } .single-strategic-product .stp-panels::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(157, 239, 219, 0.1) 0%, rgba(157, 239, 219, 0.05) 100%); pointer-events: none; z-index: 0; } .single-strategic-product .stp-panels .container { position: relative; z-index: 1; } .single-strategic-product .stp-panels .stp-section-header { margin-bottom: 39px; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-panels .stp-section-header { margin-bottom: 32px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-panels .stp-section-header { margin-bottom: 28px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-panels .stp-section-header { margin-bottom: 24px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-panels .stp-section-header { margin-bottom: 20px; } } .single-strategic-product .stp-panels .stp-section-header h2 { font-size: 36px; font-weight: 700; line-height: 150%; color: #ffffff; margin: 0; font-family: "Montserrat", sans-serif; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-panels .stp-section-header h2 { font-size: 32px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-panels .stp-section-header h2 { font-size: 30px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-panels .stp-section-header h2 { font-size: 28px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-panels .stp-section-header h2 { font-size: 24px; } } .single-strategic-product .stp-panels__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-panels__grid { gap: 14px; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-panels__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-panels__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-panels__grid { grid-template-columns: 1fr; gap: 12px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-panels__grid { gap: 10px; } } .single-strategic-product .stp-panels__item { min-height: 151px; background-color: #ffffff; border-radius: 12px; padding: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; overflow: hidden; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-panels__item { min-height: 140px; padding: 14px; border-radius: 10px; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-panels__item { min-height: 130px; padding: 14px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-panels__item { min-height: 110px; padding: 14px; border-radius: 10px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-panels__item { min-height: auto; padding: 14px; border-radius: 8px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-panels__item { padding: 12px; border-radius: 8px; } } .single-strategic-product .stp-panels__item:hover { -webkit-box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15); } @media screen and (max-width: 768px) { .single-strategic-product .stp-panels__item:hover { -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } } @media screen and (max-width: 480px) { .single-strategic-product .stp-panels__item:hover { -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); } } .single-strategic-product .stp-panels__item:hover > .stp-panels__item-desc-wrapper { max-height: 1000px; opacity: 1; margin-top: 10px; } @media screen and (max-width: 768px) { .single-strategic-product .stp-panels__item:hover > .stp-panels__item-desc-wrapper { margin-top: 8px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-panels__item:hover > .stp-panels__item-desc-wrapper { margin-top: 6px; } } .single-strategic-product .stp-panels__icon-wrapper { margin-bottom: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-panels__icon-wrapper { margin-bottom: 10px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-panels__icon-wrapper { margin-bottom: 8px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-panels__icon-wrapper { margin-bottom: 8px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-panels__icon-wrapper { margin-bottom: 6px; } } .single-strategic-product .stp-panels__icon { width: 46px; height: 46px; -o-object-fit: contain; object-fit: contain; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-panels__icon { width: 40px; height: 40px; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-panels__icon { width: 38px; height: 38px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-panels__icon { width: 40px; height: 40px; } } .single-strategic-product .stp-panels__item-title { font-size: 16px; font-weight: 700; line-height: 130%; color: #00704a; margin: 0; font-family: "Be Vietnam Pro", sans-serif; word-break: break-all; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-panels__item-title { font-size: 14px; line-height: 135%; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-panels__item-title { font-size: 13.5px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-panels__item-title { font-size: 13px; line-height: 140%; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-panels__item-title { font-size: 13px; line-height: 140%; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-panels__item-title { font-size: 12px; line-height: 145%; } } .single-strategic-product .stp-panels__item-desc-wrapper { max-height: 0; opacity: 0; overflow: hidden; -webkit-transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1); margin-top: 0; width: 100%; } @media screen and (max-width: 768px) { .single-strategic-product .stp-panels__item-desc-wrapper { -webkit-transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1); } } .single-strategic-product .stp-panels__item-desc { font-size: 14px; font-weight: 400; line-height: 160%; color: #312020; text-align: left; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-panels__item-desc { font-size: 13px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-panels__item-desc { font-size: 13px; line-height: 155%; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-panels__item-desc { font-size: 12px; line-height: 150%; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-panels__item-desc { font-size: 11px; line-height: 145%; } } .single-strategic-product .stp-panels__item-desc p { margin: 0 0 12px; } .single-strategic-product .stp-panels__item-desc p:last-child { margin-bottom: 0; } @media screen and (max-width: 768px) { .single-strategic-product .stp-panels__item-desc p { margin-bottom: 10px; } } .single-strategic-product .stp-process { padding: 92px 0 76px; margin-bottom: 92px; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-process { padding: 50px 0; margin-bottom: 70px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-process { padding: 45px 0; margin-bottom: 60px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-process { padding: 40px 0; margin-bottom: 50px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-process { padding: 32px 0; margin-bottom: 40px; } } .single-strategic-product .stp-process .stp-section-header { text-align: center; margin-bottom: 60px; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-process .stp-section-header { margin-bottom: 50px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-process .stp-section-header { margin-bottom: 40px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-process .stp-section-header { margin-bottom: 32px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-process .stp-section-header { margin-bottom: 24px; } } .single-strategic-product .stp-process__title { font-size: 36px; font-weight: 700; line-height: 150%; color: #00704a; margin: 0 0 16px; font-family: "Montserrat", sans-serif; text-align: center; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-process__title { font-size: 32px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-process__title { font-size: 30px; margin-bottom: 14px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-process__title { font-size: 28px; margin-bottom: 12px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-process__title { font-size: 24px; margin-bottom: 10px; line-height: 140%; } } .single-strategic-product .stp-process__subtitle { font-size: 16px; font-weight: 400; line-height: 150%; color: #202020; margin: 0; text-align: center; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-process__subtitle { font-size: 15px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-process__subtitle { font-size: 15px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-process__subtitle { font-size: 14px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-process__subtitle { font-size: 13px; line-height: 145%; } } .single-strategic-product .stp-process__grid { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0; } @media screen and (max-width: 1600px) { .single-strategic-product .stp-process__grid { gap: 0; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-process__grid { -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-process__grid { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-process__grid { gap: 20px; } } .single-strategic-product .stp-process__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; max-width: 200px; -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease; cursor: pointer; } @media screen and (max-width: 1700px) { .single-strategic-product .stp-process__item { -webkit-box-flex: 0; -ms-flex: 0 1 calc(50% - 56px); flex: 0 1 calc(50% - 56px); gap: 4px; min-width: 150px; max-width: 200px; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-process__item { -webkit-box-flex: 0; -ms-flex: 0 1 calc(50% - 52px); flex: 0 1 calc(50% - 52px); min-width: 130px; max-width: 160px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-process__item { -webkit-box-flex: 0; -ms-flex: 0 1 calc(50% - 50px); flex: 0 1 calc(50% - 50px); min-width: 120px; max-width: 150px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-process__item { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; width: 100%; min-width: unset; cursor: default; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-process__item { padding: 0 12px; } } .single-strategic-product .stp-process__item:hover { -webkit-transform: translateY(-8px); transform: translateY(-8px); } @media screen and (max-width: 768px) { .single-strategic-product .stp-process__item:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); } } @media screen and (max-width: 480px) { .single-strategic-product .stp-process__item:hover { -webkit-transform: none; transform: none; } } .single-strategic-product .stp-process__item:hover .stp-process__icon-wrapper { border-color: #00704a; background-color: rgba(73, 168, 136, 0.05); -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-box-shadow: 0 4px 12px rgba(73, 168, 136, 0.2); box-shadow: 0 4px 12px rgba(73, 168, 136, 0.2); } @media screen and (max-width: 768px) { .single-strategic-product .stp-process__item:hover .stp-process__icon-wrapper { -webkit-transform: scale(1.05); transform: scale(1.05); } } @media screen and (max-width: 480px) { .single-strategic-product .stp-process__item:hover .stp-process__icon-wrapper { -webkit-transform: none; transform: none; -webkit-box-shadow: none; box-shadow: none; } } .single-strategic-product .stp-process__item:hover .stp-process__icon { -webkit-transform: scale(1.05); transform: scale(1.05); } @media screen and (max-width: 768px) { .single-strategic-product .stp-process__item:hover .stp-process__icon { -webkit-transform: scale(1.05); transform: scale(1.05); } } @media screen and (max-width: 480px) { .single-strategic-product .stp-process__item:hover .stp-process__icon { -webkit-transform: none; transform: none; } } .single-strategic-product .stp-process__item:hover .stp-process__item-desc { color: #00704a; } .single-strategic-product .stp-process__item:hover + .stp-process__arrow img { -webkit-transform: translateX(4px); transform: translateX(4px); opacity: 1; } .single-strategic-product .stp-process__icon-wrapper { width: 110px; height: 110px; border: 2px solid #d9d9d9; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 29px; background-color: #ffffff; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @media screen and (max-width: 1440px) { .single-strategic-product .stp-process__icon-wrapper { width: 110px; height: 110px; margin-bottom: 18px; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-process__icon-wrapper { width: 100px; height: 100px; margin-bottom: 16px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-process__icon-wrapper { width: 90px; height: 90px; margin-bottom: 14px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-process__icon-wrapper { width: 100px; height: 100px; margin-bottom: 16px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-process__icon-wrapper { width: 90px; height: 90px; margin-bottom: 14px; } } @media screen and (max-width: 360px) { .single-strategic-product .stp-process__icon-wrapper { width: 80px; height: 80px; margin-bottom: 12px; } } .single-strategic-product .stp-process__icon { width: 60px; height: 60px; -o-object-fit: contain; object-fit: contain; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @media screen and (max-width: 1440px) { .single-strategic-product .stp-process__icon { width: 55px; height: 55px; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-process__icon { width: 50px; height: 50px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-process__icon { width: 45px; height: 45px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-process__icon { width: 50px; height: 50px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-process__icon { width: 45px; height: 45px; } } @media screen and (max-width: 360px) { .single-strategic-product .stp-process__icon { width: 40px; height: 40px; } } .single-strategic-product .stp-process__item-desc { font-size: 14px; font-weight: 400; line-height: 150%; color: #202020; margin: 0; font-family: "Be Vietnam Pro", sans-serif; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } .single-strategic-product .stp-process__item-desc p { margin: 0; } .single-strategic-product .stp-process__item-desc p:not(:last-child) { margin-bottom: 8px; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-process__item-desc { font-size: 13px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-process__item-desc { font-size: 12px; line-height: 145%; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-process__item-desc { font-size: 13px; line-height: 150%; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-process__item-desc { font-size: 12px; line-height: 145%; } } @media screen and (max-width: 360px) { .single-strategic-product .stp-process__item-desc { font-size: 11px; line-height: 140%; } } .single-strategic-product .stp-process__arrow { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-item-align: start; align-self: flex-start; padding-top: 50px; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-process__arrow { margin: 0 16px; padding-top: 50px; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-process__arrow { margin: 0 12px; padding-top: 50px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-process__arrow { margin: 0 10px; padding-top: 45px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-process__arrow { display: none; } } .single-strategic-product .stp-process__arrow img { width: auto; height: 23px; -o-object-fit: contain; object-fit: contain; -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease; opacity: 0.6; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-process__arrow img { height: 20px; } } @media screen and (max-width: 1200px) { .single-strategic-product .stp-process__arrow img { height: 18px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-process__arrow img { height: 16px; } } @media screen and (max-width: 1400px) { .single-strategic-product .stp-process .stp-process__item:hover { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } @media screen and (max-width: 992px) { .single-strategic-product .stp-process .stp-process__item:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); } } .single-strategic-product .stp-instructions { padding: 0; } .single-strategic-product .stp-faq { padding: 50px 0; } .single-strategic-product .stp-references { padding: 0 0 50px; } .single-strategic-product .stp-references .stp-section-header { margin-bottom: 24px; } .single-strategic-product .stp-references .stp-section-header h2 { font-size: 36px; font-weight: 700; line-height: 150%; color: #00704a; margin: 0; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-references .stp-section-header h2 { font-size: 32px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-references .stp-section-header h2 { font-size: 30px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-references .stp-section-header h2 { font-size: 28px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-references .stp-section-header h2 { font-size: 24px; line-height: 140%; } } .single-strategic-product .stp-references__contents { font-size: 16px; font-weight: 400; line-height: 150%; color: #202020; margin: 0; font-family: "Be Vietnam Pro", sans-serif; word-break: break-word; text-align: justify; } @media screen and (max-width: 1440px) { .single-strategic-product .stp-references__contents { font-size: 15px; } } @media screen and (max-width: 992px) { .single-strategic-product .stp-references__contents { font-size: 15px; } } @media screen and (max-width: 768px) { .single-strategic-product .stp-references__contents { font-size: 14px; } } @media screen and (max-width: 480px) { .single-strategic-product .stp-references__contents { font-size: 13px; line-height: 145%; } } .single-strategic-product .stp-references__contents p { margin: 0 0 12px; } .single-strategic-product .stp-references__contents p:last-child { margin-bottom: 0; } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .single-lab-test__wrapper { display: grid; grid-template-columns: 320px 1fr; -webkit-box-align: start; -ms-flex-align: start; align-items: start; gap: 0; padding-bottom: 50px; border-top: 1px solid #dcdcdc; position: relative; } @media screen and (max-width: 1770px) { .single-lab-test__wrapper { grid-template-columns: 288px 1fr; padding-bottom: 45px; } } @media screen and (max-width: 1440px) { .single-lab-test__wrapper { grid-template-columns: 256px 1fr; padding-bottom: 40px; } } @media screen and (max-width: 1200px) { .single-lab-test__wrapper { grid-template-columns: 1fr; gap: 30px; padding-bottom: 35px; } } @media screen and (max-width: 992px) { .single-lab-test__wrapper { gap: 30px; padding-bottom: 30px; } } @media screen and (max-width: 768px) { .single-lab-test__wrapper { gap: 25px; padding-bottom: 25px; } } @media screen and (max-width: 640px) { .single-lab-test__wrapper { gap: 20px; padding-bottom: 20px; } } @media screen and (max-width: 480px) { .single-lab-test__wrapper { gap: 25px; padding-bottom: 25px; } } .single-lab-test__content { min-width: 0; padding: 30px 0 0; } .lab-test-header { margin-bottom: 24px; } .lab-test-header__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 24px; margin-bottom: 24px; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (max-width: 768px) { .lab-test-header__top { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .lab-test-header__title { font-size: 32px; font-weight: 700; color: #312020; margin: 0; line-height: 150%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } @media screen and (max-width: 1770px) { .lab-test-header__title { font-size: 29px; } } @media screen and (max-width: 1440px) { .lab-test-header__title { font-size: 25px; } } @media screen and (max-width: 1200px) { .lab-test-header__title { font-size: 22px; } } @media screen and (max-width: 992px) { .lab-test-header__title { font-size: 19px; } } @media screen and (max-width: 768px) { .lab-test-header__title { font-size: 16px; } } @media screen and (max-width: 640px) { .lab-test-header__title { font-size: 14px; } } @media screen and (max-width: 480px) { .lab-test-header__title { font-size: 16px; } } .lab-test-header__add-to-cart { background-color: #00704a; text-transform: uppercase; border-radius: 6px; font-size: 16px; font-family: "Montserrat", sans-serif; font-weight: 600; padding: 13px 40px; max-width: 250px; color: white; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: none; cursor: pointer; position: relative; overflow: hidden; } @media screen and (max-width: 1770px) { .lab-test-header__add-to-cart { font-size: 14px; padding: 12px 36px; } } @media screen and (max-width: 1440px) { .lab-test-header__add-to-cart { font-size: 14px; padding: 12px 32px; } } @media screen and (max-width: 1200px) { .lab-test-header__add-to-cart { font-size: 14px; padding: 12px 28px; } } @media screen and (max-width: 992px) { .lab-test-header__add-to-cart { font-size: 14px; padding: 11px 24px; } } @media screen and (max-width: 768px) { .lab-test-header__add-to-cart { font-size: 14px; padding: 11px 24px; } } @media screen and (max-width: 640px) { .lab-test-header__add-to-cart { font-size: 13px; padding: 10px 20px; } } @media screen and (max-width: 480px) { .lab-test-header__add-to-cart { font-size: 13px; padding: 10px 20px; } } .lab-test-header__add-to-cart:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); opacity: 0.9; -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.3); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.3); } .lab-test-header__add-to-cart:active { -webkit-transform: translateY(0); transform: translateY(0); -webkit-box-shadow: 0 2px 6px rgba(0, 112, 74, 0.2); box-shadow: 0 2px 6px rgba(0, 112, 74, 0.2); } .lab-test-header__meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; } .lab-test-header__price { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 9px; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .lab-test-header__price .lab-test-price__label { font-size: 28px; font-weight: 700; font-family: "Montserrat", sans-serif; line-height: 150%; color: #312020; } .lab-test-header__price .lab-test-price__amount { font-size: 32px; font-family: "Montserrat", sans-serif; font-weight: 400; line-height: 28px; color: #00704a; } .lab-test-header__price .lab-test-price__original { font-size: 22px; color: #312020; margin-left: 2px; } .lab-test-header__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 28px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .lab-test-header__action-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: nowrap; flex-wrap: nowrap; gap: 8px; font-size: 16px; font-weight: 600; outline: none; border: none; padding: 0; background-color: transparent; color: #312020; font-family: "Montserrat", sans-serif; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .lab-test-header__action-item svg, .lab-test-header__action-item img { width: 24px; height: 24px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .lab-test-header__action-item:hover { color: #00704a; -webkit-transform: translateY(-2px); transform: translateY(-2px); } .lab-test-header__action-item:hover svg { fill: #00704a; } .lab-test-header__action-item:hover img { -webkit-filter: brightness(0) saturate(100%) invert(31%) sepia(66%) saturate(755%) hue-rotate(130deg) brightness(95%) contrast(102%); filter: brightness(0) saturate(100%) invert(31%) sepia(66%) saturate(755%) hue-rotate(130deg) brightness(95%) contrast(102%); } .lab-test-content { margin-top: 24px; } .lab-test-accordion { margin-bottom: 10px; border: none; border-radius: 20px; overflow: hidden; background: rgba(0, 112, 74, 0.1); } .lab-test-accordion__item.is-active .lab-test-accordion__content { display: block; } .lab-test-accordion__item.is-active .lab-test-accordion__icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .lab-test-accordion__item.is-active .lab-test-accordion__header { background: rgba(0, 112, 74, 0.1); padding: 30px 30px 16px; } @media screen and (max-width: 1770px) { .lab-test-accordion__item.is-active .lab-test-accordion__header { padding: 27px 27px 14px; } } @media screen and (max-width: 1440px) { .lab-test-accordion__item.is-active .lab-test-accordion__header { padding: 24px 24px 13px; } } @media screen and (max-width: 1200px) { .lab-test-accordion__item.is-active .lab-test-accordion__header { padding: 21px 21px 11px; } } @media screen and (max-width: 992px) { .lab-test-accordion__item.is-active .lab-test-accordion__header { padding: 18px 18px 10px; } } @media screen and (max-width: 768px) { .lab-test-accordion__item.is-active .lab-test-accordion__header { padding: 15px 15px 8px; } } @media screen and (max-width: 640px) { .lab-test-accordion__item.is-active .lab-test-accordion__header { padding: 12px 12px 6px; } } @media screen and (max-width: 480px) { .lab-test-accordion__item.is-active .lab-test-accordion__header { padding: 15px 15px 8px; } } .lab-test-accordion__item.is-active .lab-test-accordion__title { color: #00704a; } .lab-test-accordion__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; padding: 30px; border: none; cursor: pointer; -webkit-transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s; text-align: left; background: rgba(0, 112, 74, 0.1); } @media screen and (max-width: 1770px) { .lab-test-accordion__header { padding: 27px; } } @media screen and (max-width: 1440px) { .lab-test-accordion__header { padding: 24px; } } @media screen and (max-width: 1200px) { .lab-test-accordion__header { padding: 21px; } } @media screen and (max-width: 992px) { .lab-test-accordion__header { padding: 18px; } } @media screen and (max-width: 768px) { .lab-test-accordion__header { padding: 15px; } } @media screen and (max-width: 640px) { .lab-test-accordion__header { padding: 12px; } } @media screen and (max-width: 480px) { .lab-test-accordion__header { padding: 15px; } } .lab-test-accordion__header:hover { background: rgba(0, 112, 74, 0.12); } .lab-test-accordion__title { font-size: 20px; font-weight: 600; color: #00704a; margin: 0; -webkit-transition: color 0.3s; transition: color 0.3s; } @media screen and (max-width: 1770px) { .lab-test-accordion__title { font-size: 18px; } } @media screen and (max-width: 1440px) { .lab-test-accordion__title { font-size: 16px; } } @media screen and (max-width: 1200px) { .lab-test-accordion__title { font-size: 14px; } } @media screen and (max-width: 992px) { .lab-test-accordion__title { font-size: 12px; } } @media screen and (max-width: 768px) { .lab-test-accordion__title { font-size: 12px; } } @media screen and (max-width: 640px) { .lab-test-accordion__title { font-size: 12px; } } @media screen and (max-width: 480px) { .lab-test-accordion__title { font-size: 12px; } } .lab-test-accordion__icon { -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; color: #00704a; } .lab-test-accordion__content { display: none; -webkit-animation: slideDown 0.3s ease-out; animation: slideDown 0.3s ease-out; } .lab-test-accordion__content.lab-test-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 30px; } @media screen and (max-width: 1770px) { .lab-test-accordion__content.lab-test-info-grid { gap: 22px; padding: 27px; } } @media screen and (max-width: 1440px) { .lab-test-accordion__content.lab-test-info-grid { gap: 19px; padding: 24px; } } @media screen and (max-width: 1200px) { .lab-test-accordion__content.lab-test-info-grid { grid-template-columns: repeat(2, 1fr); gap: 17px; padding: 21px; } } @media screen and (max-width: 992px) { .lab-test-accordion__content.lab-test-info-grid { gap: 14px; padding: 18px; } } @media screen and (max-width: 768px) { .lab-test-accordion__content.lab-test-info-grid { grid-template-columns: 1fr; gap: 12px; padding: 15px; } } @media screen and (max-width: 640px) { .lab-test-accordion__content.lab-test-info-grid { gap: 10px; padding: 12px; } } @media screen and (max-width: 480px) { .lab-test-accordion__content.lab-test-info-grid { gap: 12px; padding: 15px; } } .lab-test-accordion__body { padding: 0 30px 30px; color: #312020; font-weight: 400; font-family: "Be Vietnam Pro", sans-serif; line-height: 150%; background: rgba(0, 112, 74, 0.1); font-size: 18px; } @media screen and (max-width: 1770px) { .lab-test-accordion__body { padding: 0 27px 27px; font-size: 16px; } } @media screen and (max-width: 1440px) { .lab-test-accordion__body { padding: 0 24px 24px; font-size: 14px; } } @media screen and (max-width: 1200px) { .lab-test-accordion__body { padding: 0 21px 21px; font-size: 13px; } } @media screen and (max-width: 992px) { .lab-test-accordion__body { padding: 0 18px 18px; font-size: 11px; } } @media screen and (max-width: 768px) { .lab-test-accordion__body { padding: 0 15px 15px; font-size: 12px; } } @media screen and (max-width: 640px) { .lab-test-accordion__body { padding: 0 12px 12px; font-size: 12px; } } @media screen and (max-width: 480px) { .lab-test-accordion__body { padding: 0 15px 15px; font-size: 12px; } } .lab-test-accordion__body p { margin: 0 0 16px 0; } @media screen and (max-width: 1770px) { .lab-test-accordion__body p { margin-bottom: 14px; } } @media screen and (max-width: 1440px) { .lab-test-accordion__body p { margin-bottom: 13px; } } @media screen and (max-width: 1200px) { .lab-test-accordion__body p { margin-bottom: 11px; } } @media screen and (max-width: 992px) { .lab-test-accordion__body p { margin-bottom: 10px; } } @media screen and (max-width: 768px) { .lab-test-accordion__body p { margin-bottom: 8px; } } @media screen and (max-width: 640px) { .lab-test-accordion__body p { margin-bottom: 6px; } } @media screen and (max-width: 480px) { .lab-test-accordion__body p { margin-bottom: 8px; } } .lab-test-accordion__body p:last-child { margin-bottom: 0; } .lab-test-accordion__body h2, .lab-test-accordion__body h3, .lab-test-accordion__body h4, .lab-test-accordion__body h5, .lab-test-accordion__body h6 { margin: 0px 0 12px 0; } .lab-test-accordion .lab-test-packages-list { display: grid; gap: 30px; row-gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } @media screen and (max-width: 1770px) { .lab-test-accordion .lab-test-packages-list { gap: 27px; row-gap: 18px; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); } } @media screen and (max-width: 1440px) { .lab-test-accordion .lab-test-packages-list { gap: 24px; row-gap: 16px; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); } } @media screen and (max-width: 1200px) { .lab-test-accordion .lab-test-packages-list { gap: 21px; row-gap: 14px; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); } } @media screen and (max-width: 992px) { .lab-test-accordion .lab-test-packages-list { gap: 18px; row-gap: 12px; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); } } @media screen and (max-width: 768px) { .lab-test-accordion .lab-test-packages-list { gap: 15px; row-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } } @media screen and (max-width: 640px) { .lab-test-accordion .lab-test-packages-list { gap: 12px; row-gap: 8px; grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 480px) { .lab-test-accordion .lab-test-packages-list { gap: 15px; row-gap: 10px; grid-template-columns: 1fr; } } @-webkit-keyframes slideDown { from { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideDown { from { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } .lab-test-info { margin: 32px 0; } @media screen and (max-width: 1770px) { .lab-test-info { margin: 29px 0; } } @media screen and (max-width: 1440px) { .lab-test-info { margin: 26px 0; } } @media screen and (max-width: 1200px) { .lab-test-info { margin: 22px 0; } } @media screen and (max-width: 992px) { .lab-test-info { margin: 19px 0; } } @media screen and (max-width: 768px) { .lab-test-info { margin: 16px 0; } } @media screen and (max-width: 640px) { .lab-test-info { margin: 13px 0; } } @media screen and (max-width: 480px) { .lab-test-info { margin: 16px 0; } } .lab-test-info .lab-test-section__title { font-size: 24px; font-weight: 700; color: #333; margin-bottom: 24px; } @media screen and (max-width: 1770px) { .lab-test-info .lab-test-section__title { font-size: 22px; margin-bottom: 22px; } } @media screen and (max-width: 1440px) { .lab-test-info .lab-test-section__title { font-size: 19px; margin-bottom: 19px; } } @media screen and (max-width: 1200px) { .lab-test-info .lab-test-section__title { font-size: 17px; margin-bottom: 17px; } } @media screen and (max-width: 992px) { .lab-test-info .lab-test-section__title { font-size: 14px; margin-bottom: 14px; } } @media screen and (max-width: 768px) { .lab-test-info .lab-test-section__title { font-size: 12px; margin-bottom: 12px; } } @media screen and (max-width: 640px) { .lab-test-info .lab-test-section__title { font-size: 12px; margin-bottom: 10px; } } @media screen and (max-width: 480px) { .lab-test-info .lab-test-section__title { font-size: 12px; margin-bottom: 12px; } } .lab-test-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; } @media screen and (max-width: 1770px) { .lab-test-info-grid { gap: 27px; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); } } @media screen and (max-width: 1440px) { .lab-test-info-grid { gap: 24px; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); } } @media screen and (max-width: 1200px) { .lab-test-info-grid { gap: 21px; grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 992px) { .lab-test-info-grid { gap: 18px; grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 768px) { .lab-test-info-grid { gap: 15px; grid-template-columns: 1fr; } } @media screen and (max-width: 640px) { .lab-test-info-grid { gap: 12px; grid-template-columns: 1fr; } } @media screen and (max-width: 480px) { .lab-test-info-grid { gap: 15px; grid-template-columns: 1fr; } } .lab-test-info-item { padding: 0; background: transparent; border: none; border-radius: 0; -webkit-transition: none; transition: none; } .lab-test-info-item__title { font-size: 18px; font-weight: 600; color: #312020; margin-bottom: 20px; line-height: 150%; } @media screen and (max-width: 1770px) { .lab-test-info-item__title { font-size: 16px; margin-bottom: 18px; } } @media screen and (max-width: 1440px) { .lab-test-info-item__title { font-size: 14px; margin-bottom: 16px; } } @media screen and (max-width: 1200px) { .lab-test-info-item__title { font-size: 13px; margin-bottom: 14px; } } @media screen and (max-width: 992px) { .lab-test-info-item__title { font-size: 12px; margin-bottom: 12px; } } @media screen and (max-width: 768px) { .lab-test-info-item__title { font-size: 12px; margin-bottom: 10px; } } @media screen and (max-width: 640px) { .lab-test-info-item__title { font-size: 12px; margin-bottom: 8px; } } @media screen and (max-width: 480px) { .lab-test-info-item__title { font-size: 12px; margin-bottom: 10px; } } .lab-test-info-item__description { font-size: 18px; font-weight: 400; color: #312020; line-height: 150%; margin: 0; } @media screen and (max-width: 1770px) { .lab-test-info-item__description { font-size: 16px; } } @media screen and (max-width: 1440px) { .lab-test-info-item__description { font-size: 14px; } } @media screen and (max-width: 1200px) { .lab-test-info-item__description { font-size: 13px; } } @media screen and (max-width: 992px) { .lab-test-info-item__description { font-size: 12px; } } @media screen and (max-width: 768px) { .lab-test-info-item__description { font-size: 12px; } } @media screen and (max-width: 640px) { .lab-test-info-item__description { font-size: 12px; } } @media screen and (max-width: 480px) { .lab-test-info-item__description { font-size: 12px; } } .lab-test-info-table__row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 1rem 0; border-bottom: 1px solid #f0f0f0; } .lab-test-info-table__row:last-child { border-bottom: none; } .lab-test-info-table__label { font-weight: 600; color: #333; } .lab-test-info-table__value { color: #666; } .lab-test-indicators-section { margin: 32px 0; } @media screen and (max-width: 1770px) { .lab-test-indicators-section { margin: 29px 0; } } @media screen and (max-width: 1440px) { .lab-test-indicators-section { margin: 26px 0; } } @media screen and (max-width: 1200px) { .lab-test-indicators-section { margin: 22px 0; } } @media screen and (max-width: 992px) { .lab-test-indicators-section { margin: 19px 0; } } @media screen and (max-width: 768px) { .lab-test-indicators-section { margin: 16px 0; } } @media screen and (max-width: 640px) { .lab-test-indicators-section { margin: 13px 0; } } @media screen and (max-width: 480px) { .lab-test-indicators-section { margin: 16px 0; } } .lab-test-indicators-section .lab-test-section__title { font-size: 24px; font-weight: 700; color: #333; margin-bottom: 24px; } @media screen and (max-width: 1770px) { .lab-test-indicators-section .lab-test-section__title { font-size: 22px; margin-bottom: 22px; } } @media screen and (max-width: 1440px) { .lab-test-indicators-section .lab-test-section__title { font-size: 19px; margin-bottom: 19px; } } @media screen and (max-width: 1200px) { .lab-test-indicators-section .lab-test-section__title { font-size: 17px; margin-bottom: 17px; } } @media screen and (max-width: 992px) { .lab-test-indicators-section .lab-test-section__title { font-size: 14px; margin-bottom: 14px; } } @media screen and (max-width: 768px) { .lab-test-indicators-section .lab-test-section__title { font-size: 12px; margin-bottom: 12px; } } @media screen and (max-width: 640px) { .lab-test-indicators-section .lab-test-section__title { font-size: 12px; margin-bottom: 10px; } } @media screen and (max-width: 480px) { .lab-test-indicators-section .lab-test-section__title { font-size: 12px; margin-bottom: 12px; } } .lab-test-packages-cards { display: grid; gap: 8px; margin-bottom: 16px; grid-template-columns: 1.34fr repeat(3, 1fr); } @media screen and (max-width: 1770px) { .lab-test-packages-cards { grid-template-columns: 1.2fr repeat(3, 1fr); gap: 7px; margin-bottom: 14px; } } @media screen and (max-width: 1440px) { .lab-test-packages-cards { grid-template-columns: 1.1fr repeat(3, 1fr); gap: 6px; margin-bottom: 13px; } } @media screen and (max-width: 1200px) { .lab-test-packages-cards { gap: 5px; margin-bottom: 11px; } } @media screen and (max-width: 992px) { .lab-test-packages-cards { gap: 5px; margin-bottom: 10px; } } @media screen and (max-width: 768px) { .lab-test-packages-cards { gap: 4px; margin-bottom: 8px; } } @media screen and (max-width: 640px) { .lab-test-packages-cards { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 4px; margin-bottom: 8px; } } @media screen and (max-width: 480px) { .lab-test-packages-cards { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 4px; margin-bottom: 8px; } } .lab-test-packages-cards__hero { height: 71px; border-radius: 14px; overflow: hidden; background: #f0f0f0; -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (max-width: 1770px) { .lab-test-packages-cards__hero { height: 64px; border-radius: 13px; } } @media screen and (max-width: 1440px) { .lab-test-packages-cards__hero { height: 57px; border-radius: 12px; } } @media screen and (max-width: 1200px) { .lab-test-packages-cards__hero { height: 50px; border-radius: 11px; } } @media screen and (max-width: 992px) { .lab-test-packages-cards__hero { height: 43px; border-radius: 10px; } } @media screen and (max-width: 768px) { .lab-test-packages-cards__hero { height: 50px; border-radius: 11px; } } @media screen and (max-width: 640px) { .lab-test-packages-cards__hero { display: none; } } @media screen and (max-width: 480px) { .lab-test-packages-cards__hero { display: none; } } .lab-test-packages-cards__hero:hover .lab-test-packages-cards__hero-image { -webkit-transform: scale(1.2); transform: scale(1.2); } .lab-test-packages-cards__hero-image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .lab-test-package-card { height: 71px; min-width: 160px; border-radius: 14px; overflow: hidden; background: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 8px 16px; border: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -ms-flex-negative: 0; flex-shrink: 0; position: relative; cursor: pointer; } @media screen and (max-width: 1770px) { .lab-test-package-card { height: 64px; min-width: 144px; border-radius: 13px; padding: 7px 14px; } } @media screen and (max-width: 1440px) { .lab-test-package-card { height: 57px; min-width: 142px; border-radius: 12px; padding: 6px 13px; } } @media screen and (max-width: 1200px) { .lab-test-package-card { height: 50px; min-width: 130px; border-radius: 11px; padding: 5px 11px; } } @media screen and (max-width: 992px) { .lab-test-package-card { height: 43px; min-width: 96px; border-radius: 10px; padding: 4px 10px; } } @media screen and (max-width: 768px) { .lab-test-package-card { height: 50px; min-width: 112px; border-radius: 11px; padding: 5px 11px; } } @media screen and (max-width: 640px) { .lab-test-package-card { height: 44px; min-width: 110px; border-radius: 10px; padding: 4px 8px; } } @media screen and (max-width: 480px) { .lab-test-package-card { height: 50px; min-width: 100px; border-radius: 11px; padding: 5px 10px; } } .lab-test-package-card:hover { -webkit-transform: translateY(-2px) scale(1.02); transform: translateY(-2px) scale(1.02); -webkit-box-shadow: 0 8px 24px rgba(0, 112, 74, 0.25); box-shadow: 0 8px 24px rgba(0, 112, 74, 0.25); } .lab-test-package-card:active { -webkit-transform: translateY(-2px) scale(1.01); transform: translateY(-2px) scale(1.01); -webkit-box-shadow: 0 4px 16px rgba(0, 112, 74, 0.2); box-shadow: 0 4px 16px rgba(0, 112, 74, 0.2); } .lab-test-package-card__image-wrapper { width: 100%; height: 100%; overflow: hidden; background: #f0f0f0; -ms-flex-negative: 0; flex-shrink: 0; position: absolute; top: 0; left: 0; z-index: 0; } .lab-test-package-card__image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .lab-test-package-card__badge { height: 20px; min-width: 60px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 0 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: rgba(0, 112, 74, 0.5); color: #fff; border-radius: 20px; font-size: 12px; line-height: 20px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (max-width: 1770px) { .lab-test-package-card__badge { height: 14px; min-width: 43px; padding: 0 5px; font-size: 8px; line-height: 14px; border-radius: 14px; } } @media screen and (max-width: 1440px) { .lab-test-package-card__badge { height: 13px; min-width: 38px; padding: 0 5px; font-size: 7px; line-height: 13px; border-radius: 13px; } } @media screen and (max-width: 1200px) { .lab-test-package-card__badge { height: 11px; min-width: 33px; padding: 0 4px; font-size: 7px; line-height: 11px; border-radius: 11px; } } @media screen and (max-width: 992px) { .lab-test-package-card__badge { height: 10px; min-width: 29px; padding: 0 3px; font-size: 6px; line-height: 10px; border-radius: 10px; } } @media screen and (max-width: 768px) { .lab-test-package-card__badge { height: 13px; min-width: 38px; padding: 0 5px; font-size: 7px; line-height: 13px; border-radius: 13px; } } @media screen and (max-width: 640px) { .lab-test-package-card__badge { height: 11px; min-width: 32px; padding: 0 4px; font-size: 6px; line-height: 11px; border-radius: 11px; } } @media screen and (max-width: 480px) { .lab-test-package-card__badge { height: 13px; min-width: 36px; padding: 0 5px; font-size: 7px; line-height: 13px; border-radius: 13px; } } .lab-test-package-card__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; z-index: 1; } @media screen and (max-width: 1770px) { .lab-test-package-card__content { gap: 3px; } } @media screen and (max-width: 1440px) { .lab-test-package-card__content { gap: 3px; } } @media screen and (max-width: 1200px) { .lab-test-package-card__content { gap: 2px; } } @media screen and (max-width: 992px) { .lab-test-package-card__content { gap: 2px; } } @media screen and (max-width: 768px) { .lab-test-package-card__content { gap: 2px; } } @media screen and (max-width: 640px) { .lab-test-package-card__content { gap: 2px; } } @media screen and (max-width: 480px) { .lab-test-package-card__content { gap: 2px; } } .lab-test-package-card__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 8px; } @media screen and (max-width: 1770px) { .lab-test-package-card__top { gap: 7px; } } @media screen and (max-width: 1440px) { .lab-test-package-card__top { gap: 6px; } } @media screen and (max-width: 1200px) { .lab-test-package-card__top { gap: 5px; } } @media screen and (max-width: 992px) { .lab-test-package-card__top { gap: 4px; } } @media screen and (max-width: 768px) { .lab-test-package-card__top { gap: 5px; } } @media screen and (max-width: 640px) { .lab-test-package-card__top { gap: 4px; } } @media screen and (max-width: 480px) { .lab-test-package-card__top { gap: 5px; } } .lab-test-package-card__name { font-size: 16px; font-weight: 700; color: #fff; margin: 0; line-height: 150%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media screen and (max-width: 1770px) { .lab-test-package-card__name { font-size: 12px; } } @media screen and (max-width: 1440px) { .lab-test-package-card__name { font-size: 11px; } } @media screen and (max-width: 1200px) { .lab-test-package-card__name { font-size: 10px; } } @media screen and (max-width: 992px) { .lab-test-package-card__name { font-size: 9px; } } @media screen and (max-width: 768px) { .lab-test-package-card__name { font-size: 10px; } } @media screen and (max-width: 640px) { .lab-test-package-card__name { font-size: 9px; } } @media screen and (max-width: 480px) { .lab-test-package-card__name { font-size: 10px; } } .lab-test-package-card__price { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; gap: 4px; row-gap: 0; } @media screen and (max-width: 1770px) { .lab-test-package-card__price { gap: 3px; } } @media screen and (max-width: 1440px) { .lab-test-package-card__price { gap: 3px; } } @media screen and (max-width: 1200px) { .lab-test-package-card__price { gap: 2px; } } @media screen and (max-width: 992px) { .lab-test-package-card__price { gap: 2px; } } @media screen and (max-width: 768px) { .lab-test-package-card__price { gap: 2px; } } @media screen and (max-width: 640px) { .lab-test-package-card__price { gap: 2px; } } @media screen and (max-width: 480px) { .lab-test-package-card__price { gap: 2px; } } .lab-test-package-card__original-price { font-size: 12px; color: #f5f5f5; text-decoration: line-through; } @media screen and (max-width: 1770px) { .lab-test-package-card__original-price { font-size: 8px; } } @media screen and (max-width: 1440px) { .lab-test-package-card__original-price { font-size: 8px; } } @media screen and (max-width: 1200px) { .lab-test-package-card__original-price { font-size: 7px; } } @media screen and (max-width: 992px) { .lab-test-package-card__original-price { font-size: 6px; } } @media screen and (max-width: 768px) { .lab-test-package-card__original-price { font-size: 7px; } } @media screen and (max-width: 640px) { .lab-test-package-card__original-price { font-size: 6px; } } @media screen and (max-width: 480px) { .lab-test-package-card__original-price { font-size: 7px; } } .lab-test-package-card__sale-price { font-size: 16px; font-weight: 700; color: #fff; line-height: 150%; } @media screen and (max-width: 1770px) { .lab-test-package-card__sale-price { font-size: 12px; } } @media screen and (max-width: 1440px) { .lab-test-package-card__sale-price { font-size: 11px; } } @media screen and (max-width: 1200px) { .lab-test-package-card__sale-price { font-size: 10px; } } @media screen and (max-width: 992px) { .lab-test-package-card__sale-price { font-size: 9px; } } @media screen and (max-width: 768px) { .lab-test-package-card__sale-price { font-size: 10px; } } @media screen and (max-width: 640px) { .lab-test-package-card__sale-price { font-size: 9px; } } @media screen and (max-width: 480px) { .lab-test-package-card__sale-price { font-size: 10px; } } .lab-test-packages-table { border: 1px solid #dcdee0; border-radius: 8px; border-right: none; overflow: hidden; background: #fff; outline: none; } .lab-test-packages-table__header { background: #fff; border-bottom: 2px solid #dcdee0; } .lab-test-packages-table__row { display: grid; grid-template-columns: 1.34fr repeat(var(--package-count, 3), 1fr); gap: 0; border-bottom: 1px solid #e8e9ea; } @media screen and (max-width: 1770px) { .lab-test-packages-table__row { grid-template-columns: 1.32fr repeat(var(--package-count, 3), 1fr); } } @media screen and (max-width: 1440px) { .lab-test-packages-table__row { grid-template-columns: 1.3fr repeat(var(--package-count, 3), 1fr); } } @media screen and (max-width: 1200px) { .lab-test-packages-table__row { grid-template-columns: 1.28fr repeat(var(--package-count, 3), 1fr); } } @media screen and (max-width: 992px) { .lab-test-packages-table__row { grid-template-columns: 1.26fr repeat(var(--package-count, 3), 1fr); } } @media screen and (max-width: 768px) { .lab-test-packages-table__row { grid-template-columns: 3fr repeat(var(--package-count, 3), 1fr); } } @media screen and (max-width: 640px) { .lab-test-packages-table__row { grid-template-columns: 4fr repeat(var(--package-count, 3), 1fr); } } @media screen and (max-width: 480px) { .lab-test-packages-table__row { grid-template-columns: 3fr repeat(var(--package-count, 3), 1fr); } } .lab-test-packages-table__row:last-child { border-bottom: none; } .lab-test-packages-table__header .lab-test-packages-table__row { border-bottom: 2px solid #dcdee0; } .lab-test-packages-table__header .lab-test-packages-table__row:last-child { border-bottom: 2px solid #dcdee0; } .lab-test-packages-table__cell { text-align: center; } .lab-test-packages-table__cell--name { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 8px; text-align: left; padding: 12px; } @media screen and (max-width: 1770px) { .lab-test-packages-table__cell--name { gap: 7px; padding: 11px; } } @media screen and (max-width: 1440px) { .lab-test-packages-table__cell--name { gap: 7px; padding: 10px; } } @media screen and (max-width: 1200px) { .lab-test-packages-table__cell--name { gap: 6px; padding: 9px; } } @media screen and (max-width: 992px) { .lab-test-packages-table__cell--name { gap: 6px; padding: 8px; } } @media screen and (max-width: 768px) { .lab-test-packages-table__cell--name { gap: 8px; padding: 12px 16px; } } @media screen and (max-width: 640px) { .lab-test-packages-table__cell--name { gap: 8px; padding: 10px 12px; } } @media screen and (max-width: 480px) { .lab-test-packages-table__cell--name { gap: 8px; padding: 12px 16px; } } .lab-test-packages-table__cell--name img { margin-top: 5px; width: 16px; height: 16px; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } @media screen and (max-width: 1770px) { .lab-test-packages-table__cell--name img { width: 14px; height: 14px; margin-top: 4px; } } @media screen and (max-width: 1440px) { .lab-test-packages-table__cell--name img { width: 13px; height: 13px; margin-top: 3px; } } @media screen and (max-width: 1200px) { .lab-test-packages-table__cell--name img { width: 12px; height: 12px; margin-top: 3px; } } @media screen and (max-width: 992px) { .lab-test-packages-table__cell--name img { width: 10px; height: 10px; margin-top: 2px; } } @media screen and (max-width: 768px) { .lab-test-packages-table__cell--name img { display: none; width: 14px; height: 14px; margin-top: 4px; } } @media screen and (max-width: 640px) { .lab-test-packages-table__cell--name img { display: none; width: 14px; height: 14px; margin-top: 4px; } } @media screen and (max-width: 480px) { .lab-test-packages-table__cell--name img { display: none; width: 14px; height: 14px; margin-top: 4px; } } .lab-test-packages-table__cell--package { text-align: center; vertical-align: middle; } .lab-test-packages-table__cell--check { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-right: 16px; } @media screen and (max-width: 1770px) { .lab-test-packages-table__cell--check { padding-right: 14px; } } @media screen and (max-width: 1440px) { .lab-test-packages-table__cell--check { padding-right: 13px; } } @media screen and (max-width: 1200px) { .lab-test-packages-table__cell--check { padding-right: 11px; } } @media screen and (max-width: 992px) { .lab-test-packages-table__cell--check { padding-right: 10px; } } @media screen and (max-width: 768px) { .lab-test-packages-table__cell--check { padding-right: 12px; padding: 8px; } } @media screen and (max-width: 640px) { .lab-test-packages-table__cell--check { padding-right: 8px; padding: 6px; } } @media screen and (max-width: 480px) { .lab-test-packages-table__cell--check { padding-right: 12px; padding: 8px; } } .lab-test-packages-table__cell--check img { width: 24px; height: 24px; } @media screen and (max-width: 1770px) { .lab-test-packages-table__cell--check img { width: 22px; height: 22px; } } @media screen and (max-width: 1440px) { .lab-test-packages-table__cell--check img { width: 19px; height: 19px; } } @media screen and (max-width: 1200px) { .lab-test-packages-table__cell--check img { width: 17px; height: 17px; } } @media screen and (max-width: 992px) { .lab-test-packages-table__cell--check img { width: 14px; height: 14px; } } @media screen and (max-width: 768px) { .lab-test-packages-table__cell--check img { width: 20px; height: 20px; } } @media screen and (max-width: 640px) { .lab-test-packages-table__cell--check img { width: 16px; height: 16px; } } @media screen and (max-width: 480px) { .lab-test-packages-table__cell--check img { width: 20px; height: 20px; } } .lab-test-package-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } @media screen and (max-width: 1770px) { .lab-test-package-header { gap: 7px; } } @media screen and (max-width: 1440px) { .lab-test-package-header { gap: 6px; } } @media screen and (max-width: 1200px) { .lab-test-package-header { gap: 5px; } } @media screen and (max-width: 992px) { .lab-test-package-header { gap: 4px; } } @media screen and (max-width: 768px) { .lab-test-package-header { gap: 8px; } } @media screen and (max-width: 640px) { .lab-test-package-header { gap: 6px; } } @media screen and (max-width: 480px) { .lab-test-package-header { gap: 8px; } } .lab-test-package-header__label { font-size: 28px; font-weight: 700; color: #312020; line-height: 150%; font-family: "Montserrat", sans-serif; } @media screen and (max-width: 1770px) { .lab-test-package-header__label { font-size: 25px; } } @media screen and (max-width: 1440px) { .lab-test-package-header__label { font-size: 22px; } } @media screen and (max-width: 1200px) { .lab-test-package-header__label { font-size: 20px; } } @media screen and (max-width: 992px) { .lab-test-package-header__label { font-size: 17px; } } @media screen and (max-width: 768px) { .lab-test-package-header__label { font-size: 18px; } } @media screen and (max-width: 640px) { .lab-test-package-header__label { font-size: 15px; } } @media screen and (max-width: 480px) { .lab-test-package-header__label { font-size: 16px; } } .lab-test-package-header__price { font-size: 18px; font-weight: 700; color: #00704a; } @media screen and (max-width: 1770px) { .lab-test-package-header__price { font-size: 16px; } } @media screen and (max-width: 1440px) { .lab-test-package-header__price { font-size: 14px; } } @media screen and (max-width: 1200px) { .lab-test-package-header__price { font-size: 13px; } } @media screen and (max-width: 992px) { .lab-test-package-header__price { font-size: 11px; } } @media screen and (max-width: 768px) { .lab-test-package-header__price { font-size: 14px; } } @media screen and (max-width: 640px) { .lab-test-package-header__price { font-size: 12px; } } @media screen and (max-width: 480px) { .lab-test-package-header__price { font-size: 12px; } } .lab-test-indicator-name { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; width: 100%; max-width: 100%; color: #00704a; font-size: 18px; font-weight: 500; line-height: 150%; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 1770px) { .lab-test-indicator-name { font-size: 16px; gap: 11px; } } @media screen and (max-width: 1440px) { .lab-test-indicator-name { font-size: 15px; gap: 10px; } } @media screen and (max-width: 1200px) { .lab-test-indicator-name { font-size: 14px; gap: 9px; } } @media screen and (max-width: 992px) { .lab-test-indicator-name { font-size: 13px; gap: 8px; } } @media screen and (max-width: 768px) { .lab-test-indicator-name { font-size: 14px; gap: 8px; } } @media screen and (max-width: 640px) { .lab-test-indicator-name { font-size: 13px; gap: 8px; } } @media screen and (max-width: 480px) { .lab-test-indicator-name { font-size: 13px; gap: 8px; } } .lab-test-indicator-name strong { color: #00704a; font-weight: 500; line-height: 150%; font-family: "Be Vietnam Pro", sans-serif; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; word-wrap: break-word; overflow-wrap: break-word; -ms-hyphens: auto; hyphens: auto; font-size: inherit; } .lab-test-indicator-icon { width: 18px; height: 18px; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; -ms-flex-negative: 0; flex-shrink: 0; } .lab-test-indicator-accordion { border-bottom: 1px solid #dcdee0; } .lab-test-indicator-accordion:last-child { border-bottom: none; } .lab-test-indicator-accordion.is-active .lab-test-indicator-icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .lab-test-indicator-accordion.is-active .lab-test-indicator-content { display: grid; } .lab-test-indicator-accordion.is-active .lab-test-indicator-toggle__icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .lab-test-indicator-toggle { width: 100%; background: transparent; border: none; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; padding: 8.5px 8px; position: relative; } .lab-test-indicator-toggle::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: #00704a; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .lab-test-indicator-toggle:hover { background: rgba(0, 112, 74, 0.05); padding-left: 12px; } .lab-test-indicator-toggle:hover::before { -webkit-transform: scaleX(1); transform: scaleX(1); } .lab-test-indicator-toggle:hover .lab-test-indicator-name strong { color: #00704a; } .lab-test-indicator-toggle .lab-test-packages-table__cell--name { padding: 0; width: calc(100% + 180px); } @media (max-width: 1770px) { .lab-test-indicator-toggle .lab-test-packages-table__cell--name { width: calc(100% + 130px); } } @media (max-width: 992px) { .lab-test-indicator-toggle .lab-test-packages-table__cell--name { width: calc(100% + 64px); } } @media (max-width: 768px) { .lab-test-indicator-toggle .lab-test-packages-table__cell--name { width: calc(100% + 40px); } } @media (max-width: 640px) { .lab-test-indicator-toggle .lab-test-packages-table__cell--name { width: calc(100% + 24px); } } @media (max-width: 480px) { .lab-test-indicator-toggle .lab-test-packages-table__cell--name { width: 100%; } } .lab-test-indicator-content { display: none; border-bottom: none !important; } .lab-test-indicator-content.is-active { display: grid; } .lab-test-indicator-content .lab-test-packages-table__cell--name { padding: 0; width: calc(100% + 180px); } @media (max-width: 1770px) { .lab-test-indicator-content .lab-test-packages-table__cell--name { width: calc(100% + 130px); } } @media (max-width: 992px) { .lab-test-indicator-content .lab-test-packages-table__cell--name { width: calc(100% + 64px); } } @media (max-width: 768px) { .lab-test-indicator-content .lab-test-packages-table__cell--name { width: calc(100% + 40px); } } @media (max-width: 640px) { .lab-test-indicator-content .lab-test-packages-table__cell--name { width: calc(100% + 24px); } } @media (max-width: 480px) { .lab-test-indicator-content .lab-test-packages-table__cell--name { width: 100%; } } .lab-test-indicator-desc { font-size: 16px; color: #312020; padding: 4px 32px 32px 32px; line-height: 150%; font-family: "Be Vietnam Pro", sans-serif; font-weight: 400; max-width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 1770px) { .lab-test-indicator-desc { font-size: 14px; padding: 4px 29px 29px 29px; } } @media screen and (max-width: 1440px) { .lab-test-indicator-desc { font-size: 13px; padding: 4px 26px 26px 26px; } } @media screen and (max-width: 1200px) { .lab-test-indicator-desc { font-size: 13px; padding: 4px 22px 22px 22px; } } @media screen and (max-width: 992px) { .lab-test-indicator-desc { font-size: 12px; padding: 4px 19px 19px 19px; } } @media (min-width: 768px) { .lab-test-indicator-desc { padding-top: 16px; padding-bottom: 16px; } } @media screen and (max-width: 768px) { .lab-test-indicator-desc { font-size: 12px; padding: 4px 16px 16px 34px; } } @media screen and (max-width: 640px) { .lab-test-indicator-desc { font-size: 12px; padding: 4px 12px 12px 30px; } } @media screen and (max-width: 480px) { .lab-test-indicator-desc { font-size: 12px; padding: 4px 16px 16px 34px; } } .lab-test-indicator-desc p { margin: 0 0 12px 0; font-size: inherit; font-weight: inherit; color: inherit; line-height: inherit; font-family: inherit; } @media screen and (max-width: 1770px) { .lab-test-indicator-desc p { margin-bottom: 11px; } } @media screen and (max-width: 1440px) { .lab-test-indicator-desc p { margin-bottom: 10px; } } @media screen and (max-width: 1200px) { .lab-test-indicator-desc p { margin-bottom: 8px; } } @media screen and (max-width: 992px) { .lab-test-indicator-desc p { margin-bottom: 7px; } } @media screen and (max-width: 768px) { .lab-test-indicator-desc p { margin-bottom: 6px; } } @media screen and (max-width: 640px) { .lab-test-indicator-desc p { margin-bottom: 5px; } } @media screen and (max-width: 480px) { .lab-test-indicator-desc p { margin-bottom: 6px; } } .lab-test-indicator-desc p:last-child { margin-bottom: 0; } .lab-test-indicator-desc strong { font-weight: 600; color: #312020; font-size: inherit; line-height: inherit; font-family: inherit; } .lab-test-packages-header { background: #f8f8f8; border: 1px solid #dcdee0; border-radius: 8px 8px 0 0; padding: 16px; margin-bottom: 0; } .lab-test-packages-header__row { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .lab-test-packages-header__cell--package { text-align: center; } .lab-test-package-info__label { font-size: 14px; font-weight: 600; color: #00704a; margin-bottom: 4px; text-align: center; } .lab-test-package-info__price { font-size: 16px; font-weight: 700; color: #312020; text-align: center; } .lab-test-indicators-list { border: 1px solid #dcdee0; border-top: none; border-radius: 0 0 8px 8px; overflow: hidden; } .lab-test-check-icon { width: 20px; height: 20px; } .lab-test-indicators-simple { border: 1px solid #dcdee0; border-radius: 8px; overflow: hidden; } .lab-test-indicator-simple { border-bottom: 1px solid #dcdee0; } .lab-test-indicator-simple:last-child { border-bottom: none; } .lab-test-indicator-simple.is-active .lab-test-indicator-simple__icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .lab-test-indicator-simple.is-active .lab-test-indicator-simple__content { display: block; } .lab-test-indicator-simple__header { width: 100%; background: transparent; border: none; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; padding: 8.5px 20px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 12px; text-align: left; } @media screen and (max-width: 1770px) { .lab-test-indicator-simple__header { padding: 8px 18px; gap: 11px; } } @media screen and (max-width: 1440px) { .lab-test-indicator-simple__header { padding: 7px 16px; gap: 10px; } } @media screen and (max-width: 1200px) { .lab-test-indicator-simple__header { padding: 6px 14px; gap: 9px; } } @media screen and (max-width: 992px) { .lab-test-indicator-simple__header { padding: 5px 12px; gap: 8px; } } @media screen and (max-width: 768px) { .lab-test-indicator-simple__header { padding: 8px 16px; gap: 8px; } } @media screen and (max-width: 640px) { .lab-test-indicator-simple__header { padding: 6px 12px; gap: 8px; } } @media screen and (max-width: 480px) { .lab-test-indicator-simple__header { padding: 8px 16px; gap: 8px; } } .lab-test-indicator-simple__header::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: #00704a; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .lab-test-indicator-simple__header:hover { background: rgba(0, 112, 74, 0.05); padding-left: 12px; } @media screen and (max-width: 1770px) { .lab-test-indicator-simple__header:hover { padding-left: 11px; } } @media screen and (max-width: 1440px) { .lab-test-indicator-simple__header:hover { padding-left: 10px; } } @media screen and (max-width: 1200px) { .lab-test-indicator-simple__header:hover { padding-left: 9px; } } @media screen and (max-width: 992px) { .lab-test-indicator-simple__header:hover { padding-left: 8px; } } @media screen and (max-width: 768px) { .lab-test-indicator-simple__header:hover { padding-left: 12px; } } @media screen and (max-width: 640px) { .lab-test-indicator-simple__header:hover { padding-left: 8px; } } @media screen and (max-width: 480px) { .lab-test-indicator-simple__header:hover { padding-left: 12px; } } .lab-test-indicator-simple__header:hover::before { -webkit-transform: scaleX(1); transform: scaleX(1); } .lab-test-indicator-simple__header:hover .lab-test-indicator-simple__name { color: #00704a; } .lab-test-indicator-simple__name { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; width: 100%; max-width: 100%; color: #00704a; font-size: 18px; font-weight: 500; line-height: 150%; font-family: "Be Vietnam Pro", sans-serif; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; word-wrap: break-word; overflow-wrap: break-word; -ms-hyphens: auto; hyphens: auto; } @media screen and (max-width: 1770px) { .lab-test-indicator-simple__name { font-size: 16px; gap: 11px; } } @media screen and (max-width: 1440px) { .lab-test-indicator-simple__name { font-size: 15px; gap: 10px; } } @media screen and (max-width: 1200px) { .lab-test-indicator-simple__name { font-size: 14px; gap: 9px; } } @media screen and (max-width: 992px) { .lab-test-indicator-simple__name { font-size: 13px; gap: 8px; } } @media screen and (max-width: 768px) { .lab-test-indicator-simple__name { font-size: 14px; gap: 8px; } } @media screen and (max-width: 640px) { .lab-test-indicator-simple__name { font-size: 13px; gap: 8px; } } @media screen and (max-width: 480px) { .lab-test-indicator-simple__name { font-size: 13px; gap: 8px; } } .lab-test-indicator-simple__icon { width: 18px; height: 18px; -ms-flex-negative: 0; flex-shrink: 0; color: #00704a; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } @media screen and (max-width: 1770px) { .lab-test-indicator-simple__icon { width: 16px; height: 16px; } } @media screen and (max-width: 1440px) { .lab-test-indicator-simple__icon { width: 15px; height: 15px; } } @media screen and (max-width: 1200px) { .lab-test-indicator-simple__icon { width: 13px; height: 13px; } } @media screen and (max-width: 992px) { .lab-test-indicator-simple__icon { width: 12px; height: 12px; } } @media screen and (max-width: 768px) { .lab-test-indicator-simple__icon { width: 14px; height: 14px; } } @media screen and (max-width: 640px) { .lab-test-indicator-simple__icon { width: 13px; height: 13px; } } @media screen and (max-width: 480px) { .lab-test-indicator-simple__icon { width: 14px; height: 14px; } } .lab-test-indicator-simple__content { display: none; } .lab-test-indicator-simple__body { font-size: 16px; color: #312020; padding: 4px 24px; line-height: 150%; font-family: "Be Vietnam Pro", sans-serif; font-weight: 400; } @media screen and (max-width: 1770px) { .lab-test-indicator-simple__body { font-size: 14px; padding: 4px 22px; } } @media screen and (max-width: 1440px) { .lab-test-indicator-simple__body { font-size: 13px; padding: 4px 19px; } } @media screen and (max-width: 1200px) { .lab-test-indicator-simple__body { font-size: 13px; padding: 4px 17px; } } @media screen and (max-width: 992px) { .lab-test-indicator-simple__body { font-size: 12px; padding: 4px 14px; } } @media screen and (max-width: 768px) { .lab-test-indicator-simple__body { font-size: 12px; padding: 4px 16px 4px 30px; } } @media screen and (max-width: 640px) { .lab-test-indicator-simple__body { font-size: 12px; padding: 4px 12px 4px 28px; } } @media screen and (max-width: 480px) { .lab-test-indicator-simple__body { font-size: 12px; padding: 4px 16px 4px 30px; } } .lab-test-indicator-simple__body p { margin: 0 0 12px 0; } @media screen and (max-width: 1770px) { .lab-test-indicator-simple__body p { margin-bottom: 11px; } } @media screen and (max-width: 1440px) { .lab-test-indicator-simple__body p { margin-bottom: 10px; } } @media screen and (max-width: 1200px) { .lab-test-indicator-simple__body p { margin-bottom: 8px; } } @media screen and (max-width: 992px) { .lab-test-indicator-simple__body p { margin-bottom: 7px; } } @media screen and (max-width: 768px) { .lab-test-indicator-simple__body p { margin-bottom: 6px; } } @media screen and (max-width: 640px) { .lab-test-indicator-simple__body p { margin-bottom: 5px; } } @media screen and (max-width: 480px) { .lab-test-indicator-simple__body p { margin-bottom: 6px; } } .lab-test-indicator-simple__body p:last-child { margin-bottom: 0; } .lab-test-section.lab-test-video { margin: 98px 0; } @media screen and (max-width: 1770px) { .lab-test-section.lab-test-video { margin: 88px 0; } } @media screen and (max-width: 1440px) { .lab-test-section.lab-test-video { margin: 78px 0; } } @media screen and (max-width: 1200px) { .lab-test-section.lab-test-video { margin: 68px 0; } } @media screen and (max-width: 992px) { .lab-test-section.lab-test-video { margin: 58px 0; } } @media screen and (max-width: 768px) { .lab-test-section.lab-test-video { margin: 49px 0; } } @media screen and (max-width: 640px) { .lab-test-section.lab-test-video { margin: 39px 0; } } @media screen and (max-width: 480px) { .lab-test-section.lab-test-video { margin: 49px 0; } } .lab-test-section.lab-test-video .lab-test-section__header { margin-bottom: 47px; } @media screen and (max-width: 1770px) { .lab-test-section.lab-test-video .lab-test-section__header { margin-bottom: 42px; } } @media screen and (max-width: 1440px) { .lab-test-section.lab-test-video .lab-test-section__header { margin-bottom: 37px; } } @media screen and (max-width: 1200px) { .lab-test-section.lab-test-video .lab-test-section__header { margin-bottom: 32px; } } @media screen and (max-width: 992px) { .lab-test-section.lab-test-video .lab-test-section__header { margin-bottom: 28px; } } @media screen and (max-width: 768px) { .lab-test-section.lab-test-video .lab-test-section__header { margin-bottom: 23px; } } @media screen and (max-width: 640px) { .lab-test-section.lab-test-video .lab-test-section__header { margin-bottom: 18px; } } @media screen and (max-width: 480px) { .lab-test-section.lab-test-video .lab-test-section__header { margin-bottom: 16px; } } .lab-test-section.lab-test-video .lab-test-section__subtitle { font-size: 20px; line-height: 150%; color: #312020; margin: 0px; font-family: "Montserrat", sans-serif; font-weight: 400; } @media screen and (max-width: 1770px) { .lab-test-section.lab-test-video .lab-test-section__subtitle { font-size: 18px; } } @media screen and (max-width: 1440px) { .lab-test-section.lab-test-video .lab-test-section__subtitle { font-size: 16px; } } @media screen and (max-width: 1200px) { .lab-test-section.lab-test-video .lab-test-section__subtitle { font-size: 14px; } } @media screen and (max-width: 992px) { .lab-test-section.lab-test-video .lab-test-section__subtitle { font-size: 12px; } } @media screen and (max-width: 768px) { .lab-test-section.lab-test-video .lab-test-section__subtitle { font-size: 12px; } } @media screen and (max-width: 640px) { .lab-test-section.lab-test-video .lab-test-section__subtitle { font-size: 12px; } } @media screen and (max-width: 480px) { .lab-test-section.lab-test-video .lab-test-section__subtitle { font-size: 12px; } } .lab-test-section.lab-test-video .lab-test-section__title { font-size: 28px; font-weight: 700; line-height: 150%; color: #312020; margin: 0px; font-family: "Montserrat", sans-serif; } @media screen and (max-width: 1770px) { .lab-test-section.lab-test-video .lab-test-section__title { font-size: 25px; } } @media screen and (max-width: 1440px) { .lab-test-section.lab-test-video .lab-test-section__title { font-size: 22px; } } @media screen and (max-width: 1200px) { .lab-test-section.lab-test-video .lab-test-section__title { font-size: 19px; } } @media screen and (max-width: 992px) { .lab-test-section.lab-test-video .lab-test-section__title { font-size: 16px; } } @media screen and (max-width: 768px) { .lab-test-section.lab-test-video .lab-test-section__title { font-size: 14px; } } @media screen and (max-width: 640px) { .lab-test-section.lab-test-video .lab-test-section__title { font-size: 14px; } } @media screen and (max-width: 480px) { .lab-test-section.lab-test-video .lab-test-section__title { font-size: 14px; } } .lab-test-video__wrapper { position: relative; width: 100%; max-width: 1044px; aspect-ratio: 1044/444; overflow: hidden; background: #f0f0f0; border-radius: 16px; cursor: pointer; } @media screen and (max-width: 1770px) { .lab-test-video__wrapper { max-width: 939px; aspect-ratio: 939/400; border-radius: 14px; } } @media screen and (max-width: 1440px) { .lab-test-video__wrapper { max-width: 835px; aspect-ratio: 835/355; border-radius: 13px; } } @media screen and (max-width: 1200px) { .lab-test-video__wrapper { max-width: 731px; aspect-ratio: 731/311; border-radius: 12px; } } @media screen and (max-width: 992px) { .lab-test-video__wrapper { max-width: 626px; aspect-ratio: 626/267; border-radius: 11px; } } @media screen and (max-width: 768px) { .lab-test-video__wrapper { max-width: 522px; aspect-ratio: 522/222; border-radius: 12px; } } @media screen and (max-width: 640px) { .lab-test-video__wrapper { max-width: 418px; aspect-ratio: 418/178; border-radius: 10px; } } @media screen and (max-width: 480px) { .lab-test-video__wrapper { max-width: 100%; aspect-ratio: 16/9; border-radius: 12px; } } .lab-test-video__wrapper.is-playing .lab-test-video__thumbnail, .lab-test-video__wrapper.is-playing .lab-test-video__play-button { display: none; } .lab-test-video__wrapper.is-playing .lab-test-video__embed { display: block; } .lab-test-video__thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; z-index: 1; } .lab-test-video__play-button { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; width: 96px; height: 96px; background: url("/wp-content/themes/one-lab/assets/images/icons/play-light.svg") no-repeat center; background-size: contain; border: none; cursor: pointer; padding: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media screen and (max-width: 1770px) { .lab-test-video__play-button { width: 86px; height: 86px; } } @media screen and (max-width: 1440px) { .lab-test-video__play-button { width: 76px; height: 76px; } } @media screen and (max-width: 1200px) { .lab-test-video__play-button { width: 67px; height: 67px; } } @media screen and (max-width: 992px) { .lab-test-video__play-button { width: 57px; height: 57px; } } @media screen and (max-width: 768px) { .lab-test-video__play-button { width: 48px; height: 48px; } } @media screen and (max-width: 640px) { .lab-test-video__play-button { width: 38px; height: 38px; } } @media screen and (max-width: 480px) { .lab-test-video__play-button { width: 48px; height: 48px; } } .lab-test-video__play-button:hover { -webkit-transform: translate(-50%, -50%) scale(1.2); transform: translate(-50%, -50%) scale(1.2); } .lab-test-video__play-button:active { -webkit-transform: translate(-50%, -50%) scale(1.05); transform: translate(-50%, -50%) scale(1.05); } @-webkit-keyframes pulse { 0%, 100% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } 50% { -webkit-transform: translate(-50%, -50%) scale(1.05); transform: translate(-50%, -50%) scale(1.05); } } @keyframes pulse { 0%, 100% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } 50% { -webkit-transform: translate(-50%, -50%) scale(1.05); transform: translate(-50%, -50%) scale(1.05); } } .lab-test-video__embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; } .lab-test-video__embed iframe { width: 100%; height: 100%; border: none; } .lab-test-section.lab-test-booking { margin: 98px 0; padding: 0; background: transparent; border-radius: 0; } @media screen and (max-width: 1770px) { .lab-test-section.lab-test-booking { margin: 88px 0; } } @media screen and (max-width: 1440px) { .lab-test-section.lab-test-booking { margin: 78px 0; } } @media screen and (max-width: 1200px) { .lab-test-section.lab-test-booking { margin: 68px 0; } } @media screen and (max-width: 992px) { .lab-test-section.lab-test-booking { margin: 58px 0; } } @media screen and (max-width: 768px) { .lab-test-section.lab-test-booking { margin: 49px 0; } } @media screen and (max-width: 640px) { .lab-test-section.lab-test-booking { margin: 39px 0; } } @media screen and (max-width: 480px) { .lab-test-section.lab-test-booking { margin: 49px 0; } } .lab-test-section.lab-test-booking .lab-test-booking__wrapper { position: relative; width: 100%; max-width: 1040px; margin: 0 auto; border-radius: 20px; overflow: hidden; min-height: 214px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (max-width: 1770px) { .lab-test-section.lab-test-booking .lab-test-booking__wrapper { max-width: 936px; border-radius: 18px; min-height: 192px; } } @media screen and (max-width: 1440px) { .lab-test-section.lab-test-booking .lab-test-booking__wrapper { max-width: 832px; border-radius: 16px; min-height: 171px; } } @media screen and (max-width: 1200px) { .lab-test-section.lab-test-booking .lab-test-booking__wrapper { max-width: 728px; border-radius: 14px; min-height: 149px; } } @media screen and (max-width: 992px) { .lab-test-section.lab-test-booking .lab-test-booking__wrapper { max-width: 624px; border-radius: 12px; min-height: 128px; } } @media screen and (max-width: 768px) { .lab-test-section.lab-test-booking .lab-test-booking__wrapper { max-width: 520px; border-radius: 14px; min-height: 149px; } } @media screen and (max-width: 640px) { .lab-test-section.lab-test-booking .lab-test-booking__wrapper { max-width: 416px; border-radius: 12px; min-height: 120px; } } @media screen and (max-width: 480px) { .lab-test-section.lab-test-booking .lab-test-booking__wrapper { max-width: 100%; border-radius: 14px; min-height: auto; padding: 24px 16px; } } .lab-test-section.lab-test-booking .lab-test-booking__form { position: relative; z-index: 1; } .lab-test-section.lab-test-related { margin: 48px 0; } @media screen and (max-width: 1770px) { .lab-test-section.lab-test-related { margin: 43px 0; } } @media screen and (max-width: 1440px) { .lab-test-section.lab-test-related { margin: 38px 0; } } @media screen and (max-width: 1200px) { .lab-test-section.lab-test-related { margin: 34px 0; } } @media screen and (max-width: 992px) { .lab-test-section.lab-test-related { margin: 29px 0; } } @media screen and (max-width: 768px) { .lab-test-section.lab-test-related { margin: 24px 0; } } @media screen and (max-width: 640px) { .lab-test-section.lab-test-related { margin: 19px 0; } } @media screen and (max-width: 480px) { .lab-test-section.lab-test-related { margin: 24px 0; } } .lab-test-related__title { font-size: 36px; font-weight: 700; color: #00704a; margin: 0 0 20px; } @media screen and (max-width: 1770px) { .lab-test-related__title { font-size: 32px; margin: 0 0 18px; } } @media screen and (max-width: 1440px) { .lab-test-related__title { font-size: 29px; margin: 0 0 16px; } } @media screen and (max-width: 1200px) { .lab-test-related__title { font-size: 25px; margin: 0 0 14px; } } @media screen and (max-width: 992px) { .lab-test-related__title { font-size: 22px; margin: 0 0 12px; } } @media screen and (max-width: 768px) { .lab-test-related__title { font-size: 18px; margin: 0 0 10px; } } @media screen and (max-width: 640px) { .lab-test-related__title { font-size: 14px; margin: 0 0 8px; } } @media screen and (max-width: 480px) { .lab-test-related__title { font-size: 18px; margin: 0 0 10px; } } .lab-test-related__slider { position: relative; } .lab-test-related__swiper { padding: 0px 0 40px !important; overflow: visible; } @media screen and (max-width: 1770px) { .lab-test-related__swiper { padding: 0px 0 36px !important; } } .lab-test-related__swiper .swiper-slide { height: auto; padding: 0; } .lab-test-card { padding: 24px; background: #fff; border: 1px solid #dcdee0; border-radius: 8px; -webkit-transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s; transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s; transition: box-shadow 0.3s, transform 0.3s; transition: box-shadow 0.3s, transform 0.3s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (max-width: 1770px) { .lab-test-card { padding: 22px; } } @media screen and (max-width: 1440px) { .lab-test-card { padding: 19px; } } @media screen and (max-width: 1200px) { .lab-test-card { padding: 17px; } } @media screen and (max-width: 992px) { .lab-test-card { padding: 14px; } } @media screen and (max-width: 768px) { .lab-test-card { padding: 12px; } } @media screen and (max-width: 640px) { .lab-test-card { padding: 10px; } } @media screen and (max-width: 480px) { .lab-test-card { padding: 12px; } } .lab-test-card:hover { -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); -webkit-transform: translateY(-2px); transform: translateY(-2px); } .lab-test-card__title { font-size: 18px; font-weight: 600; margin-bottom: 16px; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } @media screen and (max-width: 1770px) { .lab-test-card__title { font-size: 16px; margin-bottom: 14px; } } @media screen and (max-width: 1440px) { .lab-test-card__title { font-size: 15px; margin-bottom: 13px; } } @media screen and (max-width: 1200px) { .lab-test-card__title { font-size: 13px; margin-bottom: 11px; } } @media screen and (max-width: 992px) { .lab-test-card__title { font-size: 11px; margin-bottom: 10px; } } @media screen and (max-width: 768px) { .lab-test-card__title { font-size: 9px; margin-bottom: 8px; } } @media screen and (max-width: 640px) { .lab-test-card__title { font-size: 7px; margin-bottom: 6px; } } @media screen and (max-width: 480px) { .lab-test-card__title { font-size: 9px; margin-bottom: 8px; } } .lab-test-card__title a { color: #333; text-decoration: none; -webkit-transition: color 0.3s; transition: color 0.3s; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lab-test-card__title a:hover { color: #00704a; } .lab-test-card__price { margin-bottom: 1rem; } @media screen and (max-width: 1770px) { .lab-test-card__price { margin-bottom: 0.9rem; } } @media screen and (max-width: 1440px) { .lab-test-card__price { margin-bottom: 0.8rem; } } @media screen and (max-width: 1200px) { .lab-test-card__price { margin-bottom: 0.7rem; } } @media screen and (max-width: 992px) { .lab-test-card__price { margin-bottom: 0.6rem; } } @media screen and (max-width: 768px) { .lab-test-card__price { margin-bottom: 0.5rem; } } @media screen and (max-width: 640px) { .lab-test-card__price { margin-bottom: 0.4rem; } } @media screen and (max-width: 480px) { .lab-test-card__price { margin-bottom: 0.5rem; } } .lab-test-card__price-current { font-size: 20px; font-weight: 700; color: #00a651; } @media screen and (max-width: 1770px) { .lab-test-card__price-current { font-size: 18px; } } @media screen and (max-width: 1440px) { .lab-test-card__price-current { font-size: 16px; } } @media screen and (max-width: 1200px) { .lab-test-card__price-current { font-size: 14px; } } @media screen and (max-width: 992px) { .lab-test-card__price-current { font-size: 12px; } } @media screen and (max-width: 768px) { .lab-test-card__price-current { font-size: 10px; } } @media screen and (max-width: 640px) { .lab-test-card__price-current { font-size: 8px; } } @media screen and (max-width: 480px) { .lab-test-card__price-current { font-size: 10px; } } .lab-test-card__actions { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; margin-top: auto; } @media screen and (max-width: 1770px) { .lab-test-card__actions { gap: 11px; } } @media screen and (max-width: 1440px) { .lab-test-card__actions { gap: 10px; } } @media screen and (max-width: 1200px) { .lab-test-card__actions { gap: 8px; } } @media screen and (max-width: 992px) { .lab-test-card__actions { gap: 7px; } } @media screen and (max-width: 768px) { .lab-test-card__actions { gap: 6px; } } @media screen and (max-width: 640px) { .lab-test-card__actions { gap: 5px; } } @media screen and (max-width: 480px) { .lab-test-card__actions { gap: 6px; } } .lab-test-card__actions .btn { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: 0.875rem; padding: 0.5rem; } @media screen and (max-width: 1770px) { .lab-test-card__actions .btn { font-size: 0.79rem; padding: 0.45rem; } } @media screen and (max-width: 1440px) { .lab-test-card__actions .btn { font-size: 0.7rem; padding: 0.4rem; } } @media screen and (max-width: 1200px) { .lab-test-card__actions .btn { font-size: 0.61rem; padding: 0.35rem; } } @media screen and (max-width: 992px) { .lab-test-card__actions .btn { font-size: 0.53rem; padding: 0.3rem; } } @media screen and (max-width: 768px) { .lab-test-card__actions .btn { font-size: 0.44rem; padding: 0.25rem; } } @media screen and (max-width: 640px) { .lab-test-card__actions .btn { font-size: 0.35rem; padding: 0.2rem; } } @media screen and (max-width: 480px) { .lab-test-card__actions .btn { font-size: 0.44rem; padding: 0.25rem; } } .lab-test-related__pagination { position: static; margin-top: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 9px; } @media screen and (max-width: 1770px) { .lab-test-related__pagination { margin-top: 29px; gap: 8px; } } @media screen and (max-width: 1440px) { .lab-test-related__pagination { margin-top: 26px; gap: 7px; } } @media screen and (max-width: 1200px) { .lab-test-related__pagination { margin-top: 22px; gap: 6px; } } @media screen and (max-width: 992px) { .lab-test-related__pagination { margin-top: 19px; gap: 5px; } } @media screen and (max-width: 768px) { .lab-test-related__pagination { margin-top: 16px; gap: 6px; } } @media screen and (max-width: 640px) { .lab-test-related__pagination { margin-top: 13px; gap: 4px; } } @media screen and (max-width: 480px) { .lab-test-related__pagination { margin-top: 16px; gap: 6px; } } .lab-test-related__pagination .swiper-pagination-bullet { background: #d9d9d9; width: 12px; height: 12px; opacity: 1; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } @media screen and (max-width: 1770px) { .lab-test-related__pagination .swiper-pagination-bullet { width: 11px; height: 11px; } } @media screen and (max-width: 1440px) { .lab-test-related__pagination .swiper-pagination-bullet { width: 10px; height: 10px; } } @media screen and (max-width: 1200px) { .lab-test-related__pagination .swiper-pagination-bullet { width: 8px; height: 8px; } } @media screen and (max-width: 992px) { .lab-test-related__pagination .swiper-pagination-bullet { width: 7px; height: 7px; } } @media screen and (max-width: 768px) { .lab-test-related__pagination .swiper-pagination-bullet { width: 10px; height: 10px; } } @media screen and (max-width: 640px) { .lab-test-related__pagination .swiper-pagination-bullet { width: 8px; height: 8px; } } @media screen and (max-width: 480px) { .lab-test-related__pagination .swiper-pagination-bullet { width: 10px; height: 10px; } } .lab-test-related__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #00704a; } .lab-test-related__button-prev, .lab-test-related__button-next { width: 40px; height: 40px; background: #fff; border: 1px solid #dcdee0; border-radius: 50%; top: -60px; color: #00a651; -webkit-transition: all 0.3s; transition: all 0.3s; } @media screen and (max-width: 1770px) { .lab-test-related__button-prev, .lab-test-related__button-next { width: 36px; height: 36px; top: -54px; } } @media screen and (max-width: 1440px) { .lab-test-related__button-prev, .lab-test-related__button-next { width: 32px; height: 32px; top: -48px; } } @media screen and (max-width: 1200px) { .lab-test-related__button-prev, .lab-test-related__button-next { width: 28px; height: 28px; top: -42px; } } @media screen and (max-width: 992px) { .lab-test-related__button-prev, .lab-test-related__button-next { width: 24px; height: 24px; top: -36px; } } @media screen and (max-width: 768px) { .lab-test-related__button-prev, .lab-test-related__button-next { width: 20px; height: 20px; top: -30px; } } @media screen and (max-width: 640px) { .lab-test-related__button-prev, .lab-test-related__button-next { width: 16px; height: 16px; top: -24px; } } @media screen and (max-width: 480px) { .lab-test-related__button-prev, .lab-test-related__button-next { width: 20px; height: 20px; top: -30px; } } .lab-test-related__button-prev:hover, .lab-test-related__button-next:hover { background: #00a651; color: #fff; border-color: #00a651; } .lab-test-related__button-prev::after, .lab-test-related__button-next::after { font-size: 18px; font-weight: bold; } @media screen and (max-width: 1770px) { .lab-test-related__button-prev::after, .lab-test-related__button-next::after { font-size: 16px; } } @media screen and (max-width: 1440px) { .lab-test-related__button-prev::after, .lab-test-related__button-next::after { font-size: 14px; } } @media screen and (max-width: 1200px) { .lab-test-related__button-prev::after, .lab-test-related__button-next::after { font-size: 13px; } } @media screen and (max-width: 992px) { .lab-test-related__button-prev::after, .lab-test-related__button-next::after { font-size: 11px; } } @media screen and (max-width: 768px) { .lab-test-related__button-prev::after, .lab-test-related__button-next::after { font-size: 9px; } } @media screen and (max-width: 640px) { .lab-test-related__button-prev::after, .lab-test-related__button-next::after { font-size: 7px; } } @media screen and (max-width: 480px) { .lab-test-related__button-prev::after, .lab-test-related__button-next::after { font-size: 9px; } } .lab-test-related__button-prev { left: auto; right: 55px; } @media screen and (max-width: 1770px) { .lab-test-related__button-prev { right: 50px; } } @media screen and (max-width: 1440px) { .lab-test-related__button-prev { right: 44px; } } @media screen and (max-width: 1200px) { .lab-test-related__button-prev { right: 39px; } } @media screen and (max-width: 992px) { .lab-test-related__button-prev { right: 33px; } } @media screen and (max-width: 768px) { .lab-test-related__button-prev { right: 27px; } } @media screen and (max-width: 640px) { .lab-test-related__button-prev { right: 22px; } } @media screen and (max-width: 480px) { .lab-test-related__button-prev { right: 27px; } } .lab-test-related__button-next { right: 0; } .indicator-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 20px; } @media screen and (max-width: 1770px) { .indicator-modal { padding: 18px; } } @media screen and (max-width: 1440px) { .indicator-modal { padding: 16px; } } @media screen and (max-width: 1200px) { .indicator-modal { padding: 14px; } } @media screen and (max-width: 992px) { .indicator-modal { padding: 12px; } } @media screen and (max-width: 768px) { .indicator-modal { padding: 10px; } } @media screen and (max-width: 640px) { .indicator-modal { padding: 8px; } } @media screen and (max-width: 480px) { .indicator-modal { padding: 10px; } } .indicator-modal:not([hidden]) { display: -webkit-box; display: -ms-flexbox; display: flex; } .indicator-modal__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); } .indicator-modal__container { position: relative; background: white; border-radius: 12px; max-width: 500px; max-height: 80vh; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); } @media screen and (max-width: 1770px) { .indicator-modal__container { max-width: 450px; } } @media screen and (max-width: 1440px) { .indicator-modal__container { max-width: 400px; } } @media screen and (max-width: 1200px) { .indicator-modal__container { max-width: 350px; } } @media screen and (max-width: 992px) { .indicator-modal__container { max-width: 300px; } } @media screen and (max-width: 768px) { .indicator-modal__container { max-width: 250px; } } @media screen and (max-width: 640px) { .indicator-modal__container { max-width: 200px; } } @media screen and (max-width: 480px) { .indicator-modal__container { max-width: 250px; } } .indicator-modal__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 20px 20px 12px; gap: 16px; border-bottom: 1px solid #e5e5e5; } @media screen and (max-width: 1770px) { .indicator-modal__header { padding: 18px 18px 11px; gap: 14px; } } @media screen and (max-width: 1440px) { .indicator-modal__header { padding: 16px 16px 10px; gap: 13px; } } @media screen and (max-width: 1200px) { .indicator-modal__header { padding: 14px 14px 8px; gap: 11px; } } @media screen and (max-width: 992px) { .indicator-modal__header { padding: 12px 12px 7px; gap: 10px; } } @media screen and (max-width: 768px) { .indicator-modal__header { padding: 10px 10px 6px; gap: 8px; } } @media screen and (max-width: 640px) { .indicator-modal__header { padding: 8px 8px 5px; gap: 6px; } } @media screen and (max-width: 480px) { .indicator-modal__header { padding: 10px 10px 6px; gap: 8px; } } .indicator-modal__title { margin: 0; font-size: 18px; font-weight: 600; color: #1a1a1a; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } @media screen and (max-width: 1770px) { .indicator-modal__title { font-size: 16px; } } @media screen and (max-width: 1440px) { .indicator-modal__title { font-size: 15px; } } @media screen and (max-width: 1200px) { .indicator-modal__title { font-size: 13px; } } @media screen and (max-width: 992px) { .indicator-modal__title { font-size: 11px; } } @media screen and (max-width: 768px) { .indicator-modal__title { font-size: 9px; } } @media screen and (max-width: 640px) { .indicator-modal__title { font-size: 7px; } } @media screen and (max-width: 480px) { .indicator-modal__title { font-size: 9px; } } .indicator-modal__close { -ms-flex-negative: 0; flex-shrink: 0; background: none; border: none; padding: 8px; cursor: pointer; color: #666; -webkit-transition: color 0.2s; transition: color 0.2s; border-radius: 4px; } @media screen and (max-width: 1770px) { .indicator-modal__close { padding: 7px; } } @media screen and (max-width: 1440px) { .indicator-modal__close { padding: 6px; } } @media screen and (max-width: 1200px) { .indicator-modal__close { padding: 5px; } } @media screen and (max-width: 992px) { .indicator-modal__close { padding: 4px; } } @media screen and (max-width: 768px) { .indicator-modal__close { padding: 3px; } } @media screen and (max-width: 640px) { .indicator-modal__close { padding: 2px; } } @media screen and (max-width: 480px) { .indicator-modal__close { padding: 3px; } } .indicator-modal__close:hover { color: #000; background: #f5f5f5; } .indicator-modal__body { padding: 20px; overflow-y: auto; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; line-height: 1.6; color: #333; } @media screen and (max-width: 1770px) { .indicator-modal__body { padding: 18px; } } @media screen and (max-width: 1440px) { .indicator-modal__body { padding: 16px; } } @media screen and (max-width: 1200px) { .indicator-modal__body { padding: 14px; } } @media screen and (max-width: 992px) { .indicator-modal__body { padding: 12px; } } @media screen and (max-width: 768px) { .indicator-modal__body { padding: 10px; } } @media screen and (max-width: 640px) { .indicator-modal__body { padding: 8px; } } @media screen and (max-width: 480px) { .indicator-modal__body { padding: 10px; } } .indicator-modal__body p:first-child { margin-top: 0; } .indicator-modal__body p:last-child { margin-bottom: 0; } @media (min-width: 768px) { .indicator-modal { display: none !important; } } .lab-test-indicator-toggle__icon { -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .lab-test-indicator-accordion.is-active .lab-test-indicator-toggle__icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .lab-test-indicator-accordion.is-active .lab-test-indicator-content { display: grid; } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .page-tra-cuu-ket-qua .result-search-hero { position: relative; padding: 120px 0 80px; background: -webkit-gradient(linear, left top, left bottom, from(#4fd1c7), to(#00704a)); background: linear-gradient(180deg, #4fd1c7 0%, #00704a 100%); overflow: hidden; } @media screen and (max-width: 1770px) { .page-tra-cuu-ket-qua .result-search-hero { padding: 108px 0 72px; } } @media screen and (max-width: 1440px) { .page-tra-cuu-ket-qua .result-search-hero { padding: 96px 0 64px; } } @media screen and (max-width: 1200px) { .page-tra-cuu-ket-qua .result-search-hero { padding: 90px 0 60px; } } @media screen and (max-width: 768px) { .page-tra-cuu-ket-qua .result-search-hero { padding: 80px 0 60px; } } @media screen and (max-width: 640px) { .page-tra-cuu-ket-qua .result-search-hero { padding: 70px 0 50px; } } @media screen and (max-width: 480px) { .page-tra-cuu-ket-qua .result-search-hero { padding: 60px 0 40px; } } .page-tra-cuu-ket-qua .result-search-hero__pattern { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('data:image/svg+xml;utf8,'); opacity: 0.3; pointer-events: none; } .page-tra-cuu-ket-qua .result-search-hero__content { position: relative; z-index: 1; text-align: center; color: #ffffff; } .page-tra-cuu-ket-qua .result-search-hero__title { font-size: 48px; font-weight: 700; line-height: 1.2; margin: 0 0 24px; color: #ffffff; } @media screen and (max-width: 1770px) { .page-tra-cuu-ket-qua .result-search-hero__title { font-size: 46px; margin-bottom: 23px; } } @media screen and (max-width: 1440px) { .page-tra-cuu-ket-qua .result-search-hero__title { font-size: 42px; margin-bottom: 22px; } } @media screen and (max-width: 1200px) { .page-tra-cuu-ket-qua .result-search-hero__title { font-size: 38px; margin-bottom: 20px; } } @media screen and (max-width: 768px) { .page-tra-cuu-ket-qua .result-search-hero__title { font-size: 36px; margin-bottom: 20px; } } @media screen and (max-width: 640px) { .page-tra-cuu-ket-qua .result-search-hero__title { font-size: 32px; margin-bottom: 18px; } } @media screen and (max-width: 480px) { .page-tra-cuu-ket-qua .result-search-hero__title { font-size: 28px; margin-bottom: 16px; line-height: 1.3; } } .page-tra-cuu-ket-qua .result-search-hero__description { font-size: 18px; line-height: 1.6; margin: 0; color: rgba(255, 255, 255, 0.95); max-width: 900px; margin-left: auto; margin-right: auto; } @media screen and (max-width: 1770px) { .page-tra-cuu-ket-qua .result-search-hero__description { font-size: 17px; } } @media screen and (max-width: 1440px) { .page-tra-cuu-ket-qua .result-search-hero__description { font-size: 17px; } } @media screen and (max-width: 1200px) { .page-tra-cuu-ket-qua .result-search-hero__description { font-size: 16px; } } @media screen and (max-width: 768px) { .page-tra-cuu-ket-qua .result-search-hero__description { font-size: 16px; padding: 0 20px; } } @media screen and (max-width: 640px) { .page-tra-cuu-ket-qua .result-search-hero__description { font-size: 15px; padding: 0 18px; } } @media screen and (max-width: 480px) { .page-tra-cuu-ket-qua .result-search-hero__description { font-size: 14px; line-height: 1.5; padding: 0 16px; } } .result-search-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 50px 0 60px; } @media screen and (max-width: 1770px) { .result-search-cards { gap: 30px; margin: 48px 0 58px; } } @media screen and (max-width: 1440px) { .result-search-cards { gap: 29px; margin: 46px 0 56px; } } @media screen and (max-width: 1200px) { .result-search-cards { gap: 28px; margin: 45px 0; } } @media screen and (max-width: 1024px) { .result-search-cards { grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 40px 0; } } @media screen and (max-width: 768px) { .result-search-cards { grid-template-columns: 1fr; gap: 24px; margin: 35px 0; max-width: 500px; margin-left: auto; margin-right: auto; } } @media screen and (max-width: 640px) { .result-search-cards { gap: 22px; margin: 30px 0; max-width: 100%; } } @media screen and (max-width: 480px) { .result-search-cards { gap: 20px; margin: 20px 0 30px; max-width: 100%; } } .result-search-card { background: #ffffff; border-radius: 16px; padding: 32px; overflow: hidden; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border: 1px solid #d1d5db; } @media screen and (max-width: 1770px) { .result-search-card { padding: 30px; border-radius: 15px; } } @media screen and (max-width: 1440px) { .result-search-card { padding: 29px; border-radius: 15px; } } @media screen and (max-width: 1200px) { .result-search-card { padding: 28px; border-radius: 14px; } } @media screen and (max-width: 1024px) { .result-search-card { padding: 26px; border-radius: 14px; } } @media screen and (max-width: 768px) { .result-search-card { padding: 24px; border-radius: 12px; } } @media screen and (max-width: 640px) { .result-search-card { padding: 22px; border-radius: 11px; } } @media screen and (max-width: 480px) { .result-search-card { padding: 20px; border-radius: 10px; } } .result-search-card:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); } @media screen and (max-width: 768px) { .result-search-card:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @media screen and (max-width: 480px) { .result-search-card:hover { -webkit-transform: none; transform: none; } } .result-search-card__image { width: 100%; aspect-ratio: 381/350; overflow: hidden; position: relative; border-radius: 8px; } @media screen and (max-width: 640px) { .result-search-card__image { border-radius: 7px; } } @media screen and (max-width: 480px) { .result-search-card__image { border-radius: 6px; } } .result-search-card__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } .result-search-card:hover .result-search-card__image img { -webkit-transform: scale(1.05); transform: scale(1.05); } @media screen and (max-width: 768px) { .result-search-card:hover .result-search-card__image img { -webkit-transform: scale(1.02); transform: scale(1.02); } } @media screen and (max-width: 480px) { .result-search-card:hover .result-search-card__image img { -webkit-transform: none; transform: none; } } .result-search-card__content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 16px; } @media screen and (max-width: 1770px) { .result-search-card__content { margin-top: 15px; } } @media screen and (max-width: 1440px) { .result-search-card__content { margin-top: 15px; } } @media screen and (max-width: 1200px) { .result-search-card__content { margin-top: 14px; } } @media screen and (max-width: 768px) { .result-search-card__content { margin-top: 12px; } } @media screen and (max-width: 640px) { .result-search-card__content { margin-top: 11px; } } @media screen and (max-width: 480px) { .result-search-card__content { margin-top: 10px; } } .result-search-card__category { font-size: 16px; color: #626264; font-family: "Montserrat", sans-serif; margin: 0; text-align: center; } @media screen and (max-width: 1770px) { .result-search-card__category { font-size: 15px; } } @media screen and (max-width: 1440px) { .result-search-card__category { font-size: 15px; } } @media screen and (max-width: 1200px) { .result-search-card__category { font-size: 15px; } } @media screen and (max-width: 992px) { .result-search-card__category { font-size: 15px; } } @media screen and (max-width: 768px) { .result-search-card__category { font-size: 14px; } } @media screen and (max-width: 640px) { .result-search-card__category { font-size: 13px; } } @media screen and (max-width: 480px) { .result-search-card__category { font-size: 13px; } } .result-search-card__title { font-family: "Montserrat", sans-serif; font-size: 24px; font-weight: 700; color: #312020; margin: 0 0 16px; text-align: center; line-height: 1.3; } @media screen and (max-width: 1770px) { .result-search-card__title { font-size: 23px; margin-bottom: 15px; } } @media screen and (max-width: 1440px) { .result-search-card__title { font-size: 23px; margin-bottom: 15px; } } @media screen and (max-width: 1200px) { .result-search-card__title { font-size: 22px; margin-bottom: 14px; } } @media screen and (max-width: 1024px) { .result-search-card__title { font-size: 21px; } } @media screen and (max-width: 768px) { .result-search-card__title { font-size: 20px; margin-bottom: 16px; } } @media screen and (max-width: 640px) { .result-search-card__title { font-size: 19px; margin-bottom: 15px; } } @media screen and (max-width: 480px) { .result-search-card__title { font-size: 18px; margin-bottom: 14px; line-height: 1.4; } } .result-search-card__button { width: 100%; padding: 14px 24px; background-color: #00704a; color: #ffffff !important; text-align: center; text-decoration: none; border-radius: 8px; font-size: 16px; font-weight: 600; text-transform: uppercase; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; border: 2px solid #00704a; display: inline-block; } @media screen and (max-width: 1770px) { .result-search-card__button { padding: 13px 23px; font-size: 15px; border-radius: 8px; } } @media screen and (max-width: 1440px) { .result-search-card__button { padding: 13px 23px; font-size: 15px; border-radius: 8px; } } @media screen and (max-width: 1200px) { .result-search-card__button { padding: 13px 22px; font-size: 15px; } } @media screen and (max-width: 992px) { .result-search-card__button { padding: 12px 20px; font-size: 15px; } } @media screen and (max-width: 768px) { .result-search-card__button { padding: 12px 24px; font-size: 15px; } } @media screen and (max-width: 640px) { .result-search-card__button { padding: 11px 22px; font-size: 14px; border-radius: 7px; } } @media screen and (max-width: 480px) { .result-search-card__button { padding: 10px 20px; font-size: 14px; border-radius: 6px; } } .result-search-card__button:hover { background-color: #00723f; border-color: #00723f; -webkit-transform: translateY(-2px); transform: translateY(-2px); } @media screen and (max-width: 768px) { .result-search-card__button:hover { -webkit-transform: translateY(-1px); transform: translateY(-1px); } } @media screen and (max-width: 480px) { .result-search-card__button:hover { -webkit-transform: none; transform: none; } } /** * Tra cứu kết quả B2C Styles * * @package One_Lab */ .page-tra-cuu-b2c { background: #ffffff; } .tra-cuu-hero { position: relative; background: linear-gradient(135deg, #00a651 0%, #008542 100%); background-size: cover; background-position: center; padding: 60px 0; text-align: center; } .tra-cuu-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); background-size: 200px; opacity: 0.3; z-index: 1; } .tra-cuu-hero .container { position: relative; z-index: 2; } .tra-cuu-hero__content { max-width: 900px; margin: 0 auto; } .tra-cuu-hero__title { font-size: 2rem; font-weight: 700; color: #00704a; margin: 0 0 16px; } @media (min-width: 768px) { .tra-cuu-hero__title { font-size: 2.5rem; } } .tra-cuu-hero__subtitle { font-size: 0.9rem; color: #00704a; margin: 0; line-height: 1.6; } @media (min-width: 768px) { .tra-cuu-hero__subtitle { font-size: 1rem; } } .tra-cuu-portal { padding: 36px 0; } .tra-cuu-portal__header { margin-bottom: 32px; } .tra-cuu-portal__title { font-size: 36px; font-weight: 700; color: #00704a; margin: 0; line-height: 1.3; } @media (max-width: 768px) { .tra-cuu-portal__title { font-size: 24px; } } @media (max-width: 992px) { .tra-cuu-portal__title { font-size: 28px; } } .tra-cuu-portal__wrapper { display: grid; grid-template-columns: 1fr; gap: 0; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; background-color: white; -webkit-box-shadow: 0 0 15.7px 0 rgba(205, 205, 205, 0.25); box-shadow: 0 0 15.7px 0 rgba(205, 205, 205, 0.25); border-radius: 12px; overflow: hidden; } @media (min-width: 992px) { .tra-cuu-portal__wrapper { grid-template-columns: 1fr 1fr; } } .tra-cuu-portal__form-column { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .tra-cuu-portal__image-column { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } @media (max-width: 991px) { .tra-cuu-portal__image-column { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } .tra-cuu-portal__image { height: 100%; max-height: 400px; } .tra-cuu-portal__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; } .tra-cuu-form { background: #ffffff; border-radius: 0; padding: 32px; width: 100%; } @media (min-width: 768px) { .tra-cuu-form { padding: 48px; } } @media (min-width: 992px) { .tra-cuu-form { padding: 48px 56px; } } .tra-cuu-form .form-group { margin-bottom: 20px; } .tra-cuu-form .form-group label { display: block; font-size: 15px; font-weight: 500; color: #333333; margin-bottom: 8px; } .tra-cuu-form .form-group label .required { color: #dc3232; margin-left: 2px; } .tra-cuu-form .form-group .phone-input-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .tra-cuu-form .form-group .phone-input__country { width: 80px; height: 48px; padding: 0 32px 0 12px; border: 1px solid #e5e5e5; border-radius: 8px; background: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; font-size: 15px; font-weight: 500; color: #333333; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -ms-flex-negative: 0; flex-shrink: 0; appearance: none; -webkit-appearance: none; -moz-appearance: none; } .tra-cuu-form .form-group .phone-input__country:focus { outline: none; border-color: #00a651; -webkit-box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.1); box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.1); } .tra-cuu-form .form-group input[type=tel] { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 48px; padding: 0 16px; border: 1px solid #e5e5e5; border-radius: 8px; background: #ffffff; font-size: 15px; color: #333333; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .tra-cuu-form .form-group input[type=tel]::-webkit-input-placeholder { color: #999; } .tra-cuu-form .form-group input[type=tel]::-moz-placeholder { color: #999; } .tra-cuu-form .form-group input[type=tel]:-ms-input-placeholder { color: #999; } .tra-cuu-form .form-group input[type=tel]::-ms-input-placeholder { color: #999; } .tra-cuu-form .form-group input[type=tel]::placeholder { color: #999; } .tra-cuu-form .form-group input[type=tel]:focus { outline: none; border-color: #00a651; -webkit-box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.1); box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.1); } .tra-cuu-form .form-group input[type=tel].error { border-color: #dc3232; -webkit-box-shadow: 0 0 0 3px rgba(220, 50, 50, 0.1); box-shadow: 0 0 0 3px rgba(220, 50, 50, 0.1); } .tra-cuu-form .form-group .onelab-form__error { display: none; font-size: 12px; color: #dc3232; margin-top: 4px; } .tra-cuu-form .form-group .onelab-form__error.show { display: block; } .tra-cuu-form__title { font-size: 1.125rem; font-weight: 600; color: #333333; margin: 0 0 24px; } .tra-cuu-form__submit { margin-top: 32px; } .tra-cuu-form__submit .btn-block { width: 100%; height: 48px; font-size: 0.9375rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .tra-cuu-form__submit .btn-primary { background: #00704a; color: #ffffff; border: 2px solid #00704a; border-radius: 8px; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .tra-cuu-form__submit .btn-primary:hover { background: #008542; border-color: #008542; -webkit-transform: translateY(-1px); transform: translateY(-1px); -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } .tra-cuu-form__submit .btn-primary:active { -webkit-transform: translateY(0); transform: translateY(0); } .tra-cuu-result { margin-top: 24px; } .tra-cuu-result__loading { text-align: center; padding: 40px 20px; } .tra-cuu-result__loading .spinner { width: 40px; height: 40px; border: 3px solid #e5e5e5; border-top-color: #00a651; border-radius: 50%; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; margin: 0 auto 16px; } .tra-cuu-result__loading p { color: #666666; margin: 0; } @keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .tra-cuu-result__content { background: #ffffff; border-radius: 8px; padding: 24px; border: 1px solid #e5e5e5; } .tra-cuu-result__content .result-found h4 { color: #00a651; font-size: 1.125rem; margin: 0 0 16px; } .tra-cuu-result__content .result-found .result-list { list-style: none; padding: 0; margin: 0; } .tra-cuu-result__content .result-found .result-list li { padding: 12px 0; border-bottom: 1px solid #e5e5e5; } .tra-cuu-result__content .result-found .result-list li:last-child { border-bottom: none; } .tra-cuu-result__content .result-found .result-list li a { color: #00a651; text-decoration: none; font-weight: 500; } .tra-cuu-result__content .result-found .result-list li a:hover { text-decoration: underline; } .tra-cuu-result__content .no-result { text-align: center; padding: 20px; } .tra-cuu-result__content .no-result p { color: #666666; margin: 0; } .tra-cuu-result__content .error-message { color: #dc3232; text-align: center; padding: 20px; } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .olhs-page .olhs-hero { height: auto; min-height: unset; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; text-wrap: pretty; } @media screen and (max-width: 992px) { .olhs-page .olhs-hero { background-image: var(--bg-mobile) !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .olhs-page .olhs-hero::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; background: radial-gradient(circle, rgb(0, 112, 74) 0%, #9defd3 100%); opacity: 0.4; pointer-events: none; } @media screen and (min-width: 993px) { .olhs-page .olhs-hero::after { display: none; } } .olhs-page .olhs-hero .container { padding-right: 0; } .olhs-page .olhs-hero__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 48px; position: relative; min-height: inherit; } .olhs-page .olhs-hero__content { color: #ffffff; position: relative; z-index: 1; max-width: 840px; -webkit-box-flex: 1; -ms-flex: 1 1 55%; flex: 1 1 55%; margin: 5rem 0; } @media screen and (max-width: 992px) { .olhs-page .olhs-hero__content { max-width: 640px; margin: 1rem 0; } } @media screen and (max-width: 768px) { .olhs-page .olhs-hero__content { max-width: 100%; } } @media screen and (max-width: 576px) { .olhs-page .olhs-hero__content { padding: 0; } } .olhs-page .olhs-hero__title { font-size: 48px; font-weight: 800; line-height: 150%; margin: 0; color: #ffffff; font-family: "Montserrat", sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } @media screen and (max-width: 1770px) { .olhs-page .olhs-hero__title { font-size: 43px; margin-bottom: 16px; } } @media screen and (max-width: 1440px) { .olhs-page .olhs-hero__title { font-size: 38px; margin-bottom: 15px; } } @media screen and (max-width: 1200px) { .olhs-page .olhs-hero__title { font-size: 34px; margin-bottom: 13px; } } @media screen and (max-width: 992px) { .olhs-page .olhs-hero__title { font-size: 29px; margin-bottom: 12px; } } @media screen and (max-width: 768px) { .olhs-page .olhs-hero__title { font-size: 24px; margin-bottom: 10px; } } @media screen and (max-width: 640px) { .olhs-page .olhs-hero__title { font-size: 22px; margin-bottom: 9px; } } @media screen and (max-width: 480px) { .olhs-page .olhs-hero__title { font-size: 20px; margin-bottom: 8px; } } .olhs-page .olhs-hero__eyebrow { font-size: 24px; line-height: 150%; font-weight: 600; margin: 0 0 32px; color: #fff; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } @media screen and (max-width: 1770px) { .olhs-page .olhs-hero__eyebrow { font-size: 22px; margin-bottom: 28px; } } @media screen and (max-width: 1440px) { .olhs-page .olhs-hero__eyebrow { font-size: 19px; margin-bottom: 24px; } } @media screen and (max-width: 1200px) { .olhs-page .olhs-hero__eyebrow { font-size: 17px; margin-bottom: 20px; } } @media screen and (max-width: 992px) { .olhs-page .olhs-hero__eyebrow { font-size: 15px; margin-bottom: 18px; } } @media screen and (max-width: 768px) { .olhs-page .olhs-hero__eyebrow { font-size: 13px; margin-bottom: 14px; } } @media screen and (max-width: 640px) { .olhs-page .olhs-hero__eyebrow { font-size: 12px; margin-bottom: 12px; } } @media screen and (max-width: 480px) { .olhs-page .olhs-hero__eyebrow { font-size: 12px; margin-bottom: 12px; } } .olhs-page .olhs-hero__desc { font-size: 24px; line-height: 150%; font-weight: 800; margin: 0 0 12px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } @media screen and (max-width: 1770px) { .olhs-page .olhs-hero__desc { font-size: 22px; margin-bottom: 11px; } } @media screen and (max-width: 1440px) { .olhs-page .olhs-hero__desc { font-size: 19px; margin-bottom: 10px; } } @media screen and (max-width: 1200px) { .olhs-page .olhs-hero__desc { font-size: 17px; margin-bottom: 8px; } } @media screen and (max-width: 992px) { .olhs-page .olhs-hero__desc { font-size: 14px; margin-bottom: 8px; } } @media screen and (max-width: 768px) { .olhs-page .olhs-hero__desc { font-size: 12px; margin-bottom: 14px; } } @media screen and (max-width: 640px) { .olhs-page .olhs-hero__desc { font-size: 11px; margin-bottom: 12px; } } @media screen and (max-width: 480px) { .olhs-page .olhs-hero__desc { font-size: 11px; margin-bottom: 10px; } } .olhs-page .olhs-hero__desc p { margin: 0 0 12px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } .olhs-page .olhs-hero__desc p:last-child { margin-bottom: 0; } .olhs-page .olhs-hero__bullets { list-style: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } @media screen and (max-width: 1770px) { .olhs-page .olhs-hero__bullets { gap: 11px; } } @media screen and (max-width: 1440px) { .olhs-page .olhs-hero__bullets { gap: 10px; } } @media screen and (max-width: 1200px) { .olhs-page .olhs-hero__bullets { gap: 8px; } } @media screen and (max-width: 992px) { .olhs-page .olhs-hero__bullets { gap: 7px; } } @media screen and (max-width: 768px) { .olhs-page .olhs-hero__bullets { gap: 6px; } } @media screen and (max-width: 640px) { .olhs-page .olhs-hero__bullets { gap: 5px; } } @media screen and (max-width: 480px) { .olhs-page .olhs-hero__bullets { gap: 6px; } } .olhs-page .olhs-hero__bullet { font-size: 20px; line-height: 150%; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } @media screen and (max-width: 1770px) { .olhs-page .olhs-hero__bullet { font-size: 18px; gap: 11px; } } @media screen and (max-width: 1440px) { .olhs-page .olhs-hero__bullet { font-size: 16px; gap: 10px; } } @media screen and (max-width: 1200px) { .olhs-page .olhs-hero__bullet { font-size: 14px; gap: 8px; margin-bottom: 6px; padding-left: 14px; } } @media screen and (max-width: 992px) { .olhs-page .olhs-hero__bullet { font-size: 13px; gap: 8px; margin-bottom: 6px; padding-left: 12px; } } @media screen and (max-width: 768px) { .olhs-page .olhs-hero__bullet { font-size: 12px; gap: 8px; margin-bottom: 5px; padding-left: 12px; } } @media screen and (max-width: 640px) { .olhs-page .olhs-hero__bullet { font-size: 11px; gap: 6px; margin-bottom: 4px; padding-left: 10px; } } @media screen and (max-width: 480px) { .olhs-page .olhs-hero__bullet { font-size: 11px; gap: 6px; margin-bottom: 5px; padding-left: 10px; } } .olhs-page .olhs-hero__bullet p { margin: 0; display: inline-block; } .olhs-page .olhs-hero__bullet b { font-weight: 700; } .olhs-page .olhs-hero__actions { margin-top: 32px; } @media screen and (max-width: 1770px) { .olhs-page .olhs-hero__actions { margin-top: 28px; } } @media screen and (max-width: 1440px) { .olhs-page .olhs-hero__actions { margin-top: 24px; } } @media screen and (max-width: 1200px) { .olhs-page .olhs-hero__actions { margin-top: 20px; } } @media screen and (max-width: 992px) { .olhs-page .olhs-hero__actions { margin-top: 18px; } } @media screen and (max-width: 768px) { .olhs-page .olhs-hero__actions { margin-top: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media screen and (max-width: 640px) { .olhs-page .olhs-hero__actions { margin-top: 14px; } } @media screen and (max-width: 480px) { .olhs-page .olhs-hero__actions { margin-top: 14px; } } .olhs-page .olhs-hero__cta { font-size: 24px; font-weight: 800; padding: 16px 24px; border-radius: 8px; background-color: #ffffff; color: #00704a; text-transform: uppercase; border: none; outline: none; line-height: 150%; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } @media screen and (max-width: 1770px) { .olhs-page .olhs-hero__cta { font-size: 22px; padding: 15px 22px; border-radius: 7px; } } @media screen and (max-width: 1440px) { .olhs-page .olhs-hero__cta { font-size: 19px; padding: 14px 20px; border-radius: 7px; } } @media screen and (max-width: 1200px) { .olhs-page .olhs-hero__cta { font-size: 17px; padding: 12px 18px; border-radius: 6px; } } @media screen and (max-width: 992px) { .olhs-page .olhs-hero__cta { font-size: 16px; padding: 11px 16px; border-radius: 6px; } } @media screen and (max-width: 768px) { .olhs-page .olhs-hero__cta { font-size: 14px; padding: 10px 14px; border-radius: 5px; width: 100%; } } @media screen and (max-width: 640px) { .olhs-page .olhs-hero__cta { font-size: 12px; padding: 9px 12px; border-radius: 5px; width: 100%; } } @media screen and (max-width: 480px) { .olhs-page .olhs-hero__cta { font-size: 12px; padding: 10px 14px; border-radius: 5px; width: 100%; } } .olhs-page .olhs-hero__cta:hover { background-color: #00704a; color: #ffffff; border-color: #00704a; -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.2); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.2); } .olhs-page .olhs-hero__media { display: none; } @media screen and (max-width: 992px) { .olhs-page .olhs-hero__media { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-item-align: stretch; align-self: stretch; position: relative; z-index: 1; -webkit-box-flex: 0; -ms-flex: 0 0 42%; flex: 0 0 42%; max-width: 100%; margin-top: 24px; } } @media screen and (max-width: 768px) { .olhs-page .olhs-hero__media { position: static; max-width: unset; margin: 20px auto 0; } } @media screen and (max-width: 640px) { .olhs-page .olhs-hero__media { margin-top: 16px; } } @media screen and (max-width: 480px) { .olhs-page .olhs-hero__media { margin-top: 16px; } } .olhs-page .olhs-hero__image-wrapper { height: 100%; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; position: relative; } .olhs-page .olhs-hero__image-wrapper::before { content: ""; position: absolute; top: 0; left: 0; width: 200px; height: 100%; background: -webkit-gradient(linear, left top, right top, from(rgb(93, 195, 161)), color-stop(40%, rgba(93, 195, 161, 0.6)), to(rgba(93, 195, 161, 0))); background: linear-gradient(90deg, rgb(93, 195, 161) 0%, rgba(93, 195, 161, 0.6) 40%, rgba(93, 195, 161, 0) 100%); z-index: 3; pointer-events: none; } @media screen and (max-width: 1770px) { .olhs-page .olhs-hero__image-wrapper::before { width: 180px; } } @media screen and (max-width: 1440px) { .olhs-page .olhs-hero__image-wrapper::before { width: 160px; } } @media screen and (max-width: 1200px) { .olhs-page .olhs-hero__image-wrapper::before { width: 140px; } } @media screen and (max-width: 992px) { .olhs-page .olhs-hero__image-wrapper::before { width: 120px; } } @media screen and (max-width: 768px) { .olhs-page .olhs-hero__image-wrapper::before { width: 100px; } } @media screen and (max-width: 640px) { .olhs-page .olhs-hero__image-wrapper::before { width: 80px; } } @media screen and (max-width: 480px) { .olhs-page .olhs-hero__image-wrapper::before { display: none; } } .olhs-page .olhs-hero__image-wrapper .img-zoom { -webkit-transition: -webkit-transform 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out; } @media screen and (max-width: 992px) { .olhs-page .olhs-hero__image-wrapper { width: 100%; } } .olhs-page .olhs-hero__image-wrapper img { height: 100%; width: auto; -o-object-fit: contain; object-fit: contain; -webkit-transition: -webkit-transform 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out; } @media screen and (min-width: 993px) { .olhs-page .olhs-hero__image-wrapper img:hover { -webkit-transform: scale(1.04); transform: scale(1.04); } } @media screen and (max-width: 992px) { .olhs-page .olhs-hero__image-wrapper img { height: 100%; width: 100%; max-height: 320px; } } @media screen and (max-width: 768px) { .olhs-page .olhs-hero__image-wrapper img { max-height: 280px; } } @media screen and (max-width: 640px) { .olhs-page .olhs-hero__image-wrapper img { max-height: 240px; } } @media screen and (max-width: 480px) { .olhs-page .olhs-hero__image-wrapper img { max-height: 200px; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .olhsb2c-page .olhsb2c-hero { height: auto; min-height: unset; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; text-wrap: pretty; } @media screen and (max-width: 992px) { .olhsb2c-page .olhsb2c-hero { background-image: var(--bg-mobile) !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .olhsb2c-page .olhsb2c-hero::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; background: radial-gradient(circle, rgb(0, 112, 74) 0%, #9defd3 100%); opacity: 0.4; pointer-events: none; } @media screen and (min-width: 993px) { .olhsb2c-page .olhsb2c-hero::after { display: none; } } .olhsb2c-page .olhsb2c-hero .container { padding-right: 0; } .olhsb2c-page .olhsb2c-hero__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 48px; position: relative; min-height: inherit; } .olhsb2c-page .olhsb2c-hero__content { color: #ffffff; position: relative; z-index: 1; max-width: 840px; -webkit-box-flex: 1; -ms-flex: 1 1 55%; flex: 1 1 55%; margin: 5rem 0; } @media screen and (max-width: 992px) { .olhsb2c-page .olhsb2c-hero__content { max-width: 640px; margin: 1rem 0; } } @media screen and (max-width: 768px) { .olhsb2c-page .olhsb2c-hero__content { max-width: 100%; } } @media screen and (max-width: 576px) { .olhsb2c-page .olhsb2c-hero__content { padding: 0; } } .olhsb2c-page .olhsb2c-hero__title { font-size: 48px; font-weight: 800; line-height: 150%; margin: 0; color: #ffffff; font-family: "Montserrat", sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } @media screen and (max-width: 1770px) { .olhsb2c-page .olhsb2c-hero__title { font-size: 43px; margin-bottom: 16px; } } @media screen and (max-width: 1440px) { .olhsb2c-page .olhsb2c-hero__title { font-size: 38px; margin-bottom: 15px; } } @media screen and (max-width: 1200px) { .olhsb2c-page .olhsb2c-hero__title { font-size: 34px; margin-bottom: 13px; } } @media screen and (max-width: 992px) { .olhsb2c-page .olhsb2c-hero__title { font-size: 29px; margin-bottom: 12px; } } @media screen and (max-width: 768px) { .olhsb2c-page .olhsb2c-hero__title { font-size: 24px; margin-bottom: 10px; } } @media screen and (max-width: 640px) { .olhsb2c-page .olhsb2c-hero__title { font-size: 22px; margin-bottom: 9px; } } @media screen and (max-width: 480px) { .olhsb2c-page .olhsb2c-hero__title { font-size: 20px; margin-bottom: 8px; } } .olhsb2c-page .olhsb2c-hero__eyebrow { font-size: 24px; line-height: 150%; font-weight: 600; margin: 0 0 32px; color: #fff; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } @media screen and (max-width: 1770px) { .olhsb2c-page .olhsb2c-hero__eyebrow { font-size: 22px; margin-bottom: 28px; } } @media screen and (max-width: 1440px) { .olhsb2c-page .olhsb2c-hero__eyebrow { font-size: 19px; margin-bottom: 24px; } } @media screen and (max-width: 1200px) { .olhsb2c-page .olhsb2c-hero__eyebrow { font-size: 17px; margin-bottom: 20px; } } @media screen and (max-width: 992px) { .olhsb2c-page .olhsb2c-hero__eyebrow { font-size: 15px; margin-bottom: 18px; } } @media screen and (max-width: 768px) { .olhsb2c-page .olhsb2c-hero__eyebrow { font-size: 13px; margin-bottom: 14px; } } @media screen and (max-width: 640px) { .olhsb2c-page .olhsb2c-hero__eyebrow { font-size: 12px; margin-bottom: 12px; } } @media screen and (max-width: 480px) { .olhsb2c-page .olhsb2c-hero__eyebrow { font-size: 12px; margin-bottom: 12px; } } .olhsb2c-page .olhsb2c-hero__desc { font-size: 24px; line-height: 150%; font-weight: 800; margin: 0 0 12px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } @media screen and (max-width: 1770px) { .olhsb2c-page .olhsb2c-hero__desc { font-size: 22px; margin-bottom: 11px; } } @media screen and (max-width: 1440px) { .olhsb2c-page .olhsb2c-hero__desc { font-size: 19px; margin-bottom: 10px; } } @media screen and (max-width: 1200px) { .olhsb2c-page .olhsb2c-hero__desc { font-size: 17px; margin-bottom: 8px; } } @media screen and (max-width: 992px) { .olhsb2c-page .olhsb2c-hero__desc { font-size: 14px; margin-bottom: 8px; } } @media screen and (max-width: 768px) { .olhsb2c-page .olhsb2c-hero__desc { font-size: 12px; margin-bottom: 14px; } } @media screen and (max-width: 640px) { .olhsb2c-page .olhsb2c-hero__desc { font-size: 11px; margin-bottom: 12px; } } @media screen and (max-width: 480px) { .olhsb2c-page .olhsb2c-hero__desc { font-size: 11px; margin-bottom: 10px; } } .olhsb2c-page .olhsb2c-hero__desc p { margin: 0 0 12px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } .olhsb2c-page .olhsb2c-hero__desc p:last-child { margin-bottom: 0; } .olhsb2c-page .olhsb2c-hero__bullets { list-style: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } @media screen and (max-width: 1770px) { .olhsb2c-page .olhsb2c-hero__bullets { gap: 11px; } } @media screen and (max-width: 1440px) { .olhsb2c-page .olhsb2c-hero__bullets { gap: 10px; } } @media screen and (max-width: 1200px) { .olhsb2c-page .olhsb2c-hero__bullets { gap: 8px; } } @media screen and (max-width: 992px) { .olhsb2c-page .olhsb2c-hero__bullets { gap: 7px; } } @media screen and (max-width: 768px) { .olhsb2c-page .olhsb2c-hero__bullets { gap: 6px; } } @media screen and (max-width: 640px) { .olhsb2c-page .olhsb2c-hero__bullets { gap: 5px; } } @media screen and (max-width: 480px) { .olhsb2c-page .olhsb2c-hero__bullets { gap: 6px; } } .olhsb2c-page .olhsb2c-hero__bullet { font-size: 20px; line-height: 150%; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } @media screen and (max-width: 1770px) { .olhsb2c-page .olhsb2c-hero__bullet { font-size: 18px; gap: 11px; } } @media screen and (max-width: 1440px) { .olhsb2c-page .olhsb2c-hero__bullet { font-size: 16px; gap: 10px; } } @media screen and (max-width: 1200px) { .olhsb2c-page .olhsb2c-hero__bullet { font-size: 14px; gap: 8px; margin-bottom: 6px; padding-left: 14px; } } @media screen and (max-width: 992px) { .olhsb2c-page .olhsb2c-hero__bullet { font-size: 13px; gap: 8px; margin-bottom: 6px; padding-left: 12px; } } @media screen and (max-width: 768px) { .olhsb2c-page .olhsb2c-hero__bullet { font-size: 12px; gap: 8px; margin-bottom: 5px; padding-left: 12px; } } @media screen and (max-width: 640px) { .olhsb2c-page .olhsb2c-hero__bullet { font-size: 11px; gap: 6px; margin-bottom: 4px; padding-left: 10px; } } @media screen and (max-width: 480px) { .olhsb2c-page .olhsb2c-hero__bullet { font-size: 11px; gap: 6px; margin-bottom: 5px; padding-left: 10px; } } .olhsb2c-page .olhsb2c-hero__bullet p { margin: 0; display: inline-block; } .olhsb2c-page .olhsb2c-hero__bullet b { font-weight: 700; } .olhsb2c-page .olhsb2c-hero__actions { margin-top: 32px; } @media screen and (max-width: 1770px) { .olhsb2c-page .olhsb2c-hero__actions { margin-top: 28px; } } @media screen and (max-width: 1440px) { .olhsb2c-page .olhsb2c-hero__actions { margin-top: 24px; } } @media screen and (max-width: 1200px) { .olhsb2c-page .olhsb2c-hero__actions { margin-top: 20px; } } @media screen and (max-width: 992px) { .olhsb2c-page .olhsb2c-hero__actions { margin-top: 18px; } } @media screen and (max-width: 768px) { .olhsb2c-page .olhsb2c-hero__actions { margin-top: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media screen and (max-width: 640px) { .olhsb2c-page .olhsb2c-hero__actions { margin-top: 14px; } } @media screen and (max-width: 480px) { .olhsb2c-page .olhsb2c-hero__actions { margin-top: 14px; } } .olhsb2c-page .olhsb2c-hero__cta { font-size: 24px; font-weight: 800; padding: 16px 24px; border-radius: 8px; background-color: #ffffff; color: #00704a; text-transform: uppercase; border: none; outline: none; line-height: 150%; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } @media screen and (max-width: 1770px) { .olhsb2c-page .olhsb2c-hero__cta { font-size: 22px; padding: 15px 22px; border-radius: 7px; } } @media screen and (max-width: 1440px) { .olhsb2c-page .olhsb2c-hero__cta { font-size: 19px; padding: 14px 20px; border-radius: 7px; } } @media screen and (max-width: 1200px) { .olhsb2c-page .olhsb2c-hero__cta { font-size: 17px; padding: 12px 18px; border-radius: 6px; } } @media screen and (max-width: 992px) { .olhsb2c-page .olhsb2c-hero__cta { font-size: 16px; padding: 11px 16px; border-radius: 6px; } } @media screen and (max-width: 768px) { .olhsb2c-page .olhsb2c-hero__cta { font-size: 14px; padding: 10px 14px; border-radius: 5px; width: 100%; } } @media screen and (max-width: 640px) { .olhsb2c-page .olhsb2c-hero__cta { font-size: 12px; padding: 9px 12px; border-radius: 5px; width: 100%; } } @media screen and (max-width: 480px) { .olhsb2c-page .olhsb2c-hero__cta { font-size: 12px; padding: 10px 14px; border-radius: 5px; width: 100%; } } .olhsb2c-page .olhsb2c-hero__cta:hover { background-color: #00704a; color: #ffffff; border-color: #00704a; -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.2); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.2); } .olhsb2c-page .olhsb2c-hero__media { display: none; } @media screen and (max-width: 992px) { .olhsb2c-page .olhsb2c-hero__media { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-item-align: stretch; align-self: stretch; position: relative; z-index: 1; -webkit-box-flex: 0; -ms-flex: 0 0 42%; flex: 0 0 42%; max-width: 100%; margin-top: 24px; } } @media screen and (max-width: 768px) { .olhsb2c-page .olhsb2c-hero__media { position: static; max-width: unset; margin: 20px auto 0; } } @media screen and (max-width: 640px) { .olhsb2c-page .olhsb2c-hero__media { margin-top: 16px; } } @media screen and (max-width: 480px) { .olhsb2c-page .olhsb2c-hero__media { margin-top: 16px; } } .olhsb2c-page .olhsb2c-hero__image-wrapper { height: 100%; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; position: relative; } .olhsb2c-page .olhsb2c-hero__image-wrapper::before { content: ""; position: absolute; top: 0; left: 0; width: 200px; height: 100%; background: -webkit-gradient(linear, left top, right top, from(rgb(93, 195, 161)), color-stop(40%, rgba(93, 195, 161, 0.6)), to(rgba(93, 195, 161, 0))); background: linear-gradient(90deg, rgb(93, 195, 161) 0%, rgba(93, 195, 161, 0.6) 40%, rgba(93, 195, 161, 0) 100%); z-index: 3; pointer-events: none; } @media screen and (max-width: 1770px) { .olhsb2c-page .olhsb2c-hero__image-wrapper::before { width: 180px; } } @media screen and (max-width: 1440px) { .olhsb2c-page .olhsb2c-hero__image-wrapper::before { width: 160px; } } @media screen and (max-width: 1200px) { .olhsb2c-page .olhsb2c-hero__image-wrapper::before { width: 140px; } } @media screen and (max-width: 992px) { .olhsb2c-page .olhsb2c-hero__image-wrapper::before { width: 120px; } } @media screen and (max-width: 768px) { .olhsb2c-page .olhsb2c-hero__image-wrapper::before { width: 100px; } } @media screen and (max-width: 640px) { .olhsb2c-page .olhsb2c-hero__image-wrapper::before { width: 80px; } } @media screen and (max-width: 480px) { .olhsb2c-page .olhsb2c-hero__image-wrapper::before { display: none; } } .olhsb2c-page .olhsb2c-hero__image-wrapper .img-zoom { -webkit-transition: -webkit-transform 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out; } @media screen and (max-width: 992px) { .olhsb2c-page .olhsb2c-hero__image-wrapper { width: 100%; } } .olhsb2c-page .olhsb2c-hero__image-wrapper img { height: 100%; width: auto; -o-object-fit: contain; object-fit: contain; -webkit-transition: -webkit-transform 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out; } @media screen and (min-width: 993px) { .olhsb2c-page .olhsb2c-hero__image-wrapper img:hover { -webkit-transform: scale(1.04); transform: scale(1.04); } } .olhsb2c-app-promo { background-color: #00704a; padding: 48px 0; overflow: hidden; } @media screen and (max-width: 992px) { .olhsb2c-app-promo { padding: 32px 0; } } @media screen and (max-width: 576px) { .olhsb2c-app-promo { padding: 24px 0; } } .olhsb2c-app-promo__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 48px; } @media screen and (max-width: 992px) { .olhsb2c-app-promo__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 32px; } } .olhsb2c-app-promo__content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; color: #ffffff; } .olhsb2c-app-promo__title { font-size: 24px; font-weight: 800; line-height: 1.4; margin: 0 0 24px; color: #ffffff; font-family: "Montserrat", sans-serif; text-transform: uppercase; } @media screen and (max-width: 1440px) { .olhsb2c-app-promo__title { font-size: 24px; margin-bottom: 20px; } } @media screen and (max-width: 992px) { .olhsb2c-app-promo__title { font-size: 20px; margin-bottom: 16px; } } @media screen and (max-width: 576px) { .olhsb2c-app-promo__title { font-size: 18px; margin-bottom: 12px; } } .olhsb2c-app-promo__benefits { list-style: none; padding: 0; margin: 0 0 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } @media screen and (max-width: 992px) { .olhsb2c-app-promo__benefits { gap: 10px; margin-bottom: 20px; } } @media screen and (max-width: 576px) { .olhsb2c-app-promo__benefits { gap: 8px; margin-bottom: 16px; } } .olhsb2c-app-promo__benefit { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 12px; font-size: 20px; line-height: 1.5; color: #ffffff; } @media screen and (max-width: 992px) { .olhsb2c-app-promo__benefit { font-size: 14px; gap: 10px; } } @media screen and (max-width: 576px) { .olhsb2c-app-promo__benefit { font-size: 13px; gap: 8px; } } .olhsb2c-app-promo__benefit-icon { -ms-flex-negative: 0; flex-shrink: 0; width: 20px; height: 20px; color: #ffffff; margin-top: 2px; } @media screen and (max-width: 576px) { .olhsb2c-app-promo__benefit-icon { width: 16px; height: 16px; } } .olhsb2c-app-promo__cta-text { font-size: 24px; font-weight: 800; color: #ffffff; margin: 0 0 20px; text-transform: uppercase; } @media screen and (max-width: 992px) { .olhsb2c-app-promo__cta-text { font-size: 22px; margin-bottom: 16px; } } @media screen and (max-width: 576px) { .olhsb2c-app-promo__cta-text { font-size: 20px; margin-bottom: 12px; } } .olhsb2c-app-promo__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (max-width: 576px) { .olhsb2c-app-promo__actions { gap: 12px; } } .olhsb2c-app-promo__qr { width: 100px; height: 100px; background: #ffffff; border-radius: 3px; padding: 4px; -ms-flex-negative: 0; flex-shrink: 0; } .olhsb2c-app-promo__qr img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 576px) { .olhsb2c-app-promo__qr { width: 64px; height: 64px; } } .olhsb2c-app-promo__btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10px 24px; font-size: 16px; font-weight: 700; text-transform: uppercase; border-radius: 8px; background: #ffffff; color: #00704a; text-decoration: none; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .olhsb2c-app-promo__btn:hover { border: 2px solid #ffffff; background: transparent; color: #ffffff; } @media screen and (max-width: 576px) { .olhsb2c-app-promo__btn { padding: 10px 16px; font-size: 16px; } } .olhsb2c-app-promo__store-badge { display: inline-block; height: 40px; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } .olhsb2c-app-promo__store-badge img { height: 100%; width: auto; -o-object-fit: contain; object-fit: contain; } .olhsb2c-app-promo__store-badge:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); } @media screen and (max-width: 576px) { .olhsb2c-app-promo__store-badge { height: 32px; } } .olhsb2c-app-promo__media { -ms-flex-negative: 0; flex-shrink: 0; max-width: 475px; } .olhsb2c-app-promo__media img { width: 100%; height: 100%; max-height: 450px; aspect-ratio: 1/1; -o-object-fit: cover; object-fit: cover; border-radius: 12px; -webkit-box-shadow: 0 4px 6px -4px rgba(255, 255, 255, 0.1), 0 10px 15px -3px rgba(255, 255, 255, 0.1); box-shadow: 0 4px 6px -4px rgba(255, 255, 255, 0.1), 0 10px 15px -3px rgba(255, 255, 255, 0.1); } @media screen and (max-width: 992px) { .olhsb2c-app-promo__media { max-width: 100%; -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .page-regulation .regulation-hero { padding: 50px 0 25px; } @media screen and (max-width: 1600px) { .page-regulation .regulation-hero { padding-bottom: 22px; } } @media screen and (max-width: 1200px) { .page-regulation .regulation-hero { padding-bottom: 18px; } } .page-regulation .regulation-hero .regulation-hero__title { font-weight: 700; font-size: 36px; line-height: 150%; margin: 0 0 50px; color: #00704a; } @media screen and (max-width: 1440px) { .page-regulation .regulation-hero .regulation-hero__title { font-size: 32px; margin-bottom: 40px; } } @media screen and (max-width: 1200px) { .page-regulation .regulation-hero .regulation-hero__title { font-size: 30px; margin-bottom: 32px; } } @media screen and (max-width: 768px) { .page-regulation .regulation-hero .regulation-hero__title { font-size: 28px; margin-bottom: 24px; } } .page-regulation .regulation-hero .regulation-hero__grid { display: grid; grid-template-columns: 566px 1fr; gap: 35px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 1600px) { .page-regulation .regulation-hero .regulation-hero__grid { grid-template-columns: minmax(480px, 1fr) 1fr; gap: 28px; } } @media screen and (max-width: 1440px) { .page-regulation .regulation-hero .regulation-hero__grid { grid-template-columns: minmax(440px, 1fr) 1fr; gap: 24px; } } @media screen and (max-width: 1200px) { .page-regulation .regulation-hero .regulation-hero__grid { grid-template-columns: 1fr; } } @media (max-width: 767px) { .page-regulation .regulation-hero .regulation-hero__grid { grid-template-columns: 1fr; } } .page-regulation .regulation-hero .regulation-hero__media img { max-width: 566px; width: 100%; height: auto; display: block; aspect-ratio: 566/248; -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 1600px) { .page-regulation .regulation-hero .regulation-hero__media img { max-width: 520px; } } @media screen and (max-width: 1440px) { .page-regulation .regulation-hero .regulation-hero__media img { max-width: 480px; } } @media screen and (max-width: 1200px) { .page-regulation .regulation-hero .regulation-hero__media img { max-width: 420px; } } @media screen and (max-width: 992px) { .page-regulation .regulation-hero .regulation-hero__media img { margin: 0 auto; } } .page-regulation .regulation-hero .regulation-hero__subtitle { font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 24px; line-height: 24px; color: #00704a; margin: 0 0 19px; } @media screen and (max-width: 1440px) { .page-regulation .regulation-hero .regulation-hero__subtitle { font-size: 22px; } } @media screen and (max-width: 1200px) { .page-regulation .regulation-hero .regulation-hero__subtitle { font-size: 20px; } } .page-regulation .regulation-hero .regulation-hero__intro { text-align: justify; font-size: 16px; font-weight: 400; color: #4a5565; line-height: 24px; margin: 0; } .page-regulation .regulation-section { padding: 25px 0; } @media screen and (max-width: 1440px) { .page-regulation .regulation-section { padding: 22px 0; } } @media screen and (max-width: 992px) { .page-regulation .regulation-section { padding: 18px 0; } } .page-regulation .regulation-section .section-title { font-size: 24px; font-weight: 700; line-height: 112%; color: #00704a; margin: 0 0 24px; } @media screen and (max-width: 1440px) { .page-regulation .regulation-section .section-title { font-size: 22px; margin-bottom: 20px; } } @media screen and (max-width: 992px) { .page-regulation .regulation-section .section-title { font-size: 20px; margin-bottom: 18px; } } .page-regulation .regulation-section .section-title.text-center { text-align: center; font-weight: 700; font-size: 36px; line-height: 130%; letter-spacing: 0%; margin: 0 0 64px; } @media screen and (max-width: 1440px) { .page-regulation .regulation-section .section-title.text-center { font-size: 32px; margin-bottom: 48px; } } @media screen and (max-width: 992px) { .page-regulation .regulation-section .section-title.text-center { font-size: 28px; margin-bottom: 36px; } } @media screen and (max-width: 576px) { .page-regulation .regulation-section .section-title.text-center { font-size: 24px; margin-bottom: 28px; } } .page-regulation .regulation-section .section-subtitle { color: #4a5568; max-width: 720px; margin: 0 auto 28px; line-height: 1.7; } @media screen and (max-width: 1440px) { .page-regulation .regulation-section .section-subtitle { max-width: 640px; } } @media screen and (max-width: 992px) { .page-regulation .regulation-section .section-subtitle { max-width: 100%; } } .page-regulation .regulation-section .section-text { color: #312020; line-height: 150%; text-align: justify; } .page-regulation .regulation-section .section-text p { text-align: justify; margin: 0 0 12px; } .page-regulation .section-owner .owner-box { background: #fff; border: 1px solid #00704a; border-radius: 8px; padding: 32px; -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); } .page-regulation .section-owner .owner-box .section-text p { text-align: justify; line-height: 32px; } @media screen and (max-width: 1440px) { .page-regulation .section-owner .owner-box { padding: 28px; } } @media screen and (max-width: 768px) { .page-regulation .section-owner .owner-box { padding: 22px; } } .page-regulation .section-scope .scope-box { background: conic-gradient(from 180deg at 50% 50%, #00704a 0deg, #00723f 360deg); color: #ffffff; padding: 32px; border-radius: 8px; background-size: cover; background-position: center; } @media screen and (max-width: 1440px) { .page-regulation .section-scope .scope-box { padding: 28px; } } @media screen and (max-width: 992px) { .page-regulation .section-scope .scope-box { padding: 24px; } } .page-regulation .section-scope .scope-box .section-title { color: #ffffff; } .page-regulation .section-scope .scope-box .section-text { color: #fff; font-size: 18px; line-height: 150%; text-align: justify; } @media screen and (max-width: 992px) { .page-regulation .section-scope .scope-box .section-text { font-size: 16px; } } .page-regulation .section-scope .scope-box .section-text p { margin: 0 0 12px; } .page-regulation .section-scope .scope-box .section-text p:last-child { margin-bottom: 0; } .page-regulation .section-accordion .accordion { border: none; border-radius: 0; overflow: visible; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } @media screen and (max-width: 992px) { .page-regulation .section-accordion .accordion { gap: 0; } } .page-regulation .section-accordion .accordion-item { border-radius: 8px; background: #fff; margin-bottom: 24px; overflow: hidden; } @media screen and (max-width: 992px) { .page-regulation .section-accordion .accordion-item { padding: 16px 0; margin-bottom: 0; text-align: justify; } } @media screen and (max-width: 768px) { .page-regulation .section-accordion .accordion-item { padding: 8px 0; } } .page-regulation .section-accordion .accordion-item .accordion-title { font-size: 24px; font-weight: 700; line-height: 112%; color: #00704a; margin: 0; padding: 0; } @media screen and (max-width: 1440px) { .page-regulation .section-accordion .accordion-item .accordion-title { font-size: 22px; } } @media screen and (max-width: 1200px) { .page-regulation .section-accordion .accordion-item .accordion-title { font-size: 20px; } } @media screen and (max-width: 768px) { .page-regulation .section-accordion .accordion-item .accordion-title { font-size: 18px; } } .page-regulation .section-accordion .accordion-item:not(.is-open) .accordion-body { display: none; } .page-regulation .section-accordion .accordion-header { width: 100%; text-align: left; border: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background: transparent; cursor: pointer; padding: 4px 0 6px; gap: 12px; } .page-regulation .section-accordion .accordion-header .accordion-icon { width: 30px; height: 30px; -webkit-transition: -webkit-transform 0.25s ease; transition: -webkit-transform 0.25s ease; transition: transform 0.25s ease; transition: transform 0.25s ease, -webkit-transform 0.25s ease; } .page-regulation .section-accordion .accordion-header .accordion-icon img { width: 100%; height: 100%; display: block; -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 1200px) { .page-regulation .section-accordion .accordion-header .accordion-icon { width: 20px; height: 20px; } } .page-regulation .section-accordion .accordion-item.is-open .accordion-icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .page-regulation .section-accordion .accordion-body { padding: 0 20px; max-height: 0; overflow: hidden; -webkit-transition: max-height 0.3s ease, padding 0.3s ease; transition: max-height 0.3s ease, padding 0.3s ease; } @media screen and (max-width: 768px) { .page-regulation .section-accordion .accordion-body { padding: 4px 0 0 16px; } } .page-regulation .section-accordion .accordion-item-child { display: grid; grid-template-columns: 260px 1fr; gap: 50px; -webkit-box-align: start; -ms-flex-align: start; align-items: start; padding: 0 0 6px; } @media screen and (max-width: 1440px) { .page-regulation .section-accordion .accordion-item-child { grid-template-columns: 230px 1fr; gap: 32px; } } @media screen and (max-width: 1200px) { .page-regulation .section-accordion .accordion-item-child { grid-template-columns: 200px 1fr; gap: 24px; } } @media screen and (max-width: 992px) { .page-regulation .section-accordion .accordion-item-child { grid-template-columns: 1fr; gap: 16px; } } .page-regulation .section-accordion .accordion-item-child__title { margin: 0; color: #00704a; font-size: 18px; font-weight: 700; line-height: 112%; } @media screen and (max-width: 1440px) { .page-regulation .section-accordion .accordion-item-child__title { font-size: 17px; } } @media screen and (max-width: 1200px) { .page-regulation .section-accordion .accordion-item-child__title { font-size: 16px; } } @media screen and (max-width: 768px) { .page-regulation .section-accordion .accordion-item-child__title { font-size: 15px; } } .page-regulation .section-accordion .accordion-item.is-open .accordion-body { padding: 18px 0px 0; } @media screen and (max-width: 768px) { .page-regulation .section-accordion .accordion-item.is-open .accordion-body { padding: 4px 0 0 16px; } } .page-regulation .section-accordion .accordion-section-content { margin-bottom: 12px; color: #312020; line-height: 150%; font-size: 16px; } @media screen and (max-width: 992px) { .page-regulation .section-accordion .accordion-section-content { font-size: 15px; } } @media screen and (max-width: 768px) { .page-regulation .section-accordion .accordion-section-content { font-size: 14px; } } .page-regulation .section-accordion .accordion-section-content p { margin: 0 0 10px; } .page-regulation .section-accordion .accordion-section-content p:last-child { margin-bottom: 0; } .page-regulation .section-accordion .accordion-item-child + .accordion-item-child { margin-top: 12px; padding-top: 12px; } .page-regulation .section-accordion .accordion-item-child__content { color: #3a3a3a; line-height: 150%; font-size: 16px; text-align: justify; } @media screen and (max-width: 992px) { .page-regulation .section-accordion .accordion-item-child__content { font-size: 15px; } } @media screen and (max-width: 768px) { .page-regulation .section-accordion .accordion-item-child__content { font-size: 14px; } } .page-regulation .section-accordion .accordion-item-child__content p { margin: 0 0 8px; } .page-regulation .section-accordion .accordion-item-child__content p:last-child { margin-bottom: 0; } .page-regulation .section-booking .process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 20px; } .page-regulation .section-booking .process-step { background: #f8fafc; border-radius: 12px; padding: 18px; text-align: center; -webkit-transition: border-color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; transition: border-color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; border: 1px solid rgba(0, 112, 74, 0.06); } @media (hover: hover) { .page-regulation .section-booking .process-step:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); border-color: rgba(0, 112, 74, 0.18); } } @media screen and (max-width: 1440px) { .page-regulation .section-booking .process-step { padding: 16px; } } @media screen and (max-width: 768px) { .page-regulation .section-booking .process-step { padding: 14px; } } .page-regulation .section-booking .process-step__icon img { max-height: 64px; margin: 0 auto 12px; } .page-regulation .section-booking .process-step__desc { color: #2d3748; line-height: 1.6; margin: 0; } .page-regulation .section-result { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 70px 0 130px; } @media screen and (max-width: 1680px) { .page-regulation .section-result { padding: 62px 0 112px; } } @media screen and (max-width: 1440px) { .page-regulation .section-result { padding: 56px 0 96px; } } @media screen and (max-width: 1200px) { .page-regulation .section-result { padding: 48px 0 80px; } } @media screen and (max-width: 768px) { .page-regulation .section-result { padding: 36px 0 60px; } } .page-regulation .section-result .result-layout { display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-template-columns: 255px 661px 208px; grid-template-areas: "left center right" "cta-left cta-empty cta-right"; gap: 0; position: relative; padding-bottom: 120px; } @media screen and (max-width: 1400px) { .page-regulation .section-result .result-layout { -webkit-transform: scale(0.77); transform: scale(0.77); -webkit-transform-origin: top center; transform-origin: top center; } } @media screen and (max-width: 1100px) { .page-regulation .section-result .result-layout { -webkit-transform: scale(0.64); transform: scale(0.64); } } @media (max-width: 991px) { .page-regulation .section-result .result-layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 32px; -webkit-transform: none; transform: none; } .page-regulation .section-result .result-layout > * { width: 100%; } } .page-regulation .section-result .result-col { position: relative; } @media screen and (max-width: 992px) { .page-regulation .section-result .result-col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .page-regulation .section-result .result-cta-text { position: absolute; bottom: -100px; left: 0%; width: 100%; text-align: center; margin-top: 32px; font-size: 24px; font-weight: 700; font-family: "Montserrat", sans-serif; line-height: 130%; text-transform: uppercase; color: #00704a; z-index: 1; white-space: nowrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: color 0.25s ease, -webkit-transform 0.25s ease; transition: color 0.25s ease, -webkit-transform 0.25s ease; transition: transform 0.25s ease, color 0.25s ease; transition: transform 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease; } @media (hover: hover) { .page-regulation .section-result .result-cta-text:hover { color: #00723f; -webkit-transform: translateY(-4px); transform: translateY(-4px); } } @media screen and (max-width: 992px) { .page-regulation .section-result .result-cta-text { position: unset; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 12px; -webkit-transform: none; transform: none; left: unset; bottom: unset; width: 100%; font-size: 20px; } } @media screen and (max-width: 768px) { .page-regulation .section-result .result-cta-text { font-size: 18px; white-space: wrap; } } .page-regulation .section-result .result-left { grid-area: left; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; position: relative; width: 100%; height: 100%; } .page-regulation .section-result .result-left .result-left__img { width: 100%; height: 100%; display: block; margin: 0 auto; margin-right: -5px; position: relative; z-index: 2; -o-object-fit: contain; object-fit: contain; max-width: none; max-height: none; -webkit-transition: -webkit-transform 0.3s ease, -webkit-filter 0.3s ease; transition: -webkit-transform 0.3s ease, -webkit-filter 0.3s ease; transition: transform 0.3s ease, filter 0.3s ease; transition: transform 0.3s ease, filter 0.3s ease, -webkit-transform 0.3s ease, -webkit-filter 0.3s ease; } @media (hover: hover) { .page-regulation .section-result .result-left .result-left__img:hover { -webkit-transform: scale(1.03); transform: scale(1.03); -webkit-filter: drop-shadow(0 10px 24px rgba(0, 112, 74, 0.12)); filter: drop-shadow(0 10px 24px rgba(0, 112, 74, 0.12)); } } @media screen and (max-width: 1200px) { .page-regulation .section-result .result-left .result-left__img { margin-right: 0; } } @media screen and (max-width: 991px) { .page-regulation .section-result .result-left .result-left__img { margin-right: unset; margin: 0 auto; max-width: 220px; } } @media screen and (max-width: 576px) { .page-regulation .section-result .result-left .result-left__img { max-width: 50%; } } .page-regulation .section-result .result-left .result-left__core { display: none; position: absolute; inset: 0; margin: auto; width: 320px; max-width: 100%; height: auto; z-index: 1; pointer-events: none; opacity: 1; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media (hover: hover) { .page-regulation .section-result .result-left .result-left__core:hover { -webkit-transform: scale(1.05); transform: scale(1.05); } } @media screen and (max-width: 992px) { .page-regulation .section-result .result-left .result-left__core { display: block; width: 90%; height: 90%; } } .page-regulation .section-result .result-center { grid-area: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; } .page-regulation .section-result .result-center img { width: 100%; height: auto; display: block; margin: 20px auto 0; -webkit-transition: -webkit-transform 0.3s ease, -webkit-filter 0.3s ease; transition: -webkit-transform 0.3s ease, -webkit-filter 0.3s ease; transition: transform 0.3s ease, filter 0.3s ease; transition: transform 0.3s ease, filter 0.3s ease, -webkit-transform 0.3s ease, -webkit-filter 0.3s ease; } @media (hover: hover) { .page-regulation .section-result .result-center img:hover { -webkit-transform: scale(1.03); transform: scale(1.03); -webkit-filter: drop-shadow(0 10px 24px rgba(0, 112, 74, 0.12)); filter: drop-shadow(0 10px 24px rgba(0, 112, 74, 0.12)); } } @media screen and (max-width: 992px) { .page-regulation .section-result .result-center { display: none; } } .page-regulation .section-result .result-right { grid-area: right; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 100%; } @media screen and (max-width: 992px) { .page-regulation .section-result .result-right { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .page-regulation .section-result .result-channels { display: grid; gap: 37px; margin-left: -6px; } @media screen and (max-width: 1440px) { .page-regulation .section-result .result-channels { gap: 28px; margin-left: 0; } } @media screen and (max-width: 1200px) { .page-regulation .section-result .result-channels { width: 100%; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); justify-items: center; } } @media screen and (max-width: 992px) { .page-regulation .section-result .result-channels { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: 0; } } @media screen and (max-width: 576px) { .page-regulation .section-result .result-channels { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .page-regulation .section-result .channel-item { width: 208px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 167px; padding: 13px 23px 18px 19px; border: 2px solid #f3f3f3; border-radius: 12px; background: #fff; -webkit-box-shadow: 0 4px 22.6px 0 rgba(180, 254, 196, 0.25); box-shadow: 0 4px 22.6px 0 rgba(180, 254, 196, 0.25); -webkit-transition: border-color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; transition: border-color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; } @media (hover: hover) { .page-regulation .section-result .channel-item:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); border-color: rgba(0, 112, 74, 0.24); } } @media screen and (max-width: 1440px) { .page-regulation .section-result .channel-item { width: 192px; min-height: 158px; } } @media screen and (max-width: 1200px) { .page-regulation .section-result .channel-item { width: 100%; max-width: 240px; } } @media screen and (max-width: 991px) { .page-regulation .section-result .channel-item { width: auto; max-width: 100%; } } @media screen and (max-width: 576px) { .page-regulation .section-result .channel-item { width: 100%; } } .page-regulation .section-result .channel-item__icon { max-height: 99px; } .page-regulation .section-result .channel-item__title { font-size: 20px; line-height: 150%; margin: 0; color: #00704a; } .page-regulation .operation-process-section { margin-top: 1px; } .page-regulation .operation-process-section .operation-steps { gap: 12px; padding: 24px 0 42px; } .page-regulation .operation-process-section .operation-title { text-align: center; margin: 0 0 50px; } @media screen and (max-width: 992px) { .page-regulation .operation-process-section .operation-title { margin-bottom: 36px; } } @media screen and (max-width: 768px) { .page-regulation .operation-process-section .operation-title { margin-bottom: 28px; } } .page-regulation .operation-process-section .step-icon { width: 56px; height: 56px; margin-bottom: 12px; } @media screen and (max-width: 992px) { .page-regulation .operation-process-section .step-icon { width: 52px; height: 52px; } } @media screen and (max-width: 768px) { .page-regulation .operation-process-section .step-icon { width: 48px; height: 48px; } } .page-regulation .operation-process-section .step-text { font-size: 16px; line-height: 130%; } @media screen and (max-width: 1200px) { .page-regulation .operation-process-section .step-text { font-size: 15px; } } @media screen and (max-width: 768px) { .page-regulation .operation-process-section .step-text { font-size: 14px; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .page-privacy .privacy-section { padding: 50px 0 25px; } @media screen and (max-width: 1770px) { .page-privacy .privacy-section { padding: 50px 0 25px; } } @media screen and (max-width: 1440px) { .page-privacy .privacy-section { padding: 45px 0 20px; } } @media screen and (max-width: 1200px) { .page-privacy .privacy-section { padding: 45px 0 20px; } } @media screen and (max-width: 992px) { .page-privacy .privacy-section { padding: 40px 0 18px; } } @media screen and (max-width: 768px) { .page-privacy .privacy-section { padding: 36px 0 16px; } } @media screen and (max-width: 640px) { .page-privacy .privacy-section { padding: 24px 0 14px; } } @media screen and (max-width: 480px) { .page-privacy .privacy-section { padding: 24px 0 12px; } } .page-privacy .privacy-section .section-title { font-size: 24px; font-weight: 700; line-height: 112%; color: #00704a; margin: 0 0 24px; } @media screen and (max-width: 1770px) { .page-privacy .privacy-section .section-title { font-size: 23px; margin-bottom: 22px; } } @media screen and (max-width: 1440px) { .page-privacy .privacy-section .section-title { font-size: 22px; margin-bottom: 20px; } } @media screen and (max-width: 1200px) { .page-privacy .privacy-section .section-title { font-size: 21px; margin-bottom: 19px; } } @media screen and (max-width: 992px) { .page-privacy .privacy-section .section-title { font-size: 20px; margin-bottom: 18px; } } @media screen and (max-width: 768px) { .page-privacy .privacy-section .section-title { font-size: 18px; margin-bottom: 16px; } } @media screen and (max-width: 640px) { .page-privacy .privacy-section .section-title { font-size: 16px; margin-bottom: 14px; } } @media screen and (max-width: 480px) { .page-privacy .privacy-section .section-title { font-size: 16px; margin-bottom: 14px; } } .page-privacy .privacy-section .section-text { color: #312020; line-height: 150%; text-align: justify; } .page-privacy .privacy-section .section-text p { text-align: justify; margin: 0 0 12px; } .page-privacy .privacy-section .section-text p:last-child { margin-bottom: 0; } .page-privacy .section-1 .privacy-box { background: #fff; border: 1px solid #00704a; border-radius: 8px; padding: 32px; -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); } .page-privacy .section-1 .privacy-box .section-text p { text-align: justify; line-height: 32px; font-size: 18px; } @media screen and (max-width: 1770px) { .page-privacy .section-1 .privacy-box { padding: 30px; } } @media screen and (max-width: 1440px) { .page-privacy .section-1 .privacy-box { padding: 28px; } } @media screen and (max-width: 1200px) { .page-privacy .section-1 .privacy-box { padding: 26px; } } @media screen and (max-width: 992px) { .page-privacy .section-1 .privacy-box { padding: 24px; } } @media screen and (max-width: 768px) { .page-privacy .section-1 .privacy-box { padding: 22px; } } @media screen and (max-width: 640px) { .page-privacy .section-1 .privacy-box { padding: 20px; } } @media screen and (max-width: 480px) { .page-privacy .section-1 .privacy-box { padding: 16px; } } .page-privacy .section-2 .privacy-box { background: conic-gradient(from 180deg at 50% 50%, #00704a 0deg, #00723f 360deg); color: #ffffff; padding: 32px; border-radius: 8px; background-size: cover; background-position: center; } @media screen and (max-width: 1770px) { .page-privacy .section-2 .privacy-box { padding: 30px; } } @media screen and (max-width: 1440px) { .page-privacy .section-2 .privacy-box { padding: 28px; } } @media screen and (max-width: 1200px) { .page-privacy .section-2 .privacy-box { padding: 26px; } } @media screen and (max-width: 992px) { .page-privacy .section-2 .privacy-box { padding: 24px; } } @media screen and (max-width: 768px) { .page-privacy .section-2 .privacy-box { padding: 22px; } } @media screen and (max-width: 640px) { .page-privacy .section-2 .privacy-box { padding: 20px; } } @media screen and (max-width: 480px) { .page-privacy .section-2 .privacy-box { padding: 16px; } } .page-privacy .section-2 .privacy-box .section-title { color: #ffffff; } .page-privacy .section-2 .privacy-box .section-text { color: #fff; font-size: 18px; line-height: 150%; text-align: justify; } @media screen and (max-width: 1770px) { .page-privacy .section-2 .privacy-box .section-text { font-size: 17px; } } @media screen and (max-width: 1200px) { .page-privacy .section-2 .privacy-box .section-text { font-size: 17px; } } @media screen and (max-width: 992px) { .page-privacy .section-2 .privacy-box .section-text { font-size: 16px; } } @media screen and (max-width: 768px) { .page-privacy .section-2 .privacy-box .section-text { font-size: 15px; } } @media screen and (max-width: 640px) { .page-privacy .section-2 .privacy-box .section-text { font-size: 14px; } } @media screen and (max-width: 480px) { .page-privacy .section-2 .privacy-box .section-text { font-size: 14px; } } .page-privacy .section-2 .privacy-box .section-text p { margin: 0 0 12px; } .page-privacy .section-2 .privacy-box .section-text p:last-child { margin-bottom: 0; font-size: 18px; } .page-privacy .section-accordion .main-section-title { font-size: 24px; font-weight: 700; line-height: 120%; color: #00704a; margin: 0 0 16px; } @media screen and (max-width: 1770px) { .page-privacy .section-accordion .main-section-title { font-size: 23px; margin-bottom: 15px; } } @media screen and (max-width: 1440px) { .page-privacy .section-accordion .main-section-title { font-size: 22px; margin-bottom: 14px; } } @media screen and (max-width: 1200px) { .page-privacy .section-accordion .main-section-title { font-size: 20px; margin-bottom: 13px; } } @media screen and (max-width: 992px) { .page-privacy .section-accordion .main-section-title { font-size: 18px; margin-bottom: 12px; } } @media screen and (max-width: 768px) { .page-privacy .section-accordion .main-section-title { font-size: 17px; margin-bottom: 10px; } } @media screen and (max-width: 640px) { .page-privacy .section-accordion .main-section-title { font-size: 16px; margin-bottom: 10px; } } @media screen and (max-width: 480px) { .page-privacy .section-accordion .main-section-title { font-size: 16px; margin-bottom: 10px; } } .page-privacy .section-accordion .main-section-subtitle { font-size: 16px; color: #312020; line-height: 150%; margin: 0 0 32px; font-weight: 400; } @media screen and (max-width: 1770px) { .page-privacy .section-accordion .main-section-subtitle { font-size: 15px; margin-bottom: 30px; } } @media screen and (max-width: 1440px) { .page-privacy .section-accordion .main-section-subtitle { font-size: 15px; margin-bottom: 28px; } } @media screen and (max-width: 1200px) { .page-privacy .section-accordion .main-section-subtitle { font-size: 15px; margin-bottom: 26px; } } @media screen and (max-width: 992px) { .page-privacy .section-accordion .main-section-subtitle { font-size: 15px; margin-bottom: 24px; } } @media screen and (max-width: 768px) { .page-privacy .section-accordion .main-section-subtitle { font-size: 14px; margin-bottom: 20px; } } @media screen and (max-width: 640px) { .page-privacy .section-accordion .main-section-subtitle { font-size: 14px; margin-bottom: 18px; } } @media screen and (max-width: 480px) { .page-privacy .section-accordion .main-section-subtitle { font-size: 14px; margin-bottom: 16px; } } .page-privacy .section-accordion .section-title { font-size: 28px; margin-bottom: 12px; } .page-privacy .section-accordion .section-subtitle { font-size: 16px; color: #312020; line-height: 150%; margin: 0 0 28px; font-weight: 400; } @media screen and (max-width: 1770px) { .page-privacy .section-accordion .section-subtitle { font-size: 15px; margin-bottom: 26px; } } @media screen and (max-width: 1440px) { .page-privacy .section-accordion .section-subtitle { font-size: 15px; margin-bottom: 24px; } } @media screen and (max-width: 1200px) { .page-privacy .section-accordion .section-subtitle { font-size: 15px; margin-bottom: 22px; } } @media screen and (max-width: 992px) { .page-privacy .section-accordion .section-subtitle { font-size: 15px; margin-bottom: 20px; } } @media screen and (max-width: 768px) { .page-privacy .section-accordion .section-subtitle { font-size: 14px; margin-bottom: 18px; } } @media screen and (max-width: 640px) { .page-privacy .section-accordion .section-subtitle { font-size: 14px; margin-bottom: 16px; } } @media screen and (max-width: 480px) { .page-privacy .section-accordion .section-subtitle { font-size: 14px; margin-bottom: 16px; } } .page-privacy .section-accordion .accordion { border: none; border-radius: 0; overflow: visible; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } @media screen and (max-width: 1440px) { .page-privacy .section-accordion .accordion { gap: 10px; } } @media screen and (max-width: 992px) { .page-privacy .section-accordion .accordion { gap: 8px; } } @media screen and (max-width: 640px) { .page-privacy .section-accordion .accordion { gap: 6px; } } .page-privacy .section-accordion .accordion-item { border-radius: 8px; background: #fff; margin-bottom: 0; overflow: hidden; } @media screen and (max-width: 1440px) { .page-privacy .section-accordion .accordion-item { padding: 18px 0; } } @media screen and (max-width: 1200px) { .page-privacy .section-accordion .accordion-item { padding: 17px 0; } } @media screen and (max-width: 992px) { .page-privacy .section-accordion .accordion-item { padding: 16px 0; margin-bottom: 0; text-align: justify; } } @media screen and (max-width: 768px) { .page-privacy .section-accordion .accordion-item { padding: 8px 0; } } @media screen and (max-width: 640px) { .page-privacy .section-accordion .accordion-item { padding: 8px 0; } } @media screen and (max-width: 480px) { .page-privacy .section-accordion .accordion-item { padding: 8px 0; } } .page-privacy .section-accordion .accordion-item .accordion-title { font-size: 18px; font-weight: 700; line-height: 112%; color: #00704a; margin: 0; padding: 0; } @media screen and (max-width: 1770px) { .page-privacy .section-accordion .accordion-item .accordion-title { font-size: 17px; } } @media screen and (max-width: 1440px) { .page-privacy .section-accordion .accordion-item .accordion-title { font-size: 16px; } } @media screen and (max-width: 1200px) { .page-privacy .section-accordion .accordion-item .accordion-title { font-size: 16px; } } @media screen and (max-width: 992px) { .page-privacy .section-accordion .accordion-item .accordion-title { font-size: 15px; } } @media screen and (max-width: 768px) { .page-privacy .section-accordion .accordion-item .accordion-title { font-size: 14px; } } @media screen and (max-width: 640px) { .page-privacy .section-accordion .accordion-item .accordion-title { font-size: 14px; } } @media screen and (max-width: 480px) { .page-privacy .section-accordion .accordion-item .accordion-title { font-size: 14px; } } .page-privacy .section-accordion .accordion-item:not(.is-open) .accordion-body { display: none; } .page-privacy .section-accordion .accordion-header { width: 100%; text-align: left; border: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background: transparent; cursor: pointer; padding: 4px 0 6px; gap: 12px; } .page-privacy .section-accordion .accordion-header .accordion-icon { width: 30px; height: 30px; -webkit-transition: -webkit-transform 0.25s ease; transition: -webkit-transform 0.25s ease; transition: transform 0.25s ease; transition: transform 0.25s ease, -webkit-transform 0.25s ease; } .page-privacy .section-accordion .accordion-header .accordion-icon img { width: 100%; height: 100%; display: block; -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 1440px) { .page-privacy .section-accordion .accordion-header .accordion-icon { width: 26px; height: 26px; } } @media screen and (max-width: 1200px) { .page-privacy .section-accordion .accordion-header .accordion-icon { width: 20px; height: 20px; } } @media screen and (max-width: 640px) { .page-privacy .section-accordion .accordion-header .accordion-icon { width: 20px; height: 20px; } } @media screen and (max-width: 480px) { .page-privacy .section-accordion .accordion-header .accordion-icon { width: 18px; height: 18px; } } .page-privacy .section-accordion .accordion-item.is-open .accordion-icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .page-privacy .section-accordion .accordion-body { padding: 0 20px; max-height: 0; overflow: hidden; -webkit-transition: max-height 0.3s ease, padding 0.3s ease; transition: max-height 0.3s ease, padding 0.3s ease; } @media screen and (max-width: 768px) { .page-privacy .section-accordion .accordion-body { padding: 4px 0 0 16px; } } .page-privacy .section-accordion .accordion-item.is-open .accordion-body { padding: 0 0; } @media screen and (max-width: 768px) { .page-privacy .section-accordion .accordion-item.is-open .accordion-body { padding: 4px 0 0 16px; } } .page-privacy .section-accordion .accordion-section-content { margin-bottom: 12px; color: #312020; line-height: 150%; font-size: 16px; } @media screen and (max-width: 1770px) { .page-privacy .section-accordion .accordion-section-content { font-size: 15px; } } @media screen and (max-width: 1200px) { .page-privacy .section-accordion .accordion-section-content { font-size: 15px; } } @media screen and (max-width: 992px) { .page-privacy .section-accordion .accordion-section-content { font-size: 15px; } } @media screen and (max-width: 768px) { .page-privacy .section-accordion .accordion-section-content { font-size: 14px; } } @media screen and (max-width: 640px) { .page-privacy .section-accordion .accordion-section-content { font-size: 14px; } } @media screen and (max-width: 480px) { .page-privacy .section-accordion .accordion-section-content { font-size: 14px; } } .page-privacy .section-accordion .accordion-section-content p { margin: 0 0 10px; } .page-privacy .section-accordion .accordion-section-content p:last-child { margin-bottom: 0; font-size: 18px; } .page-privacy .section-accordion .accordion-items { margin-top: 0; } .page-privacy .section-accordion .accordion-items ol, .page-privacy .section-accordion .accordion-items ul { margin: 0 0 16px 20px; padding: 0 0 0 40px; } @media screen and (max-width: 1770px) { .page-privacy .section-accordion .accordion-items ol, .page-privacy .section-accordion .accordion-items ul { margin: 0 0 14px 18px; padding: 0 0 0 36px; } } @media screen and (max-width: 1440px) { .page-privacy .section-accordion .accordion-items ol, .page-privacy .section-accordion .accordion-items ul { margin: 0 0 13px 16px; padding: 0 0 0 32px; } } @media screen and (max-width: 1200px) { .page-privacy .section-accordion .accordion-items ol, .page-privacy .section-accordion .accordion-items ul { margin: 0 0 11px 14px; padding: 0 0 0 28px; } } @media screen and (max-width: 992px) { .page-privacy .section-accordion .accordion-items ol, .page-privacy .section-accordion .accordion-items ul { margin: 0 0 10px 12px; padding: 0 0 0 24px; } } @media screen and (max-width: 768px) { .page-privacy .section-accordion .accordion-items ol, .page-privacy .section-accordion .accordion-items ul { margin: 0 0 8px 10px; padding: 0 0 0 20px; } } @media screen and (max-width: 640px) { .page-privacy .section-accordion .accordion-items ol, .page-privacy .section-accordion .accordion-items ul { margin: 0 0 6px 8px; padding: 0 0 0 16px; } } @media screen and (max-width: 480px) { .page-privacy .section-accordion .accordion-items ol, .page-privacy .section-accordion .accordion-items ul { margin: 0 0 8px 10px; padding: 0 0 0 20px; } } .page-privacy .section-accordion .accordion-item-child { padding: 0; } @media screen and (max-width: 1440px) { .page-privacy .section-accordion .accordion-item-child { padding: 7px 0; } } @media screen and (max-width: 992px) { .page-privacy .section-accordion .accordion-item-child { padding: 6px 0; } } @media screen and (max-width: 640px) { .page-privacy .section-accordion .accordion-item-child { padding: 6px 0; } } @media screen and (max-width: 480px) { .page-privacy .section-accordion .accordion-item-child { padding: 6px 0; } } .page-privacy .section-accordion .accordion-item-child__subtitle { margin: 0 0 8px; color: #555; font-size: 16px; line-height: 150%; font-weight: 500; } @media screen and (max-width: 1770px) { .page-privacy .section-accordion .accordion-item-child__subtitle { font-size: 15px; } } @media screen and (max-width: 1200px) { .page-privacy .section-accordion .accordion-item-child__subtitle { font-size: 15px; } } @media screen and (max-width: 992px) { .page-privacy .section-accordion .accordion-item-child__subtitle { font-size: 15px; } } @media screen and (max-width: 768px) { .page-privacy .section-accordion .accordion-item-child__subtitle { font-size: 15px; margin-bottom: 6px; } } @media screen and (max-width: 640px) { .page-privacy .section-accordion .accordion-item-child__subtitle { font-size: 14px; margin-bottom: 6px; } } @media screen and (max-width: 480px) { .page-privacy .section-accordion .accordion-item-child__subtitle { font-size: 14px; margin-bottom: 6px; } } .page-privacy .section-accordion .accordion-item-child__content { color: #3a3a3a; line-height: 150%; font-size: 16px; text-align: justify; } @media screen and (max-width: 1770px) { .page-privacy .section-accordion .accordion-item-child__content { font-size: 15px; } } @media screen and (max-width: 1200px) { .page-privacy .section-accordion .accordion-item-child__content { font-size: 15px; } } @media screen and (max-width: 992px) { .page-privacy .section-accordion .accordion-item-child__content { font-size: 15px; } } @media screen and (max-width: 768px) { .page-privacy .section-accordion .accordion-item-child__content { font-size: 14px; } } @media screen and (max-width: 640px) { .page-privacy .section-accordion .accordion-item-child__content { font-size: 14px; } } @media screen and (max-width: 480px) { .page-privacy .section-accordion .accordion-item-child__content { font-size: 14px; } } .page-privacy .section-accordion .accordion-item-child__content p { margin: 0 0 8px; } .page-privacy .section-accordion .accordion-item-child__content p:last-child { margin-bottom: 0; } .page-privacy .section-accordion .accordion-item-child + .accordion-item-child { border-top: 1px solid #f0f0f0; } .page-privacy .section-final { padding: 0px 0 80px; } .page-privacy .section-final .privacy-final-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4px; } .page-privacy .section-final .final-item { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; } .page-privacy .section-final .final-item__title { margin: 0; font-size: 15px; font-weight: 400; line-height: 150%; font-style: italic; } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ @media screen and (max-width: 1024px) { .post-archive .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } } .post-archive__wrapper { display: grid; grid-template-columns: 320px 1fr; -webkit-box-align: start; -ms-flex-align: start; align-items: start; gap: 0; padding: 50px 0 60px; } @media screen and (max-width: 1440px) { .post-archive__wrapper { grid-template-columns: 300px 1fr; padding: 45px 0 50px; } } @media screen and (max-width: 1280px) { .post-archive__wrapper { grid-template-columns: 280px 1fr; padding: 40px 0 40px; } } @media screen and (max-width: 1200px) { .post-archive__wrapper { grid-template-columns: 280px 1fr; gap: 32px; } } @media screen and (max-width: 992px) { .post-archive__wrapper { grid-template-columns: 260px 1fr; gap: 28px; padding: 35px 0 35px; } } @media screen and (max-width: 1024px) { .post-archive__wrapper { grid-template-columns: 1fr; gap: 30px; padding: 30px 0 30px; } } @media screen and (max-width: 768px) { .post-archive__wrapper { gap: 24px; padding: 24px 0 24px; } } @media screen and (max-width: 576px) { .post-archive__wrapper { gap: 20px; padding: 20px 0 20px; } } @media screen and (max-width: 480px) { .post-archive__wrapper { gap: 16px; padding: 16px 0 16px; } } .post-archive__sidebar { height: 100%; } @media screen and (max-width: 1024px) { .post-archive__sidebar { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9999; visibility: hidden; opacity: 0; -webkit-transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out; transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out; } } @media screen and (max-width: 1024px) { .post-archive__sidebar.active { visibility: visible; opacity: 1; } } .post-archive__sidebar-overlay { display: none; } @media screen and (max-width: 1024px) { .post-archive__sidebar-overlay { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 1; } } .post-archive__sidebar-content { height: 100%; } @media screen and (max-width: 1024px) { .post-archive__sidebar-content { position: absolute; top: 0; left: 0; width: 320px; max-width: 85vw; height: 100%; background-color: #ffffff; -webkit-box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow-y: auto; } } @media screen and (max-width: 576px) { .post-archive__sidebar-content { width: 280px; max-width: 90vw; } } @media screen and (max-width: 480px) { .post-archive__sidebar-content { width: 100%; max-width: 100vw; } } @media screen and (max-width: 1024px) { .post-archive__sidebar.active .post-archive__sidebar-content { -webkit-transform: translateX(0); transform: translateX(0); } } .post-archive__sidebar-header { display: none; } @media screen and (max-width: 1024px) { .post-archive__sidebar-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 16px 20px; border-bottom: 1px solid #dcdcdc; -ms-flex-negative: 0; flex-shrink: 0; } } @media screen and (max-width: 576px) { .post-archive__sidebar-header { padding: 14px 16px; } } @media screen and (max-width: 480px) { .post-archive__sidebar-header { padding: 12px 16px; } } .post-archive__sidebar-header-title { font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 600; color: #312020; margin: 0; } @media screen and (max-width: 768px) { .post-archive__sidebar-header-title { font-size: 16px; } } @media screen and (max-width: 480px) { .post-archive__sidebar-header-title { font-size: 14px; } } .post-archive__sidebar-close { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: none; border: none; border-radius: 4px; color: #312020; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .post-archive__sidebar-close:hover { background-color: #f5f5f5; color: #00704a; } .post-archive__sidebar-close svg { width: 20px; height: 20px; } .post-archive__sidebar-body { height: 100%; } @media screen and (max-width: 1024px) { .post-archive__sidebar-body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow-y: auto; padding: 0; } } .post-archive__sidebar-toggle { display: none; } @media screen and (max-width: 1024px) { .post-archive__sidebar-toggle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; padding: 10px 16px; margin-top: 20px; margin-bottom: 20px; margin-left: auto; background-color: transparent; color: #312020; border: 1px solid #dcdcdc; border-radius: 8px; font-size: 14px; font-weight: 400; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .post-archive__sidebar-toggle:hover { border-color: #00704a; color: #00704a; background-color: rgba(0, 112, 74, 0.05); } .post-archive__sidebar-toggle[aria-expanded=true] { border-color: #00704a; color: #00704a; background-color: rgba(0, 112, 74, 0.1); } } @media screen and (max-width: 768px) { .post-archive__sidebar-toggle { padding: 9px 14px; font-size: 13px; margin: 18px 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } @media screen and (max-width: 576px) { .post-archive__sidebar-toggle { padding: 8px 12px; font-size: 12px; margin: 16px 0; gap: 6px; } } @media screen and (max-width: 480px) { .post-archive__sidebar-toggle { padding: 7px 10px; font-size: 11px; margin: 14px 0; gap: 4px; } } .post-archive__sidebar-toggle-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .post-archive__sidebar-toggle-icon svg { width: 20px; height: 20px; } @media screen and (max-width: 480px) { .post-archive__sidebar-toggle-text { display: none; } } .post-archive__content { min-width: 0; padding-left: 50px; margin-bottom: 50px; } @media screen and (max-width: 1440px) { .post-archive__content { padding-left: 40px; margin-bottom: 45px; } } @media screen and (max-width: 1280px) { .post-archive__content { padding-left: 35px; margin-bottom: 40px; } } @media screen and (max-width: 1024px) { .post-archive__content { padding-left: 0; margin-bottom: 35px; border-left: none; } } @media screen and (max-width: 768px) { .post-archive__content { padding-left: 0; border-left: none; margin-bottom: 30px; } } @media screen and (max-width: 576px) { .post-archive__content { margin-bottom: 24px; } } @media screen and (max-width: 480px) { .post-archive__content { margin-bottom: 20px; } } .post-archive__pagination { margin-top: 50px; text-align: center; } @media screen and (max-width: 768px) { .post-archive__pagination { margin-top: 40px; } } @media screen and (max-width: 576px) { .post-archive__pagination { margin-top: 32px; } } @media screen and (max-width: 480px) { .post-archive__pagination { margin-top: 24px; } } .post-archive .swiper-wrapper { padding-bottom: 60px; } @media screen and (max-width: 768px) { .post-archive .swiper-wrapper { padding-bottom: 50px; } } @media screen and (max-width: 576px) { .post-archive .swiper-wrapper { padding-bottom: 45px; } } @media screen and (max-width: 480px) { .post-archive .swiper-wrapper { padding-bottom: 40px; } } .post-archive .post-archive-pagination { bottom: 0px; } @media screen and (max-width: 480px) { .post-archive .post-archive-pagination { bottom: -5px; } } .post-archive .swiper-pagination-bullet { width: 12px; height: 12px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; margin: 0 4.5px !important; } @media screen and (max-width: 480px) { .post-archive .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 3px !important; } } .post-archive .swiper-pagination-bullet-active { background-color: #00704a; } @media screen and (max-width: 1024px) { .post-archive-sidebar { padding: 0; } } .post-archive-sidebar .post-sidebar__section { padding: 30px 30px 30px 0; border-top: 1px solid #dcdcdc; } .post-archive-sidebar .post-sidebar__section:first-child { border-top: none; } @media screen and (max-width: 1024px) { .post-archive-sidebar .post-sidebar__section { padding: 20px; } } @media screen and (max-width: 768px) { .post-archive-sidebar .post-sidebar__section { padding: 18px; } } @media screen and (max-width: 576px) { .post-archive-sidebar .post-sidebar__section { padding: 16px; } } @media screen and (max-width: 480px) { .post-archive-sidebar .post-sidebar__section { padding: 14px; } } .post-archive-sidebar .post-sidebar__section:last-child { margin-bottom: 0; } .post-archive-sidebar .post-sidebar__section:has(.post-sidebar__cta-label) { position: sticky; top: 100px; z-index: 10; background-color: #fff; } .post-archive-sidebar .post-sidebar__section.post-sidebar__social-section { padding: 0 20px; border-top: none; margin-bottom: 32px; } @media screen and (max-width: 768px) { .post-archive-sidebar .post-sidebar__section.post-sidebar__social-section { padding: 0 0 0 20px; margin-bottom: 24px; } } @media screen and (max-width: 480px) { .post-archive-sidebar .post-sidebar__section.post-sidebar__social-section { margin-bottom: 20px; } } .post-archive-sidebar .post-sidebar__title { font-family: "Montserrat", sans-serif; font-size: 24px; font-weight: 500; color: #011f19; margin: 0 0 16px; } .post-archive-sidebar .post-sidebar__title.post-sidebar__social-title { font-size: 18px; margin-bottom: 25px; } @media screen and (max-width: 1024px) { .post-archive-sidebar .post-sidebar__title { font-size: 20px; } } @media screen and (max-width: 768px) { .post-archive-sidebar .post-sidebar__title { font-size: 16px; margin-bottom: 14px; } .post-archive-sidebar .post-sidebar__title.post-sidebar__social-title { font-size: 16px; margin-bottom: 20px; } } @media screen and (max-width: 576px) { .post-archive-sidebar .post-sidebar__title { font-size: 15px; margin-bottom: 12px; } .post-archive-sidebar .post-sidebar__title.post-sidebar__social-title { font-size: 15px; margin-bottom: 18px; } } @media screen and (max-width: 480px) { .post-archive-sidebar .post-sidebar__title { font-size: 14px; margin-bottom: 10px; } .post-archive-sidebar .post-sidebar__title.post-sidebar__social-title { font-size: 14px; margin-bottom: 16px; } } .post-archive-sidebar .post-sidebar__nav { margin: 0; } .post-archive-sidebar .post-sidebar__menu { list-style: none; margin: 0; padding: 4px 0; } .post-archive-sidebar .post-sidebar__menu-item { margin: 0 0 20px; } @media screen and (max-width: 768px) { .post-archive-sidebar .post-sidebar__menu-item { margin-bottom: 18px; } } @media screen and (max-width: 576px) { .post-archive-sidebar .post-sidebar__menu-item { margin-bottom: 16px; } } @media screen and (max-width: 480px) { .post-archive-sidebar .post-sidebar__menu-item { margin-bottom: 14px; } } .post-archive-sidebar .post-sidebar__menu-item:last-child { margin-bottom: 0; } .post-archive-sidebar .post-sidebar__menu-item.is-active .post-sidebar__menu-link { color: #00704a; } .post-archive-sidebar .post-sidebar__menu-link { display: block; font-size: 14px; color: #011f19; text-decoration: none; padding-left: 18px; position: relative; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; } @media screen and (max-width: 768px) { .post-archive-sidebar .post-sidebar__menu-link { font-size: 13px; padding-left: 16px; } } @media screen and (max-width: 576px) { .post-archive-sidebar .post-sidebar__menu-link { font-size: 12px; padding-left: 14px; } } @media screen and (max-width: 480px) { .post-archive-sidebar .post-sidebar__menu-link { font-size: 11px; padding-left: 12px; } } .post-archive-sidebar .post-sidebar__menu-link::before { content: ""; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background-color: #011f19; transform: translateY(-50%); -webkit-transition: background-color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: background-color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out; transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } .post-archive-sidebar .post-sidebar__menu-link:hover { color: #00704a; } .post-archive-sidebar .post-sidebar__menu-link:hover::before { background-color: #00704a; -webkit-transform: translateY(-50%) scale(1.1); transform: translateY(-50%) scale(1.1); } .post-archive-sidebar .post-sidebar__menu-item.is-active .post-sidebar__menu-link::before { background-color: #00704a; -webkit-transform: translateY(-50%) scale(1.1); transform: translateY(-50%) scale(1.1); } .post-archive-sidebar .post-sidebar__related-list { list-style: none; margin: 0; padding: 0; } .post-archive-sidebar .post-sidebar__related-item { margin: 0 0 16px; padding-left: 18px; position: relative; } @media screen and (max-width: 768px) { .post-archive-sidebar .post-sidebar__related-item { margin-bottom: 14px; } } @media screen and (max-width: 576px) { .post-archive-sidebar .post-sidebar__related-item { margin-bottom: 12px; padding-left: 14px; } } @media screen and (max-width: 480px) { .post-archive-sidebar .post-sidebar__related-item { margin-bottom: 10px; padding-left: 12px; } } .post-archive-sidebar .post-sidebar__related-item:last-child { margin-bottom: 0; } .post-archive-sidebar .post-sidebar__related-item::before { content: ""; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background-color: #011f19; -webkit-transition: background-color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: background-color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out; transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } .post-archive-sidebar .post-sidebar__related-link { display: block; font-size: 14px; color: #011f19; text-decoration: none; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; line-height: 1.5; } @media screen and (max-width: 768px) { .post-archive-sidebar .post-sidebar__related-link { font-size: 13px; } } @media screen and (max-width: 576px) { .post-archive-sidebar .post-sidebar__related-link { font-size: 12px; } } @media screen and (max-width: 480px) { .post-archive-sidebar .post-sidebar__related-link { font-size: 11px; } } .post-archive-sidebar .post-sidebar__related-link:hover { color: #00704a; } .post-archive-sidebar .post-sidebar__related-link:hover::before { background-color: #00704a; -webkit-transform: translateY(-50%) scale(1.1); transform: translateY(-50%) scale(1.1); } .post-archive-sidebar .post-sidebar__related-item:hover .post-sidebar__related-link::before { background-color: #00704a; -webkit-transform: translateY(-50%) scale(1.1); transform: translateY(-50%) scale(1.1); } .post-archive-sidebar .post-sidebar__tags { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 5px; row-gap: 6px; margin: 0; } .post-archive-sidebar .post-sidebar__tag { display: inline-block; padding: 8px 12px; font-size: 12px; font-family: "Montserrat", sans-serif; font-weight: 400; color: #fff; border-radius: 55px; white-space: nowrap; text-transform: uppercase; text-decoration: none; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; cursor: pointer; } @media screen and (max-width: 768px) { .post-archive-sidebar .post-sidebar__tag { padding: 7px 11px; font-size: 11px; } } @media screen and (max-width: 576px) { .post-archive-sidebar .post-sidebar__tag { padding: 6px 10px; font-size: 10px; } } @media screen and (max-width: 480px) { .post-archive-sidebar .post-sidebar__tag { padding: 5px 8px; font-size: 10px; } } .post-archive-sidebar .post-sidebar__tag:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .post-archive-sidebar .post-sidebar__tag:first-child { background-color: #00704a; color: #ffffff; } .post-archive-sidebar .post-sidebar__cta { position: relative; border-radius: 0px; overflow: hidden; padding: 40px 30px; min-height: 431px; color: #fff; font-size: 24px; font-family: "Montserrat", sans-serif; font-weight: 400; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media screen and (max-width: 1024px) { .post-archive-sidebar .post-sidebar__cta { padding: 30px 24px; min-height: 380px; font-size: 22px; } } @media screen and (max-width: 768px) { .post-archive-sidebar .post-sidebar__cta { padding: 20px; min-height: 350px; font-size: 18px; } } @media screen and (max-width: 576px) { .post-archive-sidebar .post-sidebar__cta { padding: 18px; min-height: 300px; font-size: 16px; } } @media screen and (max-width: 480px) { .post-archive-sidebar .post-sidebar__cta { padding: 16px; min-height: 280px; font-size: 14px; } } .post-archive-sidebar .post-sidebar__cta-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; } .post-archive-sidebar .post-sidebar__cta-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .post-archive-sidebar .post-sidebar__cta-content { position: relative; z-index: 1; padding-left: 18.5px; } @media screen and (max-width: 768px) { .post-archive-sidebar .post-sidebar__cta-content { padding-left: 0; } } .post-archive-sidebar .post-sidebar__cta-title { font-size: 24px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-weight: 400; color: #ffffff; padding: 0 0 20px; margin: 0; } .post-archive-sidebar .post-sidebar__cta-title::after { content: ""; display: block; width: 100%; height: 1px; background-color: #fff; margin-top: 20px; } @media screen and (max-width: 1024px) { .post-archive-sidebar .post-sidebar__cta-title { font-size: 20px; padding: 0 0 18px; } .post-archive-sidebar .post-sidebar__cta-title::after { margin-top: 18px; } } @media screen and (max-width: 768px) { .post-archive-sidebar .post-sidebar__cta-title { font-size: 16px; width: 100%; padding: 0 0 16px; } .post-archive-sidebar .post-sidebar__cta-title::after { margin-top: 16px; } } @media screen and (max-width: 576px) { .post-archive-sidebar .post-sidebar__cta-title { font-size: 14px; padding: 0 0 14px; } .post-archive-sidebar .post-sidebar__cta-title::after { margin-top: 14px; } } @media screen and (max-width: 480px) { .post-archive-sidebar .post-sidebar__cta-title { font-size: 13px; padding: 0 0 12px; } .post-archive-sidebar .post-sidebar__cta-title::after { margin-top: 12px; } } .post-archive-sidebar .post-sidebar__cta-button { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; color: #fff !important; gap: 8px; font-size: 14px; text-decoration: none; text-transform: uppercase; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } @media screen and (max-width: 768px) { .post-archive-sidebar .post-sidebar__cta-button { font-size: 13px; gap: 7px; } } @media screen and (max-width: 576px) { .post-archive-sidebar .post-sidebar__cta-button { font-size: 12px; gap: 6px; } } @media screen and (max-width: 480px) { .post-archive-sidebar .post-sidebar__cta-button { font-size: 11px; gap: 5px; } } .post-archive-sidebar .post-sidebar__cta-button svg { width: 12px; height: 12px; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } @media screen and (max-width: 480px) { .post-archive-sidebar .post-sidebar__cta-button svg { width: 10px; height: 10px; } } .post-archive-sidebar .post-sidebar__cta-button:hover svg { -webkit-transform: translateX(5px); transform: translateX(5px); } .post-archive-sidebar .post-sidebar__social-list { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; row-gap: 4px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .post-archive-sidebar .post-sidebar__social-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 34px; height: 34px; min-width: 34px; border-radius: 50%; border: 1px solid #ebebeb; position: relative; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; overflow: hidden; } .post-archive-sidebar .post-sidebar__social-link:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); border-color: #00704a; } .post-archive-sidebar .post-sidebar__social-link:hover .icon-default svg path { fill: #00704a; } .post-archive-sidebar .post-sidebar__social-link .icon-default, .post-archive-sidebar .post-sidebar__social-link .icon-hover { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .post-archive-sidebar .post-sidebar__social-link .icon-hover { display: none; position: absolute; inset: 0; } .post-archive-sidebar .post-sidebar__social-link svg { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .post-archive-sidebar .post-sidebar__social-link.service-filter-sidebar__follow-us-link--zalo:hover .icon-default { display: none; } .post-archive-sidebar .post-sidebar__social-link.service-filter-sidebar__follow-us-link--zalo:hover .icon-hover { display: -webkit-box; display: -ms-flexbox; display: flex; } .post-slider__featured { margin-bottom: 32px; } @media screen and (max-width: 1024px) { .post-slider__featured { margin-bottom: 28px; } } @media screen and (max-width: 768px) { .post-slider__featured { margin-bottom: 20px; } } @media screen and (max-width: 576px) { .post-slider__featured { margin-bottom: 18px; } } @media screen and (max-width: 480px) { .post-slider__featured { margin-bottom: 16px; } } @media screen and (max-width: 768px) { .post-slider__featured-content { padding: 0; } } .post-slider__featured-image { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 16px; margin-bottom: 24px; max-height: 500px; } @media screen and (max-width: 1440px) { .post-slider__featured-image { margin-bottom: 22px; max-height: 450px; border-radius: 15px; } } @media screen and (max-width: 1280px) { .post-slider__featured-image { margin-bottom: 20px; max-height: 400px; border-radius: 14px; } } @media screen and (max-width: 1024px) { .post-slider__featured-image { margin-bottom: 18px; max-height: 350px; border-radius: 12px; } } @media screen and (max-width: 768px) { .post-slider__featured-image { border-radius: 8px; margin-bottom: 12px; max-height: 300px; } } @media screen and (max-width: 576px) { .post-slider__featured-image { border-radius: 6px; margin-bottom: 10px; max-height: 250px; } } @media screen and (max-width: 480px) { .post-slider__featured-image { border-radius: 4px; margin-bottom: 8px; max-height: 200px; } } .post-slider__featured-image a { display: block; width: 100%; height: 100%; } .post-slider__featured-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } .post-slider__featured-image:hover img { -webkit-transform: scale(1.05); transform: scale(1.05); } .post-slider__featured-title { font-family: "Montserrat", sans-serif; font-size: 24px; font-weight: 700; color: #312020; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } @media screen and (max-width: 1440px) { .post-slider__featured-title { font-size: 23px; margin-bottom: 15px; } } @media screen and (max-width: 1280px) { .post-slider__featured-title { font-size: 22px; margin-bottom: 14px; } } @media screen and (max-width: 1024px) { .post-slider__featured-title { font-size: 20px; margin-bottom: 12px; } } @media screen and (max-width: 1200px) { .post-slider__featured-title { font-size: 22px; } } @media screen and (max-width: 768px) { .post-slider__featured-title { font-size: 18px; margin-bottom: 10px; } } @media screen and (max-width: 576px) { .post-slider__featured-title { font-size: 16px; margin-bottom: 8px; } } @media screen and (max-width: 480px) { .post-slider__featured-title { font-size: 14px; margin-bottom: 6px; } } .post-slider__featured-title a { color: inherit; text-decoration: none; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .post-slider__featured-title a:hover { color: #00704a; } .post-slider__featured-date { font-size: 16px; color: #535353; line-height: 1.5; } @media screen and (max-width: 1440px) { .post-slider__featured-date { font-size: 15px; } } @media screen and (max-width: 1024px) { .post-slider__featured-date { font-size: 14px; } } @media screen and (max-width: 768px) { .post-slider__featured-date { font-size: 13px; } } @media screen and (max-width: 576px) { .post-slider__featured-date { font-size: 12px; } } @media screen and (max-width: 480px) { .post-slider__featured-date { font-size: 11px; } } .post-slider__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } @media screen and (max-width: 1440px) { .post-slider__grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } } @media screen and (max-width: 1280px) { .post-slider__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } } @media screen and (max-width: 1024px) { .post-slider__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media screen and (max-width: 1200px) { .post-slider__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media screen and (max-width: 992px) { .post-slider__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } } @media screen and (max-width: 768px) { .post-slider__grid { grid-template-columns: 1fr; gap: 20px; } } @media screen and (max-width: 576px) { .post-slider__grid { grid-template-columns: 1fr; gap: 18px; } } @media screen and (max-width: 480px) { .post-slider__grid { grid-template-columns: 1fr; gap: 16px; } } .post-slider__card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .post-slider__card-image { width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: 8px; margin-bottom: 16px; } @media screen and (max-width: 1440px) { .post-slider__card-image { margin-bottom: 14px; } } @media screen and (max-width: 1280px) { .post-slider__card-image { margin-bottom: 12px; } } @media screen and (max-width: 1024px) { .post-slider__card-image { margin-bottom: 10px; } } @media screen and (max-width: 768px) { .post-slider__card-image { border-radius: 6px; margin-bottom: 8px; } } @media screen and (max-width: 480px) { .post-slider__card-image { margin-bottom: 6px; } } .post-slider__card-image a { display: block; width: 100%; height: 100%; } .post-slider__card-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } .post-slider__card-image:hover img { -webkit-transform: scale(1.05); transform: scale(1.05); } .post-slider__card-content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .post-slider__card-title { font-family: "Montserrat", sans-serif; font-size: 24px; font-weight: 700; color: #312020; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } .post-slider__card-title.post-slider__card-title-small { font-size: 18px; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } @media screen and (max-width: 1440px) { .post-slider__card-title.post-slider__card-title-small { font-size: 17px; } } @media screen and (max-width: 1280px) { .post-slider__card-title.post-slider__card-title-small { font-size: 17px; } } @media screen and (max-width: 1024px) { .post-slider__card-title.post-slider__card-title-small { font-size: 16px; } } @media screen and (max-width: 768px) { .post-slider__card-title.post-slider__card-title-small { font-size: 15px; margin-bottom: 6px; } } @media screen and (max-width: 480px) { .post-slider__card-title.post-slider__card-title-small { font-size: 14px; margin-bottom: 4px; } } @media screen and (max-width: 1200px) { .post-slider__card-title { font-size: 17px; } } @media screen and (max-width: 768px) { .post-slider__card-title { font-size: 16px; margin-bottom: 10px; } } @media screen and (max-width: 480px) { .post-slider__card-title { font-size: 14px; margin-bottom: 8px; } } .post-slider__card-title a { color: inherit; text-decoration: none; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .post-slider__card-title a:hover { color: #00704a; } .post-slider__card-date { font-size: 16px; color: #535353; margin-top: auto; } .post-slider__card-date.post-slider__card-date-small { font-size: 16px; } @media screen and (max-width: 1440px) { .post-slider__card-date.post-slider__card-date-small { font-size: 15px; } } @media screen and (max-width: 1280px) { .post-slider__card-date.post-slider__card-date-small { font-size: 15px; } } @media screen and (max-width: 1024px) { .post-slider__card-date.post-slider__card-date-small { font-size: 14px; } } @media screen and (max-width: 768px) { .post-slider__card-date.post-slider__card-date-small { font-size: 13px; } } @media screen and (max-width: 480px) { .post-slider__card-date.post-slider__card-date-small { font-size: 11px; } } @media screen and (max-width: 768px) { .post-slider__card-date { font-size: 13px; } } @media screen and (max-width: 480px) { .post-slider__card-date { font-size: 11px; } } .post-slider__tags { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 5px; row-gap: 6px; margin-bottom: 16px; } @media screen and (max-width: 1440px) { .post-slider__tags { gap: 4px; row-gap: 5px; margin-bottom: 15px; } } @media screen and (max-width: 768px) { .post-slider__tags { gap: 3px; row-gap: 4px; margin-bottom: 12px; } } @media screen and (max-width: 576px) { .post-slider__tags { gap: 2px; row-gap: 3px; margin-bottom: 11px; } } @media screen and (max-width: 480px) { .post-slider__tags { gap: 2px; row-gap: 3px; margin-bottom: 10px; } } .post-slider__tag { display: inline-block; padding: 8px 12px; font-size: 12px; font-family: "Montserrat", sans-serif; font-weight: 400; color: #fff !important; border-radius: 55px; white-space: nowrap; text-transform: uppercase; text-decoration: none; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } @media screen and (max-width: 1440px) { .post-slider__tag { padding: 7px 11px; font-size: 11px; } } @media screen and (max-width: 1280px) { .post-slider__tag { padding: 6px 10px; font-size: 11px; } } @media screen and (max-width: 1024px) { .post-slider__tag { padding: 6px 9px; font-size: 10px; } } @media screen and (max-width: 768px) { .post-slider__tag { padding: 5px 8px; font-size: 10px; } } @media screen and (max-width: 576px) { .post-slider__tag { padding: 4px 7px; font-size: 9px; } } @media screen and (max-width: 480px) { .post-slider__tag { padding: 3px 6px; font-size: 8px; } } .post-slider__tag:hover { opacity: 0.9; -webkit-transform: translateY(-2px); transform: translateY(-2px); } .post-slider__tag--more { background-color: rgba(1, 31, 25, 0.1) !important; color: #312020 !important; border: 1px solid rgba(1, 31, 25, 0.2); font-weight: 500; } .post-slider__tag--more:hover { background-color: rgba(1, 31, 25, 0.15) !important; border-color: rgba(1, 31, 25, 0.3); opacity: 1; } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ @media screen and (max-width: 992px) { .single-post .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } } .single-post__wrapper { display: grid; grid-template-columns: 320px 1fr; -webkit-box-align: start; -ms-flex-align: start; align-items: start; gap: 0; padding: 50px 0; } @media screen and (max-width: 1770px) { .single-post__wrapper { grid-template-columns: 288px 1fr; padding: 45px 0; } } @media screen and (max-width: 1440px) { .single-post__wrapper { grid-template-columns: 256px 1fr; padding: 40px 0; } } @media screen and (max-width: 1200px) { .single-post__wrapper { grid-template-columns: 1fr; padding: 35px 0; } } @media screen and (max-width: 992px) { .single-post__wrapper { grid-template-columns: 1fr; gap: 0px; padding: 30px; } } @media screen and (max-width: 768px) { .single-post__wrapper { padding: 25px 0; } } @media screen and (max-width: 640px) { .single-post__wrapper { padding: 20px 0; } } @media screen and (max-width: 480px) { .single-post__wrapper { padding: 25px 0; } } .single-post__content { min-width: 0; padding-left: 50px; } @media screen and (max-width: 1770px) { .single-post__content { padding-left: 45px; } } @media screen and (max-width: 1440px) { .single-post__content { padding-left: 40px; } } @media screen and (max-width: 1200px) { .single-post__content { padding-left: 0px; padding-top: 24px; } } @media screen and (max-width: 992px) { .single-post__content { padding-left: 0px; padding-top: 16px; } } @media screen and (max-width: 768px) { .single-post__content { padding-left: 0; } } @media screen and (max-width: 640px) { .single-post__content { padding-left: 0; } } @media screen and (max-width: 480px) { .single-post__content { padding-left: 0; } } .single-post__article { max-width: 100%; } .single-post__tags { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 5px; row-gap: 6px; margin-bottom: 24px; } @media screen and (max-width: 1770px) { .single-post__tags { margin-bottom: 22px; gap: 4px; row-gap: 5px; } } @media screen and (max-width: 1440px) { .single-post__tags { margin-bottom: 20px; gap: 4px; row-gap: 5px; } } @media screen and (max-width: 1280px) { .single-post__tags { margin-bottom: 19px; gap: 3px; row-gap: 4px; } } @media screen and (max-width: 1200px) { .single-post__tags { margin-bottom: 17px; gap: 3px; row-gap: 4px; } } @media screen and (max-width: 1024px) { .single-post__tags { margin-bottom: 16px; gap: 3px; row-gap: 4px; } } @media screen and (max-width: 992px) { .single-post__tags { margin-bottom: 14px; gap: 3px; row-gap: 3px; } } @media screen and (max-width: 768px) { .single-post__tags { margin-bottom: 12px; gap: 2px; row-gap: 3px; } } @media screen and (max-width: 576px) { .single-post__tags { margin-bottom: 11px; gap: 2px; row-gap: 2px; } } @media screen and (max-width: 640px) { .single-post__tags { margin-bottom: 10px; gap: 2px; row-gap: 2px; } } @media screen and (max-width: 480px) { .single-post__tags { margin-bottom: 12px; gap: 2px; row-gap: 3px; } } .single-post__tag { display: inline-block; padding: 8px 12px; font-size: 12px; font-family: "Montserrat", sans-serif; font-weight: 400; color: #fff !important; border-radius: 55px; white-space: nowrap; text-transform: uppercase; text-decoration: none; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; line-height: 1.4; } @media screen and (max-width: 1770px) { .single-post__tag { padding: 7px 11px; font-size: 11px; } } @media screen and (max-width: 1440px) { .single-post__tag { padding: 6px 10px; font-size: 10px; } } @media screen and (max-width: 1200px) { .single-post__tag { padding: 5px 8px; font-size: 10px; } } @media screen and (max-width: 992px) { .single-post__tag { padding: 4px 7px; font-size: 10px; } } @media screen and (max-width: 768px) { .single-post__tag { padding: 4px 6px; font-size: 10px; } } @media screen and (max-width: 640px) { .single-post__tag { padding: 3px 5px; font-size: 10px; } } @media screen and (max-width: 480px) { .single-post__tag { padding: 4px 6px; font-size: 10px; } } .single-post__tag:hover { color: #fff !important; -webkit-transform: translateY(-2px); transform: translateY(-2px); text-decoration: none; } .single-post__tag:focus { outline: 2px solid currentColor; outline-offset: 2px; } .single-post__header { margin-bottom: 8px; } @media screen and (max-width: 1770px) { .single-post__header { margin-bottom: 7px; } } @media screen and (max-width: 1440px) { .single-post__header { margin-bottom: 6px; } } @media screen and (max-width: 1200px) { .single-post__header { margin-bottom: 5px; } } @media screen and (max-width: 992px) { .single-post__header { margin-bottom: 4px; } } @media screen and (max-width: 768px) { .single-post__header { margin-bottom: 4px; } } @media screen and (max-width: 640px) { .single-post__header { margin-bottom: 3px; } } @media screen and (max-width: 480px) { .single-post__header { margin-bottom: 4px; } } .single-post__title { font-size: 32px; font-weight: 700; color: #312020; margin: 0; line-height: 1.3; } @media screen and (max-width: 1770px) { .single-post__title { font-size: 29px; } } @media screen and (max-width: 1440px) { .single-post__title { font-size: 25px; } } @media screen and (max-width: 1200px) { .single-post__title { font-size: 22px; } } @media screen and (max-width: 992px) { .single-post__title { font-size: 19px; } } @media screen and (max-width: 768px) { .single-post__title { font-size: 16px; } } @media screen and (max-width: 640px) { .single-post__title { font-size: 14px; } } @media screen and (max-width: 480px) { .single-post__title { font-size: 16px; } } .single-post__meta { margin-bottom: 24px; } @media screen and (max-width: 1770px) { .single-post__meta { margin-bottom: 21px; } } @media screen and (max-width: 1440px) { .single-post__meta { margin-bottom: 19px; } } @media screen and (max-width: 1200px) { .single-post__meta { margin-bottom: 16px; } } @media screen and (max-width: 992px) { .single-post__meta { margin-bottom: 14px; } } @media screen and (max-width: 768px) { .single-post__meta { margin-bottom: 12px; } } @media screen and (max-width: 640px) { .single-post__meta { margin-bottom: 9px; } } @media screen and (max-width: 480px) { .single-post__meta { margin-bottom: 12px; } } .single-post__date { display: inline-block; font-size: 14px; color: #535353; font-weight: 400; } @media screen and (max-width: 1770px) { .single-post__date { font-size: 12px; } } @media screen and (max-width: 1440px) { .single-post__date { font-size: 12px; } } @media screen and (max-width: 1200px) { .single-post__date { font-size: 12px; } } @media screen and (max-width: 992px) { .single-post__date { font-size: 12px; } } @media screen and (max-width: 768px) { .single-post__date { font-size: 12px; } } @media screen and (max-width: 640px) { .single-post__date { font-size: 12px; } } @media screen and (max-width: 480px) { .single-post__date { font-size: 12px; } } .single-post__entry-content { font-size: 18px; line-height: 1.8; color: #312020; } @media screen and (max-width: 1770px) { .single-post__entry-content { font-size: 16px; line-height: 1.75; } } @media screen and (max-width: 1440px) { .single-post__entry-content { font-size: 16px; line-height: 1.7; } } @media screen and (max-width: 1200px) { .single-post__entry-content { font-size: 12px; line-height: 1.65; } } @media screen and (max-width: 992px) { .single-post__entry-content { font-size: 12px; line-height: 1.6; } } @media screen and (max-width: 768px) { .single-post__entry-content { font-size: 12px; line-height: 1.6; } } @media screen and (max-width: 640px) { .single-post__entry-content { font-size: 12px; line-height: 1.55; } } @media screen and (max-width: 480px) { .single-post__entry-content { font-size: 12px; line-height: 1.6; } } .single-post__entry-content p { margin-bottom: 20px; } @media screen and (max-width: 1770px) { .single-post__entry-content p { margin-bottom: 18px; } } @media screen and (max-width: 1440px) { .single-post__entry-content p { margin-bottom: 16px; } } @media screen and (max-width: 1280px) { .single-post__entry-content p { margin-bottom: 16px; } } @media screen and (max-width: 1200px) { .single-post__entry-content p { margin-bottom: 14px; } } @media screen and (max-width: 1024px) { .single-post__entry-content p { margin-bottom: 14px; } } @media screen and (max-width: 992px) { .single-post__entry-content p { margin-bottom: 12px; } } @media screen and (max-width: 768px) { .single-post__entry-content p { margin-bottom: 10px; } } @media screen and (max-width: 576px) { .single-post__entry-content p { margin-bottom: 8px; } } @media screen and (max-width: 640px) { .single-post__entry-content p { margin-bottom: 8px; } } @media screen and (max-width: 480px) { .single-post__entry-content p { margin-bottom: 10px; } } .single-post__entry-content p:last-child { margin-bottom: 0; } .single-post__entry-content h1, .single-post__entry-content h2, .single-post__entry-content h3, .single-post__entry-content h4, .single-post__entry-content h5, .single-post__entry-content h6 { margin-top: 30px; margin-bottom: 15px; font-weight: 700; color: #312020; } @media screen and (max-width: 1770px) { .single-post__entry-content h1, .single-post__entry-content h2, .single-post__entry-content h3, .single-post__entry-content h4, .single-post__entry-content h5, .single-post__entry-content h6 { margin-top: 27px; margin-bottom: 13px; } } @media screen and (max-width: 1440px) { .single-post__entry-content h1, .single-post__entry-content h2, .single-post__entry-content h3, .single-post__entry-content h4, .single-post__entry-content h5, .single-post__entry-content h6 { margin-top: 24px; margin-bottom: 12px; } } @media screen and (max-width: 1280px) { .single-post__entry-content h1, .single-post__entry-content h2, .single-post__entry-content h3, .single-post__entry-content h4, .single-post__entry-content h5, .single-post__entry-content h6 { margin-top: 24px; margin-bottom: 12px; } } @media screen and (max-width: 1200px) { .single-post__entry-content h1, .single-post__entry-content h2, .single-post__entry-content h3, .single-post__entry-content h4, .single-post__entry-content h5, .single-post__entry-content h6 { margin-top: 21px; margin-bottom: 10px; } } @media screen and (max-width: 1024px) { .single-post__entry-content h1, .single-post__entry-content h2, .single-post__entry-content h3, .single-post__entry-content h4, .single-post__entry-content h5, .single-post__entry-content h6 { margin-top: 21px; margin-bottom: 10px; } } @media screen and (max-width: 992px) { .single-post__entry-content h1, .single-post__entry-content h2, .single-post__entry-content h3, .single-post__entry-content h4, .single-post__entry-content h5, .single-post__entry-content h6 { margin-top: 18px; margin-bottom: 9px; } } @media screen and (max-width: 768px) { .single-post__entry-content h1, .single-post__entry-content h2, .single-post__entry-content h3, .single-post__entry-content h4, .single-post__entry-content h5, .single-post__entry-content h6 { margin-top: 15px; margin-bottom: 7px; } } @media screen and (max-width: 576px) { .single-post__entry-content h1, .single-post__entry-content h2, .single-post__entry-content h3, .single-post__entry-content h4, .single-post__entry-content h5, .single-post__entry-content h6 { margin-top: 12px; margin-bottom: 6px; } } @media screen and (max-width: 640px) { .single-post__entry-content h1, .single-post__entry-content h2, .single-post__entry-content h3, .single-post__entry-content h4, .single-post__entry-content h5, .single-post__entry-content h6 { margin-top: 12px; margin-bottom: 6px; } } @media screen and (max-width: 480px) { .single-post__entry-content h1, .single-post__entry-content h2, .single-post__entry-content h3, .single-post__entry-content h4, .single-post__entry-content h5, .single-post__entry-content h6 { margin-top: 15px; margin-bottom: 7px; } } .single-post__entry-content h1:first-child, .single-post__entry-content h2:first-child, .single-post__entry-content h3:first-child, .single-post__entry-content h4:first-child, .single-post__entry-content h5:first-child, .single-post__entry-content h6:first-child { margin-top: 0; } .single-post__entry-content h2 { font-size: 28px; } @media screen and (max-width: 1770px) { .single-post__entry-content h2 { font-size: 25px; } } @media screen and (max-width: 1440px) { .single-post__entry-content h2 { font-size: 22px; } } @media screen and (max-width: 1280px) { .single-post__entry-content h2 { font-size: 22px; } } @media screen and (max-width: 1200px) { .single-post__entry-content h2 { font-size: 19px; } } @media screen and (max-width: 1024px) { .single-post__entry-content h2 { font-size: 19px; } } @media screen and (max-width: 992px) { .single-post__entry-content h2 { font-size: 16px; } } @media screen and (max-width: 768px) { .single-post__entry-content h2 { font-size: 14px; } } @media screen and (max-width: 576px) { .single-post__entry-content h2 { font-size: 14px; } } @media screen and (max-width: 640px) { .single-post__entry-content h2 { font-size: 14px; } } @media screen and (max-width: 480px) { .single-post__entry-content h2 { font-size: 14px; } } .single-post__entry-content h3 { font-size: 24px; } @media screen and (max-width: 1770px) { .single-post__entry-content h3 { font-size: 21px; } } @media screen and (max-width: 1440px) { .single-post__entry-content h3 { font-size: 19px; } } @media screen and (max-width: 1280px) { .single-post__entry-content h3 { font-size: 19px; } } @media screen and (max-width: 1200px) { .single-post__entry-content h3 { font-size: 16px; } } @media screen and (max-width: 1024px) { .single-post__entry-content h3 { font-size: 16px; } } @media screen and (max-width: 992px) { .single-post__entry-content h3 { font-size: 14px; } } @media screen and (max-width: 768px) { .single-post__entry-content h3 { font-size: 14px; } } @media screen and (max-width: 576px) { .single-post__entry-content h3 { font-size: 14px; } } @media screen and (max-width: 640px) { .single-post__entry-content h3 { font-size: 14px; } } @media screen and (max-width: 480px) { .single-post__entry-content h3 { font-size: 14px; } } .single-post__entry-content h4 { font-size: 20px; } @media screen and (max-width: 1770px) { .single-post__entry-content h4 { font-size: 18px; } } @media screen and (max-width: 1440px) { .single-post__entry-content h4 { font-size: 16px; } } @media screen and (max-width: 1280px) { .single-post__entry-content h4 { font-size: 16px; } } @media screen and (max-width: 1200px) { .single-post__entry-content h4 { font-size: 14px; } } @media screen and (max-width: 1024px) { .single-post__entry-content h4 { font-size: 14px; } } @media screen and (max-width: 992px) { .single-post__entry-content h4 { font-size: 14px; } } @media screen and (max-width: 768px) { .single-post__entry-content h4 { font-size: 14px; } } @media screen and (max-width: 576px) { .single-post__entry-content h4 { font-size: 14px; } } @media screen and (max-width: 640px) { .single-post__entry-content h4 { font-size: 14px; } } @media screen and (max-width: 480px) { .single-post__entry-content h4 { font-size: 14px; } } .single-post__entry-content ul, .single-post__entry-content ol { margin-bottom: 20px; padding-left: 30px; } @media screen and (max-width: 1770px) { .single-post__entry-content ul, .single-post__entry-content ol { margin-bottom: 18px; padding-left: 27px; } } @media screen and (max-width: 1440px) { .single-post__entry-content ul, .single-post__entry-content ol { margin-bottom: 16px; padding-left: 24px; } } @media screen and (max-width: 1280px) { .single-post__entry-content ul, .single-post__entry-content ol { margin-bottom: 16px; padding-left: 24px; } } @media screen and (max-width: 1200px) { .single-post__entry-content ul, .single-post__entry-content ol { margin-bottom: 14px; padding-left: 21px; } } @media screen and (max-width: 1024px) { .single-post__entry-content ul, .single-post__entry-content ol { margin-bottom: 14px; padding-left: 21px; } } @media screen and (max-width: 992px) { .single-post__entry-content ul, .single-post__entry-content ol { margin-bottom: 12px; padding-left: 18px; } } @media screen and (max-width: 768px) { .single-post__entry-content ul, .single-post__entry-content ol { margin-bottom: 10px; padding-left: 15px; } } @media screen and (max-width: 576px) { .single-post__entry-content ul, .single-post__entry-content ol { margin-bottom: 8px; padding-left: 12px; } } @media screen and (max-width: 640px) { .single-post__entry-content ul, .single-post__entry-content ol { margin-bottom: 8px; padding-left: 12px; } } @media screen and (max-width: 480px) { .single-post__entry-content ul, .single-post__entry-content ol { margin-bottom: 10px; padding-left: 15px; } } .single-post__entry-content ul li, .single-post__entry-content ol li { margin-bottom: 10px; } @media screen and (max-width: 1770px) { .single-post__entry-content ul li, .single-post__entry-content ol li { margin-bottom: 9px; } } @media screen and (max-width: 1440px) { .single-post__entry-content ul li, .single-post__entry-content ol li { margin-bottom: 8px; } } @media screen and (max-width: 1280px) { .single-post__entry-content ul li, .single-post__entry-content ol li { margin-bottom: 8px; } } @media screen and (max-width: 1200px) { .single-post__entry-content ul li, .single-post__entry-content ol li { margin-bottom: 7px; } } @media screen and (max-width: 1024px) { .single-post__entry-content ul li, .single-post__entry-content ol li { margin-bottom: 7px; } } @media screen and (max-width: 992px) { .single-post__entry-content ul li, .single-post__entry-content ol li { margin-bottom: 6px; } } @media screen and (max-width: 768px) { .single-post__entry-content ul li, .single-post__entry-content ol li { margin-bottom: 5px; } } @media screen and (max-width: 576px) { .single-post__entry-content ul li, .single-post__entry-content ol li { margin-bottom: 4px; } } @media screen and (max-width: 640px) { .single-post__entry-content ul li, .single-post__entry-content ol li { margin-bottom: 4px; } } @media screen and (max-width: 480px) { .single-post__entry-content ul li, .single-post__entry-content ol li { margin-bottom: 5px; } } .single-post__entry-content ul li:last-child, .single-post__entry-content ol li:last-child { margin-bottom: 0; } .single-post__entry-content ul { list-style-type: disc; } .single-post__entry-content ol { list-style-type: decimal; } .single-post__entry-content blockquote { margin: 30px 0; padding: 20px 24px; border-left: 4px solid #00704a; background-color: #f8f9fa; font-style: italic; color: #aaaaaa; } @media screen and (max-width: 1770px) { .single-post__entry-content blockquote { margin: 27px 0; padding: 18px 21px; } } @media screen and (max-width: 1440px) { .single-post__entry-content blockquote { margin: 24px 0; padding: 16px 19px; } } @media screen and (max-width: 1280px) { .single-post__entry-content blockquote { margin: 24px 0; padding: 16px 19px; } } @media screen and (max-width: 1200px) { .single-post__entry-content blockquote { margin: 21px 0; padding: 14px 16px; } } @media screen and (max-width: 1024px) { .single-post__entry-content blockquote { margin: 21px 0; padding: 14px 16px; } } @media screen and (max-width: 992px) { .single-post__entry-content blockquote { margin: 18px 0; padding: 12px 14px; } } @media screen and (max-width: 768px) { .single-post__entry-content blockquote { margin: 15px 0; padding: 10px 12px; } } @media screen and (max-width: 576px) { .single-post__entry-content blockquote { margin: 12px 0; padding: 8px 9px; border-left-width: 3px; } } @media screen and (max-width: 640px) { .single-post__entry-content blockquote { margin: 12px 0; padding: 8px 9px; border-left-width: 3px; } } @media screen and (max-width: 480px) { .single-post__entry-content blockquote { margin: 15px 0; padding: 10px 12px; } } .single-post__entry-content blockquote p { margin-bottom: 0; } .single-post__entry-content blockquote p:last-child { margin-bottom: 0; } .single-post__entry-content img { max-width: 100%; height: auto; margin: 30px 0; border-radius: 8px; } @media screen and (max-width: 1770px) { .single-post__entry-content img { margin: 27px 0; } } @media screen and (max-width: 1440px) { .single-post__entry-content img { margin: 24px 0; } } @media screen and (max-width: 1280px) { .single-post__entry-content img { margin: 24px 0; } } @media screen and (max-width: 1200px) { .single-post__entry-content img { margin: 21px 0; } } @media screen and (max-width: 1024px) { .single-post__entry-content img { margin: 21px 0; } } @media screen and (max-width: 992px) { .single-post__entry-content img { margin: 18px 0; } } @media screen and (max-width: 768px) { .single-post__entry-content img { margin: 15px 0; } } @media screen and (max-width: 576px) { .single-post__entry-content img { margin: 12px 0; } } @media screen and (max-width: 640px) { .single-post__entry-content img { margin: 12px 0; } } @media screen and (max-width: 480px) { .single-post__entry-content img { margin: 15px 0; } } .single-post__entry-content a { color: #00704a; text-decoration: underline; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; } .single-post__entry-content a:hover { color: rgba(0, 112, 74, 0.1); text-decoration: none; } .single-post__entry-content a:focus { outline: 2px solid #00704a; outline-offset: 2px; } .single-post__entry-content strong, .single-post__entry-content b { font-weight: 700; } .single-post__entry-content em, .single-post__entry-content i { font-style: italic; } .single-post__entry-content code { padding: 2px 6px; background-color: #f1f3f5; border-radius: 4px; font-family: "Courier New", monospace; font-size: 0.9em; color: #e83e8c; } .single-post__entry-content pre { margin: 30px 0; padding: 20px; background-color: #f8f9fa; border-radius: 8px; overflow-x: auto; border: 1px solid #e9ecef; font-family: "Courier New", monospace; font-size: 14px; line-height: 1.6; } @media screen and (max-width: 1770px) { .single-post__entry-content pre { margin: 27px 0; padding: 18px; font-size: 13px; } } @media screen and (max-width: 1440px) { .single-post__entry-content pre { margin: 24px 0; padding: 16px; font-size: 12px; } } @media screen and (max-width: 1280px) { .single-post__entry-content pre { margin: 24px 0; padding: 16px; font-size: 12px; } } @media screen and (max-width: 1200px) { .single-post__entry-content pre { margin: 21px 0; padding: 14px; font-size: 11px; } } @media screen and (max-width: 1024px) { .single-post__entry-content pre { margin: 21px 0; padding: 14px; font-size: 11px; } } @media screen and (max-width: 992px) { .single-post__entry-content pre { margin: 18px 0; padding: 12px; font-size: 10px; } } @media screen and (max-width: 768px) { .single-post__entry-content pre { margin: 15px 0; padding: 10px; font-size: 10px; } } @media screen and (max-width: 576px) { .single-post__entry-content pre { margin: 12px 0; padding: 8px; font-size: 10px; } } @media screen and (max-width: 640px) { .single-post__entry-content pre { margin: 12px 0; padding: 8px; font-size: 10px; } } @media screen and (max-width: 480px) { .single-post__entry-content pre { margin: 15px 0; padding: 10px; font-size: 10px; } } .single-post__entry-content pre code { padding: 0; background-color: transparent; color: inherit; } .single-post__entry-content table { width: 100%; margin: 30px 0; border-collapse: collapse; font-size: 14px; overflow-x: auto; display: block; } @media screen and (max-width: 1770px) { .single-post__entry-content table { margin: 27px 0; font-size: 13px; } } @media screen and (max-width: 1440px) { .single-post__entry-content table { margin: 24px 0; font-size: 12px; } } @media screen and (max-width: 1280px) { .single-post__entry-content table { margin: 24px 0; font-size: 12px; } } @media screen and (max-width: 1200px) { .single-post__entry-content table { margin: 21px 0; font-size: 12px; } } @media screen and (max-width: 1024px) { .single-post__entry-content table { margin: 21px 0; font-size: 12px; } } @media screen and (max-width: 992px) { .single-post__entry-content table { margin: 18px 0; font-size: 12px; } } @media screen and (max-width: 768px) { .single-post__entry-content table { margin: 15px 0; font-size: 11px; } } @media screen and (max-width: 576px) { .single-post__entry-content table { margin: 12px 0; font-size: 10px; } } @media screen and (max-width: 640px) { .single-post__entry-content table { margin: 12px 0; font-size: 10px; } } @media screen and (max-width: 480px) { .single-post__entry-content table { margin: 15px 0; font-size: 10px; } } @media screen and (max-width: 480px) { .single-post__entry-content table { margin: 15px 0; font-size: max(12px, 3vw); overflow-x: auto; -webkit-overflow-scrolling: touch; } } .single-post__entry-content table th, .single-post__entry-content table td { padding: 12px; border: 1px solid #e5e5e5; text-align: left; } @media screen and (max-width: 1770px) { .single-post__entry-content table th, .single-post__entry-content table td { padding: 10px; } } @media screen and (max-width: 1440px) { .single-post__entry-content table th, .single-post__entry-content table td { padding: 9px; } } @media screen and (max-width: 1200px) { .single-post__entry-content table th, .single-post__entry-content table td { padding: 8px; } } @media screen and (max-width: 992px) { .single-post__entry-content table th, .single-post__entry-content table td { padding: 7px; } } @media screen and (max-width: 768px) { .single-post__entry-content table th, .single-post__entry-content table td { padding: 6px; } } @media screen and (max-width: 640px) { .single-post__entry-content table th, .single-post__entry-content table td { padding: 4px; } } @media screen and (max-width: 480px) { .single-post__entry-content table th, .single-post__entry-content table td { padding: 6px; } } .single-post__entry-content table th { background-color: #f8f9fa; font-weight: 700; } .single-post__entry-content .page-links { margin-top: 30px; padding-top: 20px; border-top: 1px solid #e5e5e5; font-size: 14px; } @media screen and (max-width: 1770px) { .single-post__entry-content .page-links { margin-top: 27px; padding-top: 18px; font-size: 12px; } } @media screen and (max-width: 1440px) { .single-post__entry-content .page-links { margin-top: 24px; padding-top: 16px; font-size: 11px; } } @media screen and (max-width: 1200px) { .single-post__entry-content .page-links { margin-top: 21px; padding-top: 14px; font-size: 10px; } } @media screen and (max-width: 992px) { .single-post__entry-content .page-links { margin-top: 18px; padding-top: 12px; font-size: 10px; } } @media screen and (max-width: 768px) { .single-post__entry-content .page-links { margin-top: 15px; padding-top: 10px; font-size: 10px; } } @media screen and (max-width: 640px) { .single-post__entry-content .page-links { margin-top: 12px; padding-top: 8px; font-size: 10px; } } @media screen and (max-width: 480px) { .single-post__entry-content .page-links { margin-top: 15px; padding-top: 10px; font-size: 10px; } } .single-post__entry-content .page-links a { display: inline-block; margin: 0 4px; padding: 4px 8px; background-color: #f8f9fa; border-radius: 4px; text-decoration: none; } .single-post__entry-content .page-links a:hover { background-color: #00704a; color: #ffffff; } @media screen and (max-width: 992px) { .single-post .post-archive__sidebar.active { visibility: visible; opacity: 1; } } .single-post .post-archive__sidebar-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } @media screen and (max-width: 992px) { .single-post .post-archive__sidebar-content { position: absolute; top: 0; left: 0; width: 320px; max-width: 85vw; height: 100%; background-color: #ffffff; -webkit-box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; z-index: 2; overflow-y: auto; } } @media screen and (max-width: 768px) { .single-post .post-archive__sidebar-content { width: 300px; max-width: 85vw; } } @media screen and (max-width: 640px) { .single-post .post-archive__sidebar-content { width: 280px; max-width: 90vw; } } @media screen and (max-width: 480px) { .single-post .post-archive__sidebar-content { width: 100%; max-width: 100vw; } } @media screen and (max-width: 992px) { .post-archive__sidebar.active .single-post .post-archive__sidebar-content { -webkit-transform: translateX(0); transform: translateX(0); } } .single-post .post-archive__sidebar-body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow-y: visible; padding: 0; } @media screen and (max-width: 992px) { .single-post .post-archive__sidebar-body { overflow-y: auto; padding: 16px; } } @media screen and (max-width: 768px) { .single-post .post-archive__sidebar-body { padding: 14px; } } @media screen and (max-width: 640px) { .single-post .post-archive__sidebar-body { padding: 12px; } } @media screen and (max-width: 480px) { .single-post .post-archive__sidebar-body { padding: 10px; } } .single-post .post-archive__sidebar-overlay { display: none; } @media screen and (max-width: 992px) { .single-post .post-archive__sidebar-overlay { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 1; opacity: 0; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } } @media screen and (max-width: 992px) { .post-archive__sidebar.active ~ .single-post .post-archive__sidebar-overlay { opacity: 1; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * 404 Error Page Styles * * @package One_Lab */ .page-404 { padding: 100px 0; } @media screen and (max-width: 1440px) { .page-404 { padding: 90px 0; } } @media screen and (max-width: 1280px) { .page-404 { padding: 85px 0; } } @media screen and (max-width: 1024px) { .page-404 { padding: 80px 0; } } @media screen and (max-width: 768px) { .page-404 { padding: 70px 0; } } @media screen and (max-width: 576px) { .page-404 { padding: 60px 0; } } @media screen and (max-width: 480px) { .page-404 { padding: 50px 0; } } .page-404__wrapper { max-width: 900px; margin: 0 auto; padding: 0 20px; } @media screen and (max-width: 1024px) { .page-404__wrapper { max-width: 100%; padding: 0 20px; } } @media screen and (max-width: 768px) { .page-404__wrapper { padding: 10px 20px; } } @media screen and (max-width: 576px) { .page-404__wrapper { padding: 10px 16px; } } @media screen and (max-width: 480px) { .page-404__wrapper { padding: 10px 16px; } } .page-404__content { text-align: center; } .page-404__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 32px; } @media screen and (max-width: 1440px) { .page-404__inner { gap: 30px; } } @media screen and (max-width: 1280px) { .page-404__inner { gap: 28px; } } @media screen and (max-width: 1024px) { .page-404__inner { gap: 26px; } } @media screen and (max-width: 768px) { .page-404__inner { gap: 24px; } } @media screen and (max-width: 576px) { .page-404__inner { gap: 22px; } } @media screen and (max-width: 480px) { .page-404__inner { gap: 20px; } } .page-404__icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 20px; } @media screen and (max-width: 1440px) { .page-404__icon { margin-bottom: 18px; } .page-404__icon svg { width: 160px; height: 160px; } } @media screen and (max-width: 1280px) { .page-404__icon { margin-bottom: 16px; } .page-404__icon svg { width: 140px; height: 140px; } } @media screen and (max-width: 1024px) { .page-404__icon { margin-bottom: 14px; } .page-404__icon svg { width: 120px; height: 120px; } } @media screen and (max-width: 768px) { .page-404__icon { margin-bottom: 12px; } .page-404__icon svg { width: 100px; height: 100px; } } @media screen and (max-width: 576px) { .page-404__icon { margin-bottom: 10px; } .page-404__icon svg { width: 90px; height: 90px; } } @media screen and (max-width: 480px) { .page-404__icon { margin-bottom: 8px; } .page-404__icon svg { width: 80px; height: 80px; } } .page-404__icon svg { width: 180px; height: 180px; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } @media screen and (max-width: 1440px) { .page-404__icon svg { width: 160px; height: 160px; } } @media screen and (max-width: 1280px) { .page-404__icon svg { width: 140px; height: 140px; } } @media screen and (max-width: 1024px) { .page-404__icon svg { width: 120px; height: 120px; } } @media screen and (max-width: 768px) { .page-404__icon svg { width: 100px; height: 100px; } } @media screen and (max-width: 576px) { .page-404__icon svg { width: 90px; height: 90px; } } @media screen and (max-width: 480px) { .page-404__icon svg { width: 80px; height: 80px; } } .page-404__icon svg:hover { -webkit-transform: scale(1.05) rotate(5deg); transform: scale(1.05) rotate(5deg); } .page-404__title { font-family: "Montserrat", sans-serif; font-size: 96px; font-weight: 700; color: #00704a; margin: 0; line-height: 1; letter-spacing: -2px; } @media screen and (max-width: 1440px) { .page-404__title { font-size: 88px; letter-spacing: -1.5px; } } @media screen and (max-width: 1280px) { .page-404__title { font-size: 80px; letter-spacing: -1.5px; } } @media screen and (max-width: 1024px) { .page-404__title { font-size: 72px; letter-spacing: -1px; } } @media screen and (max-width: 768px) { .page-404__title { font-size: 64px; letter-spacing: -1px; } } @media screen and (max-width: 576px) { .page-404__title { font-size: 56px; letter-spacing: -0.5px; } } @media screen and (max-width: 480px) { .page-404__title { font-size: 48px; letter-spacing: 0; } } .page-404__subtitle { font-family: "Montserrat", sans-serif; font-size: 36px; font-weight: 600; color: #312020; margin: 0; line-height: 1.3; } @media screen and (max-width: 1440px) { .page-404__subtitle { font-size: 34px; } } @media screen and (max-width: 1280px) { .page-404__subtitle { font-size: 32px; } } @media screen and (max-width: 1024px) { .page-404__subtitle { font-size: 30px; } } @media screen and (max-width: 768px) { .page-404__subtitle { font-size: 28px; } } @media screen and (max-width: 576px) { .page-404__subtitle { font-size: 26px; } } @media screen and (max-width: 480px) { .page-404__subtitle { font-size: 24px; } } .page-404__description { font-size: 18px; line-height: 1.7; color: #535353; margin: 0; max-width: 650px; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 1440px) { .page-404__description { font-size: 17px; max-width: 600px; } } @media screen and (max-width: 1280px) { .page-404__description { font-size: 17px; max-width: 580px; } } @media screen and (max-width: 1024px) { .page-404__description { font-size: 16px; line-height: 1.65; max-width: 100%; } } @media screen and (max-width: 768px) { .page-404__description { font-size: 16px; line-height: 1.6; padding: 0 10px; } } @media screen and (max-width: 576px) { .page-404__description { font-size: 15px; line-height: 1.6; padding: 0 5px; } } @media screen and (max-width: 480px) { .page-404__description { font-size: 14px; line-height: 1.55; padding: 0; } } .page-404__actions { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 20px; } @media screen and (max-width: 1440px) { .page-404__actions { gap: 18px; margin-top: 18px; } } @media screen and (max-width: 1280px) { .page-404__actions { gap: 16px; margin-top: 16px; } } @media screen and (max-width: 1024px) { .page-404__actions { gap: 16px; margin-top: 16px; } } @media screen and (max-width: 768px) { .page-404__actions { gap: 14px; margin-top: 14px; } } @media screen and (max-width: 576px) { .page-404__actions { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; max-width: 400px; gap: 12px; margin-top: 12px; } } @media screen and (max-width: 480px) { .page-404__actions { max-width: 100%; gap: 10px; margin-top: 10px; } } .page-404__button { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 51px; padding: 12px 30px; font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 500; text-decoration: none; border-radius: 8px; border: none; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; white-space: nowrap; line-height: 1.5; } @media screen and (max-width: 1440px) { .page-404__button { min-height: 50px; padding: 12px 28px; font-size: 17px; } } @media screen and (max-width: 1280px) { .page-404__button { min-height: 49px; padding: 12px 28px; font-size: 17px; } } @media screen and (max-width: 1024px) { .page-404__button { min-height: 48px; padding: 12px 26px; font-size: 16px; } } @media screen and (max-width: 768px) { .page-404__button { min-height: 46px; padding: 12px 24px; font-size: 16px; } } @media screen and (max-width: 576px) { .page-404__button { width: 100%; min-height: 44px; padding: 12px 24px; font-size: 15px; } } @media screen and (max-width: 480px) { .page-404__button { min-height: 42px; padding: 10px 20px; font-size: 14px; } } .page-404__button--primary { background-color: #00704a; color: #ffffff !important; border: 2px solid #00704a; } .page-404__button--primary:hover, .page-404__button--primary:focus { background-color: #00723f; border-color: #00723f; color: #ffffff !important; -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); } .page-404__button--primary:active { -webkit-transform: translateY(0); transform: translateY(0); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .page-404__button--primary:focus { outline: 2px solid #00704a; outline-offset: 2px; } .page-404__button--secondary { background-color: #ffffff; color: #00704a !important; border: 2px solid #00704a; } .page-404__button--secondary:hover, .page-404__button--secondary:focus { background-color: #00704a; border-color: #00704a; color: #ffffff !important; -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); } .page-404__button--secondary:active { -webkit-transform: translateY(0); transform: translateY(0); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .page-404__button--secondary:focus { outline: 2px solid #00704a; outline-offset: 2px; } .page-404__search { margin-top: 40px; width: 100%; max-width: 600px; } @media screen and (max-width: 1440px) { .page-404__search { margin-top: 38px; max-width: 580px; } } @media screen and (max-width: 1280px) { .page-404__search { margin-top: 36px; max-width: 560px; } } @media screen and (max-width: 1024px) { .page-404__search { margin-top: 34px; max-width: 100%; } } @media screen and (max-width: 768px) { .page-404__search { margin-top: 30px; } } @media screen and (max-width: 576px) { .page-404__search { margin-top: 28px; } } @media screen and (max-width: 480px) { .page-404__search { margin-top: 24px; } } .page-404__search .search-form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 12px; width: 100%; } @media screen and (max-width: 1024px) { .page-404__search .search-form { gap: 10px; } } @media screen and (max-width: 576px) { .page-404__search .search-form { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px; } } @media screen and (max-width: 480px) { .page-404__search .search-form { gap: 8px; } } .page-404__search .search-form .search-field { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-height: 44px; padding: 12px 16px; font-size: 16px; font-family: "Be Vietnam Pro", sans-serif; color: #312020; border: 1px solid #dcdcdc; border-radius: 8px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #ffffff; } @media screen and (max-width: 1024px) { .page-404__search .search-form .search-field { padding: 11px 15px; font-size: 15px; } } @media screen and (max-width: 768px) { .page-404__search .search-form .search-field { padding: 11px 14px; font-size: 15px; } } @media screen and (max-width: 576px) { .page-404__search .search-form .search-field { width: 100%; padding: 10px 14px; font-size: 14px; } } @media screen and (max-width: 480px) { .page-404__search .search-form .search-field { padding: 10px 12px; font-size: 14px; } } .page-404__search .search-form .search-field::-webkit-input-placeholder { color: #999; } .page-404__search .search-form .search-field::-moz-placeholder { color: #999; } .page-404__search .search-form .search-field:-ms-input-placeholder { color: #999; } .page-404__search .search-form .search-field::-ms-input-placeholder { color: #999; } .page-404__search .search-form .search-field::placeholder { color: #999; } .page-404__search .search-form .search-field:focus { outline: none; border-color: #00704a; -webkit-box-shadow: 0 0 0 3px rgba(0, 112, 74, 0.1); box-shadow: 0 0 0 3px rgba(0, 112, 74, 0.1); } .page-404__search .search-form .search-submit { min-height: 44px; padding: 12px 32px; background-color: #00704a; color: #ffffff !important; border: 1px solid #00704a; border-radius: 8px; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 500; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; white-space: nowrap; } @media screen and (max-width: 1024px) { .page-404__search .search-form .search-submit { padding: 11px 28px; font-size: 15px; } } @media screen and (max-width: 768px) { .page-404__search .search-form .search-submit { padding: 11px 26px; font-size: 15px; } } @media screen and (max-width: 576px) { .page-404__search .search-form .search-submit { width: 100%; padding: 12px 24px; font-size: 14px; } } @media screen and (max-width: 480px) { .page-404__search .search-form .search-submit { padding: 10px 20px; font-size: 14px; } } .page-404__search .search-form .search-submit:hover { background-color: #00723f; border-color: #00723f; color: #ffffff !important; -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); } .page-404__search .search-form .search-submit:active { -webkit-transform: translateY(0); transform: translateY(0); } .page-404__search .search-form .search-submit:focus { outline: 2px solid #00704a; outline-offset: 2px; } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * Search Results Page Styles * * @package One_Lab */ .search-results__info { margin-bottom: 32px; padding: 24px; background-color: #f8f9fa; border-radius: 8px; border-left: 4px solid #00704a; } @media screen and (max-width: 768px) { .search-results__info { margin-bottom: 24px; padding: 20px; } } @media screen and (max-width: 480px) { .search-results__info { margin-bottom: 20px; padding: 16px; } } .search-results__query { font-size: 18px; font-family: "Montserrat", sans-serif; font-weight: 600; color: #312020; margin: 0 0 8px; } @media screen and (max-width: 768px) { .search-results__query { font-size: 16px; } } @media screen and (max-width: 480px) { .search-results__query { font-size: 15px; } } .search-results__query strong { color: #00704a; font-weight: 700; } .search-results__count { font-size: 14px; color: #535353; margin: 0; } @media screen and (max-width: 480px) { .search-results__count { font-size: 13px; } } /*-------------------------------------------------------------- # Components --------------------------------------------------------------*/ /* Navigation --------------------------------------------- */ /* ============================================ NAVIGATION - MAIN FILE Imports all navigation-related styles ============================================ */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /* ============================================ HEADER STYLES ============================================ */ .site-header { position: relative; z-index: 1000; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #ffffff; } .site-header.sticky { position: fixed; top: 0; left: 0; right: 0; width: 100%; -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); z-index: 1050; background-color: #ffffff; } .site-header.sticky.has-wpadminbar, body.admin-bar .site-header.sticky { top: 32px; } @media screen and (max-width: 782px) { .site-header.sticky.has-wpadminbar, body.admin-bar .site-header.sticky { top: 46px; } } .site-header.sticky.header-hidden { -webkit-transform: translateY(-100%); transform: translateY(-100%); } .site-header.sticky .header-main-nav { padding: 16px 0; -webkit-transition: padding 0.3s ease-in-out; transition: padding 0.3s ease-in-out; } .site-header.sticky .header-main-nav .main-navigation { min-width: 0; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } .site-header.sticky .header-main-nav .main-navigation > ul { row-gap: 4px; -webkit-column-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; } @media screen and (max-width: 1550px) { .site-header.sticky .header-main-nav .main-navigation > ul { gap: 4px; -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; } } @media screen and (max-width: 1440px) { .site-header.sticky .header-main-nav .main-navigation > ul { -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; } } @media screen and (max-width: 1280px) { .site-header.sticky .header-main-nav .main-navigation > ul { gap: 4px; } } .site-header.sticky .header-main-nav .main-navigation > ul > li { position: relative; } .site-header.sticky .header-main-nav .main-navigation > ul > li > a { padding: 12px 0; -webkit-transition: padding 0.3s ease-in-out; transition: padding 0.3s ease-in-out; font-size: 18px; } @media screen and (max-width: 1550px) { .site-header.sticky .header-main-nav .main-navigation > ul > li > a { padding: 10px 0; font-size: 14px; } } @media screen and (max-width: 1440px) { .site-header.sticky .header-main-nav .main-navigation > ul > li > a { padding: 8px 0; } } @media screen and (max-width: 1280px) { .site-header.sticky .header-main-nav .main-navigation > ul > li > a { padding: 6px 0; font-size: 12px; } } .sticky-header-placeholder { display: none; width: 100%; height: 0; -webkit-transition: height 0.3s ease-in-out; transition: height 0.3s ease-in-out; overflow: hidden; } .sticky-header-placeholder.active { display: block; } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /* ============================================ TOP BAR (Dark Grey) ============================================ */ .header-top-bar { background-color: #2a2a2a; padding: 8px 0; max-height: 100px; overflow: hidden; -webkit-transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.3s ease-in-out; transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.3s ease-in-out; } .header-top-bar .header-top-bar-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24px; } .header-top-bar .top-bar-home-link { color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 400; -webkit-transition: opacity 0.15s ease-in-out; transition: opacity 0.15s ease-in-out; } .header-top-bar .top-bar-home-link:hover { opacity: 0.8; } .header-top-bar .topbar-menu { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .header-top-bar .topbar-menu .topbar-menu-list { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; margin: 0; padding: 0; gap: 24px; } .header-top-bar .topbar-menu .topbar-menu-list li { margin: 0; } .header-top-bar .topbar-menu .topbar-menu-list li a { color: #ffffff; text-decoration: none; font-size: 14px; -webkit-transition: opacity 0.15s ease-in-out; transition: opacity 0.15s ease-in-out; } .header-top-bar .topbar-menu .topbar-menu-list li a:hover { opacity: 0.8; } .header-top-bar .topbar-language-switcher select { background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; color: #ffffff; padding: 4px 8px; font-size: 14px; cursor: pointer; -webkit-transition: border-color 0.15s ease-in-out; transition: border-color 0.15s ease-in-out; } .header-top-bar .topbar-language-switcher select:hover { border-color: rgba(255, 255, 255, 0.5); } .header-top-bar .topbar-language-switcher select option { background-color: #2a2a2a; color: #ffffff; } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /* ============================================ GREEN HEADER BAR ============================================ */ .header-green-bar { position: relative; z-index: 1000; background-color: #00704a; padding: 16px 0; -webkit-transition: padding 0.3s ease-in-out; transition: padding 0.3s ease-in-out; } @media screen and (max-width: 768px) { .header-green-bar { display: none; } } .header-green-bar .header-green-bar-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0; } .header-green-bar .header-green-bar-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-green-bar .header-green-bar-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .header-green-bar .dropdown-wrapper { position: relative; } .header-green-bar .dropdown-wrapper .dropdown-button { background-color: #ffffff; color: #00704a; border: none; padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 500; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; -webkit-transition: background-color 0.15s ease-in-out; transition: background-color 0.15s ease-in-out; } .header-green-bar .dropdown-wrapper .dropdown-button svg { width: 12px; height: 12px; -webkit-transition: -webkit-transform 0.15s ease-in-out; transition: -webkit-transform 0.15s ease-in-out; transition: transform 0.15s ease-in-out; transition: transform 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; } .header-green-bar .dropdown-wrapper .dropdown-button:hover { background-color: #f0f0f0; } .header-green-bar .dropdown-wrapper .dropdown-button[aria-expanded=true] svg { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .header-green-bar .dropdown-wrapper .dropdown-button[aria-expanded=true] + .dropdown-menu { display: block; } .header-green-bar .dropdown-wrapper .dropdown-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; background-color: #ffffff; min-width: 200px; -webkit-box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25); box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25); border-radius: 12px; padding-top: 4px; z-index: 1020; font-family: "Be Vietnam Pro", sans-serif; font-size: 16px; } .header-green-bar .dropdown-wrapper .dropdown-menu::before { content: ""; position: absolute; top: -4px; left: 0; right: 0; height: 4px; background-color: transparent; } .header-green-bar .dropdown-wrapper .dropdown-menu .dropdown-menu-list { list-style: none; margin: 0; padding: 8px 0; } .header-green-bar .dropdown-wrapper .dropdown-menu .dropdown-menu-list li { margin: 0; } .header-green-bar .dropdown-wrapper .dropdown-menu .dropdown-menu-list li a { display: block; padding: 12px 16px; color: #312020; text-decoration: none; font-family: "Be Vietnam Pro", sans-serif; font-size: 16px; -webkit-transition: background-color 0.15s ease-in-out; transition: background-color 0.15s ease-in-out; } .header-green-bar .dropdown-wrapper .dropdown-menu .dropdown-menu-list li a:hover { background-color: #bbbbbb; color: #00704a; } .header-green-bar .dropdown-wrapper:hover .dropdown-menu { display: block; } .header-green-bar .dropdown-wrapper .dropdown-menu:hover { display: block; } .header-green-bar .dropdown-wrapper.role-switcher-dropdown .dropdown-menu { min-width: 280px; } .header-green-bar .dropdown-wrapper.role-switcher-dropdown .dropdown-menu.role-switcher-menu .role-switcher-list { list-style: none; margin: 0; padding: 8px 0; } .header-green-bar .dropdown-wrapper.role-switcher-dropdown .dropdown-menu.role-switcher-menu .role-switcher-list .role-switcher-item { margin: 0; } .header-green-bar .dropdown-wrapper.role-switcher-dropdown .dropdown-menu.role-switcher-menu .role-switcher-list .role-switcher-item.active .role-switcher-link { background-color: #f0f7f0; border-left: 3px solid #00704a; } .header-green-bar .dropdown-wrapper.role-switcher-dropdown .dropdown-menu.role-switcher-menu .role-switcher-list .role-switcher-item .role-switcher-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; padding: 12px 16px; color: #312020; text-decoration: none; -webkit-transition: background-color 0.15s ease-in-out; transition: background-color 0.15s ease-in-out; } .header-green-bar .dropdown-wrapper.role-switcher-dropdown .dropdown-menu.role-switcher-menu .role-switcher-list .role-switcher-item .role-switcher-link:hover { background-color: #f5f5f5; } .header-green-bar .dropdown-wrapper.role-switcher-dropdown .dropdown-menu.role-switcher-menu .role-switcher-list .role-switcher-item .role-switcher-link .role-icon { font-size: 20px; -ms-flex-negative: 0; flex-shrink: 0; } .header-green-bar .dropdown-wrapper.role-switcher-dropdown .dropdown-menu.role-switcher-menu .role-switcher-list .role-switcher-item .role-switcher-link .role-info { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4px; } .header-green-bar .dropdown-wrapper.role-switcher-dropdown .dropdown-menu.role-switcher-menu .role-switcher-list .role-switcher-item .role-switcher-link .role-info .role-title { font-size: 14px; font-weight: 600; color: #312020; } .header-green-bar .dropdown-wrapper.role-switcher-dropdown .dropdown-menu.role-switcher-menu .role-switcher-list .role-switcher-item .role-switcher-link .role-info .role-desc { font-size: 12px; color: #aaaaaa; } .header-green-bar .role-switcher-select-wrapper { position: relative; } .header-green-bar .role-switcher-select-wrapper select { color: #00704a; font-size: 16px; font-weight: 700; line-height: 40px; padding: 0 38px 0 12px; background-color: #ffffff; border: none; border-radius: 8px; height: auto; min-height: 40px; border: none; -webkit-transition: background-color 0.15s ease-in-out, opacity 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, opacity 0.15s ease-in-out; } .header-green-bar .role-switcher-select-wrapper select.select2-pending { opacity: 0.6; cursor: wait; } .header-green-bar .role-switcher-select-wrapper select.select2-ready { opacity: 1; cursor: pointer; } @media screen and (max-width: 1550px) { .header-green-bar .role-switcher-select-wrapper select { font-size: 13px; } } @media screen and (max-width: 1280px) { .header-green-bar .role-switcher-select-wrapper select { font-size: 11px; } } .header-green-bar .role-switcher-select-wrapper .select2-container { will-change: transform; -webkit-transform: translateZ(0); transform: translateZ(0); } .header-green-bar .role-switcher-select-wrapper .select2-container .select2-selection { background-color: #ffffff; border: none; border-radius: 8px; height: auto; min-height: 40px; -webkit-transition: background-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; } .header-green-bar .role-switcher-select-wrapper .select2-container .select2-selection .select2-selection__rendered { color: #00704a; font-size: 16px; font-weight: 700; line-height: 40px; padding: 0 38px 0 12px; } @media screen and (max-width: 1550px) { .header-green-bar .role-switcher-select-wrapper .select2-container .select2-selection .select2-selection__rendered { font-size: 13px; } } @media screen and (max-width: 1280px) { .header-green-bar .role-switcher-select-wrapper .select2-container .select2-selection .select2-selection__rendered { font-size: 11px; } } .header-green-bar .role-switcher-select-wrapper .select2-container .select2-selection .select2-selection__arrow { right: 12px; height: 40px; width: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (max-width: 1550px) { .header-green-bar .role-switcher-select-wrapper .select2-container .select2-selection .select2-selection__arrow { width: 13px; } } @media screen and (max-width: 1280px) { .header-green-bar .role-switcher-select-wrapper .select2-container .select2-selection .select2-selection__arrow { width: 11px; } } .header-green-bar .role-switcher-select-wrapper .select2-container.select2-container--open .select2-selection { -webkit-box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25); box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25); } .header-green-bar .role-switcher-select-wrapper .select2-container .select2-dropdown { border: none; -webkit-box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25); box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25); border-radius: 12px !important; margin-top: 0px; font-family: "Be Vietnam Pro", sans-serif; font-size: 16px; overflow: hidden; will-change: transform, opacity; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media screen and (max-width: 1550px) { .header-green-bar .role-switcher-select-wrapper .select2-container .select2-dropdown { font-size: 13px; } } @media screen and (max-width: 1280px) { .header-green-bar .role-switcher-select-wrapper .select2-container .select2-dropdown { font-size: 11px; } } .header-green-bar .role-switcher-select-wrapper .select2-container .select2-dropdown .select2-results { max-height: 200px; } .header-green-bar .role-switcher-select-wrapper .select2-container .select2-dropdown .select2-results__option { padding: 8px 12px; font-family: "Be Vietnam Pro", sans-serif; font-size: 16px; color: #312020; font-weight: 700; -webkit-transition: background-color 0.15s ease, color 0.15s ease; transition: background-color 0.15s ease, color 0.15s ease; } @media screen and (max-width: 1550px) { .header-green-bar .role-switcher-select-wrapper .select2-container .select2-dropdown .select2-results__option { font-size: 13px; padding: 6px 10px; } } @media screen and (max-width: 1280px) { .header-green-bar .role-switcher-select-wrapper .select2-container .select2-dropdown .select2-results__option { font-size: 11px; padding: 4px 8px; } } .header-green-bar .role-switcher-select-wrapper .select2-container .select2-dropdown .select2-results__option--highlighted, .header-green-bar .role-switcher-select-wrapper .select2-container .select2-dropdown .select2-results__option:hover { background-color: #bbbbbb; color: #00704a; } .header-green-bar .role-switcher-select-wrapper .select2-container .select2-dropdown .select2-results__option[aria-selected=true] { background-color: #bbbbbb; color: #00704a; } .header-green-bar .role-switcher-select-wrapper.select2-container--open .select2-dropdown { left: 0 !important; right: auto !important; top: 100% !important; -webkit-transform: none !important; transform: none !important; } .header-green-bar body.select2-dropdown-open { overflow-x: hidden !important; } .header-green-bar .select2-container .select2-selection .select2-selection__arrow b { display: none !important; } .header-green-bar .select2-container .select2-selection .select2-selection__arrow::after { content: ""; width: 16px; height: 16px; background-image: url("/wp-content/themes/one-lab/assets/images/icons/arrow-green.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; -webkit-transition: -webkit-transform 0.15s ease-in-out; transition: -webkit-transform 0.15s ease-in-out; transition: transform 0.15s ease-in-out; transition: transform 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; position: absolute; right: 0px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media screen and (max-width: 1550px) { .header-green-bar .select2-container .select2-selection .select2-selection__arrow::after { width: 13px; height: 13px; } } @media screen and (max-width: 1280px) { .header-green-bar .select2-container .select2-selection .select2-selection__arrow::after { width: 11px; height: 11px; } } .header-green-bar .select2-container.select2-container--open .select2-selection .select2-selection__arrow::after { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .header-green-bar .select2-dropdown { position: absolute !important; z-index: 999999 !important; border: none !important; border-radius: 12px !important; -webkit-box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25) !important; box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25) !important; font-family: "Be Vietnam Pro", sans-serif !important; font-size: 16px !important; overflow: hidden !important; white-space: nowrap; } @media screen and (max-width: 1550px) { .header-green-bar .select2-dropdown { font-size: 13px !important; } } @media screen and (max-width: 1280px) { .header-green-bar .select2-dropdown { font-size: 11px !important; } } .header-green-bar .select2-dropdown .select2-results { max-height: 200px; } .header-green-bar .select2-dropdown .select2-results__option { padding: 8px 12px; font-family: "Be Vietnam Pro", sans-serif; font-size: 16px; color: #312020; font-weight: 700; } @media screen and (max-width: 1550px) { .header-green-bar .select2-dropdown .select2-results__option { font-size: 13px; padding: 6px 10px; } } @media screen and (max-width: 1280px) { .header-green-bar .select2-dropdown .select2-results__option { font-size: 11px; padding: 4px 8px; } } .header-green-bar .select2-dropdown .select2-results__option--highlighted, .header-green-bar .select2-dropdown .select2-results__option:hover { background-color: #bbbbbb; color: #00704a; } .header-green-bar .select2-dropdown .select2-results__option[aria-selected=true] { background-color: #bbbbbb; color: #00704a; } .header-green-bar .topbar-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .header-green-bar .topbar-links .topbar-link { color: #ffffff; text-decoration: none; font-weight: 300; font-size: 16px; -webkit-transition: opacity 0.15s ease-in-out; transition: opacity 0.15s ease-in-out; } @media screen and (max-width: 1550px) { .header-green-bar .topbar-links .topbar-link { font-size: 13px; } } @media screen and (max-width: 1280px) { .header-green-bar .topbar-links .topbar-link { font-size: 11px; } } .header-green-bar .topbar-links .topbar-link:hover { opacity: 0.8; } .header-green-bar .topbar-links .link-separator { color: #ffffff; } .header-green-bar .language-selector { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-green-bar .language-selector .language-button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; color: #ffffff; text-decoration: none; font-weight: 300; font-size: 16px; -webkit-transition: opacity 0.15s ease-in-out; transition: opacity 0.15s ease-in-out; } @media screen and (max-width: 1550px) { .header-green-bar .language-selector .language-button { font-size: 13px; } } @media screen and (max-width: 1280px) { .header-green-bar .language-selector .language-button { font-size: 11px; } } .header-green-bar .language-selector .language-button:hover { opacity: 0.8; } .header-green-bar .language-selector .language-button svg { width: 18px; height: 18px; } @media screen and (max-width: 1550px) { .header-green-bar .language-selector .language-button svg { width: 15px; height: 15px; } } @media screen and (max-width: 1280px) { .header-green-bar .language-selector .language-button svg { width: 13px; height: 13px; } } .header-green-bar .header-search-form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; border: 1px solid #ffffff; border-radius: 8px; overflow: hidden; height: 36px; } .header-green-bar .header-search-form .header-search-input { width: 144px; border: none; background: transparent; padding: 6px 8px; font-size: 14px; font-weight: 400; border-radius: 8px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; outline: none; color: #ffffff; } @media screen and (max-width: 1550px) { .header-green-bar .header-search-form .header-search-input { font-size: 13px; } } @media screen and (max-width: 1280px) { .header-green-bar .header-search-form .header-search-input { font-size: 11px; } } .header-green-bar .header-search-form .header-search-input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.7); } .header-green-bar .header-search-form .header-search-input::-moz-placeholder { color: rgba(255, 255, 255, 0.7); } .header-green-bar .header-search-form .header-search-input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.7); } .header-green-bar .header-search-form .header-search-input::-ms-input-placeholder { color: rgba(255, 255, 255, 0.7); } .header-green-bar .header-search-form .header-search-input::placeholder { color: rgba(255, 255, 255, 0.7); } .header-green-bar .header-search-form .header-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .header-green-bar .header-search-form .header-search-input::-moz-search-clear-button { display: none; } .header-green-bar .header-search-form .header-search-button { width: 32px; height: 100%; background: none; border: none; padding: 6px 8px; cursor: pointer; color: #ffffff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: opacity 0.15s ease-in-out; transition: opacity 0.15s ease-in-out; border-radius: 0 8px 8px 0; } .header-green-bar .header-search-form .header-search-button svg { width: 20px; height: 20px; fill: #ffffff; -webkit-transition: fill 0.15s ease-in-out; transition: fill 0.15s ease-in-out; } .header-green-bar .header-search-form .header-search-button:hover { background-color: #ffffff; color: #00704a; } .header-green-bar .header-search-form .header-search-button:hover svg path, .header-green-bar .header-search-form .header-search-button:hover svg circle { fill: #00704a; } @media screen and (max-width: 1440px) { .header-green-bar { padding: 10px 0; } .header-green-bar .header-search-form .header-search-input { width: 140px; } } @media screen and (max-width: 1200px) { .header-green-bar { padding: 10px 0; } .header-green-bar .topbar-links { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } } @media screen and (max-width: 992px) { .header-green-bar { padding: 8px 0; } .header-green-bar .header-green-bar-content { gap: 0; } .header-green-bar .header-green-bar-left { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .header-green-bar .header-green-bar-right { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .header-green-bar .topbar-links { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; gap: 4px; } .header-green-bar .header-search-form { width: 130px; height: 32px; } .header-green-bar .header-search-form .header-search-input { width: 100%; } } @media screen and (max-width: 768px) { .header-green-bar { padding: 8px 0; } .header-green-bar .header-green-bar-content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } .header-green-bar .header-green-bar-left { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .header-green-bar .header-green-bar-right { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; gap: 12px; } .header-green-bar .topbar-links { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; } .header-green-bar .header-search-form { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: 100%; max-width: 300px; } .header-green-bar .language-selector { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media screen and (max-width: 480px) { .header-green-bar .header-search-form .header-search-input { font-size: 11px; padding: 4px 8px; } .header-green-bar .header-search-form .header-search-button { width: 28px; padding: 4px 6px; } .header-green-bar .header-search-form .header-search-button svg { width: 18px; height: 18px; } } .select2-dropdown--green-bar { position: fixed !important; z-index: 999999 !important; border: none !important; border-radius: 12px !important; -webkit-box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25) !important; box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25) !important; font-family: "Be Vietnam Pro", sans-serif !important; font-size: 16px !important; overflow: hidden !important; white-space: nowrap; } @media screen and (max-width: 1550px) { .select2-dropdown--green-bar { font-size: 13px !important; } } @media screen and (max-width: 1280px) { .select2-dropdown--green-bar { font-size: 11px !important; } } .select2-dropdown--green-bar .select2-results__options { max-height: 200px; overflow-y: auto; } .select2-dropdown--green-bar .select2-results__option { font-family: "Be Vietnam Pro", sans-serif !important; font-size: 16px !important; font-weight: 400; padding: 11.5px 16px !important; border-bottom: 1px solid #edeef1; outline: none; } .select2-dropdown--green-bar .select2-results__option:first-child { border-radius: 12px 12px 0 0; } .select2-dropdown--green-bar .select2-results__option:last-child { border-bottom: none; border-radius: 0 0 12px 12px; } @media screen and (max-width: 1550px) { .select2-dropdown--green-bar .select2-results__option { font-size: 13px !important; padding: 10px 14px !important; } } @media screen and (max-width: 1440px) { .select2-dropdown--green-bar .select2-results__option { padding: 9px 12px !important; } } @media screen and (max-width: 1280px) { .select2-dropdown--green-bar .select2-results__option { font-size: 11px !important; padding: 8px 10px !important; } } @media screen and (max-width: 1200px) { .select2-dropdown--green-bar .select2-results__option { padding: 7px 8px !important; } } .select2-dropdown--green-bar .select2-results__option--highlighted, .select2-dropdown--green-bar .select2-results__option:hover, .select2-dropdown--green-bar .select2-results__option:focus { background-color: #f5f5f5 !important; color: #00704a !important; outline: none; } .select2-dropdown--green-bar .select2-results__option[aria-selected=true] { background-color: #f5f5f5 !important; color: #00704a !important; } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /* ============================================ WHITE NAVIGATION BAR ============================================ */ .header-main-nav { background-color: #ffffff; padding: 32px 0; -webkit-transition: padding 0.3s ease-in-out; transition: padding 0.3s ease-in-out; } @media screen and (max-width: 1550px) { .header-main-nav { padding: 24px 0; } } @media screen and (max-width: 1440px) { .header-main-nav { padding: 20px 0; } } @media screen and (max-width: 1280px) { .header-main-nav { padding: 16px 0; } } @media screen and (max-width: 1200px) { .header-main-nav { padding: 12px 0; } } @media screen and (max-width: 1024px) { .header-main-nav { padding: 8px 0; } } .header-main-nav .header-main-nav-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 32px; width: 100%; } @media screen and (max-width: 1550px) { .header-main-nav .header-main-nav-content { gap: 24px; } } @media screen and (max-width: 1440px) { .header-main-nav .header-main-nav-content { gap: 20px; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } } @media screen and (max-width: 1280px) { .header-main-nav .header-main-nav-content { gap: 16px; } } @media screen and (max-width: 1200px) { .header-main-nav .header-main-nav-content { gap: 12px; } } @media screen and (max-width: 1024px) { .header-main-nav .header-main-nav-content { gap: 8px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .header-main-nav .menu-toggle { display: none; background: none; border: none; padding: 12px; cursor: pointer; color: #00704a; -ms-flex-negative: 0; flex-shrink: 0; margin-left: auto; } .header-main-nav .menu-toggle .menu-toggle-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .header-main-nav .menu-toggle .menu-toggle-icon svg { width: 32px; height: 32px; } @media screen and (max-width: 1024px) { .header-main-nav .menu-toggle { display: block; margin-right: -16px; } } .header-main-nav .site-branding { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; } .header-main-nav .site-branding .custom-logo { width: 204px; height: 47px; -o-object-fit: contain; object-fit: contain; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .header-main-nav .site-branding .site-logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-decoration: none; color: #00704a; width: 204px; height: 47px; } @media screen and (max-width: 1280px) { .header-main-nav .site-branding .site-logo { width: 160px; height: auto; } } .header-main-nav .site-branding .site-logo svg { width: 204px; height: 47px; } .header-main-nav .site-branding .site-logo .site-title { font-family: "Montserrat", sans-serif; font-size: 24px; font-weight: 700; color: #00704a; letter-spacing: 0.5px; } @media screen and (max-width: 1280px) { .site-header.sticky .header-main-nav .site-branding .custom-logo { width: 160px; height: auto; } } @media screen and (max-width: 1770px) { .site-header.sticky .header-main-nav .site-branding .site-logo { width: 146px; height: auto; } .site-header.sticky .header-main-nav .site-branding .site-logo svg { width: 146px; height: auto; } } @media screen and (max-width: 1280px) { .site-header.sticky .header-main-nav .site-branding .site-logo { width: 160px; height: auto; } .site-header.sticky .header-main-nav .site-branding .site-logo svg { width: 160px; height: auto; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /* ============================================ MAIN NAVIGATION MENU ============================================ */ .main-navigation { display: block; width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } @media screen and (max-width: 1024px) { .main-navigation { display: none; } } .main-navigation .menu-toggle { display: none; } .main-navigation .mobile-register-section { display: none; } .main-navigation.toggled::before { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1040; } .main-navigation.toggled ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: fixed; top: 0; right: 0; width: 300px; height: 100vh; background-color: #ffffff; -webkit-box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04); box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04); padding: 24px 16px; margin: 0; z-index: 1050; overflow-y: auto; } .main-navigation.toggled ul li { width: 100%; margin-bottom: 8px; } .main-navigation.toggled ul li a { display: block; padding: 12px 16px; color: #312020; text-decoration: none; border-radius: 8px; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .main-navigation.toggled ul li a:hover, .main-navigation.toggled ul li a:focus { background-color: rgba(0, 112, 74, 0.1); color: #00704a; } .main-navigation.toggled ul li.has-dropdown > a, .main-navigation.toggled ul li.menu-item-has-children > a { position: relative; } .main-navigation.toggled ul li.has-dropdown > a::after, .main-navigation.toggled ul li.menu-item-has-children > a::after { content: ""; width: 16px; height: 16px; background-image: url("/wp-content/themes/one-lab/assets/images/icons/arrow-down.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; right: 16px; top: 50%; -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); -webkit-transition: -webkit-transform 0.15s ease-in-out; transition: -webkit-transform 0.15s ease-in-out; transition: transform 0.15s ease-in-out; transition: transform 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; pointer-events: auto; } .main-navigation.toggled ul li.has-dropdown > a.submenu-open::after, .main-navigation.toggled ul li.menu-item-has-children > a.submenu-open::after { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .main-navigation.toggled ul li.submenu-open > a::after { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .main-navigation.toggled ul li.active > a, .main-navigation.toggled ul li.current-menu-item > a, .main-navigation.toggled ul li.current-menu-ancestor > a, .main-navigation.toggled ul li.current-menu-parent > a, .main-navigation.toggled ul li.current_page_item > a, .main-navigation.toggled ul li.current_page_ancestor > a, .main-navigation.toggled ul li.submenu-open > a { background-color: rgba(0, 112, 74, 0.1); color: #00704a; } .main-navigation.toggled ul li ul { position: static; -webkit-box-shadow: none; box-shadow: none; margin-top: 8px; padding-left: 16px; background-color: transparent; } .main-navigation.toggled ul li ul li { margin-bottom: 4px; } .main-navigation.toggled ul li ul li a { padding: 8px 12px; font-size: 14px; } .main-navigation.toggled ul .mobile-register-section { display: block; margin-top: auto; padding-top: 24px; border-top: 1px solid #e5e7eb; } .main-navigation.toggled ul .mobile-register-section .mobile-register-button { display: block; width: 100%; padding: 16px 12px; background-color: #00704a; color: #ffffff; text-align: center; font-weight: 600; font-size: 16px; border-radius: 8px; cursor: pointer; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; text-decoration: none; border: none; margin-top: 16px; } .main-navigation.toggled ul .mobile-register-section .mobile-register-button:hover { background-color: #00723f; -webkit-transform: translateY(-1px); transform: translateY(-1px); -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); } @media screen and (min-width: 1024px) { .main-navigation .menu-toggle { display: none; } .main-navigation ul { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media screen and (max-width: 1024px) { .main-navigation ul { display: none; } .main-navigation.toggled ul { display: -webkit-box; display: -ms-flexbox; display: flex; } .main-navigation .sub-menu-level-2, .main-navigation ul.sub-menu-level-2 { position: static !important; display: none !important; top: auto !important; left: auto !important; width: 100% !important; -webkit-box-shadow: none !important; box-shadow: none !important; margin-top: 8px; margin-left: 16px; padding-left: 0; background-color: transparent; } .main-navigation .sub-menu-level-2::before, .main-navigation ul.sub-menu-level-2::before { display: none; } .main-navigation .sub-menu-level-2.submenu-open, .main-navigation ul.sub-menu-level-2.submenu-open { display: block !important; } .main-navigation .sub-menu-level-2 li, .main-navigation ul.sub-menu-level-2 li { border-bottom: 1px solid #e5e7eb; } .main-navigation .sub-menu-level-2 li a, .main-navigation ul.sub-menu-level-2 li a { padding: 8px 12px; font-size: 14px; } .main-navigation .sub-menu-level-3, .main-navigation ul.sub-menu-level-3 { display: block !important; position: static !important; left: auto !important; top: auto !important; margin-top: 0 !important; margin-left: 16px !important; -webkit-box-shadow: none !important; box-shadow: none !important; background-color: #f9f9f9; border-radius: 0; padding: 8px 16px; min-width: auto; width: calc(100% - 16px) !important; max-height: none; opacity: 1; overflow: visible; -webkit-transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out; transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out; } .main-navigation .has-accordion > a .accordion-arrow-button { position: absolute; right: 16px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 16px; height: 16px; padding: 4px; -webkit-box-sizing: content-box; box-sizing: content-box; cursor: pointer; z-index: 1; pointer-events: auto; -webkit-transition: background-color 0.15s ease-in-out; transition: background-color 0.15s ease-in-out; } .main-navigation .has-accordion > a .accordion-arrow-button::before { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 16px; height: 16px; background-image: url("/wp-content/themes/one-lab/assets/images/icons/arrow-down.svg"); background-size: 16px 16px; background-repeat: no-repeat; background-position: center; -webkit-transition: -webkit-transform 0.15s ease-in-out, -webkit-filter 0.15s ease-in-out; transition: -webkit-transform 0.15s ease-in-out, -webkit-filter 0.15s ease-in-out; transition: transform 0.15s ease-in-out, filter 0.15s ease-in-out; transition: transform 0.15s ease-in-out, filter 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out, -webkit-filter 0.15s ease-in-out; } .main-navigation .has-accordion > a .accordion-arrow-button.active::before { -webkit-filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(1352%) hue-rotate(127deg) brightness(97%) contrast(101%); filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(1352%) hue-rotate(127deg) brightness(97%) contrast(101%); } .main-navigation .has-accordion > a.accordion-open .accordion-arrow-button::before { -webkit-transform: translate(-50%, -50%) rotate(180deg); transform: translate(-50%, -50%) rotate(180deg); } .main-navigation .has-accordion > a.accordion-open .accordion-arrow-button.active::before { -webkit-transform: translate(-50%, -50%) rotate(180deg); transform: translate(-50%, -50%) rotate(180deg); -webkit-filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(1352%) hue-rotate(127deg) brightness(97%) contrast(101%); filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(1352%) hue-rotate(127deg) brightness(97%) contrast(101%); } .main-navigation .has-accordion > a::after { display: none; } .main-navigation .sub-menu-level-3 li { border-bottom: 1px solid #e5e7eb; } .main-navigation .sub-menu-level-3 li:last-child { border-bottom: none; } .main-navigation .sub-menu-level-3 li a { padding-left: 16px; font-size: 14px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .main-navigation .sub-menu-level-3 li a::before { content: "•" !important; display: block !important; position: absolute !important; left: 22px !important; top: 26px !important; -webkit-transform: translateY(-50%) !important; transform: translateY(-50%) !important; color: #312020 !important; font-size: 16px !important; line-height: 1 !important; width: auto !important; height: auto !important; background: none !important; border-radius: 0 !important; opacity: 1 !important; visibility: visible !important; -webkit-transition: color 0.15s ease-in-out !important; transition: color 0.15s ease-in-out !important; } .main-navigation .sub-menu-level-3 li a:hover::before { color: #00704a !important; } } .main-navigation ul { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; margin: 0; padding: 0; gap: 24px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; row-gap: 4px; -webkit-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; } @media screen and (max-width: 1550px) { .main-navigation ul { gap: 4px; -webkit-column-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; } } @media screen and (max-width: 1280px) { .main-navigation ul { gap: 8px; } } .main-navigation ul li { position: relative; } .main-navigation ul li > a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; padding: 24px 0; color: #312020; text-decoration: none; font-size: 18px; line-height: 25px; font-weight: 400; -webkit-transition: color 0.15s ease-in-out, padding 0.3s ease-in-out; transition: color 0.15s ease-in-out, padding 0.3s ease-in-out; position: relative; white-space: nowrap; outline: none; } @media screen and (max-width: 1550px) { .main-navigation ul li > a { padding: 16px 0; font-size: 14px; gap: 4px; } } @media screen and (max-width: 1440px) { .main-navigation ul li > a { padding: 12px 0; } } @media screen and (max-width: 1280px) { .main-navigation ul li > a { padding: 10px 0; font-size: 12px; } } @media screen and (max-width: 1200px) { .main-navigation ul li > a { padding: 8px 0; } } .main-navigation ul li > a::before { content: ""; width: 0; height: 3px; background-color: #00704a; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: width 0.15s ease-in-out; transition: width 0.15s ease-in-out; } .main-navigation ul li > a:hover { color: #00704a; outline: none; } .main-navigation ul li > a:hover::before { width: 100%; } .main-navigation ul li li:hover > a, .main-navigation ul li li:focus > a { color: #00704a; } .main-navigation ul li li:hover > a::before, .main-navigation ul li li:focus > a::before { width: 80%; } .main-navigation ul li.menu-item-has-children > a, .main-navigation ul li.page_item_has_children > a { position: relative; } .main-navigation ul li.menu-item-has-children > a::after, .main-navigation ul li.page_item_has_children > a::after { content: ""; width: 16px; height: 16px; background-image: url("/wp-content/themes/one-lab/assets/images/icons/arrow-down.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; -webkit-transition: opacity 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; transition: opacity 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out; transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; -webkit-transform: rotate(0deg); transform: rotate(0deg); pointer-events: auto; } @media screen and (max-width: 1199px) { .main-navigation ul li.menu-item-has-children > a::after, .main-navigation ul li.page_item_has_children > a::after { width: 12px; height: 12px; } } .main-navigation ul li.menu-item-has-children > a:hover::after, .main-navigation ul li.menu-item-has-children > a.active::after, .main-navigation ul li.page_item_has_children > a:hover::after, .main-navigation ul li.page_item_has_children > a.active::after { -webkit-filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(1352%) hue-rotate(127deg) brightness(97%) contrast(101%); filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(1352%) hue-rotate(127deg) brightness(97%) contrast(101%); } .main-navigation ul li.menu-item-has-children > a.submenu-open::after, .main-navigation ul li.menu-item-has-children > a.accordion-open::after, .main-navigation ul li.page_item_has_children > a.submenu-open::after, .main-navigation ul li.page_item_has_children > a.accordion-open::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .main-navigation ul li.submenu-open > a::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .main-navigation ul li .sub-menu-level-2, .main-navigation ul li ul.sub-menu-level-2, .main-navigation ul li .children { display: none; position: absolute; top: calc(100% + 18px); left: 0; right: auto; background-color: #ffffff; min-width: 280px; max-width: min(-webkit-max-content, 100vw - 40px); max-width: min(-moz-max-content, 100vw - 40px); max-width: min(max-content, 100vw - 40px); -webkit-box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25); box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25); border-radius: 12px; padding: 0; margin-top: 0px; z-index: 1020; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0; overflow: visible; } @media screen and (max-width: 1550px) { .main-navigation ul li .sub-menu-level-2, .main-navigation ul li ul.sub-menu-level-2, .main-navigation ul li .children { min-width: 240px; } } @media screen and (max-width: 1440px) { .main-navigation ul li .sub-menu-level-2, .main-navigation ul li ul.sub-menu-level-2, .main-navigation ul li .children { min-width: 220px; max-width: calc(100vw - 40px); } } @media screen and (max-width: 1280px) { .main-navigation ul li .sub-menu-level-2, .main-navigation ul li ul.sub-menu-level-2, .main-navigation ul li .children { min-width: 200px; } } @media screen and (max-width: 1200px) { .main-navigation ul li .sub-menu-level-2, .main-navigation ul li ul.sub-menu-level-2, .main-navigation ul li .children { min-width: 180px; } } .main-navigation ul li .sub-menu-level-2::before, .main-navigation ul li ul.sub-menu-level-2::before, .main-navigation ul li .children::before { content: ""; position: absolute; top: -18px; left: -50px; right: -50px; height: 18px; background-color: transparent; pointer-events: auto; } .main-navigation ul li .sub-menu-level-2 li, .main-navigation ul li ul.sub-menu-level-2 li, .main-navigation ul li .children li { width: 100%; border-bottom: 1px solid #edeef1; } .main-navigation ul li .sub-menu-level-2 li:last-child, .main-navigation ul li ul.sub-menu-level-2 li:last-child, .main-navigation ul li .children li:last-child { border-bottom: none; } .main-navigation ul li .sub-menu-level-2 li:first-child > a, .main-navigation ul li ul.sub-menu-level-2 li:first-child > a, .main-navigation ul li .children li:first-child > a { border-radius: 12px 12px 0 0; } .main-navigation ul li .sub-menu-level-2 li:last-child > a, .main-navigation ul li ul.sub-menu-level-2 li:last-child > a, .main-navigation ul li .children li:last-child > a { border-radius: 0 0 12px 12px; } .main-navigation ul li .sub-menu-level-2 li:last-child.menu-item-has-children > a, .main-navigation ul li .sub-menu-level-2 li:last-child.page_item_has_children > a, .main-navigation ul li ul.sub-menu-level-2 li:last-child.menu-item-has-children > a, .main-navigation ul li ul.sub-menu-level-2 li:last-child.page_item_has_children > a, .main-navigation ul li .children li:last-child.menu-item-has-children > a, .main-navigation ul li .children li:last-child.page_item_has_children > a { border-radius: 0 0 12px 12px; } .main-navigation ul li .sub-menu-level-2 li:last-child.menu-item-has-children > a:hover, .main-navigation ul li .sub-menu-level-2 li:last-child.page_item_has_children > a:hover, .main-navigation ul li ul.sub-menu-level-2 li:last-child.menu-item-has-children > a:hover, .main-navigation ul li ul.sub-menu-level-2 li:last-child.page_item_has_children > a:hover, .main-navigation ul li .children li:last-child.menu-item-has-children > a:hover, .main-navigation ul li .children li:last-child.page_item_has_children > a:hover { border-radius: 0 0 12px 12px; } .main-navigation ul li .sub-menu-level-2 li:last-child.menu-item-has-children:has(.sub-menu-level-3.accordion-open) > a, .main-navigation ul li .sub-menu-level-2 li:last-child.page_item_has_children:has(.sub-menu-level-3.accordion-open) > a, .main-navigation ul li ul.sub-menu-level-2 li:last-child.menu-item-has-children:has(.sub-menu-level-3.accordion-open) > a, .main-navigation ul li ul.sub-menu-level-2 li:last-child.page_item_has_children:has(.sub-menu-level-3.accordion-open) > a, .main-navigation ul li .children li:last-child.menu-item-has-children:has(.sub-menu-level-3.accordion-open) > a, .main-navigation ul li .children li:last-child.page_item_has_children:has(.sub-menu-level-3.accordion-open) > a { border-radius: 0; } .main-navigation ul li .sub-menu-level-2 li:last-child .sub-menu-level-3 li:last-child > a, .main-navigation ul li ul.sub-menu-level-2 li:last-child .sub-menu-level-3 li:last-child > a, .main-navigation ul li .children li:last-child .sub-menu-level-3 li:last-child > a { border-radius: 0 0 12px 12px; } .main-navigation ul li .sub-menu-level-2 li.menu-item-has-children > a::after, .main-navigation ul li .sub-menu-level-2 li.page_item_has_children > a::after, .main-navigation ul li ul.sub-menu-level-2 li.menu-item-has-children > a::after, .main-navigation ul li ul.sub-menu-level-2 li.page_item_has_children > a::after, .main-navigation ul li .children li.menu-item-has-children > a::after, .main-navigation ul li .children li.page_item_has_children > a::after { content: ""; width: 12px; height: 12px; background-image: url("/wp-content/themes/one-lab/assets/images/icons/arrow-down.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; -webkit-transition: opacity 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; transition: opacity 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out; transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; -webkit-transform: rotate(0deg); transform: rotate(0deg); } .main-navigation ul li .sub-menu-level-2 li.menu-item-has-children > a:hover::after, .main-navigation ul li .sub-menu-level-2 li.menu-item-has-children > a.active::after, .main-navigation ul li .sub-menu-level-2 li.page_item_has_children > a:hover::after, .main-navigation ul li .sub-menu-level-2 li.page_item_has_children > a.active::after, .main-navigation ul li ul.sub-menu-level-2 li.menu-item-has-children > a:hover::after, .main-navigation ul li ul.sub-menu-level-2 li.menu-item-has-children > a.active::after, .main-navigation ul li ul.sub-menu-level-2 li.page_item_has_children > a:hover::after, .main-navigation ul li ul.sub-menu-level-2 li.page_item_has_children > a.active::after, .main-navigation ul li .children li.menu-item-has-children > a:hover::after, .main-navigation ul li .children li.menu-item-has-children > a.active::after, .main-navigation ul li .children li.page_item_has_children > a:hover::after, .main-navigation ul li .children li.page_item_has_children > a.active::after { -webkit-filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(1352%) hue-rotate(127deg) brightness(97%) contrast(101%); filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(1352%) hue-rotate(127deg) brightness(97%) contrast(101%); } .main-navigation ul li .sub-menu-level-2 li.has-accordion > a, .main-navigation ul li ul.sub-menu-level-2 li.has-accordion > a, .main-navigation ul li .children li.has-accordion > a { position: relative; } .main-navigation ul li .sub-menu-level-2 li.has-accordion > a .accordion-arrow-button, .main-navigation ul li ul.sub-menu-level-2 li.has-accordion > a .accordion-arrow-button, .main-navigation ul li .children li.has-accordion > a .accordion-arrow-button { position: absolute; right: 7px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 12px; height: 12px; padding: 8px 12px; -webkit-box-sizing: content-box; box-sizing: content-box; cursor: pointer; z-index: 1; border-radius: 6px; pointer-events: auto; -webkit-transition: background-color 0.15s ease-in-out; transition: background-color 0.15s ease-in-out; } .main-navigation ul li .sub-menu-level-2 li.has-accordion > a .accordion-arrow-button::before, .main-navigation ul li ul.sub-menu-level-2 li.has-accordion > a .accordion-arrow-button::before, .main-navigation ul li .children li.has-accordion > a .accordion-arrow-button::before { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 12px; height: 12px; background-image: url("/wp-content/themes/one-lab/assets/images/icons/arrow-down.svg"); background-size: 12px 12px; background-repeat: no-repeat; background-position: center; -webkit-transition: -webkit-transform 0.15s ease-in-out, -webkit-filter 0.15s ease-in-out; transition: -webkit-transform 0.15s ease-in-out, -webkit-filter 0.15s ease-in-out; transition: transform 0.15s ease-in-out, filter 0.15s ease-in-out; transition: transform 0.15s ease-in-out, filter 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out, -webkit-filter 0.15s ease-in-out; } .main-navigation ul li .sub-menu-level-2 li.has-accordion > a .accordion-arrow-button.active::before, .main-navigation ul li ul.sub-menu-level-2 li.has-accordion > a .accordion-arrow-button.active::before, .main-navigation ul li .children li.has-accordion > a .accordion-arrow-button.active::before { -webkit-filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(1352%) hue-rotate(127deg) brightness(97%) contrast(101%); filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(1352%) hue-rotate(127deg) brightness(97%) contrast(101%); } .main-navigation ul li .sub-menu-level-2 li.has-accordion > a .accordion-arrow-button:hover, .main-navigation ul li ul.sub-menu-level-2 li.has-accordion > a .accordion-arrow-button:hover, .main-navigation ul li .children li.has-accordion > a .accordion-arrow-button:hover { background-color: rgba(0, 112, 74, 0.15); } .main-navigation ul li .sub-menu-level-2 li.has-accordion > a.accordion-open .accordion-arrow-button::before, .main-navigation ul li ul.sub-menu-level-2 li.has-accordion > a.accordion-open .accordion-arrow-button::before, .main-navigation ul li .children li.has-accordion > a.accordion-open .accordion-arrow-button::before { -webkit-transform: translate(-50%, -50%) rotate(180deg); transform: translate(-50%, -50%) rotate(180deg); } .main-navigation ul li .sub-menu-level-2 li.has-accordion > a.accordion-open .accordion-arrow-button.active::before, .main-navigation ul li ul.sub-menu-level-2 li.has-accordion > a.accordion-open .accordion-arrow-button.active::before, .main-navigation ul li .children li.has-accordion > a.accordion-open .accordion-arrow-button.active::before { -webkit-transform: translate(-50%, -50%) rotate(180deg); transform: translate(-50%, -50%) rotate(180deg); -webkit-filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(1352%) hue-rotate(127deg) brightness(97%) contrast(101%); filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(1352%) hue-rotate(127deg) brightness(97%) contrast(101%); } .main-navigation ul li .sub-menu-level-2 li.has-accordion > a::after, .main-navigation ul li ul.sub-menu-level-2 li.has-accordion > a::after, .main-navigation ul li .children li.has-accordion > a::after { display: none; } .main-navigation ul li .sub-menu-level-2 li a, .main-navigation ul li ul.sub-menu-level-2 li a, .main-navigation ul li .children li a { padding: 11.5px 16px; width: 100%; outline: none; font-size: 16px; } .main-navigation ul li .sub-menu-level-2 li a::before, .main-navigation ul li ul.sub-menu-level-2 li a::before, .main-navigation ul li .children li a::before { display: none; } @media screen and (max-width: 1550px) { .main-navigation ul li .sub-menu-level-2 li a, .main-navigation ul li ul.sub-menu-level-2 li a, .main-navigation ul li .children li a { font-size: 13px; padding: 10px 14px; } } @media screen and (max-width: 1440px) { .main-navigation ul li .sub-menu-level-2 li a, .main-navigation ul li ul.sub-menu-level-2 li a, .main-navigation ul li .children li a { padding: 9px 12px; } } @media screen and (max-width: 1280px) { .main-navigation ul li .sub-menu-level-2 li a, .main-navigation ul li ul.sub-menu-level-2 li a, .main-navigation ul li .children li a { font-size: 11px; padding: 8px 10px; } } @media screen and (max-width: 1200px) { .main-navigation ul li .sub-menu-level-2 li a, .main-navigation ul li ul.sub-menu-level-2 li a, .main-navigation ul li .children li a { padding: 7px 8px; } } .main-navigation ul li .sub-menu-level-2 li a:hover, .main-navigation ul li .sub-menu-level-2 li a:focus, .main-navigation ul li ul.sub-menu-level-2 li a:hover, .main-navigation ul li ul.sub-menu-level-2 li a:focus, .main-navigation ul li .children li a:hover, .main-navigation ul li .children li a:focus { background-color: #f5f5f5; outline: none; } .main-navigation ul li .sub-menu-level-2 li .sub-menu-level-3 li a::before, .main-navigation ul li ul.sub-menu-level-2 li .sub-menu-level-3 li a::before, .main-navigation ul li .children li .sub-menu-level-3 li a::before { display: block !important; } .main-navigation ul li .sub-menu-level-2 li .sub-menu-level-3, .main-navigation ul li ul.sub-menu-level-2 li .sub-menu-level-3, .main-navigation ul li .children li .sub-menu-level-3 { position: static !important; display: block !important; left: auto !important; top: auto !important; margin-top: 0 !important; margin-left: 0 !important; -webkit-box-shadow: none !important; box-shadow: none !important; background-color: transparent; border-radius: 0; padding: 0; min-width: auto; width: 100%; overflow: visible; max-height: none; opacity: 1; -webkit-transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; } .main-navigation ul li .sub-menu-level-2 li .sub-menu-level-3 li, .main-navigation ul li ul.sub-menu-level-2 li .sub-menu-level-3 li, .main-navigation ul li .children li .sub-menu-level-3 li { border-bottom: 1px solid #edeef1; } .main-navigation ul li .sub-menu-level-2 li .sub-menu-level-3 li:last-child, .main-navigation ul li ul.sub-menu-level-2 li .sub-menu-level-3 li:last-child, .main-navigation ul li .children li .sub-menu-level-3 li:last-child { border-bottom: none; } .main-navigation ul li .sub-menu-level-2 li .sub-menu-level-3 li:first-child > a, .main-navigation ul li ul.sub-menu-level-2 li .sub-menu-level-3 li:first-child > a, .main-navigation ul li .children li .sub-menu-level-3 li:first-child > a { border-radius: 0; } .main-navigation ul li .sub-menu-level-2 li .sub-menu-level-3 li:last-child > a, .main-navigation ul li ul.sub-menu-level-2 li .sub-menu-level-3 li:last-child > a, .main-navigation ul li .children li .sub-menu-level-3 li:last-child > a { border-radius: 0; } .main-navigation ul li .sub-menu-level-2 li .sub-menu-level-3 li a, .main-navigation ul li ul.sub-menu-level-2 li .sub-menu-level-3 li a, .main-navigation ul li .children li .sub-menu-level-3 li a { padding-left: 36px; font-size: 16px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; outline: none; } @media screen and (max-width: 1550px) { .main-navigation ul li .sub-menu-level-2 li .sub-menu-level-3 li a, .main-navigation ul li ul.sub-menu-level-2 li .sub-menu-level-3 li a, .main-navigation ul li .children li .sub-menu-level-3 li a { font-size: 13px; padding-left: 32px; } } @media screen and (max-width: 1440px) { .main-navigation ul li .sub-menu-level-2 li .sub-menu-level-3 li a, .main-navigation ul li ul.sub-menu-level-2 li .sub-menu-level-3 li a, .main-navigation ul li .children li .sub-menu-level-3 li a { padding-left: 28px; } } @media screen and (max-width: 1280px) { .main-navigation ul li .sub-menu-level-2 li .sub-menu-level-3 li a, .main-navigation ul li ul.sub-menu-level-2 li .sub-menu-level-3 li a, .main-navigation ul li .children li .sub-menu-level-3 li a { font-size: 11px; padding-left: 24px; } } @media screen and (max-width: 1200px) { .main-navigation ul li .sub-menu-level-2 li .sub-menu-level-3 li a, .main-navigation ul li ul.sub-menu-level-2 li .sub-menu-level-3 li a, .main-navigation ul li .children li .sub-menu-level-3 li a { padding-left: 20px; } } .main-navigation ul li .sub-menu-level-2 li .sub-menu-level-3 li a:focus, .main-navigation ul li ul.sub-menu-level-2 li .sub-menu-level-3 li a:focus, .main-navigation ul li .children li .sub-menu-level-3 li a:focus { outline: none; } .main-navigation ul li .sub-menu-level-2 li .sub-menu-level-3 li a::before, .main-navigation ul li ul.sub-menu-level-2 li .sub-menu-level-3 li a::before, .main-navigation ul li .children li .sub-menu-level-3 li a::before { content: "•" !important; display: block !important; position: absolute !important; left: 22px !important; top: 26px !important; -webkit-transform: translateY(-50%) !important; transform: translateY(-50%) !important; color: #312020 !important; font-size: 16px !important; line-height: 1 !important; width: auto !important; height: auto !important; background: none !important; border-radius: 0 !important; opacity: 1 !important; visibility: visible !important; -webkit-transition: color 0.15s ease-in-out !important; transition: color 0.15s ease-in-out !important; } @media screen and (max-width: 1550px) { .main-navigation ul li .sub-menu-level-2 li .sub-menu-level-3 li a::before, .main-navigation ul li ul.sub-menu-level-2 li .sub-menu-level-3 li a::before, .main-navigation ul li .children li .sub-menu-level-3 li a::before { font-size: 13px !important; left: 18px !important; } } @media screen and (max-width: 1440px) { .main-navigation ul li .sub-menu-level-2 li .sub-menu-level-3 li a::before, .main-navigation ul li ul.sub-menu-level-2 li .sub-menu-level-3 li a::before, .main-navigation ul li .children li .sub-menu-level-3 li a::before { left: 14px !important; top: 25px !important; } } @media screen and (max-width: 1280px) { .main-navigation ul li .sub-menu-level-2 li .sub-menu-level-3 li a::before, .main-navigation ul li ul.sub-menu-level-2 li .sub-menu-level-3 li a::before, .main-navigation ul li .children li .sub-menu-level-3 li a::before { font-size: 11px !important; left: 12px !important; top: 24px !important; } } @media screen and (max-width: 1100px) { .main-navigation ul li .sub-menu-level-2 li .sub-menu-level-3 li a::before, .main-navigation ul li ul.sub-menu-level-2 li .sub-menu-level-3 li a::before, .main-navigation ul li .children li .sub-menu-level-3 li a::before { font-size: 11px !important; left: 10px !important; top: 22px !important; } } .main-navigation ul li .sub-menu-level-2 li .sub-menu-level-3 li a:hover::before, .main-navigation ul li ul.sub-menu-level-2 li .sub-menu-level-3 li a:hover::before, .main-navigation ul li .children li .sub-menu-level-3 li a:hover::before { color: #00704a !important; } .main-navigation ul li:nth-last-child(1) > .sub-menu-level-2, .main-navigation ul li:nth-last-child(1) > ul.sub-menu-level-2, .main-navigation ul li:nth-last-child(1) > .children { left: auto; right: 0; } .main-navigation ul li:nth-last-child(1) > .sub-menu-level-2::before, .main-navigation ul li:nth-last-child(1) > ul.sub-menu-level-2::before, .main-navigation ul li:nth-last-child(1) > .children::before { left: -50px; right: -50px; } .main-navigation ul li:nth-last-child(2) > .sub-menu-level-2, .main-navigation ul li:nth-last-child(2) > ul.sub-menu-level-2, .main-navigation ul li:nth-last-child(2) > .children { left: auto; right: 0; } .main-navigation ul li:nth-last-child(2) > .sub-menu-level-2::before, .main-navigation ul li:nth-last-child(2) > ul.sub-menu-level-2::before, .main-navigation ul li:nth-last-child(2) > .children::before { left: -50px; right: -50px; } @media screen and (max-width: 1440px) { .main-navigation ul li:nth-last-child(1) > .sub-menu-level-2, .main-navigation ul li:nth-last-child(1) > ul.sub-menu-level-2, .main-navigation ul li:nth-last-child(1) > .children { left: auto; right: 0; } .main-navigation ul li:nth-last-child(1) > .sub-menu-level-2::before, .main-navigation ul li:nth-last-child(1) > ul.sub-menu-level-2::before, .main-navigation ul li:nth-last-child(1) > .children::before { left: -50px; right: -50px; } .main-navigation ul li:nth-last-child(2) > .sub-menu-level-2, .main-navigation ul li:nth-last-child(2) > ul.sub-menu-level-2, .main-navigation ul li:nth-last-child(2) > .children { left: auto; right: 0; } .main-navigation ul li:nth-last-child(2) > .sub-menu-level-2::before, .main-navigation ul li:nth-last-child(2) > ul.sub-menu-level-2::before, .main-navigation ul li:nth-last-child(2) > .children::before { left: -50px; right: -50px; } .main-navigation ul li:nth-last-child(3) > .sub-menu-level-2, .main-navigation ul li:nth-last-child(3) > ul.sub-menu-level-2, .main-navigation ul li:nth-last-child(3) > .children { left: auto; right: 0; } .main-navigation ul li:nth-last-child(3) > .sub-menu-level-2::before, .main-navigation ul li:nth-last-child(3) > ul.sub-menu-level-2::before, .main-navigation ul li:nth-last-child(3) > .children::before { left: -50px; right: -50px; } } @media screen and (max-width: 1200px) { .main-navigation ul li:nth-last-child(1) > .sub-menu-level-2, .main-navigation ul li:nth-last-child(1) > ul.sub-menu-level-2, .main-navigation ul li:nth-last-child(1) > .children { left: auto; right: 0; } .main-navigation ul li:nth-last-child(1) > .sub-menu-level-2::before, .main-navigation ul li:nth-last-child(1) > ul.sub-menu-level-2::before, .main-navigation ul li:nth-last-child(1) > .children::before { left: -50px; right: -50px; } .main-navigation ul li:nth-last-child(2) > .sub-menu-level-2, .main-navigation ul li:nth-last-child(2) > ul.sub-menu-level-2, .main-navigation ul li:nth-last-child(2) > .children { left: auto; right: 0; } .main-navigation ul li:nth-last-child(2) > .sub-menu-level-2::before, .main-navigation ul li:nth-last-child(2) > ul.sub-menu-level-2::before, .main-navigation ul li:nth-last-child(2) > .children::before { left: -50px; right: -50px; } .main-navigation ul li:nth-last-child(3) > .sub-menu-level-2, .main-navigation ul li:nth-last-child(3) > ul.sub-menu-level-2, .main-navigation ul li:nth-last-child(3) > .children { left: auto; right: 0; } .main-navigation ul li:nth-last-child(3) > .sub-menu-level-2::before, .main-navigation ul li:nth-last-child(3) > ul.sub-menu-level-2::before, .main-navigation ul li:nth-last-child(3) > .children::before { left: -50px; right: -50px; } .main-navigation ul li:nth-last-child(4) > .sub-menu-level-2, .main-navigation ul li:nth-last-child(4) > ul.sub-menu-level-2, .main-navigation ul li:nth-last-child(4) > .children { left: auto; right: 0; } .main-navigation ul li:nth-last-child(4) > .sub-menu-level-2::before, .main-navigation ul li:nth-last-child(4) > ul.sub-menu-level-2::before, .main-navigation ul li:nth-last-child(4) > .children::before { left: -50px; right: -50px; } } .main-navigation ul li:hover > .sub-menu-level-2, .main-navigation ul li:hover > ul.sub-menu-level-2, .main-navigation ul li:hover > .children, .main-navigation ul li.focus > .sub-menu-level-2, .main-navigation ul li.focus > ul.sub-menu-level-2, .main-navigation ul li.focus > .children { display: -webkit-box; display: -ms-flexbox; display: flex; } .main-navigation ul li.active > a, .main-navigation ul li.current-menu-item > a, .main-navigation ul li.current-menu-ancestor > a, .main-navigation ul li.current-menu-parent > a, .main-navigation ul li.current_page_item > a, .main-navigation ul li.current_page_ancestor > a, .main-navigation ul li.submenu-open > a { color: #00704a; } .main-navigation ul li.active > a::before, .main-navigation ul li.current-menu-item > a::before, .main-navigation ul li.current-menu-ancestor > a::before, .main-navigation ul li.current-menu-parent > a::before, .main-navigation ul li.current_page_item > a::before, .main-navigation ul li.current_page_ancestor > a::before, .main-navigation ul li.submenu-open > a::before { width: 100%; } .site-header.sticky .main-navigation ul > li .sub-menu-level-2, .site-header.sticky .main-navigation ul > li ul.sub-menu-level-2, .site-header.sticky .main-navigation ul > li .children { max-width: min(-webkit-max-content, 100vw - 40px); max-width: min(-moz-max-content, 100vw - 40px); max-width: min(max-content, 100vw - 40px); } .site-header.sticky .main-navigation ul > li:nth-last-child(1) > .sub-menu-level-2, .site-header.sticky .main-navigation ul > li:nth-last-child(1) > ul.sub-menu-level-2, .site-header.sticky .main-navigation ul > li:nth-last-child(1) > .children { left: auto; right: 0; max-width: calc(100vw - 40px); } .site-header.sticky .main-navigation ul > li:nth-last-child(1) > .sub-menu-level-2::before, .site-header.sticky .main-navigation ul > li:nth-last-child(1) > ul.sub-menu-level-2::before, .site-header.sticky .main-navigation ul > li:nth-last-child(1) > .children::before { left: -50px; right: 0; } .site-header.sticky .main-navigation ul > li:nth-last-child(2) > .sub-menu-level-2, .site-header.sticky .main-navigation ul > li:nth-last-child(2) > ul.sub-menu-level-2, .site-header.sticky .main-navigation ul > li:nth-last-child(2) > .children { left: auto; right: 0; max-width: calc(100vw - 40px); } .site-header.sticky .main-navigation ul > li:nth-last-child(2) > .sub-menu-level-2::before, .site-header.sticky .main-navigation ul > li:nth-last-child(2) > ul.sub-menu-level-2::before, .site-header.sticky .main-navigation ul > li:nth-last-child(2) > .children::before { left: -50px; right: 0; } @media screen and (max-width: 1440px) { .site-header.sticky .main-navigation ul > li:nth-last-child(1) > .sub-menu-level-2, .site-header.sticky .main-navigation ul > li:nth-last-child(1) > ul.sub-menu-level-2, .site-header.sticky .main-navigation ul > li:nth-last-child(1) > .children { left: auto; right: 0; max-width: calc(100vw - 40px); } .site-header.sticky .main-navigation ul > li:nth-last-child(1) > .sub-menu-level-2::before, .site-header.sticky .main-navigation ul > li:nth-last-child(1) > ul.sub-menu-level-2::before, .site-header.sticky .main-navigation ul > li:nth-last-child(1) > .children::before { left: -50px; right: 0; } .site-header.sticky .main-navigation ul > li:nth-last-child(2) > .sub-menu-level-2, .site-header.sticky .main-navigation ul > li:nth-last-child(2) > ul.sub-menu-level-2, .site-header.sticky .main-navigation ul > li:nth-last-child(2) > .children { left: auto; right: 0; max-width: calc(100vw - 40px); } .site-header.sticky .main-navigation ul > li:nth-last-child(2) > .sub-menu-level-2::before, .site-header.sticky .main-navigation ul > li:nth-last-child(2) > ul.sub-menu-level-2::before, .site-header.sticky .main-navigation ul > li:nth-last-child(2) > .children::before { left: -50px; right: 0; } .site-header.sticky .main-navigation ul > li:nth-last-child(3) > .sub-menu-level-2, .site-header.sticky .main-navigation ul > li:nth-last-child(3) > ul.sub-menu-level-2, .site-header.sticky .main-navigation ul > li:nth-last-child(3) > .children { left: auto; right: 0; max-width: calc(100vw - 40px); } .site-header.sticky .main-navigation ul > li:nth-last-child(3) > .sub-menu-level-2::before, .site-header.sticky .main-navigation ul > li:nth-last-child(3) > ul.sub-menu-level-2::before, .site-header.sticky .main-navigation ul > li:nth-last-child(3) > .children::before { left: -50px; right: 0; } } @media screen and (max-width: 1200px) { .site-header.sticky .main-navigation ul > li:nth-last-child(1) > .sub-menu-level-2, .site-header.sticky .main-navigation ul > li:nth-last-child(1) > ul.sub-menu-level-2, .site-header.sticky .main-navigation ul > li:nth-last-child(1) > .children { left: auto; right: 0; max-width: calc(100vw - 40px); } .site-header.sticky .main-navigation ul > li:nth-last-child(1) > .sub-menu-level-2::before, .site-header.sticky .main-navigation ul > li:nth-last-child(1) > ul.sub-menu-level-2::before, .site-header.sticky .main-navigation ul > li:nth-last-child(1) > .children::before { left: -50px; right: 0; } .site-header.sticky .main-navigation ul > li:nth-last-child(2) > .sub-menu-level-2, .site-header.sticky .main-navigation ul > li:nth-last-child(2) > ul.sub-menu-level-2, .site-header.sticky .main-navigation ul > li:nth-last-child(2) > .children { left: auto; right: 0; max-width: calc(100vw - 40px); } .site-header.sticky .main-navigation ul > li:nth-last-child(2) > .sub-menu-level-2::before, .site-header.sticky .main-navigation ul > li:nth-last-child(2) > ul.sub-menu-level-2::before, .site-header.sticky .main-navigation ul > li:nth-last-child(2) > .children::before { left: -50px; right: 0; } .site-header.sticky .main-navigation ul > li:nth-last-child(3) > .sub-menu-level-2, .site-header.sticky .main-navigation ul > li:nth-last-child(3) > ul.sub-menu-level-2, .site-header.sticky .main-navigation ul > li:nth-last-child(3) > .children { left: auto; right: 0; max-width: calc(100vw - 40px); } .site-header.sticky .main-navigation ul > li:nth-last-child(3) > .sub-menu-level-2::before, .site-header.sticky .main-navigation ul > li:nth-last-child(3) > ul.sub-menu-level-2::before, .site-header.sticky .main-navigation ul > li:nth-last-child(3) > .children::before { left: -50px; right: 0; } .site-header.sticky .main-navigation ul > li:nth-last-child(4) > .sub-menu-level-2, .site-header.sticky .main-navigation ul > li:nth-last-child(4) > ul.sub-menu-level-2, .site-header.sticky .main-navigation ul > li:nth-last-child(4) > .children { left: auto; right: 0; max-width: calc(100vw - 40px); } .site-header.sticky .main-navigation ul > li:nth-last-child(4) > .sub-menu-level-2::before, .site-header.sticky .main-navigation ul > li:nth-last-child(4) > ul.sub-menu-level-2::before, .site-header.sticky .main-navigation ul > li:nth-last-child(4) > .children::before { left: -50px; right: 0; } } .main-navigation .sub-menu li a { font-size: 16px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .main-navigation .sub-menu-level-3 li.menu-item > a::before, .main-navigation ul.sub-menu-level-3 li.menu-item > a::before { content: "•" !important; display: block !important; position: absolute !important; color: #312020 !important; font-size: 16px !important; line-height: 1 !important; opacity: 1 !important; visibility: visible !important; background: none !important; width: auto !important; height: auto !important; border-radius: 0 !important; -webkit-transform: translateY(-50%) !important; transform: translateY(-50%) !important; left: 22px !important; top: 26px !important; -webkit-transition: color 0.15s ease-in-out !important; transition: color 0.15s ease-in-out !important; } .main-navigation .sub-menu-level-3 li.menu-item > a:hover::before, .main-navigation ul.sub-menu-level-3 li.menu-item > a:hover::before { color: #00704a !important; } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /* ============================================ CURRENT MENU ITEM Active menu items styles - WordPress automatically adds these classes ============================================ */ .current_page_item > a, .current-menu-item > a { color: #00704a; } .current_page_item > a::before, .current-menu-item > a::before { width: 100%; } .current_page_parent > a, .current-menu-parent > a { color: #00704a; } .current_page_parent > a::before, .current-menu-parent > a::before { width: 100%; } .current_page_ancestor > a, .current-menu-ancestor > a { color: #00704a; } .current_page_ancestor > a::before, .current-menu-ancestor > a::before { width: 100%; } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /* ============================================ MOBILE SIDEBAR MENU ============================================ */ @media screen and (max-width: 600px) { .admin-bar .mobile-sidebar { top: -46px; height: 100vh; } } @media screen and (max-width: 782px) { .admin-bar .mobile-sidebar { top: -46px; height: calc(100vh - 46px); } } .mobile-sidebar { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 1060; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .mobile-sidebar .mobile-sidebar-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); } .mobile-sidebar .mobile-sidebar-content { position: absolute; top: 0; right: 0; width: 320px; max-width: 90vw; height: 100%; background-color: #ffffff; -webkit-box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04); box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04); -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mobile-sidebar .mobile-sidebar-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 16px; border-bottom: 1px solid #e5e7eb; -ms-flex-negative: 0; flex-shrink: 0; } .mobile-sidebar .mobile-sidebar-header .mobile-sidebar-logo { -ms-flex-negative: 0; flex-shrink: 0; } .mobile-sidebar .mobile-sidebar-header .mobile-sidebar-logo .custom-logo { width: auto; height: 32px; max-width: 120px; -o-object-fit: contain; object-fit: contain; } .mobile-sidebar .mobile-sidebar-header .mobile-sidebar-logo .mobile-sidebar-logo-img { width: auto; height: 32px; max-width: 120px; -o-object-fit: contain; object-fit: contain; } .mobile-sidebar .mobile-sidebar-header .mobile-sidebar-logo .mobile-sidebar-logo-text { font-size: 18px; font-weight: 700; color: #00704a; letter-spacing: 0.5px; } .mobile-sidebar .mobile-sidebar-header .mobile-sidebar-close { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 44px; height: 44px; padding: 5px; background: none; border: none; border-radius: 8px; color: #312020; cursor: pointer; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .mobile-sidebar .mobile-sidebar-header .mobile-sidebar-close:hover { background-color: rgba(0, 112, 74, 0.1); color: #00704a; } .mobile-sidebar .mobile-sidebar-header .mobile-sidebar-close svg { width: 24px; height: 24px; } .mobile-sidebar .mobile-sidebar-body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 16px; overflow-y: auto; } .mobile-sidebar .mobile-sidebar-nav { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu { list-style: none; margin: 0; padding: 0; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li { margin-bottom: 4px; /* Active/Current menu states - applied to li, style the a inside */ } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 12px 16px; color: #312020; text-decoration: none; border-radius: 8px; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; font-weight: 500; /* Modern arrow icon styling */ /* Rotate arrow when submenu opens */ } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li a:hover, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li a:focus { background-color: rgba(0, 112, 74, 0.1); color: #00704a; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li a:hover .menu-arrow, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li a:focus .menu-arrow { color: #00704a; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li a .menu-arrow { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 20px; height: 20px; margin-left: 8px; color: #666; -webkit-transition: color 0.2s ease, -webkit-transform 0.3s ease; transition: color 0.2s ease, -webkit-transform 0.3s ease; transition: transform 0.3s ease, color 0.2s ease; transition: transform 0.3s ease, color 0.2s ease, -webkit-transform 0.3s ease; -ms-flex-negative: 0; flex-shrink: 0; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li a .menu-arrow svg { width: 16px; height: 16px; stroke: currentColor; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li a.accordion-open .menu-arrow { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li a.submenu-active { background-color: rgba(0, 112, 74, 0.1); color: #00704a; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li a.submenu-active .menu-arrow { color: #00704a; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li.current-menu-item a, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li.current_page_item a { background-color: rgba(0, 112, 74, 0.12); color: #00704a; font-weight: 600; border-left: 3px solid #00704a; padding-left: calc(16px - 3px); } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li.current-menu-item a .menu-arrow, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li.current_page_item a .menu-arrow { color: #00704a; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li.current-menu-ancestor a, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li.current_page_ancestor a { color: #00704a; font-weight: 500; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li.current-menu-ancestor a .menu-arrow, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li.current_page_ancestor a .menu-arrow { color: #00704a; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-2, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-2 { display: none; margin-top: 4px; margin-left: 0; padding: 4px 0; position: static; width: 100%; -webkit-box-shadow: none; box-shadow: none; background-color: rgba(0, 112, 74, 0.04); border-radius: 6px; overflow: hidden; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-2.submenu-open, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-2.submenu-open { display: block; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-2 li, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-2 li { margin: 0; border: none; padding: 0; /* Active states for level 2 */ } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-2 li:last-child, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-2 li:last-child { border-bottom: none; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-2 li a, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-2 li a { padding: 10px 16px 10px 32px; font-size: 14px; font-weight: 400; color: #666; border-radius: 4px; margin: 2px 8px; background-color: transparent; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; /* Arrow icon for level 2 */ } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-2 li a:hover, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-2 li a:hover { color: #00704a; background-color: rgba(0, 112, 74, 0.08); padding-left: 36px; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-2 li a .menu-arrow, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-2 li a .menu-arrow { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 16px; height: 16px; margin-left: 4px; color: #999; -ms-flex-negative: 0; flex-shrink: 0; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-2 li a .menu-arrow svg, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-2 li a .menu-arrow svg { width: 14px; height: 14px; stroke: currentColor; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-2 li a::after, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-2 li a::after { display: none; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-2 li.current-menu-item a, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-2 li.current_page_item a, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-2 li.current-menu-item a, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-2 li.current_page_item a { color: #00704a; background-color: rgba(0, 112, 74, 0.12); font-weight: 600; border-left: 2px solid #00704a; padding-left: calc(32px - 2px); } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-2 li.current-menu-item a .menu-arrow, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-2 li.current_page_item a .menu-arrow, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-2 li.current-menu-item a .menu-arrow, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-2 li.current_page_item a .menu-arrow { color: #00704a; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-2 li.current-menu-ancestor a, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-2 li.current_page_ancestor a, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-2 li.current-menu-ancestor a, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-2 li.current_page_ancestor a { color: #00704a; font-weight: 500; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-2 li.current-menu-ancestor a .menu-arrow, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-2 li.current_page_ancestor a .menu-arrow, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-2 li.current-menu-ancestor a .menu-arrow, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-2 li.current_page_ancestor a .menu-arrow { color: #00704a; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-3, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-3 { display: none !important; margin-top: 2px; margin-left: 0; padding: 4px 0; position: static; width: 100%; -webkit-box-shadow: none; box-shadow: none; background-color: rgba(0, 112, 74, 0.02); border-radius: 4px; overflow: hidden; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-3.accordion-open, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-3.accordion-open { display: block !important; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-3 li, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-3 li { margin: 0; border: none; padding: 0; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-3 li:last-child, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-3 li:last-child { border-bottom: none; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-3 li a, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-3 li a { padding: 9px 16px 9px 40px; font-size: 13px; font-weight: 400; color: #555; border-radius: 3px; margin: 1px 8px; background-color: transparent; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-3 li a:hover, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-3 li a:hover { color: #00704a; background-color: rgba(0, 112, 74, 0.06); padding-left: 44px; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-3 li a .menu-arrow, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-3 li a .menu-arrow { display: none; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-3 li a::before, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-3 li a::before { content: "•" !important; display: block !important; position: absolute !important; left: 20px !important; top: 50% !important; -webkit-transform: translateY(-50%) !important; transform: translateY(-50%) !important; color: #00704a !important; font-size: 12px !important; line-height: 1 !important; width: auto !important; height: auto !important; background: none !important; border-radius: 0 !important; opacity: 1 !important; visibility: visible !important; -webkit-transition: color 0.15s ease-in-out !important; transition: color 0.15s ease-in-out !important; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-3 li a:hover::before, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-3 li a:hover::before { color: #00704a !important; } .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li .sub-menu-level-3 li a::after, .mobile-sidebar .mobile-sidebar-nav .mobile-nav-menu li ul.sub-menu-level-3 li a::after { display: none; } .mobile-sidebar .mobile-sidebar-register { margin-top: auto; padding-top: 24px; border-top: 1px solid #e5e7eb; } .mobile-sidebar .mobile-sidebar-register .mobile-sidebar-register-btn { display: block; width: 100%; padding: 16px 12px; background-color: #00704a; color: #ffffff; text-align: center; font-weight: 600; font-size: 16px; border-radius: 8px; cursor: pointer; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; text-decoration: none; border: none; } .mobile-sidebar .mobile-sidebar-register .mobile-sidebar-register-btn:hover { background-color: #00723f; -webkit-transform: translateY(-1px); transform: translateY(-1px); -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); } .mobile-sidebar.active { visibility: visible; opacity: 1; } .mobile-sidebar.active .mobile-sidebar-content { -webkit-transform: translateX(0); transform: translateX(0); } /* ============================================ POST NAVIGATION ============================================ */ .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { margin: 0 0 1.5em; } .comment-navigation .nav-links, .posts-navigation .nav-links, .post-navigation .nav-links { display: -webkit-box; display: -ms-flexbox; display: flex; } .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { -webkit-box-flex: 1; -ms-flex: 1 0 50%; flex: 1 0 50%; } .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { text-align: end; -webkit-box-flex: 1; -ms-flex: 1 0 50%; flex: 1 0 50%; } /* Breadcrumb --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .breadcrumb { padding: 50px 0; background-color: transparent; } @media screen and (max-width: 1440px) { .breadcrumb { padding: 40px 0; } } @media screen and (max-width: 1200px) { .breadcrumb { padding: 30px 0; } } @media screen and (max-width: 1024px) { .breadcrumb { padding: 20px 0; } } @media screen and (max-width: 768px) { .breadcrumb { padding: 15px 0; } } .breadcrumb .container { padding: 0 15px; } @media screen and (max-width: 1440px) { .breadcrumb .container { padding: 0 15px; } } .breadcrumb .breadcrumb-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0; } .breadcrumb .breadcrumb-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; font-size: 14px; line-height: 1.5; color: #000; font-weight: 400; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 1024px) { .breadcrumb .breadcrumb-item { font-size: 13px; } } @media screen and (max-width: 768px) { .breadcrumb .breadcrumb-item { font-size: 12px; } } .breadcrumb .breadcrumb-item a { color: #000; text-decoration: none; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; } .breadcrumb .breadcrumb-item a:hover, .breadcrumb .breadcrumb-item a:focus { color: #00704a; } .breadcrumb .breadcrumb-item span { color: #000; } .breadcrumb .breadcrumb-item.breadcrumb-item-last a { color: #555555; } .breadcrumb .breadcrumb-item.breadcrumb-item-last span { color: #555555; } .breadcrumb .breadcrumb-separator { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 8px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 9px; height: 8px; } .breadcrumb .breadcrumb-separator svg { width: 5px; height: 8px; display: block; } /* Posts and pages --------------------------------------------- */ .sticky { display: block; } .post, .page { margin: 0 0 1.5em; } .updated:not(.published) { display: none; } .page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; } .page-links { clear: both; margin: 0 0 1.5em; } .empty-content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 3rem 1.5rem; text-align: center; overflow: hidden; min-height: 300px; } .empty-content__icon { position: relative; z-index: 1; color: var(--primary-green, #00704a); margin-bottom: 1rem; opacity: 0.8; } .empty-content__message { position: relative; z-index: 1; margin: 0; font-size: 1rem; font-weight: 500; color: var(--primary-green, #00704a); line-height: 1.6; max-width: 400px; } .empty-content--simple { background-color: var(--primary-green, #f9fafb); border: 1px dashed var(--primary-green, #e5e7eb); } .empty-content--simple::before { display: none; } .empty-content--compact { padding: 2rem 1rem; min-height: 150px; } .empty-content--compact::before { width: 120px; height: 120px; top: -10px; } .empty-content--compact .empty-content__icon { width: 32px; height: 32px; } .empty-content--compact .empty-content__message { font-size: 0.875rem; } .empty-content--large { padding: 4rem 2rem; min-height: 300px; } .empty-content--large::before { width: 280px; height: 280px; top: -30px; } .empty-content--large .empty-content__icon { width: 64px; height: 64px; } .empty-content--large .empty-content__message { font-size: 1.125rem; } .empty-content.no-doctors, .empty-content.no-posts, .empty-content.no-results { margin: 1rem 0; } /* Sidebar */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .global-sidebar { height: 100%; border-right: 1px solid #dcdcdc; } @media screen and (max-width: 1199px) { .global-sidebar.sidebar-offcanvas { position: fixed; top: 0; left: -320px; width: 320px; height: 100dvh; background: #ffffff; z-index: 9999; overflow-y: auto; -webkit-transition: left 0.3s ease; transition: left 0.3s ease; -webkit-box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); padding: 46px 0 0; } .global-sidebar.sidebar-offcanvas.is-open { left: 0; visibility: visible; opacity: 1; } .global-sidebar.sidebar-offcanvas .global-sidebar__section:first-child { padding-top: 60px; } } .global-sidebar .global-sidebar__section { padding: 30px 30px 30px 0; border-top: 1px solid #dcdcdc; } .global-sidebar .global-sidebar__section:first-of-type { border-top: none; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__section { padding: 27px 27px 27px 0; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__section { padding: 24px 24px 24px 0; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__section { padding: 21px 21px 21px 0; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__section { padding: 18px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__section { padding: 15px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__section { padding: 12px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__section { padding: 15px; } } .global-sidebar .global-sidebar__section.global-sidebar__social-section { padding: 0 20px; border-top: none; border-bottom: none; margin-bottom: 32px; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__section.global-sidebar__social-section { padding: 0 18px; margin-bottom: 29px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__section.global-sidebar__social-section { padding: 0 16px; margin-bottom: 26px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__section.global-sidebar__social-section { padding: 0 14px; margin-bottom: 22px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__section.global-sidebar__social-section { padding: 0 0 0 18px; margin-bottom: 19px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__section.global-sidebar__social-section { padding: 0 0 0 15px; margin-bottom: 16px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__section.global-sidebar__social-section { padding: 0 0 0 12px; margin-bottom: 13px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__section.global-sidebar__social-section { padding: 0 0 0 15px; margin-bottom: 16px; } } .global-sidebar .global-sidebar__title { font-family: "Montserrat", sans-serif; font-size: 24px; font-weight: 500; color: #312020; margin: 0 0 24px; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__title { font-size: 21px; margin: 0 0 22px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__title { font-size: 19px; margin: 0 0 19px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__title { font-size: 17px; margin: 0 0 17px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__title { font-size: 14px; margin: 0 0 14px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__title { font-size: 14px; margin: 0 0 12px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__title { font-size: 14px; margin: 0 0 10px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__title { font-size: 14px; margin: 0 0 12px; } } .global-sidebar .global-sidebar__title.global-sidebar__social-title { font-size: 18px; margin-bottom: 25px; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__title.global-sidebar__social-title { font-size: 16px; margin-bottom: 22px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__title.global-sidebar__social-title { font-size: 14px; margin-bottom: 20px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__title.global-sidebar__social-title { font-size: 14px; margin-bottom: 17px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__title.global-sidebar__social-title { font-size: 14px; margin-bottom: 15px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__title.global-sidebar__social-title { font-size: 14px; margin-bottom: 12px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__title.global-sidebar__social-title { font-size: 14px; margin-bottom: 10px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__title.global-sidebar__social-title { font-size: 14px; margin-bottom: 12px; } } .global-sidebar .global-sidebar__nav { margin: 0; } .global-sidebar .global-sidebar__menu { list-style: none; margin: 0; padding: 4px 0; } .global-sidebar .global-sidebar__menu-item { margin: 0 0 20px; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__menu-item { margin-bottom: 18px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__menu-item { margin-bottom: 16px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__menu-item { margin-bottom: 14px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__menu-item { margin-bottom: 12px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__menu-item { margin-bottom: 10px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__menu-item { margin-bottom: 8px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__menu-item { margin-bottom: 10px; } } .global-sidebar .global-sidebar__menu-item:last-child { margin-bottom: 0; } .global-sidebar .global-sidebar__menu-item.is-active .global-sidebar__menu-link { color: #00704a; } .global-sidebar .global-sidebar__menu-link { display: block; font-size: 14px; color: #011f19; text-decoration: none; padding-left: 18px; position: relative; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__menu-link { font-size: 13px; padding-left: 16px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__menu-link { font-size: 13px; padding-left: 14px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__menu-link { font-size: 13px; padding-left: 12px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__menu-link { font-size: 13px; padding-left: 11px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__menu-link { font-size: 13px; padding-left: 9px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__menu-link { font-size: 13px; padding-left: 7px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__menu-link { font-size: max(13px, 3.2vw); padding-left: 9px; } } .global-sidebar .global-sidebar__menu-link::before { content: ""; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background-color: #011f19; -webkit-transition: background-color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: background-color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out; transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__menu-link::before { width: 4px; height: 4px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__menu-link::before { width: 3px; height: 3px; } } .global-sidebar .global-sidebar__menu-link:hover { color: #00704a; } .global-sidebar .global-sidebar__menu-link:hover::before { background-color: #00704a; -webkit-transform: translateY(-50%) scale(1.1); transform: translateY(-50%) scale(1.1); } .global-sidebar .global-sidebar__menu-item.is-active .global-sidebar__menu-link::before { background-color: #00704a; -webkit-transform: translateY(-50%) scale(1.1); transform: translateY(-50%) scale(1.1); } .global-sidebar .global-sidebar__related-list { list-style: none; margin: 0; padding: 0; } .global-sidebar .global-sidebar__related-list li { -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .global-sidebar .global-sidebar__related-list li:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); } .global-sidebar .global-sidebar__related-item { margin: 0 0 20px; position: relative; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__related-item { margin-bottom: 18px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__related-item { margin-bottom: 16px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__related-item { margin-bottom: 14px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__related-item { margin-bottom: 12px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__related-item { margin-bottom: 10px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__related-item { margin-bottom: 8px; padding-left: 10px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__related-item { margin-bottom: 10px; padding-left: 12px; } } .global-sidebar .global-sidebar__related-item:last-child { margin-bottom: 0; } .global-sidebar .global-sidebar__related-link { display: block; font-size: 18px; color: #535353; text-decoration: none; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; line-height: 150%; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__related-link { font-size: 16px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__related-link { font-size: 14px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__related-link { font-size: 14px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__related-link { font-size: 14px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__related-link { font-size: 14px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__related-link { font-size: 14px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__related-link { font-size: 14px; } } .global-sidebar .global-sidebar__related-link:hover { color: #00704a; } .global-sidebar .global-sidebar__related-link:hover::before { background-color: #00704a; -webkit-transform: translateY(-50%) scale(1.1); transform: translateY(-50%) scale(1.1); } .global-sidebar .global-sidebar__related-item:hover .global-sidebar__related-link::before { background-color: #00704a; -webkit-transform: translateY(-50%) scale(1.1); transform: translateY(-50%) scale(1.1); } .global-sidebar .global-sidebar__tags { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 5px; row-gap: 6px; margin: 0; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__tags { gap: 4px; row-gap: 5px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__tags { gap: 4px; row-gap: 5px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__tags { gap: 3px; row-gap: 4px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__tags { gap: 3px; row-gap: 3px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__tags { gap: 2px; row-gap: 3px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__tags { gap: 2px; row-gap: 2px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__tags { gap: 2px; row-gap: 3px; } } .global-sidebar .global-sidebar__tag { display: inline-block; padding: 8px 12px; font-size: 12px; font-family: "Montserrat", sans-serif; font-weight: 400; color: #fff; border-radius: 55px; white-space: nowrap; text-transform: uppercase; text-decoration: none; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; cursor: pointer; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__tag { padding: 7px 11px; font-size: 12px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__tag { padding: 6px 10px; font-size: 12px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__tag { padding: 6px 8px; font-size: 12px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__tag { padding: 5px 7px; font-size: 12px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__tag { padding: 4px 6px; font-size: 12px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__tag { padding: 3px 5px; font-size: 12px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__tag { padding: 4px 6px; font-size: max(12px, 3vw); } } .global-sidebar .global-sidebar__tag:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .global-sidebar .global-sidebar__tag:first-child { background-color: #00704a; color: #ffffff; } .global-sidebar .global-sidebar__banner { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 40px 0px 16px 0; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__banner { padding: 36px 0px 14px 0; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__banner { padding: 32px 0px 13px 0; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__banner { padding: 28px 0px 11px 0; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__banner { padding: 24px 0px 10px 0; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__banner { padding: 20px 0px 8px 0; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__banner { padding: 16px 0px 6px 0; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__banner { padding: 20px 0px 8px 0; } } .global-sidebar .global-sidebar__banner-title { font-size: 23px; line-height: 28px; margin: 0 0 16px; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__banner-title { font-size: 20px; line-height: 25px; margin: 0 0 14px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__banner-title { font-size: 18px; line-height: 22px; margin: 0 0 13px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__banner-title { font-size: 16px; line-height: 19px; margin: 0 0 11px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__banner-title { font-size: 14px; line-height: 16px; margin: 0 0 10px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__banner-title { font-size: 14px; line-height: 14px; margin: 0 0 8px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__banner-title { font-size: 14px; line-height: 12px; margin: 0 0 6px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__banner-title { font-size: 14px; line-height: 14px; margin: 0 0 8px; } } .global-sidebar .global-sidebar__banner-content { position: relative; width: 100%; min-height: 431px; padding: 40px 30px; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; overflow: hidden; isolation: isolate; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__banner-content { min-height: 388px; padding: 36px 27px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__banner-content { min-height: 345px; padding: 32px 24px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__banner-content { min-height: 302px; padding: 28px 21px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__banner-content { min-height: 259px; padding: 24px 18px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__banner-content { min-height: 216px; padding: 20px 15px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__banner-content { min-height: 172px; padding: 16px 12px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__banner-content { min-height: 216px; padding: 20px 15px; } } .global-sidebar .global-sidebar__banner-content-inner { position: relative; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: end; gap: 16px; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__banner-content-inner { gap: 14px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__banner-content-inner { gap: 13px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__banner-content-inner { gap: 11px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__banner-content-inner { gap: 10px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__banner-content-inner { gap: 8px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__banner-content-inner { gap: 6px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__banner-content-inner { gap: 8px; } } .global-sidebar .global-sidebar__banner-content-image { position: absolute; inset: 0; z-index: 0; } .global-sidebar .global-sidebar__banner-content-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-transition: -webkit-transform 0.4s ease; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; display: block; } .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-heading { width: 204px; font-size: 24px; line-height: 28px; padding: 0 0 20px; font-family: "Montserrat", sans-serif; border-bottom: 1px solid rgba(255, 255, 255, 0.4); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-heading { width: 184px; font-size: 21px; line-height: 25px; padding: 0 0 18px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-heading { width: 163px; font-size: 19px; line-height: 22px; padding: 0 0 16px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-heading { width: 143px; font-size: 17px; line-height: 20px; padding: 0 0 14px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-heading { width: 122px; font-size: 14px; line-height: 17px; padding: 0 0 12px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-heading { width: 102px; font-size: 14px; line-height: 14px; padding: 0 0 10px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-heading { width: 81px; font-size: 14px; line-height: 14px; padding: 0 0 8px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-heading { width: 102px; font-size: 14px; line-height: 14px; padding: 0 0 10px; } } .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-button { -ms-flex-item-align: end; align-self: flex-end; text-transform: uppercase; font-size: 14px; line-height: 16px; font-family: "Montserrat", sans-serif; color: #fff; border: none; background-color: transparent !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; padding: 0; cursor: pointer; -webkit-transition: color 0.2s ease, -webkit-transform 0.2s ease; transition: color 0.2s ease, -webkit-transform 0.2s ease; transition: color 0.2s ease, transform 0.2s ease; transition: color 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-button { font-size: 12px; line-height: 14px; gap: 7px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-button { font-size: 12px; line-height: 14px; gap: 6px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-button { font-size: 12px; line-height: 14px; gap: 6px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-button { font-size: 12px; line-height: 14px; gap: 5px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-button { font-size: 12px; line-height: 14px; gap: 4px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-button { font-size: 12px; line-height: 14px; gap: 3px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-button { font-size: max(12px, 3vw); line-height: 14px; gap: 4px; } } .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-button svg { width: 14px; height: 14px; padding-top: 3px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-button svg { width: 12px; height: 12px; padding-top: 2px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-button svg { width: 11px; height: 11px; padding-top: 2px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-button svg { width: 10px; height: 10px; padding-top: 2px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-button svg { width: 8px; height: 8px; padding-top: 1px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-button svg { width: 7px; height: 7px; padding-top: 1px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-button svg { width: 6px; height: 6px; padding-top: 1px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-button svg { width: 7px; height: 7px; padding-top: 1px; } } .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-button:hover { text-decoration: underline; } .global-sidebar .global-sidebar__banner-content .global-sidebar__banner-button:hover svg { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .global-sidebar .global-sidebar__banner-content:hover .global-sidebar__banner-content-image img { -webkit-transform: scale(1.2); transform: scale(1.2); } .global-sidebar .global-sidebar__cta { position: relative; border-radius: 0px; overflow: hidden; padding: 40px 30px; min-height: 431px; color: #fff; font-size: 24px; font-family: "Montserrat", sans-serif; font-weight: 400; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__cta { padding: 36px 27px; min-height: 388px; font-size: 21px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__cta { padding: 32px 24px; font-size: 19px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__cta { padding: 28px 21px; font-size: 17px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__cta { padding: 24px 18px; font-size: 14px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__cta { padding: 20px 15px; font-size: 14px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__cta { padding: 16px 12px; font-size: 14px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__cta { padding: 20px 15px; font-size: 14px; } } .global-sidebar .global-sidebar__cta:hover .global-sidebar__cta-image img { -webkit-transform: scale(1.2); transform: scale(1.2); } .global-sidebar .global-sidebar__cta-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .global-sidebar .global-sidebar__cta-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .global-sidebar .global-sidebar__cta-content { position: relative; z-index: 1; padding-left: 18.5px; } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__cta-content { padding-left: 0; } } .global-sidebar .global-sidebar__cta-label { font-size: 23px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-weight: 400; padding: 0 0 16px; margin: 0; line-height: 28px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__cta-label { font-size: 21px; padding: 0 0 14px; } .global-sidebar .global-sidebar__cta-label::after { margin-top: 14px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__cta-label { font-size: 18px; padding: 0 0 13px; } .global-sidebar .global-sidebar__cta-label::after { margin-top: 13px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__cta-label { font-size: 16px; padding: 0 0 11px; } .global-sidebar .global-sidebar__cta-label::after { margin-top: 11px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__cta-label { font-size: 14px; padding: 0 0 10px; } .global-sidebar .global-sidebar__cta-label::after { margin-top: 10px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__cta-label { font-size: 14px; width: 100%; padding: 0 0 8px; } .global-sidebar .global-sidebar__cta-label::after { margin-top: 8px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__cta-label { font-size: 14px; padding: 0 0 6px; } .global-sidebar .global-sidebar__cta-label::after { margin-top: 6px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__cta-label { font-size: 14px; width: 100%; padding: 0 0 8px; } .global-sidebar .global-sidebar__cta-label::after { margin-top: 8px; } } .global-sidebar .global-sidebar__cta-title { font-size: 24px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-weight: 400; color: #ffffff; padding: 0 0 20px; margin: 0; -webkit-transition: color 0.4s ease; transition: color 0.4s ease; } .global-sidebar .global-sidebar__cta-title::after { content: ""; display: block; width: 100%; height: 1px; background-color: #fff; margin-top: 20px; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__cta-title { font-size: 21px; padding: 0 0 18px; } .global-sidebar .global-sidebar__cta-title::after { margin-top: 18px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__cta-title { font-size: 19px; padding: 0 0 16px; } .global-sidebar .global-sidebar__cta-title::after { margin-top: 16px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__cta-title { font-size: 17px; padding: 0 0 14px; } .global-sidebar .global-sidebar__cta-title::after { margin-top: 14px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__cta-title { font-size: 14px; padding: 0 0 12px; } .global-sidebar .global-sidebar__cta-title::after { margin-top: 12px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__cta-title { font-size: 14px; width: 100%; padding: 0 0 10px; } .global-sidebar .global-sidebar__cta-title::after { margin-top: 10px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__cta-title { font-size: 14px; padding: 0 0 8px; } .global-sidebar .global-sidebar__cta-title::after { margin-top: 8px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__cta-title { font-size: 14px; width: 100%; padding: 0 0 10px; } .global-sidebar .global-sidebar__cta-title::after { margin-top: 10px; } } .global-sidebar .global-sidebar__cta-button { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; color: #fff !important; gap: 8px; font-size: 14px; text-decoration: none; text-transform: uppercase; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__cta-button { font-size: 13px; gap: 7px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__cta-button { font-size: 13px; gap: 6px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__cta-button { font-size: 13px; gap: 6px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__cta-button { font-size: 13px; gap: 5px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__cta-button { font-size: 13px; gap: 4px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__cta-button { font-size: 13px; gap: 3px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__cta-button { font-size: max(13px, 3.2vw); gap: 4px; } } .global-sidebar .global-sidebar__cta-button svg, .global-sidebar .global-sidebar__cta-button img { width: 12px; height: 12px; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__cta-button svg, .global-sidebar .global-sidebar__cta-button img { width: 11px; height: 11px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__cta-button svg, .global-sidebar .global-sidebar__cta-button img { width: 10px; height: 10px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__cta-button svg, .global-sidebar .global-sidebar__cta-button img { width: 8px; height: 8px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__cta-button svg, .global-sidebar .global-sidebar__cta-button img { width: 7px; height: 7px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__cta-button svg, .global-sidebar .global-sidebar__cta-button img { width: 6px; height: 6px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__cta-button svg, .global-sidebar .global-sidebar__cta-button img { width: 5px; height: 5px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__cta-button svg, .global-sidebar .global-sidebar__cta-button img { width: 6px; height: 6px; } } .global-sidebar .global-sidebar__cta-button:hover { text-decoration: underline; } .global-sidebar .global-sidebar__cta-button:hover img, .global-sidebar .global-sidebar__cta-button:hover svg { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .global-sidebar .global-sidebar__social { margin-top: 16px; padding: 0px 20px; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__social { margin-top: 14px; padding: 0px 18px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__social { margin-top: 13px; padding: 0px 16px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__social { margin-top: 11px; padding: 0px 14px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__social { margin-top: 10px; padding: 0px 12px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__social { margin-top: 8px; padding: 0px 10px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__social { margin-top: 6px; padding: 0px 8px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__social { margin-top: 8px; padding: 0px 10px; } } .global-sidebar .global-sidebar__social-list { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; row-gap: 4px; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__social-list { gap: 11px; row-gap: 3px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__social-list { gap: 10px; row-gap: 3px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__social-list { gap: 8px; row-gap: 3px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__social-list { gap: 7px; row-gap: 2px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__social-list { gap: 6px; row-gap: 2px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__social-list { gap: 5px; row-gap: 2px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__social-list { gap: 6px; row-gap: 2px; } } .global-sidebar .global-sidebar__social-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 34px; height: 34px; min-width: 34px; border-radius: 50%; border: 1px solid #ebebeb; position: relative; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; overflow: hidden; } @media screen and (max-width: 1770px) { .global-sidebar .global-sidebar__social-link { width: 31px; height: 31px; min-width: 31px; } } @media screen and (max-width: 1440px) { .global-sidebar .global-sidebar__social-link { width: 27px; height: 27px; min-width: 27px; } } @media screen and (max-width: 1200px) { .global-sidebar .global-sidebar__social-link { width: 24px; height: 24px; min-width: 24px; } } @media screen and (max-width: 992px) { .global-sidebar .global-sidebar__social-link { width: 20px; height: 20px; min-width: 20px; } } @media screen and (max-width: 768px) { .global-sidebar .global-sidebar__social-link { width: 17px; height: 17px; min-width: 17px; } } @media screen and (max-width: 640px) { .global-sidebar .global-sidebar__social-link { width: 14px; height: 14px; min-width: 14px; } } @media screen and (max-width: 480px) { .global-sidebar .global-sidebar__social-link { width: 17px; height: 17px; min-width: 17px; } } .global-sidebar .global-sidebar__social-link:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); border-color: #00704a; } .global-sidebar .global-sidebar__social-link:hover .icon-default svg path { fill: #00704a; } .global-sidebar .global-sidebar__social-link .icon-default { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .global-sidebar__section:has(.global-sidebar__cta-label), .post-archive__sidebar-body .global-sidebar__section:has(.global-sidebar__cta-label), .post-archive__sidebar-content .global-sidebar__section:has(.global-sidebar__cta-label), .single-post .post-archive__sidebar-body .global-sidebar__section:has(.global-sidebar__cta-label) { position: sticky; top: 100px; z-index: 10; background-color: #fff; } .sidebar-toggle { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; padding: 12px 16px 12px 0; background: #fff; color: #312020; border: none; border-radius: 4px; font-size: 14px; font-weight: 500; cursor: pointer; margin: 16px 0 4px; -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } .sidebar-toggle svg { width: 20px; height: 20px; } @media screen and (max-width: 1770px) { .sidebar-toggle svg { width: 18px; height: 18px; } } .sidebar-toggle:hover { color: #00704a; } @media screen and (max-width: 1200px) { .sidebar-toggle { display: -webkit-box; display: -ms-flexbox; display: flex; } } .sidebar-close { display: none; position: absolute; top: 16px; right: 16px; background: transparent; border: none; cursor: pointer; padding: 8px; color: #312020; z-index: 10000; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } .sidebar-close svg { width: 24px; height: 24px; } @media screen and (max-width: 1770px) { .sidebar-close svg { width: 21px; height: 21px; } } @media screen and (max-width: 1440px) { .sidebar-close svg { width: 19px; height: 19px; } } @media screen and (max-width: 1200px) { .sidebar-close svg { width: 17px; height: 17px; } } @media screen and (max-width: 992px) { .sidebar-close svg { width: 14px; height: 14px; } } @media screen and (max-width: 768px) { .sidebar-close svg { width: 12px; height: 12px; } } @media screen and (max-width: 640px) { .sidebar-close svg { width: 10px; height: 10px; } } @media screen and (max-width: 480px) { .sidebar-close svg { width: 12px; height: 12px; } } .sidebar-close:hover { color: #00704a; } @media screen and (max-width: 1200px) { .sidebar-close { display: block; } } .sidebar-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 9998; opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; pointer-events: none; } .sidebar-backdrop.is-visible { opacity: 1; pointer-events: auto; } @media screen and (max-width: 1200px) { .sidebar-backdrop { display: block; } .sidebar-backdrop .icon-hover { display: none; position: absolute; inset: 0; } .sidebar-backdrop svg { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } } .cta-banner-section { padding-top: 40px; } @media screen and (max-width: 1770px) { .cta-banner-section { padding-top: 36px; } } @media screen and (max-width: 1440px) { .cta-banner-section { padding-top: 32px; } } @media screen and (max-width: 1200px) { .cta-banner-section { padding-top: 28px; } } @media screen and (max-width: 992px) { .cta-banner-section { padding-top: 24px; } } @media screen and (max-width: 768px) { .cta-banner-section { padding-top: 20px; } } @media screen and (max-width: 640px) { .cta-banner-section { padding-top: 16px; } } @media screen and (max-width: 480px) { .cta-banner-section { padding-top: 20px; } } .cta-banner-section__cta { position: relative; border-radius: 0px; overflow: hidden; padding: 40px 30px; min-height: 431px; color: #fff; font-size: 24px; font-family: "Montserrat", sans-serif; font-weight: 400; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media screen and (max-width: 1770px) { .cta-banner-section__cta { padding: 36px 27px; min-height: 388px; font-size: 21px; } } @media screen and (max-width: 1440px) { .cta-banner-section__cta { padding: 32px 24px; min-height: 345px; font-size: 19px; } } @media screen and (max-width: 1200px) { .cta-banner-section__cta { padding: 28px 21px; min-height: 302px; font-size: 17px; } } @media screen and (max-width: 992px) { .cta-banner-section__cta { padding: 24px 18px; min-height: 259px; font-size: 14px; } } @media screen and (max-width: 768px) { .cta-banner-section__cta { padding: 20px 15px; min-height: 216px; font-size: 14px; } } @media screen and (max-width: 640px) { .cta-banner-section__cta { padding: 16px 12px; min-height: 172px; font-size: 14px; } } @media screen and (max-width: 480px) { .cta-banner-section__cta { padding: 20px 15px; min-height: 216px; font-size: 14px; } } .cta-banner-section__cta:hover .cta-banner-section__cta-image img { -webkit-transform: scale(1.2); transform: scale(1.2); } .cta-banner-section__cta-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .cta-banner-section__cta-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .cta-banner-section__cta-content { position: relative; z-index: 1; padding-left: 18.5px; } @media screen and (max-width: 768px) { .cta-banner-section__cta-content { padding-left: 0; } } .cta-banner-section__title { font-size: 23px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-weight: 400; padding: 0 0 16px; margin: 0; line-height: 28px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; font-family: "Montserrat", sans-serif; color: #011f19; } @media screen and (max-width: 1770px) { .cta-banner-section__title { font-size: 21px; padding: 0 0 14px; } } @media screen and (max-width: 1440px) { .cta-banner-section__title { font-size: 18px; padding: 0 0 13px; } } @media screen and (max-width: 1200px) { .cta-banner-section__title { font-size: 16px; padding: 0 0 11px; } } @media screen and (max-width: 992px) { .cta-banner-section__title { font-size: 14px; padding: 0 0 10px; } } @media screen and (max-width: 768px) { .cta-banner-section__title { font-size: 14px; width: 100%; padding: 0 0 8px; } } @media screen and (max-width: 640px) { .cta-banner-section__title { font-size: 14px; padding: 0 0 6px; } } @media screen and (max-width: 480px) { .cta-banner-section__title { font-size: 14px; width: 100%; padding: 0 0 8px; } } .cta-banner-section__cta-title { font-size: 24px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-weight: 400; color: #ffffff; padding: 0 0 20px; margin: 0; -webkit-transition: color 0.4s ease; transition: color 0.4s ease; } .cta-banner-section__cta-title::after { content: ""; display: block; width: 100%; height: 1px; background-color: #fff; margin-top: 20px; } @media screen and (max-width: 1770px) { .cta-banner-section__cta-title { font-size: 21px; padding: 0 0 18px; } .cta-banner-section__cta-title::after { margin-top: 18px; } } @media screen and (max-width: 1440px) { .cta-banner-section__cta-title { font-size: 19px; padding: 0 0 16px; } .cta-banner-section__cta-title::after { margin-top: 16px; } } @media screen and (max-width: 1200px) { .cta-banner-section__cta-title { font-size: 17px; padding: 0 0 14px; } .cta-banner-section__cta-title::after { margin-top: 14px; } } @media screen and (max-width: 992px) { .cta-banner-section__cta-title { font-size: 14px; padding: 0 0 12px; } .cta-banner-section__cta-title::after { margin-top: 12px; } } @media screen and (max-width: 768px) { .cta-banner-section__cta-title { font-size: 14px; width: 100%; padding: 0 0 10px; } .cta-banner-section__cta-title::after { margin-top: 10px; } } @media screen and (max-width: 640px) { .cta-banner-section__cta-title { font-size: 14px; padding: 0 0 8px; } .cta-banner-section__cta-title::after { margin-top: 8px; } } @media screen and (max-width: 480px) { .cta-banner-section__cta-title { font-size: 14px; width: 100%; padding: 0 0 10px; } .cta-banner-section__cta-title::after { margin-top: 10px; } } .cta-banner-section__cta-button { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; color: #fff !important; gap: 8px; font-size: 14px; text-decoration: none; text-transform: uppercase; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } @media screen and (max-width: 1770px) { .cta-banner-section__cta-button { font-size: 13px; gap: 7px; } } @media screen and (max-width: 1440px) { .cta-banner-section__cta-button { font-size: 11px; gap: 6px; } } @media screen and (max-width: 1200px) { .cta-banner-section__cta-button { font-size: 10px; gap: 6px; } } @media screen and (max-width: 992px) { .cta-banner-section__cta-button { font-size: 10px; gap: 5px; } } @media screen and (max-width: 768px) { .cta-banner-section__cta-button { font-size: 10px; gap: 4px; } } @media screen and (max-width: 640px) { .cta-banner-section__cta-button { font-size: 10px; gap: 3px; } } @media screen and (max-width: 480px) { .cta-banner-section__cta-button { font-size: 10px; gap: 4px; } } .cta-banner-section__cta-button svg, .cta-banner-section__cta-button img { width: 12px; height: 12px; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } @media screen and (max-width: 1770px) { .cta-banner-section__cta-button svg, .cta-banner-section__cta-button img { width: 11px; height: 11px; } } @media screen and (max-width: 1440px) { .cta-banner-section__cta-button svg, .cta-banner-section__cta-button img { width: 10px; height: 10px; } } @media screen and (max-width: 1200px) { .cta-banner-section__cta-button svg, .cta-banner-section__cta-button img { width: 8px; height: 8px; } } @media screen and (max-width: 992px) { .cta-banner-section__cta-button svg, .cta-banner-section__cta-button img { width: 7px; height: 7px; } } @media screen and (max-width: 768px) { .cta-banner-section__cta-button svg, .cta-banner-section__cta-button img { width: 6px; height: 6px; } } @media screen and (max-width: 640px) { .cta-banner-section__cta-button svg, .cta-banner-section__cta-button img { width: 5px; height: 5px; } } @media screen and (max-width: 480px) { .cta-banner-section__cta-button svg, .cta-banner-section__cta-button img { width: 6px; height: 6px; } } .cta-banner-section__cta-button:hover { text-decoration: underline; } .cta-banner-section__cta-button:hover img, .cta-banner-section__cta-button:hover svg { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .cta-banner-section__social { margin-top: 16px; padding: 0px 20px; } @media screen and (max-width: 1770px) { .cta-banner-section__social { margin-top: 14px; padding: 0px 18px; } } @media screen and (max-width: 1440px) { .cta-banner-section__social { margin-top: 13px; padding: 0px 16px; } } @media screen and (max-width: 1200px) { .cta-banner-section__social { margin-top: 11px; padding: 0px 14px; } } @media screen and (max-width: 992px) { .cta-banner-section__social { margin-top: 10px; padding: 0px 12px; } } @media screen and (max-width: 768px) { .cta-banner-section__social { margin-top: 8px; padding: 0px 10px; } } @media screen and (max-width: 640px) { .cta-banner-section__social { margin-top: 6px; padding: 0px 8px; } } @media screen and (max-width: 480px) { .cta-banner-section__social { margin-top: 8px; padding: 0px 10px; } } .cta-banner-section__social-title { font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 500; color: #312020; margin: 0 0 25px; } @media screen and (max-width: 1770px) { .cta-banner-section__social-title { font-size: 16px; margin-bottom: 22px; } } @media screen and (max-width: 1440px) { .cta-banner-section__social-title { font-size: 14px; margin-bottom: 20px; } } @media screen and (max-width: 1200px) { .cta-banner-section__social-title { font-size: 13px; margin-bottom: 17px; } } @media screen and (max-width: 992px) { .cta-banner-section__social-title { font-size: 14px; margin-bottom: 15px; } } @media screen and (max-width: 768px) { .cta-banner-section__social-title { font-size: 14px; margin-bottom: 12px; } } @media screen and (max-width: 640px) { .cta-banner-section__social-title { font-size: 14px; margin-bottom: 10px; } } @media screen and (max-width: 480px) { .cta-banner-section__social-title { font-size: 14px; margin-bottom: 12px; } } .cta-banner-section__social-list { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; row-gap: 4px; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (max-width: 1770px) { .cta-banner-section__social-list { gap: 11px; row-gap: 3px; } } @media screen and (max-width: 1440px) { .cta-banner-section__social-list { gap: 10px; row-gap: 3px; } } @media screen and (max-width: 1200px) { .cta-banner-section__social-list { gap: 8px; row-gap: 3px; } } @media screen and (max-width: 992px) { .cta-banner-section__social-list { gap: 7px; row-gap: 2px; } } @media screen and (max-width: 768px) { .cta-banner-section__social-list { gap: 6px; row-gap: 2px; } } @media screen and (max-width: 640px) { .cta-banner-section__social-list { gap: 5px; row-gap: 2px; } } @media screen and (max-width: 480px) { .cta-banner-section__social-list { gap: 6px; row-gap: 2px; } } /* Comments --------------------------------------------- */ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } /* Widgets --------------------------------------------- */ .widget { margin: 0 0 1.5em; } .widget select { max-width: 100%; } /* Media --------------------------------------------- */ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure logo link wraps around logo image. */ .custom-logo-link { display: inline-block; } /* Captions --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*=wp-image-] { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } .wp-caption-text { text-align: center; } /* Galleries --------------------------------------------- */ .gallery { margin-bottom: 1.5em; display: grid; grid-gap: 1.5em; } .gallery-item { display: inline-block; text-align: center; width: 100%; } .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); } .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); } .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); } .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); } .gallery-columns-6 { grid-template-columns: repeat(6, 1fr); } .gallery-columns-7 { grid-template-columns: repeat(7, 1fr); } .gallery-columns-8 { grid-template-columns: repeat(8, 1fr); } .gallery-columns-9 { grid-template-columns: repeat(9, 1fr); } .gallery-caption { display: block; } /* Modals --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /* =========================================== CONTACT FORM MODAL STYLES =========================================== */ .contact-form-modal .form-group { margin-bottom: 16px; } .contact-form-modal .form-group:last-child { margin-bottom: 0; } .contact-form-modal .form-group label { display: block; margin-bottom: 6px; font-weight: 500; color: #312020; font-family: "Be Vietnam Pro", sans-serif; } .contact-form-modal .form-group input, .contact-form-modal .form-group textarea, .contact-form-modal .form-group select { width: 100%; padding: 10px 14px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 16px; -webkit-transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease; transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease; transition: border-color 0.2s ease, box-shadow 0.2s ease; transition: border-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease; outline: none; } .contact-form-modal .form-group input::-webkit-input-placeholder, .contact-form-modal .form-group textarea::-webkit-input-placeholder, .contact-form-modal .form-group select::-webkit-input-placeholder { color: #312020; } .contact-form-modal .form-group input::-moz-placeholder, .contact-form-modal .form-group textarea::-moz-placeholder, .contact-form-modal .form-group select::-moz-placeholder { color: #312020; } .contact-form-modal .form-group input:-ms-input-placeholder, .contact-form-modal .form-group textarea:-ms-input-placeholder, .contact-form-modal .form-group select:-ms-input-placeholder { color: #312020; } .contact-form-modal .form-group input::-ms-input-placeholder, .contact-form-modal .form-group textarea::-ms-input-placeholder, .contact-form-modal .form-group select::-ms-input-placeholder { color: #312020; } .contact-form-modal .form-group input::placeholder, .contact-form-modal .form-group textarea::placeholder, .contact-form-modal .form-group select::placeholder { color: #312020; } .contact-form-modal .form-group input:focus, .contact-form-modal .form-group textarea:focus, .contact-form-modal .form-group select:focus { border-color: #00704a; outline: none; -webkit-box-shadow: 0 0 0 2px rgba(0, 112, 74, 0.1); box-shadow: 0 0 0 2px rgba(0, 112, 74, 0.1); } .contact-form-modal .form-group input:focus-visible, .contact-form-modal .form-group textarea:focus-visible, .contact-form-modal .form-group select:focus-visible { border-color: #00704a; outline: none; -webkit-box-shadow: 0 0 0 2px rgba(0, 112, 74, 0.1); box-shadow: 0 0 0 2px rgba(0, 112, 74, 0.1); } .contact-form-modal .form-group textarea { resize: vertical; min-height: 92px; } .contact-form-modal .checkbox-group .checkbox-label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 8px; cursor: pointer; font-weight: normal; } .contact-form-modal .checkbox-group .checkbox-label input[type=checkbox] { position: absolute; opacity: 0; cursor: pointer; } .contact-form-modal .checkbox-group .checkbox-label .checkmark { width: 18px; height: 18px; border: 2px solid #312020; border-radius: 3px; position: relative; -ms-flex-negative: 0; flex-shrink: 0; margin-top: 2px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .contact-form-modal .checkbox-group .checkbox-label input:checked ~ .checkmark { background-color: #00704a; border-color: #00704a; } .contact-form-modal .checkbox-group .checkbox-label input:checked ~ .checkmark::after { content: "✓"; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: white; font-size: 12px; font-weight: bold; } .contact-form-modal .checkbox-group .checkbox-label:hover .checkmark { border-color: #00704a; } .contact-form-modal .form-message { padding: 10px 14px; border-radius: 8px; margin-top: 16px; } .contact-form-modal .form-message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .contact-form-modal .form-message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .contact-form-modal .required { color: red; } .contact-form-modal .onelab-modal-footer .onelab-modal-btn[type=submit] { background-color: #00704a; color: #ffffff; border-color: #00704a; min-width: 120px; } .contact-form-modal .onelab-modal-footer .onelab-modal-btn[type=submit]:hover:not(:disabled) { background-color: #00704a; border-color: #00704a; } @media (max-width: 768px) { .contact-form-modal .form-group { margin-bottom: 14px; } .contact-form-modal .form-group label { font-size: 15px; margin-bottom: 5px; } .contact-form-modal .form-group input, .contact-form-modal .form-group textarea, .contact-form-modal .form-group select { padding: 9px 12px; font-size: 16px; } .contact-form-modal .form-group textarea { min-height: 85px; } .contact-form-modal .checkbox-group .checkbox-label { font-size: 14px; } .contact-form-modal .checkbox-group .checkbox-label .checkmark { width: 16px; height: 16px; margin-top: 2px; } .contact-form-modal .form-message { padding: 9px 12px; font-size: 14px; margin-top: 14px; } } @media (max-width: 480px) { .contact-form-modal .form-group { margin-bottom: 12px; } .contact-form-modal .form-group label { font-size: 14px; margin-bottom: 4px; } .contact-form-modal .form-group input, .contact-form-modal .form-group textarea, .contact-form-modal .form-group select { padding: 8px 10px; font-size: 16px; border-radius: 6px; } .contact-form-modal .form-group textarea { min-height: 80px; } .contact-form-modal .checkbox-group .checkbox-label { font-size: 13px; gap: 6px; } .contact-form-modal .checkbox-group .checkbox-label .checkmark { width: 15px; height: 15px; } .contact-form-modal .form-message { padding: 8px 10px; font-size: 13px; margin-top: 12px; border-radius: 6px; } } @media (max-width: 375px) { .contact-form-modal .form-group { margin-bottom: 10px; } .contact-form-modal .form-group label { font-size: 13px; } .contact-form-modal .form-group input, .contact-form-modal .form-group textarea, .contact-form-modal .form-group select { padding: 7px 9px; font-size: 16px; } .contact-form-modal .checkbox-group .checkbox-label { font-size: 12px; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /* =========================================== APPOINTMENT FORM MODAL STYLES Specific styles only - Base styles in _universal-form.scss =========================================== */ .appointment-form-modal .checkbox-group .checkbox-label { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; cursor: pointer; font-weight: normal; font-size: 16px; font-family: "Be Vietnam Pro", sans-serif; color: #312020; font-weight: 400; line-height: 1.5; } .appointment-form-modal .checkbox-group .checkbox-label input[type=checkbox] { position: absolute; opacity: 0; cursor: pointer; } .appointment-form-modal .checkbox-group .checkbox-label .checkmark { display: inline-block; width: 18px; height: 18px; border: 2px solid #312020; border-radius: 3px; position: relative; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; vertical-align: middle; } .appointment-form-modal .checkbox-group .checkbox-label input:checked ~ .checkmark { background-color: #00704a; border-color: #00704a; } .appointment-form-modal .checkbox-group .checkbox-label input:checked ~ .checkmark::after { content: "✓"; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: white; font-size: 12px; font-weight: bold; } .appointment-form-modal .checkbox-group .checkbox-label:hover .checkmark { border-color: #00704a; } .appointment-form-modal .select-wrapper { position: relative; } .appointment-form-modal .select-wrapper select.select2-hidden-accessible + .select-wrapper::after { display: none; } .appointment-form-modal .select-wrapper .select2-container { width: 100%; } .appointment-form-modal .select-wrapper .select2-container .select2-selection__clear { display: none; } .appointment-form-modal .select-wrapper .select2-container .select2-search--inline { width: 100% !important; } .appointment-form-modal .select-wrapper .select2-container .select2-selection, .appointment-form-modal .select-wrapper .select2-container .select2-selection--multiple { width: 100%; border: 1px solid #bbbbbb; border-radius: 8px; background-color: #fff; -webkit-transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease; transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease; transition: border-color 0.15s ease, box-shadow 0.15s ease; transition: border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease; } .appointment-form-modal .select-wrapper .select2-container .select2-selection--single .select2-selection__rendered, .appointment-form-modal .select-wrapper .select2-container .select2-selection--multiple--single .select2-selection__rendered { line-height: 40px; padding: 0 40px 0 12px; font-size: 16px; font-weight: 300; font-family: "Be Vietnam Pro", sans-serif; color: #312020; } .appointment-form-modal .select-wrapper .select2-container .select2-selection--single .select2-selection__placeholder, .appointment-form-modal .select-wrapper .select2-container .select2-selection--multiple--single .select2-selection__placeholder { color: #bbbbbb; font-weight: 300; } .appointment-form-modal .select-wrapper .select2-container .select2-selection--single .select2-selection__arrow, .appointment-form-modal .select-wrapper .select2-container .select2-selection--multiple--single .select2-selection__arrow { height: 44px; right: 12px; top: 0; width: 16px; background-image: url("/wp-content/themes/one-lab/assets/images/icons/arrow-down.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; } .appointment-form-modal .select-wrapper .select2-container .select2-selection--single .select2-selection__arrow b, .appointment-form-modal .select-wrapper .select2-container .select2-selection--multiple--single .select2-selection__arrow b { display: none; } .appointment-form-modal .select-wrapper .select2-container.error .select2-selection { border-color: #e53e3e; -webkit-box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.1); box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.1); } .appointment-form-modal .select-wrapper .select2-container.select2-container--focus .select2-selection, .appointment-form-modal .select-wrapper .select2-container.select2-container--open .select2-selection { border-color: #00704a; outline: none; -webkit-box-shadow: 0 0 0 2px rgba(0, 112, 74, 0.1); box-shadow: 0 0 0 2px rgba(0, 112, 74, 0.1); } .appointment-form-modal .select-wrapper .select2-container.select2-container--focus.select2-container--open .select2-selection { border-color: #00704a; -webkit-box-shadow: 0 0 0 2px rgba(0, 112, 74, 0.1); box-shadow: 0 0 0 2px rgba(0, 112, 74, 0.1); } .appointment-form-modal .select-wrapper .select2-dropdown { border: 1px solid #eceef3; border-radius: 8px; -webkit-box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25); box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25); margin-top: 4px; } .appointment-form-modal .select-wrapper .select2-dropdown.select2-dropdown--above { margin-top: 0; margin-bottom: 4px; } .appointment-form-modal .select-wrapper .select2-dropdown .select2-results__option { padding: 10px 16px; font-size: 15px; font-weight: 400; font-family: "Be Vietnam Pro", sans-serif; color: #312020; } .appointment-form-modal .select-wrapper .select2-dropdown .select2-results__option--highlighted { background: #e8f5ee; color: #00704a; } .appointment-form-modal .select-wrapper .select2-dropdown .select2-results__option[aria-selected=true] { background: #e8f5ee; color: #00704a; font-weight: 500; } .appointment-form-modal .select-wrapper .select2-selection--multiple { min-height: 44px; padding: 8px 12px; border: 1px solid #bbbbbb; border-radius: 8px; background-color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; } .appointment-form-modal .select-wrapper .select2-selection--multiple .select2-selection__rendered { padding: 0; margin: 0; min-height: 28px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .appointment-form-modal .select-wrapper .select2-selection--multiple .select2-selection__choice { background-color: #e8f5ee; border: 1px solid #00704a; border-radius: 6px; padding: 4px 8px 4px 24px; margin: 0 4px 4px 0; color: #00704a; font-size: 14px; font-weight: 400; font-family: "Be Vietnam Pro", sans-serif; line-height: 1.5; height: auto; } .appointment-form-modal .select-wrapper .select2-selection--multiple .select2-selection__choice .select2-selection__choice__display { padding-left: 0; } .appointment-form-modal .select-wrapper .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove { color: transparent; border: none; border-right: 1px solid rgba(0, 112, 74, 0.2); padding: 0; margin-right: 6px; margin-left: 0; width: 16px; height: 16px; display: inline-block; cursor: pointer; background-color: transparent; background-image: url("/wp-content/themes/one-lab/assets/images/icons/x.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; vertical-align: middle; -webkit-transition: opacity 0.15s ease; transition: opacity 0.15s ease; } .appointment-form-modal .select-wrapper .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove::before { content: ""; } .appointment-form-modal .select-wrapper .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover { opacity: 0.7; } .appointment-form-modal .select-wrapper .select2-selection--multiple .select2-selection__placeholder { color: #bbbbbb; font-weight: 300; margin: 0; padding: 0; line-height: 28px; } .appointment-form-modal .select-wrapper .select2-selection--multiple .select2-search--inline { width: 100% !important; margin: 0; padding: 0; margin: 0; padding: 0; } .appointment-form-modal .select-wrapper .select2-selection--multiple .select2-search--inline .select2-search__field { width: 100%; min-width: 120px; height: 24px; max-height: 24px; padding: 4px 0; margin: 0; border: none; outline: none; background: transparent; font-size: 14px; font-weight: 400; font-family: "Be Vietnam Pro", sans-serif; color: #312020; line-height: 1.5; resize: none; overflow: hidden; -webkit-box-shadow: none; box-shadow: none; vertical-align: top; white-space: nowrap; overflow-x: hidden; overflow-y: hidden; } .appointment-form-modal .select-wrapper .select2-selection--multiple .select2-search--inline .select2-search__field::-webkit-input-placeholder { color: #bbbbbb; font-weight: 300; } .appointment-form-modal .select-wrapper .select2-selection--multiple .select2-search--inline .select2-search__field::-moz-placeholder { color: #bbbbbb; font-weight: 300; } .appointment-form-modal .select-wrapper .select2-selection--multiple .select2-search--inline .select2-search__field:-ms-input-placeholder { color: #bbbbbb; font-weight: 300; } .appointment-form-modal .select-wrapper .select2-selection--multiple .select2-search--inline .select2-search__field::-ms-input-placeholder { color: #bbbbbb; font-weight: 300; } .appointment-form-modal .select-wrapper .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder { color: #bbbbbb; font-weight: 300; } .appointment-form-modal .select-wrapper .select2-selection--multiple .select2-search--inline .select2-search__field:focus { outline: none; border: none; -webkit-box-shadow: none; box-shadow: none; } .appointment-form-modal .select-wrapper.select2-container--focus .select2-selection--multiple, .appointment-form-modal .select-wrapper.select2-container--open .select2-selection--multiple { border-color: #00704a; -webkit-box-shadow: 0 0 0 2px rgba(0, 112, 74, 0.1); box-shadow: 0 0 0 2px rgba(0, 112, 74, 0.1); } .appointment-form-modal .select-wrapper.error .select2-selection--multiple { border-color: #e53e3e; -webkit-box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.1); box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.1); } .appointment-form-modal .field-error { display: none; color: #e53e3e; font-size: 14px; margin-top: 4px; line-height: 1.4; } .appointment-form-modal .date-input-wrapper { position: relative; } .appointment-form-modal .date-input-wrapper::after { content: ""; position: absolute; right: 16px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 24px; height: 24px; background-image: url("/wp-content/themes/one-lab/assets/images/icons/calendar.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; } .appointment-form-modal .date-input-wrapper input[type=text] { padding-right: 48px; height: 44px; } .appointment-form-modal .time-slots-container { margin-top: 8px; } .appointment-form-modal .time-slots-container .time-slots-grid { display: grid; grid-template-columns: repeat(4, 1fr); -webkit-column-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; row-gap: 8px; } @media (max-width: 1770px) { .appointment-form-modal .time-slots-container .time-slots-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1440px) { .appointment-form-modal .time-slots-container .time-slots-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .appointment-form-modal .time-slots-container .time-slots-grid { grid-template-columns: repeat(2, 1fr); } } .appointment-form-modal .time-slots-container .time-slot { width: 100%; height: 40px; padding: 0; border: none; border-radius: 8px; font-size: 14px; font-weight: 400; font-family: "Be Vietnam Pro", sans-serif; cursor: pointer; -webkit-transition: opacity 0.08s ease, -webkit-transform 0.08s ease; transition: opacity 0.08s ease, -webkit-transform 0.08s ease; transition: opacity 0.08s ease, transform 0.08s ease; transition: opacity 0.08s ease, transform 0.08s ease, -webkit-transform 0.08s ease; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; white-space: nowrap; } .appointment-form-modal .time-slots-container .time-slot.time-slot-disabled { background-color: #f2f2f2; color: #acacac; cursor: not-allowed; } .appointment-form-modal .time-slots-container .time-slot.time-slot-available { background-color: #d9f1e9; color: #090d14; } .appointment-form-modal .time-slots-container .time-slot.time-slot-available:hover { opacity: 0.75; -webkit-transform: scale(1.02); transform: scale(1.02); } .appointment-form-modal .time-slots-container .time-slot.time-slot-available:active { -webkit-transform: scale(0.98); transform: scale(0.98); } .appointment-form-modal .time-slots-container .time-slot.time-slot-selected { background-color: #00704a; color: #fff; } .appointment-form-modal .form-message { padding: 0.75rem 1rem; border-radius: 8px; margin-top: 1rem; font-size: 0.875rem; line-height: 1.5; } .appointment-form-modal .form-message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .appointment-form-modal .form-message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .modal-appointment-booking .onelab-modal-content { max-width: 670px; border-radius: 16px; position: relative; overflow-x: hidden; } .modal-appointment-booking .select2-container .select2-selection--multiple .select2-search--inline { width: 100% !important; max-height: 0; border-color: #bbbbbb; overflow: hidden; opacity: 0; visibility: hidden; -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-transition: max-height 0.25s ease-out, opacity 0.25s ease-out, visibility 0s linear 0.25s, -webkit-transform 0.25s ease-out; transition: max-height 0.25s ease-out, opacity 0.25s ease-out, visibility 0s linear 0.25s, -webkit-transform 0.25s ease-out; transition: max-height 0.25s ease-out, opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s linear 0.25s; transition: max-height 0.25s ease-out, opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s linear 0.25s, -webkit-transform 0.25s ease-out; } .modal-appointment-booking .select2-container .select2-selection--multiple .select2-search--inline .select2-search__field { width: 100% !important; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: -webkit-box-shadow 0.15s ease; transition: -webkit-box-shadow 0.15s ease; transition: box-shadow 0.15s ease; transition: box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease; } .modal-appointment-booking .select2-container.select2-container--open .select2-selection--multiple .select2-search--inline { max-height: 100px; opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: max-height 0.25s ease-out, opacity 0.25s ease-out, visibility 0s linear 0s, -webkit-transform 0.25s ease-out; transition: max-height 0.25s ease-out, opacity 0.25s ease-out, visibility 0s linear 0s, -webkit-transform 0.25s ease-out; transition: max-height 0.25s ease-out, opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s linear 0s; transition: max-height 0.25s ease-out, opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s linear 0s, -webkit-transform 0.25s ease-out; } .modal-appointment-booking .select2-container.select2-container--open .select2-selection--multiple .select2-search--inline .select2-search__field { -webkit-box-shadow: 0 0 0 1px rgba(0, 112, 74, 0.2); box-shadow: 0 0 0 1px rgba(0, 112, 74, 0.2); } .modal-appointment-booking .select2-results__option--selected { background-color: #efefef; color: #00704a; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .modal-appointment-booking .select2-results__option--selected::after { content: ""; display: inline-block; width: 20px; height: 20px; background-image: url("/wp-content/themes/one-lab/assets/images/icons/selected-icon.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; margin-left: 8px; vertical-align: middle; } .modal-appointment-booking .onelab-modal-close { position: absolute; top: 30px; right: 32px; background: none; border: none; cursor: pointer; padding: 0; width: 40px; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; z-index: 10; } .modal-appointment-booking .onelab-modal-close svg { width: 32px; height: 32px; display: block; } .modal-appointment-booking .onelab-modal-close path { fill: #312020; -webkit-transition: fill 0.2s ease; transition: fill 0.2s ease; } .modal-appointment-booking .onelab-modal-close:hover { opacity: 0.7; background-color: rgba(0, 0, 0, 0.05); border-radius: 4px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .modal-appointment-booking .onelab-modal-close:hover path { fill: #00704a; } .modal-appointment-booking .onelab-modal-header { padding: 36px 36px 16px; height: 77px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; } .modal-appointment-booking .onelab-modal-header .onelab-modal-title { font-size: 20px; font-weight: 700; color: #312020; margin: 0; font-family: "Montserrat", sans-serif; } .modal-appointment-booking .onelab-modal-body { padding: 0 36px 0; max-height: 500px; overflow-y: auto; } @media screen and (max-width: 1800px) { .modal-appointment-booking .onelab-modal-body { max-height: 450px; } } @media screen and (max-width: 1700px) { .modal-appointment-booking .onelab-modal-body { max-height: 400px; } } @media screen and (max-width: 1550px) { .modal-appointment-booking .onelab-modal-body { max-height: 350px; } } @media screen and (max-width: 1400px) { .modal-appointment-booking .onelab-modal-body { max-height: 40dvh; } } @media screen and (max-width: 1200px) { .modal-appointment-booking .onelab-modal-body { max-height: 50dvh; } } .modal-appointment-booking .onelab-modal-footer { padding: 30px 36px 36px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 1rem; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .modal-appointment-booking .onelab-modal-footer .onelab-modal-btn { padding: 12px 30px; font-size: 16px; font-weight: 500; border-radius: 8px; border: 1px solid; cursor: pointer; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; text-transform: uppercase; letter-spacing: 0.5px; min-width: 180px; font-family: "Be Vietnam Pro", sans-serif; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; } @media (max-width: 1770px) { .modal-appointment-booking .onelab-modal-footer .onelab-modal-btn { font-size: 14px; padding: 12px; } } .modal-appointment-booking .onelab-modal-footer .onelab-modal-btn.btn-contact-now, .modal-appointment-booking .onelab-modal-footer .onelab-modal-btn.btn-save-draft { background-color: #fff; color: #00704a; border-color: #00704a; border-width: 1px; } .modal-appointment-booking .onelab-modal-footer .onelab-modal-btn.btn-contact-now:hover:not(:disabled), .modal-appointment-booking .onelab-modal-footer .onelab-modal-btn.btn-save-draft:hover:not(:disabled) { background-color: #00704a; color: #fff; border-color: #00704a; } .modal-appointment-booking .onelab-modal-footer .onelab-modal-btn.btn-contact-now:active:not(:disabled), .modal-appointment-booking .onelab-modal-footer .onelab-modal-btn.btn-save-draft:active:not(:disabled) { -webkit-transform: translateY(1px); transform: translateY(1px); } .modal-appointment-booking .onelab-modal-footer .onelab-modal-btn.btn-book-appointment { background-color: #00704a; color: #fff; border-color: #00704a; border-width: 1px; } .modal-appointment-booking .onelab-modal-footer .onelab-modal-btn.btn-book-appointment:hover:not(:disabled) { background-color: #00704a; border-color: #00704a; } .modal-appointment-booking .onelab-modal-footer .onelab-modal-btn.btn-book-appointment:active:not(:disabled) { -webkit-transform: translateY(1px); transform: translateY(1px); } .modal-appointment-booking .onelab-modal-footer .onelab-modal-btn.btn-book-appointment.is-loading { pointer-events: none; opacity: 0.8; } .modal-appointment-booking .onelab-modal-footer .onelab-modal-btn.btn-book-appointment.is-loading .form-loading-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-top: 2px solid #fff; border-right: 2px solid rgba(255, 255, 255, 0.6); border-radius: 50%; -webkit-animation: form-spin 0.6s linear infinite; animation: form-spin 0.6s linear infinite; margin-right: 8px; vertical-align: middle; } .modal-appointment-booking .onelab-modal-footer .onelab-modal-btn.btn-book-appointment.is-loading .form-loading-text { vertical-align: middle; } .modal-appointment-booking .onelab-modal-footer .onelab-modal-btn:disabled { opacity: 0.6; cursor: not-allowed; -webkit-transform: none; transform: none; } @media screen and (max-width: 992px) { .modal-appointment-booking .onelab-modal-content { max-width: 90vw; } .modal-appointment-booking .onelab-modal-header, .modal-appointment-booking .onelab-modal-body, .modal-appointment-booking .onelab-modal-footer { padding-left: 28px; padding-right: 28px; } .modal-appointment-booking .onelab-modal-close { top: 28px; right: 28px; } .appointment-form-modal .form-section { margin-bottom: 28px; } .appointment-form-modal .form-section-title { font-size: 18px; margin-bottom: 16px; } .appointment-form-modal .form-group { margin-bottom: 14px; } .appointment-form-modal .form-group label { font-size: 15px; } .appointment-form-modal .checkbox-group .checkbox-label { font-size: 14px; } .appointment-form-modal .checkbox-group .checkbox-label .checkmark { width: 16px; height: 16px; margin-top: 2px; } } @media screen and (max-width: 768px) { .modal-appointment-booking .onelab-modal-content { margin: 1rem auto; max-width: 80vw; border-radius: 12px; } .modal-appointment-booking .onelab-modal-header { padding: 24px 24px 0; height: auto; min-height: 60px; } .modal-appointment-booking .onelab-modal-body { padding: 0 24px; } .modal-appointment-booking .onelab-modal-footer { padding: 24px; gap: 12px; } .modal-appointment-booking .onelab-modal-close { top: 20px; right: 20px; width: 22px; height: 22px; } .modal-appointment-booking .onelab-modal-close svg { width: 22px; height: 22px; } .modal-appointment-booking .onelab-modal-title { font-size: 1.125rem; } .modal-appointment-booking .onelab-modal-footer .onelab-modal-btn { width: 100%; min-width: auto; height: 48px; padding: 14px 12px; font-size: 14px; -webkit-box-sizing: border-box; box-sizing: border-box; } .appointment-form-modal .form-section { margin-bottom: 24px; } .appointment-form-modal .form-section-title { font-size: 18px; margin-bottom: 14px; } .appointment-form-modal .form-group { margin-bottom: 14px; } .appointment-form-modal .form-group label { font-size: 15px; margin-bottom: 6px; } .appointment-form-modal .form-group input[type=text], .appointment-form-modal .form-group input[type=tel], .appointment-form-modal .form-group textarea { height: 42px; padding: 10px 12px; font-size: 15px; } .appointment-form-modal .form-group textarea { min-height: 90px; } .appointment-form-modal .checkbox-group .checkbox-label { font-size: 14px; gap: 6px; } .appointment-form-modal .checkbox-group .checkbox-label .checkmark { width: 15px; height: 15px; } .appointment-form-modal .select-wrapper .select2-container .select2-selection { height: 42px; } .appointment-form-modal .select-wrapper .select2-container .select2-selection--single .select2-selection__rendered { line-height: 40px; padding: 0 38px 0 12px; font-size: 15px; } .appointment-form-modal .select-wrapper .select2-container .select2-selection--single .select2-selection__arrow { height: 42px; right: 10px; } .appointment-form-modal .select-wrapper .select2-container .select2-dropdown .select2-results__option { padding: 10px 12px; font-size: 15px; } .appointment-form-modal .date-input-wrapper::after { right: 12px; width: 20px; height: 20px; } .appointment-form-modal .date-input-wrapper input[type=text] { padding-right: 40px; height: 42px; } .appointment-form-modal .time-slots-container .time-slots-grid { grid-template-columns: repeat(3, 1fr); -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; row-gap: 8px; } .appointment-form-modal .time-slots-container .time-slot { width: 100%; height: 38px; font-size: 13px; } } @media screen and (max-width: 576px) { .modal-appointment-booking .onelab-modal-content { margin: 0.5rem; max-width: calc(100vw - 1rem); border-radius: 8px; } .modal-appointment-booking .onelab-modal-header { padding: 20px 20px 0; min-height: 56px; } .modal-appointment-booking .onelab-modal-body { padding: 0 20px; } .modal-appointment-booking .onelab-modal-footer { padding: 20px; gap: 10px; } .modal-appointment-booking .onelab-modal-close { top: 16px; right: 16px; width: 20px; height: 20px; } .modal-appointment-booking .onelab-modal-close svg { width: 20px; height: 20px; } .modal-appointment-booking .onelab-modal-title { font-size: 1rem; } .modal-appointment-booking .onelab-modal-footer .onelab-modal-btn { height: 44px; padding: 12px 20px; font-size: 14px; -webkit-box-sizing: border-box; box-sizing: border-box; } .appointment-form-modal .form-section { margin-bottom: 20px; } .appointment-form-modal .form-section-title { font-size: 16px; margin-bottom: 12px; } .appointment-form-modal .form-group { margin-bottom: 12px; } .appointment-form-modal .form-group label { font-size: 14px; margin-bottom: 5px; } .appointment-form-modal .form-group input[type=text], .appointment-form-modal .form-group input[type=tel], .appointment-form-modal .form-group textarea { height: 40px; padding: 8px 12px; font-size: 14px; } .appointment-form-modal .form-group textarea { min-height: 80px; } .appointment-form-modal .checkbox-group .checkbox-label { font-size: 13px; gap: 6px; } .appointment-form-modal .checkbox-group .checkbox-label .checkmark { width: 15px; height: 15px; } .appointment-form-modal .select-wrapper .select2-container .select2-selection { height: 40px; } .appointment-form-modal .select-wrapper .select2-container .select2-selection--single .select2-selection__rendered { line-height: 40px; padding: 0 36px 0 12px; font-size: 14px; } .appointment-form-modal .select-wrapper .select2-container .select2-selection--single .select2-selection__arrow { height: 40px; right: 10px; width: 14px; } .appointment-form-modal .select-wrapper .select2-container .select2-dropdown .select2-results__option { padding: 8px 12px; font-size: 14px; } .appointment-form-modal .date-input-wrapper::after { right: 10px; width: 18px; height: 18px; } .appointment-form-modal .date-input-wrapper input[type=text] { padding-right: 36px; height: 40px; } .appointment-form-modal .time-slots-container { margin-top: 6px; } .appointment-form-modal .time-slots-container .time-slots-grid { grid-template-columns: repeat(2, 1fr); -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; row-gap: 8px; } .appointment-form-modal .time-slots-container .time-slot { width: 100%; height: 36px; font-size: 13px; } .appointment-form-modal .field-error { font-size: 0.7rem; } .appointment-form-modal .form-message { padding: 0.625rem 0.875rem; font-size: 0.8125rem; margin-top: 0.875rem; } } @-webkit-keyframes form-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes form-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @media (max-width: 480px) { .appointment-form-modal .form-section { margin-bottom: 16px; } .appointment-form-modal .form-section-title { font-size: 15px; margin-bottom: 10px; } .appointment-form-modal .form-group { margin-bottom: 10px; } .appointment-form-modal .form-group label { font-size: 13px; margin-bottom: 4px; } .appointment-form-modal .form-group input[type=text], .appointment-form-modal .form-group input[type=tel], .appointment-form-modal .form-group textarea { height: 38px; padding: 7px 10px; font-size: 16px; } .appointment-form-modal .form-group textarea { min-height: 70px; } .appointment-form-modal .checkbox-group .checkbox-label { font-size: 13px; gap: 6px; } .appointment-form-modal .checkbox-group .checkbox-label .checkmark { width: 15px; height: 15px; } .appointment-form-modal .select-wrapper .select2-container .select2-selection { height: 38px; } .appointment-form-modal .select-wrapper .select2-container .select2-selection--single .select2-selection__rendered { line-height: 38px; padding: 0 32px 0 10px; font-size: 16px; } .appointment-form-modal .select-wrapper .select2-container .select2-selection--single .select2-selection__arrow { height: 38px; right: 8px; width: 12px; } .appointment-form-modal .select-wrapper .select2-container .select2-dropdown .select2-results__option { padding: 7px 10px; font-size: 15px; } .appointment-form-modal .date-input-wrapper::after { right: 8px; width: 16px; height: 16px; } .appointment-form-modal .date-input-wrapper input[type=text] { padding-right: 32px; height: 38px; } .appointment-form-modal .time-slots-container { margin-top: 5px; } .appointment-form-modal .time-slots-container .time-slots-grid { grid-template-columns: 1fr; -webkit-column-gap: 6px; -moz-column-gap: 6px; column-gap: 6px; row-gap: 6px; } .appointment-form-modal .time-slots-container .time-slot { height: 34px; font-size: 12px; padding: 6px 8px; } } @media (max-width: 375px) { .appointment-form-modal .form-section-title { font-size: 14px; } .appointment-form-modal .form-group label { font-size: 12px; } .appointment-form-modal .form-group input[type=text], .appointment-form-modal .form-group input[type=tel], .appointment-form-modal .form-group textarea { height: 36px; padding: 6px 9px; font-size: 16px; } .appointment-form-modal .checkbox-group .checkbox-label { font-size: 12px; } .appointment-form-modal .select-wrapper .select2-container .select2-selection { height: 36px; } .appointment-form-modal .select-wrapper .select2-container .select2-selection--single .select2-selection__rendered { line-height: 36px; } .appointment-form-modal .select-wrapper .select2-container .select2-selection--single .select2-selection__arrow { height: 36px; } .appointment-form-modal .date-input-wrapper input[type=text] { height: 36px; } .appointment-form-modal .time-slots-container .time-slot { height: 32px; font-size: 11px; padding: 5px 6px; } } /* =========================================== B2C APPOINTMENT FORM MODAL STYLES =========================================== */ .b2c-appointment-form-modal .form-section { margin-bottom: 24px; } .b2c-appointment-form-modal .form-section:last-child { margin-bottom: 0; } .b2c-appointment-form-modal .form-section-title { font-size: 18px; font-weight: 600; font-family: "Be Vietnam Pro", sans-serif; color: #312020; margin: 0 0 16px 0; padding-bottom: 8px; border-bottom: 1px solid #eee; } .b2c-appointment-form-modal .form-group { margin-bottom: 16px; } .b2c-appointment-form-modal .form-group:last-child { margin-bottom: 0; } .b2c-appointment-form-modal .form-group label { display: block; font-size: 14px; font-weight: 500; font-family: "Be Vietnam Pro", sans-serif; color: #312020; margin-bottom: 6px; } .b2c-appointment-form-modal .form-group label .required { color: #e74c3c; margin-left: 2px; } .b2c-appointment-form-modal .form-group input[type=text], .b2c-appointment-form-modal .form-group input[type=tel], .b2c-appointment-form-modal .form-group input[type=email] { width: 100%; height: 44px; padding: 10px 12px; border: 1px solid #bbb; border-radius: 8px; font-size: 16px; font-family: "Be Vietnam Pro", sans-serif; -webkit-transition: border-color 0.15s ease; transition: border-color 0.15s ease; } .b2c-appointment-form-modal .form-group input[type=text]:focus, .b2c-appointment-form-modal .form-group input[type=tel]:focus, .b2c-appointment-form-modal .form-group input[type=email]:focus { outline: none; border-color: #00704a; } .b2c-appointment-form-modal .form-group input[type=text]::-webkit-input-placeholder, .b2c-appointment-form-modal .form-group input[type=tel]::-webkit-input-placeholder, .b2c-appointment-form-modal .form-group input[type=email]::-webkit-input-placeholder { color: #999; } .b2c-appointment-form-modal .form-group input[type=text]::-moz-placeholder, .b2c-appointment-form-modal .form-group input[type=tel]::-moz-placeholder, .b2c-appointment-form-modal .form-group input[type=email]::-moz-placeholder { color: #999; } .b2c-appointment-form-modal .form-group input[type=text]:-ms-input-placeholder, .b2c-appointment-form-modal .form-group input[type=tel]:-ms-input-placeholder, .b2c-appointment-form-modal .form-group input[type=email]:-ms-input-placeholder { color: #999; } .b2c-appointment-form-modal .form-group input[type=text]::-ms-input-placeholder, .b2c-appointment-form-modal .form-group input[type=tel]::-ms-input-placeholder, .b2c-appointment-form-modal .form-group input[type=email]::-ms-input-placeholder { color: #999; } .b2c-appointment-form-modal .form-group input[type=text]::placeholder, .b2c-appointment-form-modal .form-group input[type=tel]::placeholder, .b2c-appointment-form-modal .form-group input[type=email]::placeholder { color: #999; } .b2c-appointment-form-modal .form-row--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 480px) { .b2c-appointment-form-modal .form-row--2col { grid-template-columns: 1fr; } } .b2c-appointment-form-modal .radio-group { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 1rem; } .b2c-appointment-form-modal .radio-group--location { gap: 2rem; } .b2c-appointment-form-modal .radio-label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-family: "Be Vietnam Pro", sans-serif; color: #312020; } .b2c-appointment-form-modal .radio-label input[type=radio] { position: absolute; opacity: 0; } .b2c-appointment-form-modal .radio-label .radio-custom { display: inline-block; width: 18px; height: 18px; border: 2px solid #bbb; border-radius: 50%; position: relative; -webkit-transition: all 0.15s ease; transition: all 0.15s ease; -ms-flex-negative: 0; flex-shrink: 0; } .b2c-appointment-form-modal .radio-label input:checked ~ .radio-custom { border-color: #00704a; } .b2c-appointment-form-modal .radio-label input:checked ~ .radio-custom::after { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 10px; height: 10px; background-color: #00704a; border-radius: 50%; } .b2c-appointment-form-modal .radio-label:hover .radio-custom { border-color: #00704a; } .b2c-appointment-form-modal .date-input-wrapper { position: relative; } .b2c-appointment-form-modal .date-input-wrapper input[type=text] { width: 100%; height: 44px; padding: 10px 40px 10px 12px; border: 1px solid #bbb; border-radius: 8px; font-size: 16px; font-family: "Be Vietnam Pro", sans-serif; cursor: pointer; background-color: #fff; -webkit-transition: border-color 0.15s ease; transition: border-color 0.15s ease; } .b2c-appointment-form-modal .date-input-wrapper input[type=text]:focus { outline: none; border-color: #00704a; } .b2c-appointment-form-modal .date-input-wrapper::after { content: ""; position: absolute; right: 12px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; pointer-events: none; } .b2c-appointment-form-modal .time-slots-container { margin-top: 16px; } .b2c-appointment-form-modal .time-slots-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } @media (max-width: 1770px) { .b2c-appointment-form-modal .time-slots-grid { gap: 7px; grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)); } } @media (max-width: 1440px) { .b2c-appointment-form-modal .time-slots-grid { gap: 6px; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); } } @media (max-width: 768px) { .b2c-appointment-form-modal .time-slots-grid { gap: 6px; grid-template-columns: repeat(auto-fit, minmax(75px, 1fr)); } } @media (max-width: 480px) { .b2c-appointment-form-modal .time-slots-grid { gap: 6px; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); } } @media (max-width: 360px) { .b2c-appointment-form-modal .time-slots-grid { gap: 5px; grid-template-columns: repeat(auto-fit, minmax(65px, 1fr)); } } .b2c-appointment-form-modal .onelab-form .time-slots-grid .time-slot, .b2c-appointment-form-modal .time-slots-grid .time-slot { height: 40px; padding: 8px 12px; border: none !important; border-radius: 8px; font-size: 14px; font-weight: 400; font-family: "Be Vietnam Pro", sans-serif; cursor: pointer; -webkit-transition: all 0.15s ease; transition: all 0.15s ease; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; white-space: nowrap; } .b2c-appointment-form-modal .onelab-form .time-slots-grid .time-slot.time-slot-disabled, .b2c-appointment-form-modal .time-slots-grid .time-slot.time-slot-disabled { background-color: #f2f2f2 !important; color: #acacac !important; cursor: not-allowed; opacity: 1 !important; } .b2c-appointment-form-modal .onelab-form .time-slots-grid .time-slot.time-slot-available, .b2c-appointment-form-modal .time-slots-grid .time-slot.time-slot-available { background-color: #d9f1e9 !important; color: #090d14 !important; } .b2c-appointment-form-modal .onelab-form .time-slots-grid .time-slot.time-slot-available:hover, .b2c-appointment-form-modal .time-slots-grid .time-slot.time-slot-available:hover { background-color: #00704a !important; color: #fff !important; -webkit-transform: scale(1.02); transform: scale(1.02); } .b2c-appointment-form-modal .onelab-form .time-slots-grid .time-slot.time-slot-available:active, .b2c-appointment-form-modal .time-slots-grid .time-slot.time-slot-available:active { -webkit-transform: scale(0.98); transform: scale(0.98); } .b2c-appointment-form-modal .onelab-form .time-slots-grid .time-slot.time-slot-selected, .b2c-appointment-form-modal .time-slots-grid .time-slot.time-slot-selected { background-color: #00704a !important; color: #fff !important; } .b2c-appointment-form-modal .time-slots-loading { grid-column: 1/-1; text-align: center; padding: 20px; color: #666; font-size: 14px; } .b2c-appointment-form-modal .select-wrapper { position: relative; } .b2c-appointment-form-modal .select-wrapper .select2-container { width: 100% !important; } .b2c-appointment-form-modal .select-wrapper .select2-container .select2-selection--single { height: 44px; border: 1px solid #bbb; border-radius: 8px; } .b2c-appointment-form-modal .select-wrapper .select2-container .select2-selection--single .select2-selection__rendered { line-height: 44px; padding: 0 40px 0 12px; font-size: 16px; font-family: "Be Vietnam Pro", sans-serif; color: #312020; } .b2c-appointment-form-modal .select-wrapper .select2-container .select2-selection--single .select2-selection__arrow { height: 44px; right: 8px; } .b2c-appointment-form-modal .onelab-form__error { display: block; font-size: 12px; color: #e74c3c; margin-top: 4px; min-height: 18px; } .b2c-appointment-form-modal .onelab-form__error.is-visible { opacity: 1; } .b2c-appointment-form-modal .onelab-form__message { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; } .b2c-appointment-form-modal .onelab-form__message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .b2c-appointment-form-modal .onelab-form__message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } /* B2C Appointment Modal Container */ .modal-b2c-appointment .onelab-modal-content { max-width: 670px; max-height: 80vh; border-radius: 16px; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .modal-b2c-appointment .onelab-modal-body { padding: 24px; overflow-y: auto; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } .modal-b2c-appointment .onelab-modal-body::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } @media (max-width: 576px) { .modal-b2c-appointment .onelab-modal-body { padding: 16px; } .modal-b2c-appointment .b2c-appointment-form-modal .form-section-title { font-size: 16px; } .modal-b2c-appointment .b2c-appointment-form-modal .form-group label { font-size: 13px; } .modal-b2c-appointment .b2c-appointment-form-modal .time-slot { height: 36px; font-size: 12px; padding: 6px 8px; } } /* =========================================== B2C SUCCESS MODAL STYLES =========================================== */ .modal-b2c-success .onelab-modal-content { max-width: 80vw !important; border-radius: 16px; overflow: hidden; } .modal-b2c-success .onelab-modal-header { position: absolute; top: 0; right: 0; left: 0; padding: 16px 24px; background: transparent; border-bottom: none; z-index: 10; } .modal-b2c-success .onelab-modal-header .onelab-modal-title { display: none; } .modal-b2c-success .onelab-modal-header .onelab-modal-close { position: absolute; top: 16px; right: 16px; } .modal-b2c-success .onelab-modal-body { padding: 32px; padding-top: 16px; } .b2c-success-modal-content .b2c-success-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; margin-bottom: 8px; padding-right: 40px; } .b2c-success-modal-content .b2c-success-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-negative: 0; flex-shrink: 0; } .b2c-success-modal-content .b2c-success-icon svg { width: 32px; height: 32px; } .b2c-success-modal-content .b2c-success-title { font-size: 36px; font-weight: 700; font-family: "Montserrat", sans-serif; color: #00704a; margin: 0; line-height: 1.5; } .b2c-success-modal-content .b2c-success-appointment-info { font-size: 20px; font-family: "Be Vietnam Pro", sans-serif; color: #00704a; margin: 0 0 24px 0; line-height: 1.5; } .b2c-success-modal-content .b2c-success-tips { background-color: #fff; border-radius: 12px; } .b2c-success-modal-content .b2c-success-tips-title { font-size: 24px; font-weight: 600; font-family: "Montserrat", sans-serif; color: #00704a; margin: 0 0 16px 0; } .b2c-success-modal-content .b2c-success-tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 768px) { .b2c-success-modal-content .b2c-success-tips-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .b2c-success-modal-content .b2c-success-tips-grid { grid-template-columns: 1fr; } } .b2c-success-modal-content .b2c-success-tip-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 12px; padding: 16px; background-color: #fff; border-radius: 12px; -webkit-box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1); border: 1px solid #f0f0f0; -webkit-transition: -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease; transition: -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease; transition: box-shadow 0.2s ease, transform 0.2s ease; transition: box-shadow 0.2s ease, transform 0.2s ease, -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease; } .b2c-success-modal-content .b2c-success-tip-item:hover { -webkit-box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.15), 0 10px 15px -3px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.15), 0 10px 15px -3px rgba(0, 0, 0, 0.15); -webkit-transform: translateY(-2px); transform: translateY(-2px); } .b2c-success-modal-content .b2c-success-tip-icon { -ms-flex-negative: 0; flex-shrink: 0; width: 48px; height: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .b2c-success-modal-content .b2c-success-tip-icon img { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } .b2c-success-modal-content .b2c-success-tip-text { font-size: 16px; font-family: "Be Vietnam Pro", sans-serif; color: #00704a; margin: 0; line-height: 1.5; font-style: normal; } @media (max-width: 576px) { .modal-b2c-success .onelab-modal-body { padding: 20px; } .b2c-success-modal-content .b2c-success-title { font-size: 20px; } .b2c-success-modal-content .b2c-success-tips-title { font-size: 16px; } .b2c-success-modal-content .b2c-success-tip-item { padding: 12px; } .b2c-success-modal-content .b2c-success-tip-icon { width: 40px; height: 40px; } .b2c-success-modal-content .b2c-success-tip-text { font-size: 13px; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /* =========================================== APPOINTMENT SUCCESS MODAL STYLES =========================================== */ #appointment-success-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1050; display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } #appointment-success-modal.modal-visible { opacity: 1; } #appointment-success-modal .onelab-modal-overlay { background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 1; } #appointment-success-modal .onelab-modal-container { position: relative; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; padding: 20px; } .onelab-modal .appointment-success-modal-content { position: relative; padding: 48px 64px 32px 64px !important; background: #fff; border-radius: 12px; overflow: hidden; max-width: 600px; width: 100%; -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.16); padding: 0; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0; -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); transition: opacity 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } #appointment-success-modal.modal-visible .appointment-success-modal-content, #quick-booking-success-modal.modal-visible .quick-booking-success-modal-content { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } #appointment-success-modal.modal-visible .appointment-success-modal-content::before, #quick-booking-success-modal.modal-visible .quick-booking-success-modal-content::before { content: ""; position: absolute; top: -32px; right: 0px; width: 400px; height: 400px; background-image: url("/wp-content/themes/one-lab/assets/images/success-bgr.webp"); background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; z-index: 0; } #appointment-success-modal.modal-visible .appointment-success-modal-content .appointment-success-close, #quick-booking-success-modal.modal-visible .quick-booking-success-modal-content .appointment-success-close { position: absolute; top: 28px; right: 53px; background: transparent; border: none; cursor: pointer; padding: 0; width: 40px; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; z-index: 10; line-height: 1; } #appointment-success-modal.modal-visible .appointment-success-modal-content .appointment-success-close:hover, #quick-booking-success-modal.modal-visible .quick-booking-success-modal-content .appointment-success-close:hover { opacity: 0.7; } #appointment-success-modal.modal-visible .appointment-success-modal-content .appointment-success-close .close-icon, #quick-booking-success-modal.modal-visible .quick-booking-success-modal-content .appointment-success-close .close-icon { width: 40px; height: 40px; border-radius: 4px; background-color: transparent; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; } #appointment-success-modal.modal-visible .appointment-success-modal-content .appointment-success-close .close-icon:hover, #quick-booking-success-modal.modal-visible .quick-booking-success-modal-content .appointment-success-close .close-icon:hover { background-color: rgba(0, 0, 0, 0.05); } #appointment-success-modal.modal-visible .appointment-success-modal-content .appointment-success-close .close-icon svg, #quick-booking-success-modal.modal-visible .quick-booking-success-modal-content .appointment-success-close .close-icon svg { width: 32px; height: 32px; -o-object-fit: contain; object-fit: contain; } #appointment-success-modal.modal-visible .appointment-success-modal-content .appointment-success-logo, #quick-booking-success-modal.modal-visible .quick-booking-success-modal-content .appointment-success-logo { position: relative; z-index: 1; width: 204px; height: 47px; margin: 0 auto 53px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #appointment-success-modal.modal-visible .appointment-success-modal-content .appointment-success-logo .onelab-logo-img, #quick-booking-success-modal.modal-visible .quick-booking-success-modal-content .appointment-success-logo .onelab-logo-img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } #appointment-success-modal.modal-visible .appointment-success-modal-content .appointment-success-body, #quick-booking-success-modal.modal-visible .quick-booking-success-modal-content .appointment-success-body { text-align: center; position: relative; z-index: 1; } #appointment-success-modal.modal-visible .appointment-success-modal-content .appointment-success-body .appointment-success-logo, #quick-booking-success-modal.modal-visible .quick-booking-success-modal-content .appointment-success-body .appointment-success-logo { width: 204px; height: 47px; -o-object-fit: contain; object-fit: contain; margin-bottom: 53px; } #appointment-success-modal.modal-visible .appointment-success-modal-content .appointment-success-body .appointment-success-logo svg, #quick-booking-success-modal.modal-visible .quick-booking-success-modal-content .appointment-success-body .appointment-success-logo svg { -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } #appointment-success-modal.modal-visible .appointment-success-modal-content .appointment-success-body .appointment-success-logo:hover svg, #quick-booking-success-modal.modal-visible .quick-booking-success-modal-content .appointment-success-body .appointment-success-logo:hover svg { -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } #appointment-success-modal.modal-visible .appointment-success-modal-content .appointment-success-body .appointment-success-title, #quick-booking-success-modal.modal-visible .quick-booking-success-modal-content .appointment-success-body .appointment-success-title { font-size: 28px; font-weight: 700; color: #00704a; margin: 0 0 8px; font-family: "Montserrat", sans-serif; line-height: 150%; } #appointment-success-modal.modal-visible .appointment-success-modal-content .appointment-success-body .appointment-success-message, #quick-booking-success-modal.modal-visible .quick-booking-success-modal-content .appointment-success-body .appointment-success-message { font-size: 16px; color: #000; line-height: 150%; font-family: "Be Vietnam Pro", sans-serif; margin: 0; } #appointment-success-modal.modal-visible .appointment-success-modal-content .appointment-success-footer, #quick-booking-success-modal.modal-visible .quick-booking-success-modal-content .appointment-success-footer { padding: 0; position: relative; z-index: 1; margin-top: 32px; } #appointment-success-modal.modal-visible .appointment-success-modal-content .appointment-success-footer .btn-appointment-success-home, #quick-booking-success-modal.modal-visible .quick-booking-success-modal-content .appointment-success-footer .btn-appointment-success-home { display: block; width: 100%; height: 72px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #00704a; color: #fff; font-size: 16px; font-weight: 600; line-height: 150%; font-family: "Montserrat", sans-serif; text-decoration: none; border-radius: 8px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; text-transform: uppercase; border: none; outline: none; cursor: pointer; } #appointment-success-modal.modal-visible .appointment-success-modal-content .appointment-success-footer .btn-appointment-success-home:hover, #quick-booking-success-modal.modal-visible .quick-booking-success-modal-content .appointment-success-footer .btn-appointment-success-home:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); opacity: 0.8; -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.3); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.3); } #appointment-success-modal.modal-visible .appointment-success-modal-content .appointment-success-footer .btn-appointment-success-home:active, #quick-booking-success-modal.modal-visible .quick-booking-success-modal-content .appointment-success-footer .btn-appointment-success-home:active { -webkit-transform: translateY(0); transform: translateY(0); } @media (max-width: 768px) { #appointment-success-modal .onelab-modal-container { padding: 16px; } .appointment-success-modal-content { max-width: 90%; margin: 20px auto; padding: 0 !important; } .appointment-success-modal-content::before { width: 300px !important; height: 300px !important; top: -20px !important; right: -10px !important; } .appointment-success-modal-content .appointment-success-close { top: 20px; right: 20px; width: 32px; height: 32px; } .appointment-success-modal-content .appointment-success-close .close-icon { width: 32px; height: 32px; } .appointment-success-modal-content .appointment-success-close .close-icon svg { width: 24px; height: 24px; } .appointment-success-modal-content .appointment-success-logo { width: 160px; height: 37px; margin: 40px auto 32px; } .appointment-success-modal-content .appointment-success-body { padding: 0 24px 24px 24px; } .appointment-success-modal-content .appointment-success-body .appointment-success-title { font-size: 20px; margin-bottom: 6px; } .appointment-success-modal-content .appointment-success-body .appointment-success-message { font-size: 15px; margin-bottom: 24px; } .appointment-success-modal-content .appointment-success-footer { padding: 0 24px 24px 24px; } .appointment-success-modal-content .appointment-success-footer .btn-appointment-success-home { height: 56px; font-size: 15px; } } @media (max-width: 480px) { #appointment-success-modal .onelab-modal-container { padding: 12px; } .appointment-success-modal-content { max-width: 95%; margin: 16px auto; } .appointment-success-modal-content::before { width: 250px !important; height: 250px !important; top: -15px !important; right: -5px !important; } .appointment-success-modal-content .appointment-success-close { top: 16px; right: 16px; width: 28px; height: 28px; } .appointment-success-modal-content .appointment-success-close .close-icon { width: 28px; height: 28px; } .appointment-success-modal-content .appointment-success-close .close-icon svg { width: 20px; height: 20px; } .appointment-success-modal-content .appointment-success-logo { width: 140px; height: 32px; margin: 32px auto 24px; } .appointment-success-modal-content .appointment-success-body { padding: 0 20px 20px 20px; } .appointment-success-modal-content .appointment-success-body .appointment-success-title { font-size: 18px; margin-bottom: 5px; } .appointment-success-modal-content .appointment-success-body .appointment-success-message { font-size: 14px; margin-bottom: 20px; line-height: 1.5; } .appointment-success-modal-content .appointment-success-footer { padding: 0 20px 20px 20px; } .appointment-success-modal-content .appointment-success-footer .btn-appointment-success-home { height: 48px; font-size: 14px; } } @media (max-width: 375px) { .appointment-success-modal-content { max-width: 98%; margin: 12px auto; } .appointment-success-modal-content .appointment-success-logo { width: 120px; height: 28px; margin: 28px auto 20px; } .appointment-success-modal-content .appointment-success-body { padding: 0 16px 16px 16px; } .appointment-success-modal-content .appointment-success-body .appointment-success-title { font-size: 16px; } .appointment-success-modal-content .appointment-success-body .appointment-success-message { font-size: 13px; margin-bottom: 16px; } .appointment-success-modal-content .appointment-success-footer { padding: 0 16px 16px 16px; } .appointment-success-modal-content .appointment-success-footer .btn-appointment-success-home { height: 44px; font-size: 13px; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /* =========================================== QUICK BOOKING MODAL STYLES Uses same structure as appointment-form-modal =========================================== */ .appointment-form-modal .quick-booking-disclaimer, .quick-booking-form-modal .quick-booking-disclaimer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 8px; margin-top: 16px; margin-bottom: 0; } .appointment-form-modal .quick-booking-disclaimer .disclaimer-icon, .quick-booking-form-modal .quick-booking-disclaimer .disclaimer-icon { -ms-flex-negative: 0; flex-shrink: 0; margin-top: 2px; } .appointment-form-modal .quick-booking-disclaimer .disclaimer-icon svg, .quick-booking-form-modal .quick-booking-disclaimer .disclaimer-icon svg { width: 16px; height: 16px; display: block; } .appointment-form-modal .quick-booking-disclaimer .disclaimer-text, .quick-booking-form-modal .quick-booking-disclaimer .disclaimer-text { font-size: 16px; line-height: 150%; color: #626264; font-family: "Be Vietnam Pro", sans-serif; } .appointment-form-modal .quick-booking-disclaimer .disclaimer-text .disclaimer-link, .quick-booking-form-modal .quick-booking-disclaimer .disclaimer-text .disclaimer-link { color: #626264; text-decoration: underline; cursor: pointer; -webkit-transition: color 0.2s ease; transition: color 0.2s ease; } .appointment-form-modal .quick-booking-disclaimer .disclaimer-text .disclaimer-link:hover, .quick-booking-form-modal .quick-booking-disclaimer .disclaimer-text .disclaimer-link:hover { color: rgba(0, 112, 74, 0.8); } .appointment-form-modal .quick-booking-disclaimer .disclaimer-text .disclaimer-link:not(a), .quick-booking-form-modal .quick-booking-disclaimer .disclaimer-text .disclaimer-link:not(a) { cursor: default; } .modal-appointment-booking .onelab-modal-btn.btn-book-direct { background-color: #fff; color: #00704a; border-color: #00704a; border-width: 1px; } .modal-appointment-booking .onelab-modal-btn.btn-book-direct:hover:not(:disabled) { background-color: #00704a; color: #fff; border-color: #00704a; } .modal-appointment-booking .onelab-modal-btn.btn-book-direct:active:not(:disabled) { -webkit-transform: translateY(1px); transform: translateY(1px); } .modal-appointment-booking .onelab-modal-btn.btn-book-appointment { background-color: #00704a; color: #fff; border-color: #00704a; border-width: 1px; } .modal-appointment-booking .onelab-modal-btn.btn-book-appointment:hover:not(:disabled) { background-color: #00704a; border-color: #00704a; } .modal-appointment-booking .onelab-modal-btn.btn-book-appointment:active:not(:disabled) { -webkit-transform: translateY(1px); transform: translateY(1px); } .modal-appointment-booking .onelab-modal-btn.btn-book-appointment.is-loading { pointer-events: none; opacity: 0.8; } .modal-appointment-booking .onelab-modal-btn.btn-book-appointment.is-loading .form-loading-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-top: 2px solid #fff; border-right: 2px solid rgba(255, 255, 255, 0.6); border-radius: 50%; -webkit-animation: form-spin 0.6s linear infinite; animation: form-spin 0.6s linear infinite; margin-right: 8px; vertical-align: middle; } .modal-appointment-booking .onelab-modal-btn.btn-book-appointment.is-loading .form-loading-text { vertical-align: middle; } @media (max-width: 768px) { .appointment-form-modal .quick-booking-disclaimer, .quick-booking-form-modal .quick-booking-disclaimer { margin-top: 12px; } .appointment-form-modal .quick-booking-disclaimer .disclaimer-text, .quick-booking-form-modal .quick-booking-disclaimer .disclaimer-text { font-size: 12px; } } @media (max-width: 480px) { .appointment-form-modal .quick-booking-disclaimer { margin-top: 10px; gap: 6px; } .appointment-form-modal .quick-booking-disclaimer .disclaimer-icon svg { width: 14px; height: 14px; } .appointment-form-modal .quick-booking-disclaimer .disclaimer-text { font-size: 11px; } } @media (max-width: 375px) { .appointment-form-modal .quick-booking-disclaimer .disclaimer-text { font-size: 10px; } } /* =========================================== GALLERY MODAL STYLES =========================================== */ .gallery-modal-content { position: relative; } .gallery-modal-content .gallery-slider { position: relative; } .gallery-modal-content .gallery-slide { display: none; text-align: center; } .gallery-modal-content .gallery-slide.active { display: block; } .gallery-modal-content .gallery-slide img { max-width: 100%; max-height: 70vh; -o-object-fit: contain; object-fit: contain; border-radius: 8px; -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .gallery-modal-content .gallery-caption { margin-top: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.9); border-radius: 8px; font-size: 0.875rem; color: #4a5568; max-width: 600px; margin-left: auto; margin-right: auto; } .gallery-modal-content .gallery-navigation { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 1.5rem; padding: 0 1rem; } .gallery-modal-content .gallery-navigation .gallery-nav { background: rgba(255, 255, 255, 0.9); border: none; width: 48px; height: 48px; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; color: #4a5568; } .gallery-modal-content .gallery-navigation .gallery-nav:hover { background: rgb(255, 255, 255); -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .gallery-modal-content .gallery-navigation .gallery-nav svg { width: 20px; height: 20px; } .gallery-modal-content .gallery-navigation .gallery-indicators { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0.5rem; } .gallery-modal-content .gallery-navigation .gallery-indicators .gallery-indicator { width: 12px; height: 12px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.5); cursor: pointer; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .gallery-modal-content .gallery-navigation .gallery-indicators .gallery-indicator.active { background: #007cba; -webkit-transform: scale(1.2); transform: scale(1.2); } .gallery-modal-content .gallery-navigation .gallery-indicators .gallery-indicator:hover { background: rgba(255, 255, 255, 0.8); } .gallery-modal-content .gallery-empty { text-align: center; padding: 3rem; color: #a0aec0; } .gallery-modal-content .gallery-empty .empty-icon { margin-bottom: 1rem; opacity: 0.5; } .gallery-modal-content .gallery-empty .empty-icon svg { width: 64px; height: 64px; } .gallery-modal-content .gallery-empty p { margin: 0; font-size: 1rem; } /* Mobile adjustments for gallery modal */ @media (max-width: 768px) { .gallery-modal-content .gallery-slide img { max-height: 60vh; } .gallery-modal-content .gallery-navigation { padding: 0 0.5rem; } .gallery-modal-content .gallery-navigation .gallery-nav { width: 40px; height: 40px; } .gallery-modal-content .gallery-navigation .gallery-nav svg { width: 16px; height: 16px; } .gallery-modal-content .gallery-caption { margin: 1rem 0.5rem 0; padding: 0.75rem; font-size: 0.8rem; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * Share Modal Styles * * @package One_Lab */ .share-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .share-modal.is-active { display: -webkit-box; display: -ms-flexbox; display: flex; opacity: 1; } .share-modal__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); } .share-modal__content { position: relative; background: #fff; border-radius: 12px; max-width: 400px; width: 90%; -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); -webkit-animation: share-modal-slide-up 0.3s ease; animation: share-modal-slide-up 0.3s ease; } .share-modal__header { padding: 24px; border-bottom: 1px solid #f0f0f0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .share-modal__title { margin: 0; font-size: 18px; font-weight: 600; color: #333; } .share-modal__close { background: none; border: none; cursor: pointer; padding: 0; color: #666; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .share-modal__close:hover { background: #f5f5f5; color: #333; } .share-modal__body { padding: 24px; } .share-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .share-option { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 12px; padding: 16px; border: 1px solid #e0e0e0; border-radius: 8px; background: #f9f9f9; text-decoration: none; color: #333; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; font-size: 12px; font-weight: 500; } .share-option:hover { border-color: #00704a; background: #f0f9f8; -webkit-transform: translateY(-2px); transform: translateY(-2px); } .share-option__icon { width: 48px; height: 48px; -o-object-fit: contain; object-fit: contain; } @media (max-width: 1023px) { .share-option__icon { width: 40px; height: 40px; } } @media (max-width: 768px) { .share-option__icon { width: 32px; height: 32px; } } .share-option__label { text-align: center; font-weight: 500; font-size: 12px; } .share-option--facebook:hover { border-color: #1877f2; background: #f0f5ff; } .share-option--facebook:hover .share-option__icon { -webkit-filter: drop-shadow(0 0 8px rgba(24, 119, 242, 0.3)); filter: drop-shadow(0 0 8px rgba(24, 119, 242, 0.3)); } .share-option--zalo:hover { border-color: #0084ff; background: #f0f7ff; } .share-option--zalo:hover .share-option__icon { -webkit-filter: drop-shadow(0 0 8px rgba(0, 132, 255, 0.3)); filter: drop-shadow(0 0 8px rgba(0, 132, 255, 0.3)); } .share-option--copy:hover { border-color: #00704a; background: #f0f9f8; } .share-option--copy:hover .share-option__icon { -webkit-filter: drop-shadow(0 0 8px rgba(0, 150, 109, 0.3)); filter: drop-shadow(0 0 8px rgba(0, 150, 109, 0.3)); } @-webkit-keyframes share-modal-slide-up { from { -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes share-modal-slide-up { from { -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @media (max-width: 768px) { .share-modal__content { max-width: 360px; width: 336px; } .share-modal__header { padding: 18px; } .share-modal__body { padding: 18px; } .share-options { gap: 12px; } .share-option { padding: 12px; font-size: 11px; } .share-option__icon { width: 40px; height: 40px; } } @media (max-width: 480px) { .share-modal__header { padding: 16px; } .share-modal__body { padding: 16px; } .share-options { gap: 10px; } .share-option { padding: 10px; font-size: 10px; } .share-option__icon { width: 36px; height: 36px; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * Share Toast Notification Styles * * @package One_Lab */ .share-toast { position: fixed; bottom: 20px; left: 20px; right: 20px; max-width: 300px; margin: 0 auto; background: #333; color: #fff; padding: 12px 16px; border-radius: 6px; font-size: 14px; z-index: 2000; opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } @media screen and (max-width: 1770px) { .share-toast { bottom: 18px; left: 18px; right: 18px; max-width: 270px; padding: 11px 15px; font-size: 13px; } } @media screen and (max-width: 1440px) { .share-toast { bottom: 16px; left: 16px; right: 16px; max-width: 240px; padding: 10px 14px; font-size: 13px; } } @media screen and (max-width: 1200px) { .share-toast { bottom: 14px; left: 14px; right: 14px; max-width: 210px; padding: 9px 12px; font-size: 12px; } } @media screen and (max-width: 992px) { .share-toast { bottom: 12px; left: 12px; right: 12px; max-width: 180px; padding: 8px 11px; font-size: 12px; } } @media screen and (max-width: 768px) { .share-toast { bottom: 14px; left: 14px; right: 14px; max-width: 210px; padding: 9px 12px; font-size: 13px; } } @media screen and (max-width: 640px) { .share-toast { bottom: 12px; left: 12px; right: 12px; max-width: 180px; padding: 8px 10px; font-size: 12px; border-radius: 5px; } } @media screen and (max-width: 480px) { .share-toast { bottom: 14px; left: 10px; right: 10px; max-width: none; padding: 10px 12px; font-size: 12px; border-radius: 5px; } } .share-toast.is-visible { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .share-toast__content { text-align: center; font-weight: 500; } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /* =========================================== ROLE SELECTION MODAL STYLES Modal popup để user chọn role khi lần đầu truy cập Style tương tự appointment-success-modal =========================================== */ #role-selection-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } #role-selection-modal.active { opacity: 1; display: -webkit-box; display: -ms-flexbox; display: flex; } #role-selection-modal .onelab-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 1; background-image: url("/wp-content/themes/one-lab/assets/images/popup-role-selection.webp"); background-repeat: no-repeat; background-position: center; background-size: cover; } #role-selection-modal .onelab-modal-overlay::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.48); } #role-selection-modal .onelab-modal-container { position: relative; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; padding: 20px; } @media screen and (max-width: 1770px) { #role-selection-modal .onelab-modal-container { padding: 18px; } } @media screen and (max-width: 1440px) { #role-selection-modal .onelab-modal-container { padding: 16px; } } @media screen and (max-width: 1200px) { #role-selection-modal .onelab-modal-container { padding: 14px; } } @media screen and (max-width: 992px) { #role-selection-modal .onelab-modal-container { padding: 12px; } } .onelab-modal .role-selection-modal-content { position: relative; padding: 74px 74px 94px 74px !important; background: #fff; border-radius: 12px; overflow: hidden; max-width: 718px; width: 100%; -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.16); -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0; -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); transition: opacity 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } @media screen and (max-width: 1770px) { .onelab-modal .role-selection-modal-content { max-width: 646px; padding: 67px 67px 85px 67px !important; } } @media screen and (max-width: 1440px) { .onelab-modal .role-selection-modal-content { max-width: 574px; padding: 59px 59px 75px 59px !important; } } @media screen and (max-width: 1200px) { .onelab-modal .role-selection-modal-content { max-width: 503px; padding: 52px 52px 66px 52px !important; } } @media screen and (max-width: 992px) { .onelab-modal .role-selection-modal-content { max-width: 431px; padding: 44px 44px 56px 44px !important; } } @media screen and (max-width: 768px) { .onelab-modal .role-selection-modal-content { padding: 36px 36px 46px 36px !important; } } @media screen and (max-width: 640px) { .onelab-modal .role-selection-modal-content { padding: 32px 32px 42px 32px !important; } } @media screen and (max-width: 480px) { .onelab-modal .role-selection-modal-content { padding: 28px 28px 38px 28px !important; } } #role-selection-modal.active .role-selection-modal-content { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } #role-selection-modal.active .role-selection-modal-content::before { content: ""; position: absolute; top: -32px; right: 0; width: 400px; height: 400px; background-image: url("/wp-content/themes/one-lab/assets/images/success-bgr.webp"); background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; z-index: 0; } @media screen and (max-width: 1770px) { #role-selection-modal.active .role-selection-modal-content::before { width: 360px; height: 360px; top: -29px; } } @media screen and (max-width: 1440px) { #role-selection-modal.active .role-selection-modal-content::before { width: 320px; height: 320px; top: -26px; } } @media screen and (max-width: 1200px) { #role-selection-modal.active .role-selection-modal-content::before { width: 280px; height: 280px; top: -22px; } } @media screen and (max-width: 992px) { #role-selection-modal.active .role-selection-modal-content::before { width: 240px; height: 240px; top: -19px; } } .role-selection-modal-logo { position: relative; z-index: 1; width: 204px; height: 47px; margin: 0 auto 53px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .role-selection-modal-logo svg { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 1770px) { .role-selection-modal-logo { width: 184px; height: 42px; margin-bottom: 48px; } } @media screen and (max-width: 1440px) { .role-selection-modal-logo { width: 163px; height: 38px; margin-bottom: 42px; } } @media screen and (max-width: 1200px) { .role-selection-modal-logo { width: 143px; height: 33px; margin-bottom: 37px; } } @media screen and (max-width: 992px) { .role-selection-modal-logo { width: 122px; height: 28px; margin-bottom: 32px; } } .role-selection-modal-body { text-align: center; position: relative; z-index: 1; padding: 0 24px; } .role-selection-modal-body .role-selection-modal-title { font-size: 28px; font-weight: 700; color: #00704a; margin: 0 0 8px; font-family: "Montserrat", sans-serif; line-height: 150%; } @media screen and (max-width: 1770px) { .role-selection-modal-body .role-selection-modal-title { font-size: 24px; margin-bottom: 7px; } } @media screen and (max-width: 1440px) { .role-selection-modal-body .role-selection-modal-title { font-size: 21px; margin-bottom: 6px; } } @media screen and (max-width: 1200px) { .role-selection-modal-body .role-selection-modal-title { font-size: 20px; margin-bottom: 5px; } } @media screen and (max-width: 992px) { .role-selection-modal-body .role-selection-modal-title { font-size: 18px; margin-bottom: 4px; } } .role-selection-modal-body .role-selection-modal-message { font-size: 16px; color: #000; line-height: 150%; font-family: "Be Vietnam Pro", sans-serif; margin: 0; } @media screen and (max-width: 1770px) { .role-selection-modal-body .role-selection-modal-message { font-size: 14px; } } @media screen and (max-width: 1440px) { .role-selection-modal-body .role-selection-modal-message { font-size: 12px; } } @media screen and (max-width: 1200px) { .role-selection-modal-body .role-selection-modal-message { font-size: 14px; } } @media screen and (max-width: 992px) { .role-selection-modal-body .role-selection-modal-message { font-size: 13px; } } .role-selection-modal-footer { padding: 0; position: relative; z-index: 1; margin-top: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 20px; } @media screen and (max-width: 1770px) { .role-selection-modal-footer { margin-top: 29px; gap: 18px; } } @media screen and (max-width: 1440px) { .role-selection-modal-footer { margin-top: 26px; gap: 16px; } } @media screen and (max-width: 1200px) { .role-selection-modal-footer { margin-top: 22px; gap: 14px; } } @media screen and (max-width: 992px) { .role-selection-modal-footer { margin-top: 19px; gap: 12px; } } .role-selection-modal-footer .btn-role-selection { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 72px; font-size: 16px; font-weight: 600; line-height: 1; font-family: "Montserrat", sans-serif; text-decoration: none; border-radius: 8px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; text-transform: uppercase; border: none; outline: none; cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; } .role-selection-modal-footer .btn-role-selection:focus { outline: none; } .role-selection-modal-footer .btn-role-selection:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); opacity: 0.8; } .role-selection-modal-footer .btn-role-selection:active { -webkit-transform: translateY(0); transform: translateY(0); } @media screen and (max-width: 1770px) { .role-selection-modal-footer .btn-role-selection { height: 65px; font-size: 14px; } } @media screen and (max-width: 1440px) { .role-selection-modal-footer .btn-role-selection { height: 58px; font-size: 13px; } } @media screen and (max-width: 1200px) { .role-selection-modal-footer .btn-role-selection { height: 50px; font-size: 12px; } } @media screen and (max-width: 992px) { .role-selection-modal-footer .btn-role-selection { height: 43px; font-size: 12px; } } .role-selection-modal-footer .btn-role-selection--partner { background-color: #00704a; color: #fff; border: 1px solid #00704a; text-shadow: 0 1px 2px rgba(0, 112, 74, 0.4); } .role-selection-modal-footer .btn-role-selection--partner:hover { -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.4); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.4); } .role-selection-modal-footer .btn-role-selection--retail { background-color: transparent; color: #00704a; border: 1px solid #00704a; } .role-selection-modal-footer .btn-role-selection--retail:hover { background-color: rgba(0, 112, 74, 0.05); -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.2); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.2); } @media screen and (max-width: 768px) { #role-selection-modal .onelab-modal-container { padding: 16px; } .role-selection-modal-content { max-width: 90%; margin: 20px auto; padding: 0 !important; } .role-selection-modal-content::before { width: 300px !important; height: 300px !important; top: -20px !important; right: -10px !important; } .role-selection-modal-logo { width: 160px; height: 37px; margin: 0 auto 32px; } .role-selection-modal-body { padding: 0; } .role-selection-modal-body .role-selection-modal-title { font-size: 20px; margin-bottom: 5px; } .role-selection-modal-body .role-selection-modal-message { font-size: 15px; margin-bottom: 20px; } .role-selection-modal-footer { margin-top: 20px; padding: 0; gap: 14px; } .role-selection-modal-footer .btn-role-selection { height: 56px; font-size: 15px; padding: 16px; } } @media screen and (max-width: 640px) { #role-selection-modal .onelab-modal-container { padding: 10px; } .role-selection-modal-content { max-width: 92%; margin: 18px auto; } .role-selection-modal-content::before { width: 280px !important; height: 280px !important; top: -18px !important; right: -8px !important; } .role-selection-modal-logo { width: 150px; height: 35px; margin: 0 auto 28px; } .role-selection-modal-body { padding: 0; } .role-selection-modal-body .role-selection-modal-title { font-size: 19px; margin-bottom: 5px; } .role-selection-modal-body .role-selection-modal-message { font-size: 15px; margin-bottom: 18px; } .role-selection-modal-footer { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 18px; padding: 0; gap: 12px; } .role-selection-modal-footer .btn-role-selection { width: 100%; height: 52px; font-size: 14px; padding: 15px; } } @media screen and (max-width: 480px) { #role-selection-modal .onelab-modal-container { padding: 12px; } .role-selection-modal-content { max-width: 95%; margin: 16px auto; } .role-selection-modal-content::before { width: 250px !important; height: 250px !important; top: -15px !important; right: -5px !important; } .role-selection-modal-logo { width: 140px; height: 32px; margin: 0 auto 24px; } .role-selection-modal-body { padding: 0; } .role-selection-modal-body .role-selection-modal-title { font-size: 18px; margin-bottom: 4px; } .role-selection-modal-body .role-selection-modal-message { font-size: 14px; margin-bottom: 16px; line-height: 1.5; } .role-selection-modal-footer { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 16px; padding: 0; gap: 10px; } .role-selection-modal-footer .btn-role-selection { width: 100%; height: 48px; font-size: 14px; padding: 14px; } } @media screen and (max-width: 375px) { .role-selection-modal-content { max-width: 98%; margin: 12px auto; } .role-selection-modal-content::before { width: 200px !important; height: 200px !important; top: -10px !important; right: 0 !important; } .role-selection-modal-logo { width: 120px; height: 28px; margin: 0 auto 20px; } .role-selection-modal-body { padding: 0; } .role-selection-modal-body .role-selection-modal-title { font-size: 16px; margin-bottom: 4px; } .role-selection-modal-body .role-selection-modal-message { font-size: 13px; margin-bottom: 14px; } .role-selection-modal-footer { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 14px; padding: 0; gap: 8px; } .role-selection-modal-footer .btn-role-selection { width: 100%; height: 44px; font-size: 13px; } } body.role-modal-open { overflow: hidden; padding-right: 15px; } @media screen and (max-width: 768px) { body.role-modal-open { position: fixed; width: 100%; } } @media (prefers-reduced-motion: reduce) { .role-selection-modal-content, .btn-role-selection { -webkit-transition: none; transition: none; -webkit-animation: none; animation: none; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /* =========================================== B2C HOME SAMPLING FORM MODAL STYLES Styles for home sampling booking modal (B2C) =========================================== */ .modal-b2c-home-sampling .onelab-modal-content { max-width: 540px; border-radius: 16px; position: relative; overflow-x: hidden; } .modal-b2c-home-sampling .onelab-modal-close { position: absolute; top: 20px; right: 20px; background: none; border: none; cursor: pointer; padding: 0; width: 32px; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; z-index: 10; } .modal-b2c-home-sampling .onelab-modal-close svg { width: 24px; height: 24px; display: block; } .modal-b2c-home-sampling .onelab-modal-close path { fill: #312020; -webkit-transition: fill 0.2s ease; transition: fill 0.2s ease; } .modal-b2c-home-sampling .onelab-modal-close:hover { opacity: 0.7; background-color: rgba(0, 0, 0, 0.05); border-radius: 4px; } .modal-b2c-home-sampling .onelab-modal-close:hover path { fill: #00704a; } .modal-b2c-home-sampling .onelab-modal-header { padding: 24px 24px 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; border-bottom: none; } .modal-b2c-home-sampling .onelab-modal-header .onelab-modal-title { font-size: 20px; font-weight: 600; color: #312020; margin: 0; font-family: "Montserrat", sans-serif; } .modal-b2c-home-sampling .onelab-modal-body { padding: 0 24px; max-height: 60vh; overflow-y: auto; } @media screen and (max-width: 768px) { .modal-b2c-home-sampling .onelab-modal-body { max-height: 55vh; } } .modal-b2c-home-sampling .onelab-modal-footer { padding: 20px 24px 24px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; -webkit-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; } .modal-b2c-home-sampling .onelab-modal-footer .onelab-modal-btn { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 14px 20px; font-size: 14px; font-weight: 600; border-radius: 8px; border: 1px solid; cursor: pointer; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; text-transform: uppercase; letter-spacing: 0.3px; font-family: "Be Vietnam Pro", sans-serif; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; text-decoration: none; } .modal-b2c-home-sampling .onelab-modal-footer .onelab-modal-btn.btn-book-direct-hs { background-color: #ffffff; color: #00704a; border-color: #00704a; } .modal-b2c-home-sampling .onelab-modal-footer .onelab-modal-btn.btn-book-direct-hs:hover:not(:disabled) { background-color: #00704a; color: #ffffff; } .modal-b2c-home-sampling .onelab-modal-footer .onelab-modal-btn.btn-book-home-sampling { background-color: #00704a; color: #ffffff; border-color: #00704a; } .modal-b2c-home-sampling .onelab-modal-footer .onelab-modal-btn.btn-book-home-sampling:hover:not(:disabled) { background-color: rgba(0, 112, 74, 0.05); } .modal-b2c-home-sampling .onelab-modal-footer .onelab-modal-btn.btn-book-home-sampling.is-loading { pointer-events: none; opacity: 0.7; } .modal-b2c-home-sampling .onelab-modal-footer .onelab-modal-btn:disabled { opacity: 0.5; cursor: not-allowed; } .b2c-home-sampling-form-modal .onelab-form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0; } .b2c-home-sampling-form-modal .onelab-form__message { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; } .b2c-home-sampling-form-modal .onelab-form__message.is-error { background-color: #fef2f2; color: #dc2626; border: 1px solid #fecaca; } .b2c-home-sampling-form-modal .onelab-form__message.is-success { background-color: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; } .b2c-home-sampling-form-modal .form-section { margin-bottom: 16px; } .b2c-home-sampling-form-modal .form-section:last-child { margin-bottom: 0; } .b2c-home-sampling-form-modal .form-section-title { font-size: 14px; font-weight: 600; color: #312020; margin: 0 0 12px 0; font-family: "Montserrat", sans-serif; } .b2c-home-sampling-form-modal .form-group { margin-bottom: 16px; } .b2c-home-sampling-form-modal .form-group:last-child { margin-bottom: 0; } .b2c-home-sampling-form-modal .form-group label { display: block; font-size: 18px; font-weight: 500; color: #312020; margin-bottom: 6px; } .b2c-home-sampling-form-modal .form-group label .required { color: #dc2626; margin-left: 2px; } .b2c-home-sampling-form-modal .form-group input[type=text], .b2c-home-sampling-form-modal .form-group input[type=tel], .b2c-home-sampling-form-modal .form-group input[type=email], .b2c-home-sampling-form-modal .form-group textarea, .b2c-home-sampling-form-modal .form-group select { width: 100%; padding: 12px 16px; font-size: 16px; color: #312020; background-color: #ffffff; border: 1px solid #d1d5db; border-radius: 8px; -webkit-transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease; transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease; transition: border-color 0.2s ease, box-shadow 0.2s ease; transition: border-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease; font-family: "Be Vietnam Pro", sans-serif; -webkit-box-sizing: border-box; box-sizing: border-box; } .b2c-home-sampling-form-modal .form-group input[type=text]::-webkit-input-placeholder, .b2c-home-sampling-form-modal .form-group input[type=tel]::-webkit-input-placeholder, .b2c-home-sampling-form-modal .form-group input[type=email]::-webkit-input-placeholder, .b2c-home-sampling-form-modal .form-group textarea::-webkit-input-placeholder, .b2c-home-sampling-form-modal .form-group select::-webkit-input-placeholder { color: #9ca3af; } .b2c-home-sampling-form-modal .form-group input[type=text]::-moz-placeholder, .b2c-home-sampling-form-modal .form-group input[type=tel]::-moz-placeholder, .b2c-home-sampling-form-modal .form-group input[type=email]::-moz-placeholder, .b2c-home-sampling-form-modal .form-group textarea::-moz-placeholder, .b2c-home-sampling-form-modal .form-group select::-moz-placeholder { color: #9ca3af; } .b2c-home-sampling-form-modal .form-group input[type=text]:-ms-input-placeholder, .b2c-home-sampling-form-modal .form-group input[type=tel]:-ms-input-placeholder, .b2c-home-sampling-form-modal .form-group input[type=email]:-ms-input-placeholder, .b2c-home-sampling-form-modal .form-group textarea:-ms-input-placeholder, .b2c-home-sampling-form-modal .form-group select:-ms-input-placeholder { color: #9ca3af; } .b2c-home-sampling-form-modal .form-group input[type=text]::-ms-input-placeholder, .b2c-home-sampling-form-modal .form-group input[type=tel]::-ms-input-placeholder, .b2c-home-sampling-form-modal .form-group input[type=email]::-ms-input-placeholder, .b2c-home-sampling-form-modal .form-group textarea::-ms-input-placeholder, .b2c-home-sampling-form-modal .form-group select::-ms-input-placeholder { color: #9ca3af; } .b2c-home-sampling-form-modal .form-group input[type=text]::placeholder, .b2c-home-sampling-form-modal .form-group input[type=tel]::placeholder, .b2c-home-sampling-form-modal .form-group input[type=email]::placeholder, .b2c-home-sampling-form-modal .form-group textarea::placeholder, .b2c-home-sampling-form-modal .form-group select::placeholder { color: #9ca3af; } .b2c-home-sampling-form-modal .form-group input[type=text]:focus, .b2c-home-sampling-form-modal .form-group input[type=tel]:focus, .b2c-home-sampling-form-modal .form-group input[type=email]:focus, .b2c-home-sampling-form-modal .form-group textarea:focus, .b2c-home-sampling-form-modal .form-group select:focus { outline: none; border-color: #00704a; -webkit-box-shadow: 0 0 0 3px rgba(0, 112, 74, 0.1); box-shadow: 0 0 0 3px rgba(0, 112, 74, 0.1); } .b2c-home-sampling-form-modal .form-group input[type=text].is-error, .b2c-home-sampling-form-modal .form-group input[type=tel].is-error, .b2c-home-sampling-form-modal .form-group input[type=email].is-error, .b2c-home-sampling-form-modal .form-group textarea.is-error, .b2c-home-sampling-form-modal .form-group select.is-error { border-color: #dc2626; } .b2c-home-sampling-form-modal .form-group input[type=text].is-error:focus, .b2c-home-sampling-form-modal .form-group input[type=tel].is-error:focus, .b2c-home-sampling-form-modal .form-group input[type=email].is-error:focus, .b2c-home-sampling-form-modal .form-group textarea.is-error:focus, .b2c-home-sampling-form-modal .form-group select.is-error:focus { -webkit-box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); } .b2c-home-sampling-form-modal .form-group textarea { resize: vertical; min-height: 80px; } .b2c-home-sampling-form-modal .form-group .onelab-form__error { display: block; font-size: 12px; color: #dc2626; margin-top: 4px; opacity: 0; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .b2c-home-sampling-form-modal .form-group .onelab-form__error.is-visible { opacity: 1; } .b2c-home-sampling-form-modal .hs-select-wrapper { position: relative; } .b2c-home-sampling-form-modal .hs-select-wrapper .hs-form-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; padding: 12px 48px 12px 16px; font-size: 14px; color: #312020; background-color: #ffffff; border: 1px solid #d1d5db; border-radius: 8px; -webkit-transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease; transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease; transition: border-color 0.2s ease, box-shadow 0.2s ease; transition: border-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease; font-family: "Be Vietnam Pro", sans-serif; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; } .b2c-home-sampling-form-modal .hs-select-wrapper .hs-form-select::-webkit-input-placeholder { color: #9ca3af; } .b2c-home-sampling-form-modal .hs-select-wrapper .hs-form-select::-moz-placeholder { color: #9ca3af; } .b2c-home-sampling-form-modal .hs-select-wrapper .hs-form-select:-ms-input-placeholder { color: #9ca3af; } .b2c-home-sampling-form-modal .hs-select-wrapper .hs-form-select::-ms-input-placeholder { color: #9ca3af; } .b2c-home-sampling-form-modal .hs-select-wrapper .hs-form-select::placeholder { color: #9ca3af; } .b2c-home-sampling-form-modal .hs-select-wrapper .hs-form-select:focus { outline: none; border-color: #00704a; -webkit-box-shadow: 0 0 0 3px rgba(0, 112, 74, 0.1); box-shadow: 0 0 0 3px rgba(0, 112, 74, 0.1); } .b2c-home-sampling-form-modal .hs-select-wrapper .hs-form-select.is-error { border-color: #dc2626; } .b2c-home-sampling-form-modal .hs-select-wrapper.is-error .hs-form-select { border-color: #dc2626; } .b2c-home-sampling-form-modal .select-wrapper { position: relative; } .b2c-home-sampling-form-modal .select-wrapper select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 40px; cursor: pointer; } .b2c-home-sampling-form-modal .select-wrapper::after { content: ""; position: absolute; right: 16px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #312020; pointer-events: none; } .b2c-home-sampling-form-modal .select-wrapper.is-error select { border-color: #dc2626; } .b2c-home-sampling-form-modal .date-input-wrapper { position: relative; } .b2c-home-sampling-form-modal .date-input-wrapper--with-picker input { padding-right: 44px; cursor: pointer; } .b2c-home-sampling-form-modal .date-input-wrapper .date-picker-icon { position: absolute; right: 12px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 20px; height: 20px; color: #6b7280; pointer-events: none; } .b2c-home-sampling-form-modal .date-input-wrapper .date-picker-icon svg { width: 100%; height: 100%; } .b2c-home-sampling-form-modal .date-input-wrapper.is-error input { border-color: #dc2626; } .b2c-home-sampling-form-modal .hs-time-slots-container { margin-top: 12px; } .b2c-home-sampling-form-modal .hs-time-slots-grid { display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); gap: 8px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } @media (max-width: 1248px) { .b2c-home-sampling-form-modal .hs-time-slots-grid { gap: 6px; grid-template-columns: repeat(3, minmax(70px, 1fr)); } } @media (max-width: 768px) { .b2c-home-sampling-form-modal .hs-time-slots-grid { gap: 6px; grid-template-columns: repeat(3, minmax(70px, 1fr)); } } @media (max-width: 480px) { .b2c-home-sampling-form-modal .hs-time-slots-grid { gap: 6px; grid-template-columns: repeat(2, minmax(60px, 1fr)); } } .b2c-home-sampling-form-modal .hs-time-slot { padding: 10px 8px; border: none; border-radius: 8px; font-size: 14px; font-weight: 400; font-family: "Be Vietnam Pro", sans-serif; cursor: pointer; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; background-color: #d9f1e9; color: #090d14; } .b2c-home-sampling-form-modal .hs-time-slot:hover:not(.hs-time-slot--disabled):not(.hs-time-slot--booked) { background-color: #00704a; color: #fff; } .b2c-home-sampling-form-modal .hs-time-slot--selected { background-color: #00704a; color: #fff; font-weight: 500; } .b2c-home-sampling-form-modal .hs-time-slot--selected:hover { background-color: #00704a; color: #fff; } .b2c-home-sampling-form-modal .hs-time-slot--booked, .b2c-home-sampling-form-modal .hs-time-slot--disabled { background-color: #f2f2f2; color: #acacac; cursor: not-allowed; } .b2c-home-sampling-form-modal .hs-time-slot--booked:hover, .b2c-home-sampling-form-modal .hs-time-slot--disabled:hover { background-color: #f2f2f2; color: #acacac; } @media (max-width: 768px) { .b2c-home-sampling-form-modal .hs-time-slot { font-size: 13px; padding: 8px 5px; min-height: 36px; border-radius: 16px; } } @media (max-width: 480px) { .b2c-home-sampling-form-modal .hs-time-slot { font-size: 12px; padding: 8px 4px; min-height: 36px; } } .b2c-home-sampling-form-modal .time-slots-container { margin-top: 16px; padding: 16px; background-color: #f9fafb; border-radius: 8px; } .b2c-home-sampling-form-modal .time-slots-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } @media screen and (max-width: 480px) { .b2c-home-sampling-form-modal .time-slots-grid { grid-template-columns: repeat(3, 1fr); } } .b2c-home-sampling-form-modal .time-slots-grid.is-error .time-slot:not(.time-slot-disabled) { border-color: #dc2626; } .b2c-home-sampling-form-modal .time-slot { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 8px 4px; background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 12px; font-weight: 500; color: #312020; cursor: pointer; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; font-family: "Be Vietnam Pro", sans-serif; } .b2c-home-sampling-form-modal .time-slot:hover:not(.time-slot-disabled) { border-color: #00704a; background-color: rgba(0, 112, 74, 0.05); } .b2c-home-sampling-form-modal .time-slot.time-slot-selected { background-color: #00704a; border-color: #00704a; color: #ffffff; } .b2c-home-sampling-form-modal .time-slot.time-slot-disabled { opacity: 0.4; cursor: not-allowed; background-color: #f3f4f6; } .b2c-home-sampling-form-modal .time-slot.time-slot-booked { text-decoration: line-through; } .b2c-home-sampling-form-modal .time-slot .time-slot__time { white-space: nowrap; } .b2c-home-sampling-form-modal .home-sampling-disclaimer { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; border-radius: 8px; margin-top: 16px; } .b2c-home-sampling-form-modal .home-sampling-disclaimer .disclaimer-icon { -ms-flex-negative: 0; flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; } .b2c-home-sampling-form-modal .home-sampling-disclaimer .disclaimer-icon img { width: 100%; height: 100%; } .b2c-home-sampling-form-modal .home-sampling-disclaimer .disclaimer-text { font-size: 12px; color: #6b7280; line-height: 1.5; } .b2c-home-sampling-form-modal .home-sampling-disclaimer .disclaimer-text .disclaimer-link { color: #00704a; text-decoration: underline; } .b2c-home-sampling-form-modal .home-sampling-disclaimer .disclaimer-text .disclaimer-link:hover { text-decoration: none; } .modal-b2c-home-sampling-success .onelab-modal-content { max-width: 400px; text-align: center; padding: 32px; } .modal-b2c-home-sampling-success .success-icon { width: 64px; height: 64px; margin: 0 auto 16px; background-color: rgba(0, 112, 74, 0.1); border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .modal-b2c-home-sampling-success .success-icon svg { width: 32px; height: 32px; color: #00704a; } .modal-b2c-home-sampling-success .success-title { font-size: 18px; font-weight: 600; color: #312020; margin: 0 0 8px 0; } .modal-b2c-home-sampling-success .success-message { font-size: 14px; color: #6b7280; margin: 0 0 24px 0; line-height: 1.5; } .modal-b2c-home-sampling-success .btn-close { background-color: #00704a; color: #ffffff; border: none; padding: 12px 32px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; } .modal-b2c-home-sampling-success .btn-close:hover { background-color: rgba(0, 112, 74, 0.05); } .b2c-home-sampling-form-modal .flatpickr-calendar { border-radius: 12px; -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); border: none; } .b2c-home-sampling-form-modal .flatpickr-calendar.arrowTop::before, .b2c-home-sampling-form-modal .flatpickr-calendar.arrowTop::after { display: none; } .b2c-home-sampling-form-modal .flatpickr-months { padding: 8px; } .b2c-home-sampling-form-modal .flatpickr-months .flatpickr-month { height: 40px; } .b2c-home-sampling-form-modal .flatpickr-months .flatpickr-prev-month, .b2c-home-sampling-form-modal .flatpickr-months .flatpickr-next-month { padding: 8px; border-radius: 6px; -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; } .b2c-home-sampling-form-modal .flatpickr-months .flatpickr-prev-month:hover, .b2c-home-sampling-form-modal .flatpickr-months .flatpickr-next-month:hover { background-color: rgba(0, 112, 74, 0.1); } .b2c-home-sampling-form-modal .flatpickr-months .flatpickr-prev-month:hover svg, .b2c-home-sampling-form-modal .flatpickr-months .flatpickr-next-month:hover svg { fill: #00704a; } .b2c-home-sampling-form-modal .flatpickr-months .flatpickr-current-month { font-size: 14px; font-weight: 600; } .b2c-home-sampling-form-modal .flatpickr-months .flatpickr-current-month .cur-month, .b2c-home-sampling-form-modal .flatpickr-months .flatpickr-current-month .cur-year { font-weight: 600; } .b2c-home-sampling-form-modal .flatpickr-months .flatpickr-current-month select.cur-month, .b2c-home-sampling-form-modal .flatpickr-months .flatpickr-current-month .numInputWrapper { background: #f3f4f6; border-radius: 6px; padding: 4px 8px; } .b2c-home-sampling-form-modal .flatpickr-weekdays { background: transparent; padding: 8px 0; } .b2c-home-sampling-form-modal .flatpickr-weekday { font-size: 12px; font-weight: 600; color: #6b7280; } .b2c-home-sampling-form-modal .flatpickr-days { padding: 0 8px 8px; } .b2c-home-sampling-form-modal .flatpickr-day { border-radius: 6px; font-size: 13px; font-weight: 500; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .b2c-home-sampling-form-modal .flatpickr-day:hover { background-color: rgba(0, 112, 74, 0.1); border-color: transparent; } .b2c-home-sampling-form-modal .flatpickr-day.today { border-color: #00704a; } .b2c-home-sampling-form-modal .flatpickr-day.selected { background-color: #00704a; border-color: #00704a; } .b2c-home-sampling-form-modal .flatpickr-day.selected:hover { background-color: rgba(0, 112, 74, 0.05); } .b2c-home-sampling-form-modal .flatpickr-day.disabled, .b2c-home-sampling-form-modal .flatpickr-day.disabled:hover { color: #d1d5db; background: transparent; } .b2c-home-sampling-form-modal .flatpickr-today-button { display: block; width: calc(100% - 16px); margin: 0 8px 8px; padding: 10px 16px; background-color: #00704a; color: #ffffff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; } .b2c-home-sampling-form-modal .flatpickr-today-button:hover { background-color: rgba(0, 112, 74, 0.05); } /* =========================================== MODAL SYSTEM - OneLab Theme =========================================== */ /* Base Modal Styles =========================================== */ .onelab-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; outline: 0; } .onelab-modal .onelab-modal-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.48); } .onelab-modal .onelab-modal-content { position: relative; width: 100%; max-height: 90vh; overflow-y: auto; background-color: #ffffff; border-radius: 8px; -webkit-box-shadow: 0 10px 40px rgba(49, 32, 32, 0.3); box-shadow: 0 10px 40px rgba(49, 32, 32, 0.3); -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0; -webkit-transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .onelab-modal .onelab-modal-header { height: 77px; padding: 36px 36px 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 1770px) { .onelab-modal .onelab-modal-header { height: 68px; padding: 32px 32px 14px; } } @media screen and (max-width: 1440px) { .onelab-modal .onelab-modal-header { height: auto; padding: 28px 28px 12px; } } @media screen and (max-width: 1200px) { .onelab-modal .onelab-modal-header { padding: 24px 24px 11px; } } @media screen and (max-width: 992px) { .onelab-modal .onelab-modal-header { padding: 20px 20px 10px; } } @media screen and (max-width: 768px) { .onelab-modal .onelab-modal-header { padding: 16px 16px 8px; } } @media screen and (max-width: 640px) { .onelab-modal .onelab-modal-header { padding: 14px 14px 7px; } } @media screen and (max-width: 480px) { .onelab-modal .onelab-modal-header { padding: 12px 12px 6px; } } .onelab-modal .onelab-modal-header .onelab-modal-title { margin: 0; font-size: 20px; font-weight: 700; color: #312020; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 1770px) { .onelab-modal .onelab-modal-header .onelab-modal-title { font-size: 18px; } } @media screen and (max-width: 1440px) { .onelab-modal .onelab-modal-header .onelab-modal-title { font-size: 17px; } } @media screen and (max-width: 1200px) { .onelab-modal .onelab-modal-header .onelab-modal-title { font-size: 16px; } } @media screen and (max-width: 992px) { .onelab-modal .onelab-modal-header .onelab-modal-title { font-size: 15px; } } @media screen and (max-width: 768px) { .onelab-modal .onelab-modal-header .onelab-modal-title { font-size: 14px; } } @media screen and (max-width: 640px) { .onelab-modal .onelab-modal-header .onelab-modal-title { font-size: 13px; } } @media screen and (max-width: 480px) { .onelab-modal .onelab-modal-header .onelab-modal-title { font-size: 12px; } } .onelab-modal .onelab-modal-header .onelab-modal-close { width: 36px; height: 36px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: none; border: none; cursor: pointer; border-radius: 8px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; outline: none; padding: 6px; -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (max-width: 1770px) { .onelab-modal .onelab-modal-header .onelab-modal-close { width: 32px; height: 32px; padding: 5px; border-radius: 7px; } } @media screen and (max-width: 1440px) { .onelab-modal .onelab-modal-header .onelab-modal-close { width: 28px; height: 28px; padding: 4px; border-radius: 6px; } } @media screen and (max-width: 1200px) { .onelab-modal .onelab-modal-header .onelab-modal-close { width: 24px; height: 24px; padding: 3px; border-radius: 5px; } } @media screen and (max-width: 992px) { .onelab-modal .onelab-modal-header .onelab-modal-close { width: 20px; height: 20px; padding: 2px; border-radius: 4px; } } @media screen and (max-width: 768px) { .onelab-modal .onelab-modal-header .onelab-modal-close { width: 18px; height: 18px; padding: 2px; border-radius: 4px; } } @media screen and (max-width: 640px) { .onelab-modal .onelab-modal-header .onelab-modal-close { width: 16px; height: 16px; padding: 1px; border-radius: 3px; } } @media screen and (max-width: 480px) { .onelab-modal .onelab-modal-header .onelab-modal-close { width: 14px; height: 14px; padding: 1px; border-radius: 3px; } } .onelab-modal .onelab-modal-header .onelab-modal-close:hover { background-color: rgba(0, 0, 0, 0.05); color: #312020; } .onelab-modal .onelab-modal-header .onelab-modal-close:focus { outline: none; } .onelab-modal .onelab-modal-body { padding: 32px 36px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } @media screen and (max-width: 1770px) { .onelab-modal .onelab-modal-body { padding: 28px 32px; } } @media screen and (max-width: 1440px) { .onelab-modal .onelab-modal-body { padding: 24px 28px; } } @media screen and (max-width: 1200px) { .onelab-modal .onelab-modal-body { padding: 20px 24px; } } @media screen and (max-width: 992px) { .onelab-modal .onelab-modal-body { padding: 16px 20px; } } @media screen and (max-width: 768px) { .onelab-modal .onelab-modal-body { padding: 14px 16px; } } @media screen and (max-width: 640px) { .onelab-modal .onelab-modal-body { padding: 12px 14px; } } @media screen and (max-width: 480px) { .onelab-modal .onelab-modal-body { padding: 10px 12px; } } .onelab-modal .onelab-modal-body .modal-loading { text-align: center; padding: 32px 0; } @media screen and (max-width: 1770px) { .onelab-modal .onelab-modal-body .modal-loading { padding: 28px 0; } } @media screen and (max-width: 1440px) { .onelab-modal .onelab-modal-body .modal-loading { padding: 24px 0; } } @media screen and (max-width: 1200px) { .onelab-modal .onelab-modal-body .modal-loading { padding: 20px 0; } } @media screen and (max-width: 992px) { .onelab-modal .onelab-modal-body .modal-loading { padding: 16px 0; } } @media screen and (max-width: 768px) { .onelab-modal .onelab-modal-body .modal-loading { padding: 14px 0; } } @media screen and (max-width: 640px) { .onelab-modal .onelab-modal-body .modal-loading { padding: 12px 0; } } @media screen and (max-width: 480px) { .onelab-modal .onelab-modal-body .modal-loading { padding: 10px 0; } } .onelab-modal .onelab-modal-body .modal-loading .spinner { display: inline-block; width: 40px; height: 40px; border: 3px solid #bbbbbb; border-top: 3px solid #00704a; border-radius: 50%; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; margin-bottom: 16px; } @media screen and (max-width: 768px) { .onelab-modal .onelab-modal-body .modal-loading .spinner { width: 32px; height: 32px; border: 2px solid #bbbbbb; border-top: 2px solid #00704a; margin-bottom: 12px; } } @media screen and (max-width: 480px) { .onelab-modal .onelab-modal-body .modal-loading .spinner { width: 28px; height: 28px; border: 2px solid #bbbbbb; border-top: 2px solid #00704a; margin-bottom: 10px; } } .onelab-modal .onelab-modal-body .modal-error { text-align: center; padding: 20px; color: #e53e3e; background-color: rgba(229, 62, 62, 0.1); border-radius: 8px; font-size: 14px; } @media screen and (max-width: 1770px) { .onelab-modal .onelab-modal-body .modal-error { padding: 18px; border-radius: 7px; font-size: 13px; } } @media screen and (max-width: 1440px) { .onelab-modal .onelab-modal-body .modal-error { padding: 16px; border-radius: 6px; font-size: 12px; } } @media screen and (max-width: 1200px) { .onelab-modal .onelab-modal-body .modal-error { padding: 14px; border-radius: 6px; font-size: 12px; } } @media screen and (max-width: 992px) { .onelab-modal .onelab-modal-body .modal-error { padding: 12px; border-radius: 5px; font-size: 11px; } } @media screen and (max-width: 768px) { .onelab-modal .onelab-modal-body .modal-error { padding: 10px; border-radius: 5px; font-size: 11px; } } @media screen and (max-width: 640px) { .onelab-modal .onelab-modal-body .modal-error { padding: 9px; border-radius: 4px; font-size: 10px; } } @media screen and (max-width: 480px) { .onelab-modal .onelab-modal-body .modal-error { padding: 8px; border-radius: 4px; font-size: 10px; } } .onelab-modal .onelab-modal-footer { padding: 32px 36px 36px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media screen and (max-width: 1770px) { .onelab-modal .onelab-modal-footer { padding: 28px 32px 32px; gap: 18px; } } @media screen and (max-width: 1440px) { .onelab-modal .onelab-modal-footer { padding: 24px 28px 28px; gap: 16px; } } @media screen and (max-width: 1200px) { .onelab-modal .onelab-modal-footer { padding: 20px 24px 24px; gap: 14px; } } @media screen and (max-width: 992px) { .onelab-modal .onelab-modal-footer { padding: 16px 20px 20px; gap: 12px; } } @media screen and (max-width: 768px) { .onelab-modal .onelab-modal-footer { padding: 14px 16px 16px; gap: 10px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media screen and (max-width: 640px) { .onelab-modal .onelab-modal-footer { padding: 12px 14px 14px; gap: 9px; } } @media screen and (max-width: 480px) { .onelab-modal .onelab-modal-footer { padding: 10px 12px 12px; gap: 8px; } } /* Modal Sizes =========================================== */ .modal-small .onelab-modal-content { max-width: 400px; } @media screen and (max-width: 1770px) { .modal-small .onelab-modal-content { max-width: 360px; } } @media screen and (max-width: 1440px) { .modal-small .onelab-modal-content { max-width: 320px; } } @media screen and (max-width: 1200px) { .modal-small .onelab-modal-content { max-width: 280px; } } @media screen and (max-width: 992px) { .modal-small .onelab-modal-content { max-width: 240px; } } @media screen and (max-width: 768px) { .modal-small .onelab-modal-content { max-width: 90vw; } } @media screen and (max-width: 640px) { .modal-small .onelab-modal-content { max-width: 85vw; } } @media screen and (max-width: 480px) { .modal-small .onelab-modal-content { max-width: 80vw; } } .modal-medium .onelab-modal-content { max-width: 600px; } @media screen and (max-width: 1770px) { .modal-medium .onelab-modal-content { max-width: 540px; } } @media screen and (max-width: 1440px) { .modal-medium .onelab-modal-content { max-width: 480px; } } @media screen and (max-width: 1200px) { .modal-medium .onelab-modal-content { max-width: 420px; } } @media screen and (max-width: 992px) { .modal-medium .onelab-modal-content { max-width: 360px; } } @media screen and (max-width: 768px) { .modal-medium .onelab-modal-content { max-width: 90vw; } } @media screen and (max-width: 640px) { .modal-medium .onelab-modal-content { max-width: 85vw; } } @media screen and (max-width: 480px) { .modal-medium .onelab-modal-content { max-width: 80vw; } } .modal-large .onelab-modal-content { max-width: 900px; } @media screen and (max-width: 1770px) { .modal-large .onelab-modal-content { max-width: 810px; } } @media screen and (max-width: 1440px) { .modal-large .onelab-modal-content { max-width: 720px; } } @media screen and (max-width: 1200px) { .modal-large .onelab-modal-content { max-width: 630px; } } @media screen and (max-width: 992px) { .modal-large .onelab-modal-content { max-width: 540px; } } @media screen and (max-width: 768px) { .modal-large .onelab-modal-content { max-width: 90vw; } } @media screen and (max-width: 640px) { .modal-large .onelab-modal-content { max-width: 85vw; } } @media screen and (max-width: 480px) { .modal-large .onelab-modal-content { max-width: 80vw; } } .modal-full .onelab-modal-content { max-width: 95vw; max-height: 95vh; } @media screen and (max-width: 480px) { .modal-full .onelab-modal-content { max-width: 100vw; max-height: 100vh; border-radius: 0; } } /* Modal Positions =========================================== */ .modal-top .onelab-modal { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-top: 5vh; } .modal-bottom .onelab-modal { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding-bottom: 5vh; } /* Modal Animations =========================================== */ .modal-visible .onelab-modal-content { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } /* Fade animation */ .modal-fade .onelab-modal-content { -webkit-transform: scale(0.7) translateY(-20px); transform: scale(0.7) translateY(-20px); } .modal-visible.modal-fade .onelab-modal-content { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); } /* Slide animation */ .modal-slide .onelab-modal-content { -webkit-transform: translateY(-100px); transform: translateY(-100px); opacity: 0; } .modal-visible.modal-slide .onelab-modal-content { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } /* Zoom animation */ .modal-zoom .onelab-modal-content { -webkit-transform: scale(0.3); transform: scale(0.3); opacity: 0; } .modal-visible.modal-zoom .onelab-modal-content { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } /* Bounce animation */ .modal-bounce .onelab-modal-content { -webkit-transform: scale(0.3); transform: scale(0.3); opacity: 0; -webkit-animation: modalBounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); animation: modalBounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .modal-visible.modal-bounce .onelab-modal-content { -webkit-animation: none; animation: none; } /* Backdrop variants =========================================== */ .modal-backdrop-static .onelab-modal-backdrop { background-color: rgba(0, 0, 0, 0.7); } .modal-backdrop-none .onelab-modal-backdrop { background-color: transparent; backdrop-filter: none; } /* Modal Buttons =========================================== */ .onelab-modal-btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-family: "Montserrat", sans-serif; height: 64px; padding: 24px 64px; font-weight: 600; text-decoration: none; border: 1px solid transparent; border-radius: 8px; font-size: 16px; cursor: pointer; line-height: 150%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; outline: none; text-transform: uppercase; } @media screen and (max-width: 1770px) { .onelab-modal-btn { height: 58px; padding: 21px 57px; font-size: 15px; border-radius: 7px; } } @media screen and (max-width: 1440px) { .onelab-modal-btn { height: 51px; padding: 18px 50px; font-size: 14px; border-radius: 7px; } } @media screen and (max-width: 1200px) { .onelab-modal-btn { height: 45px; padding: 16px 43px; font-size: 13px; border-radius: 6px; } } @media screen and (max-width: 992px) { .onelab-modal-btn { height: 38px; padding: 13px 36px; font-size: 12px; border-radius: 6px; } } @media screen and (max-width: 768px) { .onelab-modal-btn { height: 32px; padding: 11px 30px; font-size: 11px; border-radius: 5px; width: 100%; } } @media screen and (max-width: 640px) { .onelab-modal-btn { height: 28px; padding: 10px 24px; font-size: 10px; border-radius: 5px; } } @media screen and (max-width: 480px) { .onelab-modal-btn { height: 24px; padding: 8px 20px; font-size: 10px; border-radius: 4px; margin-bottom: 8px; } .onelab-modal-btn:last-child { margin-bottom: 0; } } .onelab-modal-btn:disabled, .onelab-modal-btn.disabled { opacity: 0.6; cursor: not-allowed; -webkit-transform: none; transform: none; } .onelab-modal-btn:disabled:hover, .onelab-modal-btn.disabled:hover { -webkit-transform: none; transform: none; -webkit-box-shadow: none; box-shadow: none; } .onelab-modal-btn.btn-primary { background-color: #00704a; color: white; border-color: #00704a; } .onelab-modal-btn.btn-primary:hover:not(:disabled):not(.disabled) { background-color: #00704a; border-color: #00704a; -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.2); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.2); } .onelab-modal-btn.btn-secondary { background-color: #fff; color: #00704a; border-color: #00704a; } .onelab-modal-btn.btn-secondary:hover:not(:disabled):not(.disabled) { background-color: #00704a; color: #fff; border-color: #00704a; -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.2); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.2); } .onelab-modal-btn.btn-outline-primary { background-color: transparent; color: #00704a; border-color: #00704a; } .onelab-modal-btn.btn-outline-primary:hover:not(:disabled):not(.disabled) { background-color: #00704a; color: white; -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.2); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.2); } .onelab-modal-btn.btn-outline-secondary { background-color: transparent; color: #312020; border-color: #312020; } .onelab-modal-btn.btn-outline-secondary:hover:not(:disabled):not(.disabled) { background-color: #312020; color: white; -webkit-box-shadow: 0 4px 12px rgba(49, 32, 32, 0.2); box-shadow: 0 4px 12px rgba(49, 32, 32, 0.2); } .onelab-modal-btn.btn-ghost { background-color: transparent; color: #312020; border-color: transparent; } .onelab-modal-btn.btn-ghost:hover:not(:disabled):not(.disabled) { background-color: rgba(0, 0, 0, 0.05); color: #312020; } /* Modal Types =========================================== */ /* Confirmation modal */ .modal-confirm .onelab-modal-body { text-align: center; padding: 48px 32px; } @media screen and (max-width: 1770px) { .modal-confirm .onelab-modal-body { padding: 43px 28px; } } @media screen and (max-width: 1440px) { .modal-confirm .onelab-modal-body { padding: 38px 24px; } } @media screen and (max-width: 1200px) { .modal-confirm .onelab-modal-body { padding: 32px 20px; } } @media screen and (max-width: 992px) { .modal-confirm .onelab-modal-body { padding: 26px 16px; } } @media screen and (max-width: 768px) { .modal-confirm .onelab-modal-body { padding: 22px 14px; } } @media screen and (max-width: 640px) { .modal-confirm .onelab-modal-body { padding: 19px 12px; } } @media screen and (max-width: 480px) { .modal-confirm .onelab-modal-body { padding: 16px 10px; } } .modal-confirm .onelab-modal-body p { font-size: 18px; color: #312020; margin: 0 0 32px 0; } @media screen and (max-width: 1770px) { .modal-confirm .onelab-modal-body p { font-size: 16px; margin-bottom: 28px; } } @media screen and (max-width: 1440px) { .modal-confirm .onelab-modal-body p { font-size: 15px; margin-bottom: 24px; } } @media screen and (max-width: 1200px) { .modal-confirm .onelab-modal-body p { font-size: 14px; margin-bottom: 20px; } } @media screen and (max-width: 992px) { .modal-confirm .onelab-modal-body p { font-size: 13px; margin-bottom: 16px; } } @media screen and (max-width: 768px) { .modal-confirm .onelab-modal-body p { font-size: 12px; margin-bottom: 14px; } } @media screen and (max-width: 640px) { .modal-confirm .onelab-modal-body p { font-size: 11px; margin-bottom: 12px; } } @media screen and (max-width: 480px) { .modal-confirm .onelab-modal-body p { font-size: 11px; margin-bottom: 10px; } } /* Form modal */ .modal-form .onelab-modal-content { max-width: 640px; } @media screen and (max-width: 1770px) { .modal-form .onelab-modal-content { max-width: 540px; } } @media screen and (max-width: 1440px) { .modal-form .onelab-modal-content { max-width: 480px; } } @media screen and (max-width: 1200px) { .modal-form .onelab-modal-content { max-width: 420px; } } @media screen and (max-width: 768px) { .modal-form .onelab-modal-content { max-width: 75%; max-height: 85vh; } } @media screen and (max-width: 640px) { .modal-form .onelab-modal-content { max-width: 80%; max-height: 85vh; } } @media screen and (max-width: 480px) { .modal-form .onelab-modal-content { max-width: 90%; max-height: 90vh; } } .modal-form .onelab-modal-body { padding: 0px 36px; } @media screen and (max-width: 1770px) { .modal-form .onelab-modal-body { padding: 0px 32px; } } @media screen and (max-width: 1440px) { .modal-form .onelab-modal-body { padding: 0px 28px; } } @media screen and (max-width: 1200px) { .modal-form .onelab-modal-body { padding: 0px 24px; } } @media screen and (max-width: 992px) { .modal-form .onelab-modal-body { padding: 0px 20px; } } @media screen and (max-width: 768px) { .modal-form .onelab-modal-body { padding: 0px 16px; } } @media screen and (max-width: 640px) { .modal-form .onelab-modal-body { padding: 0px 14px; } } @media screen and (max-width: 480px) { .modal-form .onelab-modal-body { padding: 0px 12px; } } .modal-form .onelab-modal-body form .form-section { margin: 0 0 32px; } @media screen and (max-width: 1770px) { .modal-form .onelab-modal-body form .form-section { margin-bottom: 28px; } } @media screen and (max-width: 1440px) { .modal-form .onelab-modal-body form .form-section { margin-bottom: 24px; } } @media screen and (max-width: 1200px) { .modal-form .onelab-modal-body form .form-section { margin-bottom: 20px; } } @media screen and (max-width: 992px) { .modal-form .onelab-modal-body form .form-section { margin-bottom: 16px; } } @media screen and (max-width: 768px) { .modal-form .onelab-modal-body form .form-section { margin-bottom: 14px; } } @media screen and (max-width: 640px) { .modal-form .onelab-modal-body form .form-section { margin-bottom: 12px; } } @media screen and (max-width: 480px) { .modal-form .onelab-modal-body form .form-section { margin-bottom: 10px; } } .modal-form .onelab-modal-body form .form-section:not(:has(+ .form-section)) { margin-bottom: 0; } .modal-form .onelab-modal-body form .form-section:last-of-type { margin-bottom: 0; } .modal-form .onelab-modal-body .form-section-title { font-size: 20px; font-weight: 700; font-family: "Be Vietnam Pro", sans-serif; margin: 0 0 17px 0; color: #312020; } @media screen and (max-width: 1770px) { .modal-form .onelab-modal-body .form-section-title { font-size: 18px; margin-bottom: 15px; } } @media screen and (max-width: 1440px) { .modal-form .onelab-modal-body .form-section-title { font-size: 17px; margin-bottom: 13px; } } @media screen and (max-width: 1200px) { .modal-form .onelab-modal-body .form-section-title { font-size: 16px; margin-bottom: 12px; } } @media screen and (max-width: 992px) { .modal-form .onelab-modal-body .form-section-title { font-size: 15px; margin-bottom: 10px; } } @media screen and (max-width: 768px) { .modal-form .onelab-modal-body .form-section-title { font-size: 14px; margin-bottom: 9px; } } @media screen and (max-width: 640px) { .modal-form .onelab-modal-body .form-section-title { font-size: 13px; margin-bottom: 8px; } } @media screen and (max-width: 480px) { .modal-form .onelab-modal-body .form-section-title { font-size: 12px; margin-bottom: 7px; } } .modal-form .onelab-modal-body form .form-group { margin-bottom: 16px; } .modal-form .onelab-modal-body form .form-group:last-child { margin-bottom: 0; } .modal-form .onelab-modal-body form .form-group label { display: block; margin-bottom: 6px; color: #312020; font-size: 18px; font-weight: 400; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 1770px) { .modal-form .onelab-modal-body form .form-group label { font-size: 16px; margin-bottom: 5px; } } @media screen and (max-width: 1440px) { .modal-form .onelab-modal-body form .form-group label { font-size: 15px; margin-bottom: 5px; } } @media screen and (max-width: 1200px) { .modal-form .onelab-modal-body form .form-group label { font-size: 14px; margin-bottom: 4px; } } @media screen and (max-width: 992px) { .modal-form .onelab-modal-body form .form-group label { font-size: 13px; margin-bottom: 4px; } } @media screen and (max-width: 768px) { .modal-form .onelab-modal-body form .form-group label { font-size: 12px; margin-bottom: 3px; } } @media screen and (max-width: 640px) { .modal-form .onelab-modal-body form .form-group label { font-size: 12px; margin-bottom: 3px; } } @media screen and (max-width: 480px) { .modal-form .onelab-modal-body form .form-group label { font-size: 11px; margin-bottom: 3px; } } .modal-form .onelab-modal-body form .form-group input, .modal-form .onelab-modal-body form .form-group textarea, .modal-form .onelab-modal-body form .form-group select { width: 100%; padding: 10px 14px; border: 1px solid #bbbbbb; border-radius: 8px; font-size: 16px; -webkit-transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease; transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease; transition: border-color 0.2s ease, box-shadow 0.2s ease; transition: border-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease; outline: none; } @media screen and (max-width: 1770px) { .modal-form .onelab-modal-body form .form-group input, .modal-form .onelab-modal-body form .form-group textarea, .modal-form .onelab-modal-body form .form-group select { padding: 9px 12px; font-size: 15px; border-radius: 7px; } } @media screen and (max-width: 1440px) { .modal-form .onelab-modal-body form .form-group input, .modal-form .onelab-modal-body form .form-group textarea, .modal-form .onelab-modal-body form .form-group select { padding: 8px 11px; font-size: 14px; border-radius: 7px; } } @media screen and (max-width: 1200px) { .modal-form .onelab-modal-body form .form-group input, .modal-form .onelab-modal-body form .form-group textarea, .modal-form .onelab-modal-body form .form-group select { padding: 7px 10px; font-size: 13px; border-radius: 6px; } } @media screen and (max-width: 992px) { .modal-form .onelab-modal-body form .form-group input, .modal-form .onelab-modal-body form .form-group textarea, .modal-form .onelab-modal-body form .form-group select { padding: 6px 9px; font-size: 12px; border-radius: 6px; } } @media screen and (max-width: 768px) { .modal-form .onelab-modal-body form .form-group input, .modal-form .onelab-modal-body form .form-group textarea, .modal-form .onelab-modal-body form .form-group select { padding: 5px 8px; font-size: 11px; border-radius: 5px; } } @media screen and (max-width: 640px) { .modal-form .onelab-modal-body form .form-group input, .modal-form .onelab-modal-body form .form-group textarea, .modal-form .onelab-modal-body form .form-group select { padding: 5px 8px; font-size: 11px; border-radius: 5px; } } @media screen and (max-width: 480px) { .modal-form .onelab-modal-body form .form-group input, .modal-form .onelab-modal-body form .form-group textarea, .modal-form .onelab-modal-body form .form-group select { padding: 4px 7px; font-size: 10px; border-radius: 4px; } } .modal-form .onelab-modal-body form .form-group input::-webkit-input-placeholder, .modal-form .onelab-modal-body form .form-group textarea::-webkit-input-placeholder, .modal-form .onelab-modal-body form .form-group select::-webkit-input-placeholder { color: #bbbbbb; } .modal-form .onelab-modal-body form .form-group input::-moz-placeholder, .modal-form .onelab-modal-body form .form-group textarea::-moz-placeholder, .modal-form .onelab-modal-body form .form-group select::-moz-placeholder { color: #bbbbbb; } .modal-form .onelab-modal-body form .form-group input:-ms-input-placeholder, .modal-form .onelab-modal-body form .form-group textarea:-ms-input-placeholder, .modal-form .onelab-modal-body form .form-group select:-ms-input-placeholder { color: #bbbbbb; } .modal-form .onelab-modal-body form .form-group input::-ms-input-placeholder, .modal-form .onelab-modal-body form .form-group textarea::-ms-input-placeholder, .modal-form .onelab-modal-body form .form-group select::-ms-input-placeholder { color: #bbbbbb; } .modal-form .onelab-modal-body form .form-group input::placeholder, .modal-form .onelab-modal-body form .form-group textarea::placeholder, .modal-form .onelab-modal-body form .form-group select::placeholder { color: #bbbbbb; } .modal-form .onelab-modal-body form .form-group input:focus, .modal-form .onelab-modal-body form .form-group textarea:focus, .modal-form .onelab-modal-body form .form-group select:focus { border-color: #00704a; outline: none; -webkit-box-shadow: 0 0 0 3px rgba(0, 112, 74, 0.1); box-shadow: 0 0 0 3px rgba(0, 112, 74, 0.1); } .modal-form .onelab-modal-body form .form-group input:focus-visible, .modal-form .onelab-modal-body form .form-group textarea:focus-visible, .modal-form .onelab-modal-body form .form-group select:focus-visible { border-color: #00704a; outline: none; -webkit-box-shadow: 0 0 0 3px rgba(0, 112, 74, 0.1); box-shadow: 0 0 0 3px rgba(0, 112, 74, 0.1); } .modal-form .onelab-modal-body form .form-group textarea { resize: none; min-height: 92px; } /* Gallery modal */ .modal-gallery .onelab-modal-content { max-width: 90vw; max-height: 90vh; background: transparent; -webkit-box-shadow: none; box-shadow: none; } .modal-gallery .onelab-modal-body { padding: 0; text-align: center; } .modal-gallery .onelab-modal-body img { max-width: 100%; max-height: 80vh; -o-object-fit: contain; object-fit: contain; border-radius: 8px; } .modal-gallery .onelab-modal-close { position: absolute; top: 36px; right: 36px; background: none; color: #312020; width: 25px; height: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 10; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } @media screen and (max-width: 1770px) { .modal-gallery .onelab-modal-close { top: 32px; right: 32px; width: 22px; height: 22px; } } @media screen and (max-width: 1440px) { .modal-gallery .onelab-modal-close { top: 28px; right: 28px; width: 20px; height: 20px; } } @media screen and (max-width: 1200px) { .modal-gallery .onelab-modal-close { top: 24px; right: 24px; width: 18px; height: 18px; } } @media screen and (max-width: 992px) { .modal-gallery .onelab-modal-close { top: 20px; right: 20px; width: 16px; height: 16px; } } @media screen and (max-width: 768px) { .modal-gallery .onelab-modal-close { top: 16px; right: 16px; width: 14px; height: 14px; } } @media screen and (max-width: 640px) { .modal-gallery .onelab-modal-close { top: 14px; right: 14px; width: 12px; height: 12px; } } @media screen and (max-width: 480px) { .modal-gallery .onelab-modal-close { top: 12px; right: 12px; width: 10px; height: 10px; } } .modal-gallery .onelab-modal-close:hover { background-color: rgba(0, 0, 0, 0.05); border-radius: 50%; } /* Video modal */ .modal-video .onelab-modal-content { max-width: 90vw; max-height: 90vh; background: #312020; } .modal-video .onelab-modal-body { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .modal-video .onelab-modal-body video, .modal-video .onelab-modal-body iframe { max-width: 100%; max-height: 80vh; border-radius: 8px; } .modal-video .onelab-modal-close { position: absolute; top: 36px; right: 36px; background: none; color: #312020; width: 25px; height: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 10; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } @media screen and (max-width: 1770px) { .modal-video .onelab-modal-close { top: 32px; right: 32px; width: 22px; height: 22px; } } @media screen and (max-width: 1440px) { .modal-video .onelab-modal-close { top: 28px; right: 28px; width: 20px; height: 20px; } } @media screen and (max-width: 1200px) { .modal-video .onelab-modal-close { top: 24px; right: 24px; width: 18px; height: 18px; } } @media screen and (max-width: 992px) { .modal-video .onelab-modal-close { top: 20px; right: 20px; width: 16px; height: 16px; } } @media screen and (max-width: 768px) { .modal-video .onelab-modal-close { top: 16px; right: 16px; width: 14px; height: 14px; } } @media screen and (max-width: 640px) { .modal-video .onelab-modal-close { top: 14px; right: 14px; width: 12px; height: 12px; } } @media screen and (max-width: 480px) { .modal-video .onelab-modal-close { top: 12px; right: 12px; width: 10px; height: 10px; } } .modal-video .onelab-modal-close:hover { background-color: rgba(0, 0, 0, 0.05); border-radius: 50%; } .modal-video .onelab-modal-header { display: none; } /* Body scroll lock =========================================== */ body.modal-open { overflow: hidden; padding-right: 15px; } @media (max-width: 768px) { body.modal-open { position: fixed; width: 100%; } } /* Keyframe animations =========================================== */ @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes modalBounceIn { 0% { -webkit-transform: scale(0.3); transform: scale(0.3); opacity: 0; } 50% { -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes modalBounceIn { 0% { -webkit-transform: scale(0.3); transform: scale(0.3); opacity: 0; } 50% { -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } /* Responsive adjustments =========================================== */ @media (max-width: 768px) { .onelab-modal .onelab-modal-content { margin: 1rem; max-height: calc(100vh - 2rem); } .onelab-modal .onelab-modal-header, .onelab-modal .onelab-modal-body, .onelab-modal .onelab-modal-footer { padding-left: 1.5rem; padding-right: 1.5rem; } .onelab-modal .onelab-modal-footer .onelab-modal-btn { width: 100%; margin-bottom: 0.5rem; } .modal-gallery .onelab-modal-content, .modal-video .onelab-modal-content { margin: 0; max-width: 100vw; max-height: 100vh; border-radius: 0; } } @media (max-width: 576px) { .onelab-modal .onelab-modal-content { margin: 1rem auto; max-width: 80vw; border-radius: 12px; } .onelab-modal .onelab-modal-content .onelab-modal-footer { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px; } } /* Print styles =========================================== */ @media print { .onelab-modal { display: none !important; } } /* High contrast mode support =========================================== */ @media (prefers-contrast: high) { .onelab-modal .onelab-modal-content { border: 2px solid; } .onelab-modal .onelab-modal-backdrop { background-color: rgba(49, 32, 32, 0.8); } } /* Reduced motion support =========================================== */ @media (prefers-reduced-motion: reduce) { .onelab-modal .onelab-modal-content, .onelab-modal-btn, .onelab-modal-close { -webkit-transition: none; transition: none; } .modal-bounce .onelab-modal-content { -webkit-animation: none; animation: none; } } /* Hero Section --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .hero-section { position: relative; width: 100%; height: 600px; background-size: cover; background-position: center; background-repeat: no-repeat; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: visible; } @media screen and (max-width: 1770px) { .hero-section { height: 580px; } } @media screen and (max-width: 1440px) { .hero-section { height: 550px; } } @media screen and (max-width: 1200px) { .hero-section { height: 520px; } } @media screen and (max-width: 992px) { .hero-section { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 54vh; } } @media screen and (max-width: 768px) { .hero-section { height: 45vh; } } @media screen and (max-width: 640px) { .hero-section { height: 54vh; } } @media screen and (max-width: 480px) { .hero-section { height: 67vh; } } .hero-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, #5e5e5e 100%); pointer-events: none; opacity: 0.5; } .hero-section .container { position: relative; z-index: 1; padding: 0; } @media screen and (max-width: 1770px) { .hero-section .container { padding: 0 18px; } } @media screen and (max-width: 1440px) { .hero-section .container { padding: 0 15px; } } @media screen and (max-width: 1200px) { .hero-section .container { padding: 0 12px; } } @media screen and (max-width: 992px) { .hero-section .container { padding: 0 10px; } } @media screen and (max-width: 768px) { .hero-section .container { padding: 0 10px; } } @media screen and (max-width: 640px) { .hero-section .container { padding: 0 8px; } } @media screen and (max-width: 480px) { .hero-section .container { padding: 0 12px; } } .hero-section .hero-content { max-width: 600px; color: #ffffff; } @media screen and (max-width: 1770px) { .hero-section .hero-content { max-width: 550px; } } @media screen and (max-width: 1440px) { .hero-section .hero-content { max-width: 500px; } } @media screen and (max-width: 1200px) { .hero-section .hero-content { max-width: 450px; } } @media screen and (max-width: 992px) { .hero-section .hero-content { max-width: 90%; } } @media screen and (max-width: 768px) { .hero-section .hero-content { max-width: 90%; } } @media screen and (max-width: 640px) { .hero-section .hero-content { max-width: 95%; } } @media screen and (max-width: 480px) { .hero-section .hero-content { max-width: 95%; } } .hero-section .hero-content h1 { font-size: 42px; font-weight: 700; line-height: 1.2; margin-bottom: 16px; color: #ffffff; font-family: "Montserrat", sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } @media screen and (max-width: 1770px) { .hero-section .hero-content h1 { font-size: 36px; margin-bottom: 14px; } } @media screen and (max-width: 1440px) { .hero-section .hero-content h1 { font-size: 32px; margin-bottom: 12px; } } @media screen and (max-width: 1200px) { .hero-section .hero-content h1 { font-size: 28px; margin-bottom: 11px; } } @media screen and (max-width: 992px) { .hero-section .hero-content h1 { font-size: 24px; margin-bottom: 10px; } } @media screen and (max-width: 768px) { .hero-section .hero-content h1 { font-size: 32px; margin-bottom: 12px; margin-top: 8px; } } @media screen and (max-width: 640px) { .hero-section .hero-content h1 { font-size: 24px; margin-bottom: 10px; margin-top: 6px; } } @media screen and (max-width: 480px) { .hero-section .hero-content h1 { font-size: 24px; margin-bottom: 8px; margin-top: 4px; } } .hero-section .hero-content .btn-view-more { display: block; width: 150px; height: 51px; color: #ffffff; text-align: center; } .hero-section .hero-cards { position: relative; z-index: 2; margin-top: 48px; } @media screen and (max-width: 1770px) { .hero-section .hero-cards { margin-top: 43px; } } @media screen and (max-width: 1440px) { .hero-section .hero-cards { margin-top: 38px; } } @media screen and (max-width: 1200px) { .hero-section .hero-cards { margin-top: 34px; } } @media screen and (max-width: 992px) { .hero-section .hero-cards { margin-top: 29px; } } @media screen and (max-width: 768px) { .hero-section .hero-cards { margin-top: 24px; } } @media screen and (max-width: 640px) { .hero-section .hero-cards { margin-top: 19px; } } @media screen and (max-width: 480px) { .hero-section .hero-cards { margin-top: 16px; } } .hero-section .hero-cards .hero-cards-grid { max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; display: grid; grid-template-columns: 322px 1px 288px 1px 382px; gap: 28px; background: #ffffff; padding: 32px 22px; border-radius: 8px; -webkit-box-shadow: 0 4px 39.3px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 4px 39.3px 0 rgba(0, 0, 0, 0.25); -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } @media screen and (max-width: 1770px) { .hero-section .hero-cards .hero-cards-grid { grid-template-columns: 296px 1px 265px 1px 351px; gap: 25px; padding: 29px 20px; } } @media screen and (max-width: 1440px) { .hero-section .hero-cards .hero-cards-grid { grid-template-columns: 242px 1px 216px 1px 287px; gap: 22px; padding: 26px 18px; } } @media screen and (max-width: 1200px) { .hero-section .hero-cards .hero-cards-grid { max-width: 800px; grid-template-columns: 200px 1px 179px 1px 237px; gap: 20px; padding: 22px 15px; } } @media screen and (max-width: 992px) { .hero-section .hero-cards .hero-cards-grid { grid-template-columns: 1fr; gap: 0; padding: 8px 16px; max-width: 100%; } } @media screen and (max-width: 768px) { .hero-section .hero-cards .hero-cards-grid { padding: 12px 14px; } } @media screen and (max-width: 640px) { .hero-section .hero-cards .hero-cards-grid { padding: 10px 12px; gap: 12px; } } @media screen and (max-width: 480px) { .hero-section .hero-cards .hero-cards-grid { padding: 12px; gap: 16px; } } .hero-section .hero-cards .hero-card-separator { width: 1px; background-color: #aaaaaa; height: calc(100% - 6px); -ms-flex-item-align: stretch; align-self: stretch; } @media screen and (max-width: 768px) { .hero-section .hero-cards .hero-card-separator { display: none; } } .hero-section .hero-cards .hero-card { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; cursor: default; border-radius: 8px; position: relative; overflow: hidden; text-decoration: none; } .hero-section .hero-cards .hero-card[data-modal-trigger] { cursor: pointer; } @media screen and (max-width: 768px) { .hero-section .hero-cards .hero-card { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; height: auto; min-height: auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } } .hero-section .hero-cards .hero-card:hover { cursor: pointer; } .hero-section .hero-cards .hero-card:hover .card-content h3 { color: #00723f; } .hero-section .hero-cards .hero-card:hover .card-link img { -webkit-transform: rotate(-45deg) scale(1); transform: rotate(-45deg) scale(1); -webkit-filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(1352%) hue-rotate(127deg) brightness(97%) contrast(101%); filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(1352%) hue-rotate(127deg) brightness(97%) contrast(101%); } .hero-section .hero-cards .hero-card .card-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 16px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } @media screen and (max-width: 768px) { .hero-section .hero-cards .hero-card .card-body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } } @media screen and (max-width: 480px) { .hero-section .hero-cards .hero-card .card-body { gap: 12px; } } .hero-section .hero-cards .hero-card .card-icon { -ms-flex-negative: 0; flex-shrink: 0; width: 42px; height: 42px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } @media screen and (max-width: 1770px) { .hero-section .hero-cards .hero-card .card-icon { width: 38px; height: 38px; } } @media screen and (max-width: 1440px) { .hero-section .hero-cards .hero-card .card-icon { width: 34px; height: 34px; } } @media screen and (max-width: 1200px) { .hero-section .hero-cards .hero-card .card-icon { width: 30px; height: 30px; } } @media screen and (max-width: 992px) { .hero-section .hero-cards .hero-card .card-icon { width: 26px; height: 26px; } } @media screen and (max-width: 768px) { .hero-section .hero-cards .hero-card .card-icon { width: 38px; height: 38px; } } @media screen and (max-width: 640px) { .hero-section .hero-cards .hero-card .card-icon { width: 36px; height: 36px; } } @media screen and (max-width: 480px) { .hero-section .hero-cards .hero-card .card-icon { width: 36px; height: 36px; } } .hero-section .hero-cards .hero-card .card-icon img { width: 100%; height: 100%; -webkit-transition: -webkit-filter 0.3s ease-in-out; transition: -webkit-filter 0.3s ease-in-out; transition: filter 0.3s ease-in-out; transition: filter 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out; } .hero-section .hero-cards .hero-card .card-content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-width: 0; } .hero-section .hero-cards .hero-card .card-content h3 { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: #345444; white-space: normal; font-family: "Be Vietnam Pro", sans-serif; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; line-height: 1.4; width: 100%; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; } @media screen and (max-width: 1770px) { .hero-section .hero-cards .hero-card .card-content h3 { font-size: 20px; margin-bottom: 7px; } } @media screen and (max-width: 1440px) { .hero-section .hero-cards .hero-card .card-content h3 { font-size: 18px; margin-bottom: 6px; } } @media screen and (max-width: 1200px) { .hero-section .hero-cards .hero-card .card-content h3 { font-size: 16px; margin-bottom: 5px; } } @media screen and (max-width: 992px) { .hero-section .hero-cards .hero-card .card-content h3 { font-size: 16px; margin-bottom: 4px; white-space: normal; } } @media screen and (max-width: 768px) { .hero-section .hero-cards .hero-card .card-content h3 { font-size: 20px; margin-bottom: 4px; white-space: normal; } } @media screen and (max-width: 640px) { .hero-section .hero-cards .hero-card .card-content h3 { font-size: 16px; margin-bottom: 3px; } } @media screen and (max-width: 480px) { .hero-section .hero-cards .hero-card .card-content h3 { font-size: 18px; margin-bottom: 2px; } } .hero-section .hero-cards .hero-card .card-content p { font-size: 16px; line-height: 1.6; color: #312020; margin: 0; font-family: "Be Vietnam Pro", sans-serif; padding-right: 16px; word-wrap: break-word; overflow-wrap: break-word; } @media screen and (max-width: 1770px) { .hero-section .hero-cards .hero-card .card-content p { font-size: 14px; padding-right: 14px; } } @media screen and (max-width: 1440px) { .hero-section .hero-cards .hero-card .card-content p { font-size: 16px; padding-right: 12px; } } @media screen and (max-width: 1200px) { .hero-section .hero-cards .hero-card .card-content p { font-size: 14px; padding-right: 10px; } } @media screen and (max-width: 992px) { .hero-section .hero-cards .hero-card .card-content p { font-size: 14px; padding-right: 8px; } } @media screen and (max-width: 768px) { .hero-section .hero-cards .hero-card .card-content p { font-size: 14px; padding-right: 0; } } @media screen and (max-width: 640px) { .hero-section .hero-cards .hero-card .card-content p { font-size: 14px; line-height: 1.6; } } @media screen and (max-width: 480px) { .hero-section .hero-cards .hero-card .card-content p { font-size: 13px; line-height: 1.6; } } .hero-section .hero-cards .hero-card .card-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 8px; border-top: 1px solid transparent; -webkit-transition: border-color 0.3s ease-in-out; transition: border-color 0.3s ease-in-out; } @media screen and (max-width: 768px) { .hero-section .hero-cards .hero-card .card-link { margin-top: 0; padding-top: 0; border-top: none; -ms-flex-negative: 0; flex-shrink: 0; } } .hero-section .hero-cards .hero-card .card-link img { width: 24px; height: 24px; -webkit-transition: -webkit-transform 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out; } @media screen and (max-width: 1770px) { .hero-section .hero-cards .hero-card .card-link img { width: 22px; height: 22px; } } @media screen and (max-width: 1440px) { .hero-section .hero-cards .hero-card .card-link img { width: 19px; height: 19px; } } @media screen and (max-width: 1200px) { .hero-section .hero-cards .hero-card .card-link img { width: 17px; height: 17px; } } @media screen and (max-width: 992px) { .hero-section .hero-cards .hero-card .card-link img { width: 15px; height: 15px; } } @media screen and (max-width: 768px) { .hero-section .hero-cards .hero-card .card-link img { width: 20px; height: 20px; } } @media screen and (max-width: 640px) { .hero-section .hero-cards .hero-card .card-link img { width: 20px; height: 20px; } } @media screen and (max-width: 480px) { .hero-section .hero-cards .hero-card .card-link img { width: 20px; height: 20px; } } /* Page Hero --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .page-hero { position: relative; width: 100%; height: 670px; background-size: cover; background-position: center; background-repeat: no-repeat; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: visible; } @media screen and (max-width: 1440px) { .page-hero { height: 600px; } } @media screen and (max-width: 1280px) { .page-hero { height: 550px; } } @media screen and (max-width: 1023px) { .page-hero { height: 500px; } } @media screen and (max-width: 992px) { .page-hero { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 94vh; } } @media screen and (max-width: 768px) { .page-hero { height: 70vh; } } @media screen and (max-width: 576px) { .page-hero { height: 84vh; } } @media screen and (max-width: 480px) { .page-hero { height: 80vh; } } .page-hero::after { width: 70%; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: #000000; background: -webkit-gradient(linear, left top, right top, from(rgb(0, 0, 0)), color-stop(66%, rgba(0, 0, 0, 0))); background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 66%); opacity: 0.6; pointer-events: none; } @media screen and (max-width: 992px) { .page-hero::after { width: 100%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.3))); background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%); } } .page-hero .container { position: relative; z-index: 2; padding: 0; } @media screen and (max-width: 1440px) { .page-hero .container { padding: 0 15px; } } .page-hero .page-hero-content { max-width: 51%; color: #ffffff; position: relative; z-index: 2; } @media screen and (max-width: 1440px) { .page-hero .page-hero-content { max-width: 55%; } } @media screen and (max-width: 1280px) { .page-hero .page-hero-content { max-width: 60%; } } @media screen and (max-width: 1023px) { .page-hero .page-hero-content { max-width: 65%; } } @media screen and (max-width: 992px) { .page-hero .page-hero-content { max-width: 70%; } } @media screen and (max-width: 768px) { .page-hero .page-hero-content { max-width: 80%; } } @media screen and (max-width: 480px) { .page-hero .page-hero-content { max-width: 90%; } } .page-hero .page-hero-content h1 { font-size: 64px; font-weight: 700; margin: 0 0 12px 0; color: #ffffff; font-family: "Montserrat", sans-serif; line-height: 150%; letter-spacing: -0.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } @media screen and (max-width: 1440px) { .page-hero .page-hero-content h1 { font-size: 56px; margin-bottom: 10px; } } @media screen and (max-width: 1280px) { .page-hero .page-hero-content h1 { font-size: 52px; margin-bottom: 10px; } } @media screen and (max-width: 1023px) { .page-hero .page-hero-content h1 { font-size: 48px; margin-bottom: 8px; } } @media screen and (max-width: 768px) { .page-hero .page-hero-content h1 { font-size: 42px; margin-bottom: 6px; } } @media screen and (max-width: 480px) { .page-hero .page-hero-content h1 { font-size: 32px; margin-bottom: 4px; } } .page-hero .page-hero-content .page-hero-desc { font-size: 26px; line-height: 150%; color: #ffffff; margin: 0; font-family: "Be Vietnam Pro", sans-serif; font-weight: 400; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } @media screen and (max-width: 1440px) { .page-hero .page-hero-content .page-hero-desc { font-size: 24px; } } @media screen and (max-width: 1280px) { .page-hero .page-hero-content .page-hero-desc { font-size: 22px; } } @media screen and (max-width: 1023px) { .page-hero .page-hero-content .page-hero-desc { font-size: 20px; } } @media screen and (max-width: 768px) { .page-hero .page-hero-content .page-hero-desc { font-size: 18px; line-height: 1.5; } } @media screen and (max-width: 480px) { .page-hero .page-hero-content .page-hero-desc { font-size: 16px; line-height: 1.5; } } /* Page Header --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .global-page-header { position: relative; width: 100%; height: 280px; background-size: cover; background-position: center; background-repeat: no-repeat; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; } .global-page-header-subtitle { max-width: 80%; text-align: center; margin: 0 auto; } @media screen and (max-width: 1770px) { .global-page-header-subtitle { max-width: 85%; } } @media screen and (max-width: 1440px) { .global-page-header-subtitle { max-width: 85%; } } @media screen and (max-width: 768px) { .global-page-header-subtitle { max-width: 95%; } } @media screen and (max-width: 640px) { .global-page-header-subtitle { max-width: 98%; } } @media screen and (max-width: 480px) { .global-page-header-subtitle { max-width: 100%; } } @media screen and (max-width: 1770px) { .global-page-header { height: 275px; } } @media screen and (max-width: 1440px) { .global-page-header { height: 270px; } } @media screen and (max-width: 1200px) { .global-page-header { height: 260px; } } @media screen and (max-width: 768px) { .global-page-header { height: 250px; } } @media screen and (max-width: 640px) { .global-page-header { height: 235px; } } @media screen and (max-width: 480px) { .global-page-header { height: 220px; } } .global-page-header.page-expert-team-header::after { background: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%); pointer-events: none; opacity: 0.4; } .global-page-header::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; background: radial-gradient(circle, #00704a 0%, #9defd3 100%); pointer-events: none; opacity: 0.4; } .global-page-header .container { position: relative; z-index: 1; padding: 0; } @media screen and (max-width: 1770px) { .global-page-header .container { padding: 0 12px; } } @media screen and (max-width: 1440px) { .global-page-header .container { padding: 0 15px; } } @media screen and (max-width: 768px) { .global-page-header .container { padding: 0 20px; } } .global-page-header .global-page-header-content { max-width: 100%; color: #ffffff; position: relative; z-index: 1; width: 100%; } @media screen and (max-width: 768px) { .global-page-header .global-page-header-content { max-width: 100%; } } @media screen and (max-width: 480px) { .global-page-header .global-page-header-content { max-width: 100%; } } .global-page-header .global-page-header-content h1 { font-size: 48px; font-weight: 700; margin: 0 0 12px 0; color: #ffffff; font-family: "Montserrat", sans-serif; line-height: 150%; text-align: center; text-wrap: pretty; letter-spacing: -0.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } @media screen and (max-width: 1770px) { .global-page-header .global-page-header-content h1 { font-size: 46px; margin-bottom: 11px; } } @media screen and (max-width: 1440px) { .global-page-header .global-page-header-content h1 { font-size: 45px; margin-bottom: 11px; } } @media screen and (max-width: 1200px) { .global-page-header .global-page-header-content h1 { font-size: 40px; margin-bottom: 11px; } } @media screen and (max-width: 1024px) { .global-page-header .global-page-header-content h1 { font-size: 36px; margin-bottom: 10px; } } @media screen and (max-width: 768px) { .global-page-header .global-page-header-content h1 { font-size: 32px; margin-bottom: 10px; } } @media screen and (max-width: 640px) { .global-page-header .global-page-header-content h1 { font-size: 30px; margin-bottom: 9px; } } @media screen and (max-width: 480px) { .global-page-header .global-page-header-content h1 { font-size: 28px; margin-bottom: 8px; } } .global-page-header .global-page-header-content .global-page-header-desc { font-size: 18px; line-height: 150%; color: #ffffff; margin: 0; font-family: "Be Vietnam Pro", sans-serif; font-weight: 400; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } @media screen and (max-width: 1770px) { .global-page-header .global-page-header-content .global-page-header-desc { font-size: 17px; } } @media screen and (max-width: 1440px) { .global-page-header .global-page-header-content .global-page-header-desc { font-size: 17px; } } @media screen and (max-width: 1200px) { .global-page-header .global-page-header-content .global-page-header-desc { font-size: 16px; } } @media screen and (max-width: 1024px) { .global-page-header .global-page-header-content .global-page-header-desc { font-size: 16px; } } @media screen and (max-width: 768px) { .global-page-header .global-page-header-content .global-page-header-desc { font-size: 15px; } } @media screen and (max-width: 640px) { .global-page-header .global-page-header-content .global-page-header-desc { font-size: 14px; } } @media screen and (max-width: 480px) { .global-page-header .global-page-header-content .global-page-header-desc { font-size: 14px; } } /* Why Choose Section --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .why-choose-section { position: relative; width: 100%; padding: 48px 0; } @media screen and (max-width: 1770px) { .why-choose-section { padding: 43px 0; } } @media screen and (max-width: 1440px) { .why-choose-section { padding: 38px 0; } } @media screen and (max-width: 1200px) { .why-choose-section { padding: 34px 0; } } @media screen and (max-width: 992px) { .why-choose-section { padding: 29px 0; } } @media screen and (max-width: 768px) { .why-choose-section { padding: 24px 0; } } @media screen and (max-width: 640px) { .why-choose-section { padding: 19px 0; } } @media screen and (max-width: 480px) { .why-choose-section { padding: 24px 0; } } .why-choose-section .why-choose-title { font-size: 36px; font-weight: 700; color: #00704a; margin: 0 0 48px; font-family: "Montserrat", sans-serif; } @media screen and (max-width: 1770px) { .why-choose-section .why-choose-title { font-size: 31px; margin-bottom: 43px; } } @media screen and (max-width: 1440px) { .why-choose-section .why-choose-title { font-size: 27px; margin-bottom: 38px; } } @media screen and (max-width: 1200px) { .why-choose-section .why-choose-title { font-size: 24px; margin-bottom: 34px; } } @media screen and (max-width: 992px) { .why-choose-section .why-choose-title { font-size: 32px; margin-bottom: 32px; } } @media screen and (max-width: 768px) { .why-choose-section .why-choose-title { font-size: 32px; margin-bottom: 24px; } } @media screen and (max-width: 640px) { .why-choose-section .why-choose-title { font-size: 24px; margin-bottom: 19px; } } @media screen and (max-width: 480px) { .why-choose-section .why-choose-title { font-size: 22px; margin-bottom: 20px; } } .why-choose-section .why-choose-grid { display: grid; grid-template-columns: 468px 1fr; -webkit-box-align: start; -ms-flex-align: start; align-items: start; gap: 0; } @media screen and (max-width: 1770px) { .why-choose-section .why-choose-grid { grid-template-columns: 400px 1fr; gap: 0; } } @media screen and (max-width: 1440px) { .why-choose-section .why-choose-grid { grid-template-columns: 360px 1fr; gap: 0; } } @media screen and (max-width: 1200px) { .why-choose-section .why-choose-grid { grid-template-columns: 340px 1fr; gap: 0; } } @media screen and (max-width: 992px) { .why-choose-section .why-choose-grid { grid-template-columns: 260px 1fr; gap: 0; } } @media screen and (max-width: 768px) { .why-choose-section .why-choose-grid { grid-template-columns: 1fr; gap: 0; } } @media screen and (max-width: 640px) { .why-choose-section .why-choose-grid { grid-template-columns: 1fr; gap: 0; } } @media screen and (max-width: 480px) { .why-choose-section .why-choose-grid { grid-template-columns: 1fr; gap: 0; } } .why-choose-section .why-choose-image { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } @media screen and (max-width: 1770px) { .why-choose-section .why-choose-image { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } @media screen and (max-width: 1023px) and (min-width: 768px) { .why-choose-section .why-choose-image { position: sticky; top: 152px; height: auto; -ms-flex-item-align: start; align-self: flex-start; } } .why-choose-section .why-choose-image img { width: 100%; height: auto; display: block; border-radius: 8px; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; } @media screen and (max-width: 767px) { .why-choose-section .why-choose-image img { max-width: 82%; margin: 0 auto; } } .why-choose-section .why-choose-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } @media screen and (max-width: 1770px) { .why-choose-section .why-choose-features { gap: 29px; } } @media screen and (max-width: 1550px) { .why-choose-section .why-choose-features { gap: 28px; } } @media screen and (max-width: 1440px) { .why-choose-section .why-choose-features { gap: 24px; } } @media screen and (max-width: 1280px) { .why-choose-section .why-choose-features { gap: 20px; } } @media screen and (max-width: 1200px) { .why-choose-section .why-choose-features { gap: 22px; } } @media screen and (max-width: 1024px) { .why-choose-section .why-choose-features { grid-template-columns: repeat(1, 1fr); gap: 20px; } } @media screen and (max-width: 992px) { .why-choose-section .why-choose-features { gap: 16px; } } @media screen and (max-width: 768px) { .why-choose-section .why-choose-features { gap: 16px; } } @media screen and (max-width: 640px) { .why-choose-section .why-choose-features { gap: 13px; } } @media screen and (max-width: 576px) { .why-choose-section .why-choose-features { gap: 24px; } } @media screen and (max-width: 480px) { .why-choose-section .why-choose-features { gap: 20px; } } .why-choose-section .why-choose-feature { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (max-width: 576px) { .why-choose-section .why-choose-feature { text-align: center; } } .why-choose-section .why-choose-feature .feature-icon { -ms-flex-negative: 0; flex-shrink: 0; width: 64px; height: 64px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 20px; } @media screen and (max-width: 1770px) { .why-choose-section .why-choose-feature .feature-icon { width: 58px; height: 58px; margin-bottom: 18px; } } @media screen and (max-width: 1550px) { .why-choose-section .why-choose-feature .feature-icon { width: 56px; height: 56px; margin-bottom: 16px; } } @media screen and (max-width: 1440px) { .why-choose-section .why-choose-feature .feature-icon { width: 52px; height: 52px; margin-bottom: 14px; } } @media screen and (max-width: 1280px) { .why-choose-section .why-choose-feature .feature-icon { width: 48px; height: 48px; margin-bottom: 12px; } } @media screen and (max-width: 1200px) { .why-choose-section .why-choose-feature .feature-icon { width: 45px; height: 45px; margin-bottom: 14px; } } @media screen and (max-width: 992px) { .why-choose-section .why-choose-feature .feature-icon { width: 48px; height: 48px; margin-bottom: 12px; } } @media screen and (max-width: 768px) { .why-choose-section .why-choose-feature .feature-icon { width: 48px; height: 48px; margin-bottom: 12px; } } @media screen and (max-width: 640px) { .why-choose-section .why-choose-feature .feature-icon { width: 48px; height: 48px; margin-bottom: 10px; } } @media screen and (max-width: 576px) { .why-choose-section .why-choose-feature .feature-icon { width: 64px; height: 64px; margin: 0 auto 16px; } } @media screen and (max-width: 480px) { .why-choose-section .why-choose-feature .feature-icon { width: 56px; height: 56px; margin-bottom: 12px; } } .why-choose-section .why-choose-feature .feature-icon img, .why-choose-section .why-choose-feature .feature-icon svg { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .why-choose-section .why-choose-feature .feature-content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; } .why-choose-section .why-choose-feature .feature-content h3 { font-size: 20px; font-weight: 600; color: #00704a; margin: 0 0 19px; font-family: "Montserrat", sans-serif; text-wrap: pretty; } @media screen and (max-width: 1770px) { .why-choose-section .why-choose-feature .feature-content h3 { font-size: 17px; margin-bottom: 16px; } } @media screen and (max-width: 1550px) { .why-choose-section .why-choose-feature .feature-content h3 { font-size: 16px; margin-bottom: 16px; } } @media screen and (max-width: 1440px) { .why-choose-section .why-choose-feature .feature-content h3 { font-size: 15px; margin-bottom: 14px; } } @media screen and (max-width: 1280px) { .why-choose-section .why-choose-feature .feature-content h3 { font-size: 14px; margin-bottom: 12px; } } @media screen and (max-width: 1200px) { .why-choose-section .why-choose-feature .feature-content h3 { font-size: 14px; margin-bottom: 12px; } } @media screen and (max-width: 992px) { .why-choose-section .why-choose-feature .feature-content h3 { font-size: 14px; margin-bottom: 12px; } } @media screen and (max-width: 768px) { .why-choose-section .why-choose-feature .feature-content h3 { font-size: 14px; margin-bottom: 10px; } } @media screen and (max-width: 640px) { .why-choose-section .why-choose-feature .feature-content h3 { font-size: 14px; margin-bottom: 8px; } } @media screen and (max-width: 480px) { .why-choose-section .why-choose-feature .feature-content h3 { font-size: 14px; margin-bottom: 8px; } } .why-choose-section .why-choose-feature .feature-content p { font-size: 16px; color: #312020; margin: 0; font-family: "Be Vietnam Pro", sans-serif; text-align: justify; } @media screen and (max-width: 1770px) { .why-choose-section .why-choose-feature .feature-content p { font-size: 14px; } } @media screen and (max-width: 1550px) { .why-choose-section .why-choose-feature .feature-content p { font-size: 17px; } } @media screen and (max-width: 1440px) { .why-choose-section .why-choose-feature .feature-content p { font-size: 16px; } } @media screen and (max-width: 1280px) { .why-choose-section .why-choose-feature .feature-content p { font-size: 15px; } } @media screen and (max-width: 1200px) { .why-choose-section .why-choose-feature .feature-content p { font-size: 14px; } } @media screen and (max-width: 992px) { .why-choose-section .why-choose-feature .feature-content p { font-size: 14px; } } @media screen and (max-width: 768px) { .why-choose-section .why-choose-feature .feature-content p { font-size: 14px; } } @media screen and (max-width: 640px) { .why-choose-section .why-choose-feature .feature-content p { font-size: 14px; line-height: 1.6; } } @media screen and (max-width: 480px) { .why-choose-section .why-choose-feature .feature-content p { font-size: 13px; line-height: 1.6; } } /* Partnership Section --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .partnership-section { padding: 60px 0; background-color: #f9f9fb; } @media screen and (max-width: 1770px) { .partnership-section { padding: 54px 0; } } @media screen and (max-width: 1440px) { .partnership-section { padding: 48px 0; } } @media screen and (max-width: 1200px) { .partnership-section { padding: 42px 0; } } @media screen and (max-width: 992px) { .partnership-section { padding: 36px 0; } } @media screen and (max-width: 768px) { .partnership-section { padding: 30px 0; } } @media screen and (max-width: 640px) { .partnership-section { padding: 24px 0; } } @media screen and (max-width: 480px) { .partnership-section { padding: 30px 0; } } .partnership-section .partnership-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 50px; } @media screen and (max-width: 1770px) { .partnership-section .partnership-content { gap: 45px; } } @media screen and (max-width: 1440px) { .partnership-section .partnership-content { gap: 40px; } } @media screen and (max-width: 1200px) { .partnership-section .partnership-content { gap: 35px; } } @media screen and (max-width: 992px) { .partnership-section .partnership-content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 32px; text-align: center; } } @media screen and (max-width: 768px) { .partnership-section .partnership-content { gap: 0; } } @media screen and (max-width: 640px) { .partnership-section .partnership-content { gap: 0; } } @media screen and (max-width: 480px) { .partnership-section .partnership-content { gap: 0; } } .partnership-section .partnership-content-left { text-align: left; width: -webkit-max-content; width: -moz-max-content; width: max-content; white-space: nowrap; } @media screen and (max-width: 992px) { .partnership-section .partnership-content-left { text-align: center; width: 100%; } } .partnership-section .partnership-content-right { text-align: right; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 100%; overflow: hidden; } @media screen and (max-width: 992px) { .partnership-section .partnership-content-right { text-align: center; } } .partnership-section .partnership-title { font-size: 42px; font-weight: 700; color: #00704a; margin: 0; font-family: "Montserrat", sans-serif; line-height: 150%; } @media screen and (max-width: 1770px) { .partnership-section .partnership-title { font-size: 36px; } } @media screen and (max-width: 1440px) { .partnership-section .partnership-title { font-size: 32px; } } @media screen and (max-width: 1200px) { .partnership-section .partnership-title { font-size: 28px; } } @media screen and (max-width: 992px) { .partnership-section .partnership-title { font-size: 24px; } } @media screen and (max-width: 768px) { .partnership-section .partnership-title { font-size: 32px; } } @media screen and (max-width: 640px) { .partnership-section .partnership-title { font-size: 24px; } } @media screen and (max-width: 480px) { .partnership-section .partnership-title { font-size: 24px; } } .partnership-section .partnership-slogan { font-size: 32px; color: #00704a; font-family: "Be Vietnam Pro", sans-serif; margin: 0; line-height: 150%; font-weight: 500; } @media screen and (max-width: 1770px) { .partnership-section .partnership-slogan { font-size: 27px; } } @media screen and (max-width: 1440px) { .partnership-section .partnership-slogan { font-size: 24px; } } @media screen and (max-width: 1200px) { .partnership-section .partnership-slogan { font-size: 21px; } } @media screen and (max-width: 992px) { .partnership-section .partnership-slogan { font-size: 18px; } } @media screen and (max-width: 768px) { .partnership-section .partnership-slogan { font-size: 18px; } } @media screen and (max-width: 640px) { .partnership-section .partnership-slogan { font-size: 16px; } } @media screen and (max-width: 480px) { .partnership-section .partnership-slogan { font-size: 16px; } } .partnership-section .partnership-logos { overflow: hidden; padding: 24px 0; } @media screen and (max-width: 1770px) { .partnership-section .partnership-logos { padding: 22px 0; } } @media screen and (max-width: 1440px) { .partnership-section .partnership-logos { padding: 19px 0; } } @media screen and (max-width: 1200px) { .partnership-section .partnership-logos { padding: 17px 0; } } @media screen and (max-width: 992px) { .partnership-section .partnership-logos { padding: 14px 0; } } @media screen and (max-width: 768px) { .partnership-section .partnership-logos { padding: 16px 0; } } @media screen and (max-width: 640px) { .partnership-section .partnership-logos { padding: 10px 0; } } @media screen and (max-width: 480px) { .partnership-section .partnership-logos { padding: 12px 0; } } .partnership-section .partnership-logos .swiper-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .partnership-section .partnership-logos .swiper-slide { width: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .partnership-section .partner-logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-decoration: none; width: 177px; height: 80px; } @media screen and (max-width: 1770px) { .partnership-section .partner-logo { width: 159px; height: 72px; } } @media screen and (max-width: 1440px) { .partnership-section .partner-logo { width: 142px; height: 64px; } } @media screen and (max-width: 1200px) { .partnership-section .partner-logo { width: 124px; height: 56px; } } @media screen and (max-width: 992px) { .partnership-section .partner-logo { width: 106px; height: 48px; } } @media screen and (max-width: 768px) { .partnership-section .partner-logo { width: 120px; height: 54px; } } @media screen and (max-width: 640px) { .partnership-section .partner-logo { width: 100px; height: 45px; } } @media screen and (max-width: 480px) { .partnership-section .partner-logo { width: 100px; height: 45px; } } .partnership-section .partner-logo img { max-width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 768px) { .partnership-section .partner-logo img { max-width: 120px; } } @media screen and (max-width: 640px) { .partnership-section .partner-logo img { max-width: 100px; } } @media screen and (max-width: 480px) { .partnership-section .partner-logo img { max-width: 100px; } } /* Product Ecosystem Section --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .product-ecosystem-section { padding: 84px 0; } @media screen and (max-width: 1770px) { .product-ecosystem-section { padding: 76px 0; } } @media screen and (max-width: 1440px) { .product-ecosystem-section { padding: 67px 0; } } @media screen and (max-width: 1200px) { .product-ecosystem-section { padding: 59px 0; } } @media screen and (max-width: 992px) { .product-ecosystem-section { padding: 50px 0; } } @media screen and (max-width: 768px) { .product-ecosystem-section { padding: 42px 0; } } @media screen and (max-width: 640px) { .product-ecosystem-section { padding: 34px 0; } } @media screen and (max-width: 480px) { .product-ecosystem-section { padding: 42px 0; } } .product-ecosystem-section .ecosystem-title { font-size: 36px; font-weight: 700; color: #00704a; margin: 0 0 48px; font-family: "Montserrat", sans-serif; } @media screen and (max-width: 1770px) { .product-ecosystem-section .ecosystem-title { font-size: 31px; margin-bottom: 43px; } } @media screen and (max-width: 1440px) { .product-ecosystem-section .ecosystem-title { font-size: 27px; margin-bottom: 38px; } } @media screen and (max-width: 1200px) { .product-ecosystem-section .ecosystem-title { font-size: 34px; margin-bottom: 40px; } } @media screen and (max-width: 992px) { .product-ecosystem-section .ecosystem-title { font-size: 32px; margin-bottom: 32px; } } @media screen and (max-width: 768px) { .product-ecosystem-section .ecosystem-title { font-size: 28px; margin-bottom: 24px; } } @media screen and (max-width: 640px) { .product-ecosystem-section .ecosystem-title { font-size: 22px; margin-bottom: 19px; } } @media screen and (max-width: 480px) { .product-ecosystem-section .ecosystem-title { font-size: 22px; margin-bottom: 17px; } } .product-ecosystem-section .ecosystem-cards { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 300px); gap: 24px; } @media screen and (max-width: 1770px) { .product-ecosystem-section .ecosystem-cards { grid-template-rows: repeat(3, 270px); gap: 22px; } } @media screen and (max-width: 1550px) { .product-ecosystem-section .ecosystem-cards { grid-template-rows: repeat(3, 210px); gap: 20px; } } @media screen and (max-width: 1440px) { .product-ecosystem-section .ecosystem-cards { grid-template-rows: repeat(3, 240px); gap: 19px; } } @media screen and (max-width: 1200px) { .product-ecosystem-section .ecosystem-cards { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 150px); gap: 12px; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(1) { grid-column: 1/3; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(2) { grid-column: 3; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(3) { grid-column: 1; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(4) { grid-column: 2; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(5) { grid-column: 3; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(6) { grid-column: 1; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(7) { grid-column: 2/3; } } @media screen and (max-width: 992px) { .product-ecosystem-section .ecosystem-cards { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 140px); gap: 14px; } } @media screen and (max-width: 768px) { .product-ecosystem-section .ecosystem-cards { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 120px); gap: 14px; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(1) { grid-column: 1; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(2) { grid-column: 2; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(3) { grid-column: 1; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(4) { grid-column: 2; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(5) { grid-column: 1; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(6) { grid-column: 2; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(7) { grid-column: 1; } } @media screen and (max-width: 640px) { .product-ecosystem-section .ecosystem-cards { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 110px); gap: 10px; } } @media screen and (max-width: 480px) { .product-ecosystem-section .ecosystem-cards { grid-template-columns: 1fr; grid-template-rows: repeat(3, 125px); gap: 10px; } } @media screen and (max-width: 440px) { .product-ecosystem-section .ecosystem-cards { grid-template-rows: repeat(3, 100px); gap: 8px; } } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(1) { grid-column: 1; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(1)::after { background-color: #00704a; opacity: 0.75; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(2) { grid-column: 2/4; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(2)::after { background-color: #2ab888; opacity: 0.6; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(3) { grid-column: 4; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(3)::after { background-color: #009864; opacity: 0.75; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(4) { grid-column: 1/3; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(4)::after { background-color: #2d6351; opacity: 0.8; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(5) { grid-column: 3/5; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(5)::after { background-color: #2ab888; opacity: 0.6; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(6) { grid-column: 1; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(6)::after { background-color: #4c8272; opacity: 0.7; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(7) { grid-column: 2/5; } .product-ecosystem-section .ecosystem-cards .ecosystem-card:nth-child(7)::after { background-color: #61d0ab; opacity: 0.6; } .product-ecosystem-section .ecosystem-card { position: relative; border-radius: 8px; overflow: hidden; height: 100%; cursor: pointer; -webkit-transition: -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-decoration: none; } @media screen and (max-width: 1770px) { .product-ecosystem-section .ecosystem-card { min-width: auto; } } @media screen and (max-width: 1440px) { .product-ecosystem-section .ecosystem-card { min-width: auto; } } @media screen and (max-width: 1200px) { .product-ecosystem-section .ecosystem-card { min-width: 220px; } } @media screen and (max-width: 992px) { .product-ecosystem-section .ecosystem-card { min-width: auto; } } @media screen and (max-width: 768px) { .product-ecosystem-section .ecosystem-card { min-width: 160px; } } @media screen and (max-width: 640px) { .product-ecosystem-section .ecosystem-card { min-width: auto; } } @media screen and (max-width: 580px) { .product-ecosystem-section .ecosystem-card { min-width: 125px; } } @media screen and (max-width: 480px) { .product-ecosystem-section .ecosystem-card { min-width: auto; } } @media screen and (max-width: 440px) { .product-ecosystem-section .ecosystem-card { min-width: 100px; } } .product-ecosystem-section .ecosystem-card:hover { -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.11), 0 4px 12px rgba(0, 113, 74, 0.4); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.11), 0 4px 12px rgba(0, 113, 74, 0.4); -webkit-transform: translateY(-5px) scale(1) translateZ(0px); transform: translateY(-5px) scale(1) translateZ(0px); } .product-ecosystem-section .ecosystem-card::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .product-ecosystem-section .ecosystem-card .card-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; } .product-ecosystem-section .ecosystem-card .card-background img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-filter: brightness(0.7); filter: brightness(0.7); -webkit-transition: -webkit-filter 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: -webkit-filter 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out; transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; -webkit-transform-origin: center; transform-origin: center; } .product-ecosystem-section .ecosystem-card:hover .card-background img { -webkit-filter: brightness(0.8); filter: brightness(0.8); } .product-ecosystem-section .ecosystem-card .card-icon { width: 64px; height: 64px; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 16px; } @media screen and (max-width: 1770px) { .product-ecosystem-section .ecosystem-card .card-icon { width: 58px; height: 58px; margin-bottom: 14px; } } @media screen and (max-width: 1440px) { .product-ecosystem-section .ecosystem-card .card-icon { width: 51px; height: 51px; margin-bottom: 13px; } } @media screen and (max-width: 1200px) { .product-ecosystem-section .ecosystem-card .card-icon { width: 50px; height: 50px; margin-bottom: 12px; } } @media screen and (max-width: 992px) { .product-ecosystem-section .ecosystem-card .card-icon { width: 46px; height: 46px; margin-bottom: 12px; } } @media screen and (max-width: 768px) { .product-ecosystem-section .ecosystem-card .card-icon { width: 42px; height: 42px; margin-bottom: 10px; } } @media screen and (max-width: 640px) { .product-ecosystem-section .ecosystem-card .card-icon { width: 38px; height: 38px; margin-bottom: 8px; } } @media screen and (max-width: 576px) { .product-ecosystem-section .ecosystem-card .card-icon { width: 38px; height: 38px; margin-bottom: 8px; } } @media screen and (max-width: 480px) { .product-ecosystem-section .ecosystem-card .card-icon { width: 36px; height: 36px; margin-bottom: 8px; } } @media screen and (max-width: 440px) { .product-ecosystem-section .ecosystem-card .card-icon { width: 32px; height: 32px; margin-bottom: 6px; } } .product-ecosystem-section .ecosystem-card .card-icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .product-ecosystem-section .ecosystem-card .card-text { z-index: 2; color: #ffffff; font-size: 20px; font-weight: 700; font-family: "Montserrat", sans-serif; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } @media screen and (max-width: 1770px) { .product-ecosystem-section .ecosystem-card .card-text { font-size: 17px; } } @media screen and (max-width: 1440px) { .product-ecosystem-section .ecosystem-card .card-text { font-size: 15px; } } @media screen and (max-width: 1200px) { .product-ecosystem-section .ecosystem-card .card-text { font-size: 16px; } } @media screen and (max-width: 992px) { .product-ecosystem-section .ecosystem-card .card-text { font-size: 15px; } } @media screen and (max-width: 768px) { .product-ecosystem-section .ecosystem-card .card-text { font-size: 14px; } } @media screen and (max-width: 640px) { .product-ecosystem-section .ecosystem-card .card-text { font-size: 14px; } } @media screen and (max-width: 576px) { .product-ecosystem-section .ecosystem-card .card-text { font-size: 13px; } } @media screen and (max-width: 480px) { .product-ecosystem-section .ecosystem-card .card-text { font-size: 12px; } } @media screen and (max-width: 440px) { .product-ecosystem-section .ecosystem-card .card-text { font-size: 11px; } } /* Operation Process Section --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .operation-process-section .operation-title { font-size: 36px; font-weight: 700; color: #00704a; margin: 5rem 0; font-family: "Montserrat", sans-serif; line-height: 1.5; } @media screen and (max-width: 1770px) { .operation-process-section .operation-title { font-size: 32px; } } @media screen and (max-width: 1440px) { .operation-process-section .operation-title { font-size: 30px; } } @media screen and (max-width: 1200px) { .operation-process-section .operation-title { font-size: 26px; margin-bottom: 40px; } } @media screen and (max-width: 992px) { .operation-process-section .operation-title { font-size: 23px; margin-bottom: 32px; } } @media screen and (max-width: 768px) { .operation-process-section .operation-title { font-size: 20px; margin-bottom: 24px; } } @media screen and (max-width: 640px) { .operation-process-section .operation-title { font-size: 18px; } } @media screen and (max-width: 480px) { .operation-process-section .operation-title { font-size: max(18px, 4vw); margin-bottom: 20px; } } .operation-process-section .step-title { margin: 0 0 12px; -webkit-transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out; transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out; color: #00704a; } @media screen and (max-width: 1770px) { .operation-process-section .step-title { margin-bottom: 10.8px; } } @media screen and (max-width: 1440px) { .operation-process-section .step-title { margin-bottom: 9.6px; } } @media screen and (max-width: 1200px) { .operation-process-section .step-title { margin-bottom: 8.4px; } } @media screen and (max-width: 992px) { .operation-process-section .step-title { margin-bottom: 7.2px; } } @media screen and (max-width: 768px) { .operation-process-section .step-title { margin-bottom: 6px; } } @media screen and (max-width: 640px) { .operation-process-section .step-title { margin-bottom: 4.8px; } } @media screen and (max-width: 480px) { .operation-process-section .step-title { margin-bottom: 6px; } } .operation-process-section .operation-subtitle { font-weight: 400; font-size: 18px; line-height: 150%; letter-spacing: 0%; margin: 0 0 48px; } @media screen and (max-width: 1770px) { .operation-process-section .operation-subtitle { font-size: 15.3px; margin-bottom: 43.2px; } } @media screen and (max-width: 1440px) { .operation-process-section .operation-subtitle { font-size: 13.5px; margin-bottom: 38.4px; } } @media screen and (max-width: 1200px) { .operation-process-section .operation-subtitle { font-size: 11.7px; margin-bottom: 33.6px; } } @media screen and (max-width: 992px) { .operation-process-section .operation-subtitle { font-size: 9.9px; margin-bottom: 28.8px; } } @media screen and (max-width: 768px) { .operation-process-section .operation-subtitle { font-size: 9px; margin-bottom: 24px; } } @media screen and (max-width: 640px) { .operation-process-section .operation-subtitle { font-size: 14px; margin-bottom: 19.2px; } } @media screen and (max-width: 480px) { .operation-process-section .operation-subtitle { font-size: 14px; margin-bottom: 24px; } } .operation-process-section .operation-subtitle p { margin: 0; } .operation-process-section .operation-steps { --op-step-width: 220px; --op-line-length: calc(var(--op-steps, 5) * var(--op-step-width)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; padding: 24px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; scroll-snap-align: start; scroll-snap-stop: always; scroll-snap-align: start; } .operation-process-section .operation-steps::before { content: ""; position: absolute; top: 18px; left: 0px; width: max(100%, var(--op-line-length)); height: 2px; background-color: #e0e0e0; z-index: 1; border-radius: 2px; } @media screen and (max-width: 1770px) { .operation-process-section .operation-steps { --op-step-width: calc(220px * 0.9); padding: 21.6px 0; } .operation-process-section .operation-steps::before { top: 16.2px; } } @media screen and (max-width: 1440px) { .operation-process-section .operation-steps { --op-step-width: calc(220px * 0.8); padding: 19.2px 0; } .operation-process-section .operation-steps::before { top: 14.4px; } } @media screen and (max-width: 1200px) { .operation-process-section .operation-steps { --op-step-width: calc(220px * 0.7); padding: 16.8px 0; } .operation-process-section .operation-steps::before { top: 12.6px; } } @media screen and (max-width: 992px) { .operation-process-section .operation-steps { --op-step-width: calc(220px * 0.6); padding: 14.4px 0; } .operation-process-section .operation-steps::before { top: 10.8px; } } @media screen and (max-width: 768px) { .operation-process-section .operation-steps { --op-step-width: calc(220px * 0.5); padding: 12px 0; } .operation-process-section .operation-steps::before { top: 9px; } } @media screen and (max-width: 640px) { .operation-process-section .operation-steps { --op-step-width: calc(220px * 0.4); padding: 9.6px 0; } .operation-process-section .operation-steps::before { top: 7.2px; } } @media screen and (max-width: 480px) { .operation-process-section .operation-steps { --op-step-width: calc(220px * 0.5); padding: 12px 0; } .operation-process-section .operation-steps::before { top: 9px; } } .operation-process-section .operation-step { -webkit-box-flex: 0; -ms-flex: 0 0 300px; flex: 0 0 300px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; position: relative; z-index: 2; width: 300px; scroll-snap-align: start; } @media screen and (max-width: 1770px) { .operation-process-section .operation-step { -webkit-box-flex: 0; -ms-flex: 0 0 270px; flex: 0 0 270px; width: 270px; } } @media screen and (max-width: 1440px) { .operation-process-section .operation-step { -webkit-box-flex: 0; -ms-flex: 0 0 240px; flex: 0 0 240px; width: 240px; } } @media screen and (max-width: 1200px) { .operation-process-section .operation-step { -webkit-box-flex: 0; -ms-flex: 0 0 210px; flex: 0 0 210px; width: 210px; } } @media screen and (max-width: 992px) { .operation-process-section .operation-step { -webkit-box-flex: 0; -ms-flex: 0 0 180px; flex: 0 0 180px; width: 180px; } } @media screen and (max-width: 768px) { .operation-process-section .operation-step { -webkit-box-flex: 0; -ms-flex: 0 0 150px; flex: 0 0 150px; width: 150px; } } @media screen and (max-width: 640px) { .operation-process-section .operation-step { -webkit-box-flex: 0; -ms-flex: 0 0 120px; flex: 0 0 120px; width: 120px; } } @media screen and (max-width: 480px) { .operation-process-section .operation-step { -webkit-box-flex: 0; -ms-flex: 0 0 150px; flex: 0 0 150px; width: 150px; } } .operation-process-section .step-node { width: 36px; height: 36px; border-radius: 50%; background-color: transparent; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: -24px; left: 16.5px; -webkit-transition: background-color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; } @media screen and (max-width: 1770px) { .operation-process-section .step-node { width: 32.4px; height: 32.4px; top: -21.6px; left: 14.85px; } } @media screen and (max-width: 1440px) { .operation-process-section .step-node { width: 28.8px; height: 28.8px; top: -19.2px; left: 13.2px; } } @media screen and (max-width: 1200px) { .operation-process-section .step-node { width: 25.2px; height: 25.2px; top: -16.8px; left: 11.55px; } } @media screen and (max-width: 992px) { .operation-process-section .step-node { width: 21.6px; height: 21.6px; top: -14.4px; left: 9.9px; } } @media screen and (max-width: 768px) { .operation-process-section .step-node { width: 18px; height: 18px; top: -12px; left: 8.25px; } } @media screen and (max-width: 640px) { .operation-process-section .step-node { width: 20px; height: 20px; top: -9.6px; left: 6.6px; } } @media screen and (max-width: 480px) { .operation-process-section .step-node { width: 20px; height: 20px; top: -12px; left: 8.25px; } } .operation-process-section .step-node .step-node-inner { width: 24px; height: 24px; border-radius: 50%; background-color: #e1e1e1; -webkit-transition: background-color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; } @media screen and (max-width: 1770px) { .operation-process-section .step-node .step-node-inner { width: 21.6px; height: 21.6px; } } @media screen and (max-width: 1440px) { .operation-process-section .step-node .step-node-inner { width: 19.2px; height: 19.2px; } } @media screen and (max-width: 1200px) { .operation-process-section .step-node .step-node-inner { width: 16.8px; height: 16.8px; } } @media screen and (max-width: 992px) { .operation-process-section .step-node .step-node-inner { width: 14.4px; height: 14.4px; } } @media screen and (max-width: 768px) { .operation-process-section .step-node .step-node-inner { width: 12px; height: 12px; } } @media screen and (max-width: 640px) { .operation-process-section .step-node .step-node-inner { width: 14px; height: 14px; } } @media screen and (max-width: 480px) { .operation-process-section .step-node .step-node-inner { width: 14px; height: 14px; } } .operation-process-section .step-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; text-align: left; margin-top: 3rem; } .operation-process-section .step-icon { width: 70px; height: 70px; margin-bottom: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 36px; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } @media screen and (max-width: 1770px) { .operation-process-section .step-icon { width: 63px; height: 63px; margin-bottom: 14.4px; margin-top: 32.4px; } } @media screen and (max-width: 1440px) { .operation-process-section .step-icon { width: 56px; height: 56px; margin-bottom: 12.8px; margin-top: 28.8px; } } @media screen and (max-width: 1200px) { .operation-process-section .step-icon { width: 49px; height: 49px; margin-bottom: 11.2px; margin-top: 25.2px; } } @media screen and (max-width: 992px) { .operation-process-section .step-icon { width: 42px; height: 42px; margin-bottom: 9.6px; margin-top: 21.6px; } } @media screen and (max-width: 768px) { .operation-process-section .step-icon { width: 35px; height: 35px; margin-bottom: 8px; margin-top: 18px; } } @media screen and (max-width: 640px) { .operation-process-section .step-icon { width: 28px; height: 28px; margin-bottom: 6.4px; margin-top: 14.4px; } } @media screen and (max-width: 480px) { .operation-process-section .step-icon { width: 35px; height: 35px; margin-bottom: 8px; margin-top: 18px; } } .operation-process-section .step-icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; opacity: 0.3; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .operation-process-section .operation-step.step-active .step-icon { opacity: 1; } .operation-process-section .operation-step.step-active .step-icon img { opacity: 1; } .operation-process-section .operation-step.step-active .step-text { color: #00704a; } .operation-process-section .operation-step { cursor: pointer; } .operation-process-section .operation-step .step-node.step-node-active { background-color: transparent; } .operation-process-section .operation-step .step-node.step-node-active .step-node-inner { background-color: #e1e1e1; } .operation-process-section .operation-step.step-active .step-icon { opacity: 0.3; } .operation-process-section .operation-step.step-active .step-icon img { opacity: 0.3; } .operation-process-section .operation-step.step-active .step-text { color: #312020; } .operation-process-section .operation-step:hover .step-node { background-color: rgba(0, 112, 74, 0.15); } .operation-process-section .operation-step:hover .step-node .step-node-inner { background-color: #00704a; } .operation-process-section .operation-step:hover .step-icon { opacity: 1; } .operation-process-section .operation-step:hover .step-icon img { opacity: 1; } .operation-process-section .operation-step:hover .step-title { color: #00704a; } .operation-process-section .operation-step:hover .step-text { color: #00704a; } .operation-process-section .step-text { font-size: 18px; font-weight: 500; color: #312020; line-height: 1.6; max-width: 300px; -webkit-transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out; transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out; } @media screen and (max-width: 1770px) { .operation-process-section .step-text { font-size: 15.3px; max-width: 270px; padding-right: 10px; } } @media screen and (max-width: 1440px) { .operation-process-section .step-text { font-size: 13.5px; max-width: 240px; } } @media screen and (max-width: 1200px) { .operation-process-section .step-text { font-size: 11.7px; max-width: 210px; padding-right: 8px; } } @media screen and (max-width: 992px) { .operation-process-section .step-text { font-size: 9.9px; max-width: 180px; } } @media screen and (max-width: 768px) { .operation-process-section .step-text { font-size: 14px; max-width: 100%; } } @media screen and (max-width: 640px) { .operation-process-section .step-text { font-size: 14px; } } @media screen and (max-width: 480px) { .operation-process-section .step-text { font-size: 14px; } } /* Support Section --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .olhs-support { padding: 50px 0; } @media screen and (max-width: 1770px) { .olhs-support { padding: 45px 0; } } @media screen and (max-width: 1440px) { .olhs-support { padding: 40px 0; } } @media screen and (max-width: 1200px) { .olhs-support { padding: 35px 0; } } @media screen and (max-width: 992px) { .olhs-support { padding: 30px 0; } } @media screen and (max-width: 768px) { .olhs-support { padding: 25px 0; } } @media screen and (max-width: 640px) { .olhs-support { padding: 20px 0; } } @media screen and (max-width: 480px) { .olhs-support { padding: 25px 0; } } .olhs-support .container { background: #f9fbfa; padding: 36px; border-radius: 8px; } @media screen and (max-width: 1770px) { .olhs-support .container { padding: 32px; } } @media screen and (max-width: 1440px) { .olhs-support .container { padding: 29px; } } @media screen and (max-width: 1200px) { .olhs-support .container { padding: 25px; } } @media screen and (max-width: 992px) { .olhs-support .container { padding: 22px; } } @media screen and (max-width: 768px) { .olhs-support .container { padding: 18px; } } @media screen and (max-width: 640px) { .olhs-support .container { padding: 14px; } } @media screen and (max-width: 480px) { .olhs-support .container { padding: 18px; } } .olhs-support .olhs-section-header { text-align: center; max-width: 840px; margin: 0 auto 50px; } @media screen and (max-width: 1770px) { .olhs-support .olhs-section-header { margin-bottom: 45px; } } @media screen and (max-width: 1440px) { .olhs-support .olhs-section-header { margin-bottom: 40px; } } @media screen and (max-width: 1200px) { .olhs-support .olhs-section-header { margin-bottom: 35px; } } @media screen and (max-width: 992px) { .olhs-support .olhs-section-header { margin-bottom: 30px; } } @media screen and (max-width: 768px) { .olhs-support .olhs-section-header { margin-bottom: 25px; } } @media screen and (max-width: 640px) { .olhs-support .olhs-section-header { margin-bottom: 20px; } } @media screen and (max-width: 480px) { .olhs-support .olhs-section-header { margin-bottom: 25px; } } .olhs-support .olhs-section-title { margin: 0 0 8px; font-size: 36px; line-height: 1.5; font-weight: 700; color: #00704a; font-family: "Montserrat", sans-serif; } @media screen and (max-width: 1770px) { .olhs-support .olhs-section-title { font-size: 32px; } } @media screen and (max-width: 1440px) { .olhs-support .olhs-section-title { font-size: 30px; } } @media screen and (max-width: 1200px) { .olhs-support .olhs-section-title { font-size: 26px; } } @media screen and (max-width: 992px) { .olhs-support .olhs-section-title { font-size: 23px; } } @media screen and (max-width: 768px) { .olhs-support .olhs-section-title { font-size: 20px; } } @media screen and (max-width: 640px) { .olhs-support .olhs-section-title { font-size: 18px; } } @media screen and (max-width: 480px) { .olhs-support .olhs-section-title { font-size: max(18px, 4vw); } } .olhs-support .olhs-section-subtitle { margin: 0; font-size: 18px; line-height: 1.6; color: #000; } @media screen and (max-width: 1770px) { .olhs-support .olhs-section-subtitle { font-size: 16px; } } @media screen and (max-width: 1440px) { .olhs-support .olhs-section-subtitle { font-size: 15px; } } @media screen and (max-width: 1200px) { .olhs-support .olhs-section-subtitle { font-size: 14px; } } @media screen and (max-width: 992px) { .olhs-support .olhs-section-subtitle { font-size: 14px; } } @media screen and (max-width: 768px) { .olhs-support .olhs-section-subtitle { font-size: 13px; } } @media screen and (max-width: 640px) { .olhs-support .olhs-section-subtitle { font-size: 13px; } } @media screen and (max-width: 480px) { .olhs-support .olhs-section-subtitle { font-size: max(13px, 3.2vw); } } .olhs-support .olhs-section-subtitle p { margin: 0; } .olhs-support .olhs-support__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; row-gap: 50px; } @media screen and (max-width: 1770px) { .olhs-support .olhs-support__grid { gap: 18px; row-gap: 45px; } } @media screen and (max-width: 1440px) { .olhs-support .olhs-support__grid { gap: 16px; row-gap: 40px; } } @media screen and (max-width: 1200px) { .olhs-support .olhs-support__grid { gap: 14px; row-gap: 35px; } } @media screen and (max-width: 992px) { .olhs-support .olhs-support__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; row-gap: 30px; } } @media screen and (max-width: 768px) { .olhs-support .olhs-support__grid { gap: 10px; row-gap: 25px; } } @media screen and (max-width: 640px) { .olhs-support .olhs-support__grid { gap: 8px; row-gap: 20px; } } @media screen and (max-width: 480px) { .olhs-support .olhs-support__grid { grid-template-columns: 1fr; gap: 10px; row-gap: 20px; } } .olhs-support .olhs-support-card { background: #ffffff; border-radius: 10px; -webkit-box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1); box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1); box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1); padding: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; min-height: 252px; color: #00704a; -webkit-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; } .olhs-support .olhs-support-card:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-box-shadow: 0 20px 36px rgba(0, 0, 0, 0.12); box-shadow: 0 20px 36px rgba(0, 0, 0, 0.12); } @media screen and (max-width: 1770px) { .olhs-support .olhs-support-card { padding: 43px; min-height: auto; gap: 18px; } } @media screen and (max-width: 1440px) { .olhs-support .olhs-support-card { padding: 38px; gap: 16px; } } @media screen and (max-width: 1200px) { .olhs-support .olhs-support-card { padding: 34px; gap: 14px; } } @media screen and (max-width: 992px) { .olhs-support .olhs-support-card { padding: 29px; gap: 12px; } } @media screen and (max-width: 768px) { .olhs-support .olhs-support-card { padding: 24px; gap: 10px; } } @media screen and (max-width: 640px) { .olhs-support .olhs-support-card { padding: 19px; gap: 8px; } } @media screen and (max-width: 480px) { .olhs-support .olhs-support-card { padding: 20px; min-height: auto; gap: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } } .olhs-support .olhs-support-card__icon { width: 64px; height: 64px; -webkit-box-flex: 0; -ms-flex: 0 0 64px; flex: 0 0 64px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .olhs-support .olhs-support-card__icon img { display: block; width: 64px; height: 64px; -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 1770px) { .olhs-support .olhs-support-card__icon { width: 58px; height: 58px; -webkit-box-flex: 0; -ms-flex: 0 0 58px; flex: 0 0 58px; } .olhs-support .olhs-support-card__icon img { width: 58px; height: 58px; } } @media screen and (max-width: 1440px) { .olhs-support .olhs-support-card__icon { width: 51px; height: 51px; -webkit-box-flex: 0; -ms-flex: 0 0 51px; flex: 0 0 51px; } .olhs-support .olhs-support-card__icon img { width: 51px; height: 51px; } } @media screen and (max-width: 1200px) { .olhs-support .olhs-support-card__icon { width: 45px; height: 45px; -webkit-box-flex: 0; -ms-flex: 0 0 45px; flex: 0 0 45px; } .olhs-support .olhs-support-card__icon img { width: 45px; height: 45px; } } @media screen and (max-width: 992px) { .olhs-support .olhs-support-card__icon { width: 38px; height: 38px; -webkit-box-flex: 0; -ms-flex: 0 0 38px; flex: 0 0 38px; } .olhs-support .olhs-support-card__icon img { width: 38px; height: 38px; } } @media screen and (max-width: 768px) { .olhs-support .olhs-support-card__icon { width: 32px; height: 32px; -webkit-box-flex: 0; -ms-flex: 0 0 32px; flex: 0 0 32px; } .olhs-support .olhs-support-card__icon img { width: 32px; height: 32px; } } @media screen and (max-width: 640px) { .olhs-support .olhs-support-card__icon { width: 26px; height: 26px; -webkit-box-flex: 0; -ms-flex: 0 0 26px; flex: 0 0 26px; } .olhs-support .olhs-support-card__icon img { width: 26px; height: 26px; } } @media screen and (max-width: 480px) { .olhs-support .olhs-support-card__icon { width: 32px; height: 32px; -webkit-box-flex: 0; -ms-flex: 0 0 32px; flex: 0 0 32px; margin: 0 auto; } .olhs-support .olhs-support-card__icon img { width: 32px; height: 32px; } } .olhs-support .olhs-support-card__desc { font-size: 20px; font-family: "Montserrat", sans-serif; font-weight: 600; line-height: 1.5; margin: 0; } .olhs-support .olhs-support-card__desc p { margin: 0; } @media screen and (max-width: 1770px) { .olhs-support .olhs-support-card__desc { font-size: 18px; line-height: 1.48; } } @media screen and (max-width: 1440px) { .olhs-support .olhs-support-card__desc { font-size: 17px; line-height: 1.46; } } @media screen and (max-width: 1200px) { .olhs-support .olhs-support-card__desc { font-size: 16px; line-height: 1.44; } } @media screen and (max-width: 992px) { .olhs-support .olhs-support-card__desc { font-size: 15px; line-height: 1.42; } } @media screen and (max-width: 768px) { .olhs-support .olhs-support-card__desc { font-size: 15px; line-height: 1.4; } } @media screen and (max-width: 640px) { .olhs-support .olhs-support-card__desc { font-size: 14px; line-height: 1.38; } } @media screen and (max-width: 480px) { .olhs-support .olhs-support-card__desc { font-size: max(13px, 3.2vw); line-height: 1.42; } } /* Packages Section --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .olhs-packages { padding: 84px 0; overflow-x: hidden; } @media screen and (max-width: 1919px) { .olhs-packages { padding: 72px 0; } } @media screen and (max-width: 1440px) { .olhs-packages { padding: 64px 0; } } @media screen and (max-width: 1200px) { .olhs-packages { padding: 56px 0; } } @media screen and (max-width: 992px) { .olhs-packages { padding: 48px 0; } } @media screen and (max-width: 768px) { .olhs-packages { padding: 40px 0; } } @media screen and (max-width: 576px) { .olhs-packages { padding: 32px 0; } } @media screen and (max-width: 768px) { .olhs-packages .container { padding: 0 12px; } } @media screen and (max-width: 576px) { .olhs-packages .container { padding: 0 8px; } } @media screen and (max-width: 400px) { .olhs-packages .container { padding: 0 6px; } } @media screen and (max-width: 360px) { .olhs-packages .container { padding: 0 4px; } } .olhs-packages .olhs-section-title { margin: 0 0 48px; font-weight: 700; color: #00704a; font-family: "Montserrat", sans-serif; font-style: Bold; font-size: 36px; line-height: 150%; letter-spacing: 0%; vertical-align: middle; } @media screen and (max-width: 1919px) { .olhs-packages .olhs-section-title { margin-bottom: 44px; } } @media screen and (max-width: 1200px) { .olhs-packages .olhs-section-title { margin-bottom: 40px; } } @media screen and (max-width: 992px) { .olhs-packages .olhs-section-title { font-size: 32px; margin-bottom: 36px; } } @media screen and (max-width: 768px) { .olhs-packages .olhs-section-title { font-size: 28px; margin-bottom: 28px; } } @media screen and (max-width: 576px) { .olhs-packages .olhs-section-title { font-size: 24px; } } .olhs-packages .olhs-section-subtitle { margin: 0 0 32px; font-size: 16px; line-height: 150%; color: #312020; text-align: center; } .olhs-packages .olhs-section-subtitle p { margin: 0; } @media screen and (max-width: 1919px) { .olhs-packages .olhs-section-subtitle { margin-bottom: 28px; } } @media screen and (max-width: 1200px) { .olhs-packages .olhs-section-subtitle { margin-bottom: 26px; } } @media screen and (max-width: 768px) { .olhs-packages .olhs-section-subtitle { margin-bottom: 24px; } } .olhs-packages .olhs-packages__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 24px; width: 100%; max-width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 1920px) { .olhs-packages .olhs-packages__grid { gap: 22px; } } @media screen and (max-width: 1600px) { .olhs-packages .olhs-packages__grid { gap: 20px; } } @media screen and (max-width: 1400px) { .olhs-packages .olhs-packages__grid { gap: 18px; } } @media screen and (max-width: 1280px) { .olhs-packages .olhs-packages__grid { gap: 16px; } } @media screen and (max-width: 1200px) { .olhs-packages .olhs-packages__grid { gap: 14px; } } @media screen and (max-width: 992px) { .olhs-packages .olhs-packages__grid { gap: 12px; } } @media screen and (max-width: 768px) { .olhs-packages .olhs-packages__grid { gap: 10px; grid-template-columns: repeat(4, 1fr); } } @media screen and (max-width: 576px) { .olhs-packages .olhs-packages__grid { gap: 8px; } } @media screen and (max-width: 480px) { .olhs-packages .olhs-packages__grid { gap: 6px; } } @media screen and (max-width: 400px) { .olhs-packages .olhs-packages__grid { gap: 5px; } } @media screen and (max-width: 360px) { .olhs-packages .olhs-packages__grid { gap: 5px; } } @media screen and (max-width: 320px) { .olhs-packages .olhs-packages__grid { gap: 5px; } } .olhs-packages .olhs-package-card { aspect-ratio: 1/1; border: 1px solid #d2d2d2; border-radius: 12px; -webkit-box-shadow: 0px 4px 24.2px 0px rgba(226, 226, 226, 0.2); box-shadow: 0px 4px 24.2px 0px rgba(226, 226, 226, 0.2); padding: 12px 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8px; text-align: center; color: #312020; width: 100%; min-width: 0; max-width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border-color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; transition: border-color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; } .olhs-packages .olhs-package-card:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); color: #00704a; -webkit-box-shadow: 0 20px 36px rgba(0, 0, 0, 0.12); box-shadow: 0 20px 36px rgba(0, 0, 0, 0.12); border-color: rgba(0, 112, 74, 0.5); } @media screen and (max-width: 1600px) { .olhs-packages .olhs-package-card { padding: 10px 6px; } } @media screen and (max-width: 1280px) { .olhs-packages .olhs-package-card { padding: 8px 4px; } } @media screen and (max-width: 992px) { .olhs-packages .olhs-package-card { padding: 6px 3px; border-radius: 10px; } } @media screen and (max-width: 768px) { .olhs-packages .olhs-package-card { padding: 4px 3px; border-radius: 8px; } } @media screen and (max-width: 576px) { .olhs-packages .olhs-package-card { padding: 4px 2px; border-radius: 6px; gap: 4px; } } @media screen and (max-width: 480px) { .olhs-packages .olhs-package-card { padding: 3px 2px; border-radius: 5px; } } @media screen and (max-width: 400px) { .olhs-packages .olhs-package-card { border-radius: 4px; } } @media screen and (max-width: 360px) { .olhs-packages .olhs-package-card { border-radius: 4px; } } @media screen and (max-width: 320px) { .olhs-packages .olhs-package-card { border-radius: 3px; } } .olhs-packages .olhs-package-card__icon { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-negative: 0; flex-shrink: 0; } .olhs-packages .olhs-package-card__icon img { width: 90px; height: 90px; -o-object-fit: contain; object-fit: contain; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } @media screen and (max-width: 1600px) { .olhs-packages .olhs-package-card__icon img { width: 80px; height: 80px; } } @media screen and (max-width: 1280px) { .olhs-packages .olhs-package-card__icon img { width: 54px; height: 54px; } } @media screen and (max-width: 992px) { .olhs-packages .olhs-package-card__icon img { width: 54px; height: 54px; } } @media screen and (max-width: 768px) { .olhs-packages .olhs-package-card__icon img { width: 50px; height: 50px; } } .olhs-packages .olhs-package-card__label { margin: 0; font-size: 14px; line-height: 130%; font-weight: 600; word-break: break-word; overflow-wrap: break-word; -ms-hyphens: auto; hyphens: auto; } @media screen and (max-width: 1600px) { .olhs-packages .olhs-package-card__label { font-size: 13px; } } @media screen and (max-width: 1400px) { .olhs-packages .olhs-package-card__label { font-size: 12px; } } @media screen and (max-width: 1280px) { .olhs-packages .olhs-package-card__label { font-size: 11px; } } @media screen and (max-width: 1200px) { .olhs-packages .olhs-package-card__label { font-size: 10px; } } @media screen and (max-width: 768px) { .olhs-packages .olhs-package-card__label { font-size: 10px; } } @media screen and (max-width: 576px) { .olhs-packages .olhs-package-card__label { font-size: 10px; } } @media screen and (max-width: 480px) { .olhs-packages .olhs-package-card__label { font-size: 10px; } } /* Video Guide Section --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .video-guide-section { padding: 60px 0; background-color: #fff; } @media (max-width: 768px) { .video-guide-section { padding: 40px 0; } } .video-guide-header { margin-bottom: 24px; } .video-guide-label { display: block; font-size: 20px; font-weight: 400; font-family: "Montserrat", sans-serif; color: #312020; margin-bottom: 4px; line-height: 1.5; } .video-guide-title { font-size: 28px; font-weight: 600; font-family: "Montserrat", sans-serif; color: #312020; margin: 0; line-height: 1.5; } @media (max-width: 768px) { .video-guide-title { font-size: 24px; } } .video-guide-player { position: relative; width: 100%; height: 444px; border-radius: 16px; overflow: hidden; background-color: #f5f5f5; } @media (max-width: 768px) { .video-guide-player { height: 280px; border-radius: 12px; } } @media (max-width: 576px) { .video-guide-player { height: 200px; } } .video-guide-thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .video-guide-play-btn { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: none; border: none; cursor: pointer; padding: 0; z-index: 2; -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } .video-guide-play-btn:hover { -webkit-transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1); } .video-guide-play-btn:active { -webkit-transform: translate(-50%, -50%) scale(0.95); transform: translate(-50%, -50%) scale(0.95); } .video-guide-play-btn svg { -webkit-filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3)); } @media (max-width: 576px) { .video-guide-play-btn svg { width: 48px; height: 48px; } } .video-guide-iframe-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; } .video-guide-iframe-container iframe { width: 100%; height: 100%; border: none; } /* FAQ Section --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .olhs-faq { padding: 70px 0 90px; } @media screen and (max-width: 1770px) { .olhs-faq { padding: 63px 0 81px; } } @media screen and (max-width: 1440px) { .olhs-faq { padding: 56px 0 72px; } } @media screen and (max-width: 1200px) { .olhs-faq { padding: 49px 0 63px; } } @media screen and (max-width: 992px) { .olhs-faq { padding: 42px 0 54px; } } @media screen and (max-width: 768px) { .olhs-faq { padding: 35px 0 45px; } } @media screen and (max-width: 640px) { .olhs-faq { padding: 28px 0 36px; } } @media screen and (max-width: 480px) { .olhs-faq { padding: 35px 0 45px; } } .olhs-faq .olhs-section-title { margin: 0 0 48px; font-weight: 700; color: #00704a; font-family: "Montserrat", sans-serif; font-style: Bold; font-size: 36px; line-height: 1.5; letter-spacing: 0%; vertical-align: middle; } @media screen and (max-width: 1770px) { .olhs-faq .olhs-section-title { font-size: 32px; margin-bottom: 44px; } } @media screen and (max-width: 1440px) { .olhs-faq .olhs-section-title { font-size: 30px; margin-bottom: 40px; } } @media screen and (max-width: 1200px) { .olhs-faq .olhs-section-title { font-size: 26px; margin-bottom: 35px; } } @media screen and (max-width: 992px) { .olhs-faq .olhs-section-title { font-size: 23px; margin-bottom: 30px; } } @media screen and (max-width: 768px) { .olhs-faq .olhs-section-title { font-size: 20px; margin-bottom: 24px; } } @media screen and (max-width: 640px) { .olhs-faq .olhs-section-title { font-size: 18px; margin-bottom: 20px; } } @media screen and (max-width: 480px) { .olhs-faq .olhs-section-title { font-size: max(18px, 4vw); margin-bottom: 16px; } } .olhs-faq .olhs-section-subtitle { margin: 0 0 32px; font-size: 16px; line-height: 1.6; color: #312020; text-align: center; } .olhs-faq .olhs-section-subtitle p { margin: 0; } @media screen and (max-width: 1770px) { .olhs-faq .olhs-section-subtitle { font-size: 15px; margin-bottom: 29px; } } @media screen and (max-width: 1440px) { .olhs-faq .olhs-section-subtitle { font-size: 14px; margin-bottom: 26px; } } @media screen and (max-width: 1200px) { .olhs-faq .olhs-section-subtitle { font-size: 14px; margin-bottom: 22px; } } @media screen and (max-width: 992px) { .olhs-faq .olhs-section-subtitle { font-size: 13px; margin-bottom: 19px; } } @media screen and (max-width: 768px) { .olhs-faq .olhs-section-subtitle { font-size: 13px; margin-bottom: 16px; } } @media screen and (max-width: 640px) { .olhs-faq .olhs-section-subtitle { font-size: max(13px, 3.2vw); margin-bottom: 13px; } } @media screen and (max-width: 480px) { .olhs-faq .olhs-section-subtitle { font-size: max(13px, 3.2vw); margin-bottom: 12px; } } .olhs-faq .olhs-faq__accordion { -webkit-box-shadow: 6.96px 6.96px 13.91px 0px rgba(0, 0, 0, 0.15); box-shadow: 6.96px 6.96px 13.91px 0px rgba(0, 0, 0, 0.15); border: 1px solid rgb(238, 238, 238); border-radius: 12px; } .olhs-faq .olhs-faq__item { border-bottom: 0.5px solid rgb(184, 184, 184); overflow: hidden; max-height: 128px; outline: none; color: #fff; border-bottom: 0.5px solid #fff; background: #00704a; -webkit-transition: max-height 0.35s ease, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; transition: max-height 0.35s ease, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; transition: max-height 0.35s ease, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; transition: max-height 0.35s ease, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; } .olhs-faq .olhs-faq__item:hover { background: rgba(0, 112, 74, 0.85); -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); } .olhs-faq .olhs-faq__item[open] { max-height: 820px; } .olhs-faq .olhs-faq__item:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; } .olhs-faq .olhs-faq__item:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border-bottom: none; } .olhs-faq .olhs-faq__item summary { list-style: none; } .olhs-faq .olhs-faq__question { padding: 15px 8px 16px 20px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-weight: 500; font-size: 20px; line-height: 1.5; cursor: pointer; } @media screen and (max-width: 1770px) { .olhs-faq .olhs-faq__question { padding: 14px 7px 15px 18px; font-size: 18px; gap: 18px; } } @media screen and (max-width: 1440px) { .olhs-faq .olhs-faq__question { padding: 13px 7px 14px 16px; font-size: 17px; gap: 16px; } } @media screen and (max-width: 1200px) { .olhs-faq .olhs-faq__question { padding: 12px 6px 13px 14px; font-size: 16px; gap: 14px; } } @media screen and (max-width: 992px) { .olhs-faq .olhs-faq__question { padding: 11px 6px 12px 12px; font-size: 15px; gap: 12px; } } @media screen and (max-width: 768px) { .olhs-faq .olhs-faq__question { padding: 10px 5px 11px 10px; font-size: 15px; gap: 10px; } } @media screen and (max-width: 640px) { .olhs-faq .olhs-faq__question { padding: 9px 4px 10px 8px; font-size: 14px; gap: 8px; } } @media screen and (max-width: 480px) { .olhs-faq .olhs-faq__question { padding: 10px 5px 11px 12px; font-size: max(13px, 3.2vw); gap: 10px; } } .olhs-faq .olhs-faq__question::-webkit-details-marker { display: none; } .olhs-faq .olhs-faq__toggle-icon { width: 32px; min-width: 32px; height: 32px; padding: 4px 6px; background-color: transparent; background-image: url("/wp-content/themes/one-lab/assets/images/icons/plus.svg"); background-repeat: no-repeat; background-position: center; background-size: 24px 24px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; cursor: pointer; -webkit-transition: background-color 0.3s ease-in-out, background-image 0.2s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: background-color 0.3s ease-in-out, background-image 0.2s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, background-image 0.2s ease-in-out, opacity 0.3s ease-in-out; transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, background-image 0.2s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } @media screen and (max-width: 1770px) { .olhs-faq .olhs-faq__toggle-icon { width: 29px; min-width: 29px; height: 29px; padding: 3px 5px; background-size: 22px 22px; } } @media screen and (max-width: 1440px) { .olhs-faq .olhs-faq__toggle-icon { width: 26px; min-width: 26px; height: 26px; padding: 3px 4px; background-size: 20px 20px; } } @media screen and (max-width: 1200px) { .olhs-faq .olhs-faq__toggle-icon { width: 22px; min-width: 22px; height: 22px; padding: 2px 4px; background-size: 17px 17px; } } @media screen and (max-width: 992px) { .olhs-faq .olhs-faq__toggle-icon { width: 19px; min-width: 19px; height: 19px; padding: 2px 3px; background-size: 15px 15px; } } @media screen and (max-width: 768px) { .olhs-faq .olhs-faq__toggle-icon { width: 16px; min-width: 16px; height: 16px; padding: 2px 2px; background-size: 12px 12px; } } @media screen and (max-width: 640px) { .olhs-faq .olhs-faq__toggle-icon { width: 13px; min-width: 13px; height: 13px; padding: 1px 2px; background-size: 10px 10px; } } @media screen and (max-width: 480px) { .olhs-faq .olhs-faq__toggle-icon { width: 18px; min-width: 18px; height: 18px; padding: 2px 3px; background-size: 14px 14px; } } .olhs-faq .olhs-faq__toggle-icon:hover { background-color: rgba(255, 255, 255, 0.1); border-radius: 6px; } .olhs-faq .olhs-faq__item[open] .olhs-faq__toggle-icon { background-image: url("/wp-content/themes/one-lab/assets/images/icons/minus.svg"); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .olhs-faq .olhs-faq__answer { padding: 20px 50px; max-height: 0; opacity: 0; overflow: hidden; -webkit-transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease; transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease; background: #ffffff; color: #312020; font-size: 16px; line-height: 1.6; border-top: 1px solid rgba(0, 112, 74, 0.08); } @media screen and (max-width: 1770px) { .olhs-faq .olhs-faq__answer { padding: 18px 45px; font-size: 15px; } } @media screen and (max-width: 1440px) { .olhs-faq .olhs-faq__answer { padding: 16px 40px; font-size: 14px; } } @media screen and (max-width: 1200px) { .olhs-faq .olhs-faq__answer { padding: 14px 35px; font-size: 14px; } } @media screen and (max-width: 992px) { .olhs-faq .olhs-faq__answer { padding: 12px 30px; font-size: 14px; } } @media screen and (max-width: 768px) { .olhs-faq .olhs-faq__answer { padding: 12px 25px; font-size: 14px; } } @media screen and (max-width: 640px) { .olhs-faq .olhs-faq__answer { padding: 10px 20px; font-size: 13px; } } @media screen and (max-width: 480px) { .olhs-faq .olhs-faq__answer { padding: 12px 15px; font-size: max(13px, 3.2vw); } } .olhs-faq .olhs-faq__answer p { margin: 0 0 10px; } .olhs-faq .olhs-faq__answer p:last-child { margin-bottom: 0; } .olhs-faq .olhs-faq__item[open] .olhs-faq__answer { padding: 20px 50px; max-height: 520px; opacity: 1; } @media screen and (max-width: 1770px) { .olhs-faq .olhs-faq__item[open] .olhs-faq__answer { max-height: 480px; } } @media screen and (max-width: 1440px) { .olhs-faq .olhs-faq__item[open] .olhs-faq__answer { max-height: 460px; } } @media screen and (max-width: 1280px) { .olhs-faq .olhs-faq__item[open] .olhs-faq__answer { padding: 13px 25px; max-height: 420px; } } @media screen and (max-width: 1023px) { .olhs-faq .olhs-faq__item[open] .olhs-faq__answer { padding: 12px 20px; max-height: 400px; } } @media screen and (max-width: 768px) { .olhs-faq .olhs-faq__item[open] .olhs-faq__answer { padding: 12px 20px; max-height: 400px; } } @media screen and (max-width: 576px) { .olhs-faq .olhs-faq__item[open] .olhs-faq__answer { padding: 8px 15px; max-height: 350px; } } /* About Expert Section --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .about-expert-section { padding: 0px 0 18px; } @media screen and (max-width: 1770px) { .about-expert-section { padding: 0px 0 16px; } } @media screen and (max-width: 1440px) { .about-expert-section { padding: 0px 0 14px; } } @media screen and (max-width: 1200px) { .about-expert-section { padding: 0px 0 13px; } } @media screen and (max-width: 992px) { .about-expert-section { padding: 0px 0 11px; } } @media screen and (max-width: 768px) { .about-expert-section { padding: 0px 0 9px; } } @media screen and (max-width: 640px) { .about-expert-section { padding: 0px 0 7px; } } @media screen and (max-width: 480px) { .about-expert-section { padding: 0px 0 9px; } } .about-expert-section .about-expert-title { font-size: 36px; font-weight: 700; color: #00704a; font-family: "Montserrat", sans-serif; margin: 0 0 30px; } @media screen and (max-width: 1770px) { .about-expert-section .about-expert-title { font-size: 30.6px; margin-bottom: 27px; } } @media screen and (max-width: 1440px) { .about-expert-section .about-expert-title { font-size: 27px; margin-bottom: 24px; } } @media screen and (max-width: 1200px) { .about-expert-section .about-expert-title { font-size: 23.4px; margin-bottom: 21px; } } @media screen and (max-width: 992px) { .about-expert-section .about-expert-title { font-size: 19.8px; margin-bottom: 18px; } } @media screen and (max-width: 768px) { .about-expert-section .about-expert-title { font-size: 18px; margin-bottom: 15px; } } @media screen and (max-width: 640px) { .about-expert-section .about-expert-title { font-size: 20px; margin-bottom: 12px; } } @media screen and (max-width: 480px) { .about-expert-section .about-expert-title { font-size: 20px; margin-bottom: 15px; } } .about-expert-section .about-expert-testimonials { margin-top: 42px; padding: 32px 16px; position: relative; overflow: hidden; } @media screen and (max-width: 1770px) { .about-expert-section .about-expert-testimonials { margin-top: 37.8px; padding: 28.8px 14px; } } @media screen and (max-width: 1440px) { .about-expert-section .about-expert-testimonials { margin-top: 33.6px; padding: 25.6px 13px; } } @media screen and (max-width: 1200px) { .about-expert-section .about-expert-testimonials { margin-top: 29.4px; padding: 22.4px 11px; } } @media screen and (max-width: 992px) { .about-expert-section .about-expert-testimonials { margin-top: 25.2px; padding: 19.2px 10px; } } @media screen and (max-width: 768px) { .about-expert-section .about-expert-testimonials { margin-top: 21px; margin-left: -11px; padding: 16px 8px; } } @media screen and (max-width: 640px) { .about-expert-section .about-expert-testimonials { margin-top: 16.8px; padding: 12.8px 6px; } } @media screen and (max-width: 480px) { .about-expert-section .about-expert-testimonials { margin-top: 21px; padding: 16px 8px; } } .about-expert-section .testimonial-card { width: 100%; padding: 32px; border-radius: 12px; -webkit-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .about-expert-section .testimonial-card:hover { -webkit-transform: translateY(-8px); transform: translateY(-8px); -webkit-box-shadow: 0 20px 48px rgba(49, 32, 32, 0.15); box-shadow: 0 20px 48px rgba(49, 32, 32, 0.15); } .about-expert-section .testimonial-card:hover .testimonial-card__quote::before { color: #00723f; -webkit-transform: scale(1.1); transform: scale(1.1); } .about-expert-section .testimonial-card:hover .testimonial-card__avatar { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.3); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.3); } @media (max-width: 1770px) { .about-expert-section .testimonial-card { padding: 28.8px; } } @media (max-width: 1440px) { .about-expert-section .testimonial-card { padding: 25.6px; } } @media (max-width: 1200px) { .about-expert-section .testimonial-card { padding: 22.4px; } } @media (max-width: 992px) { .about-expert-section .testimonial-card { padding: 19.2px; } } @media (max-width: 768px) { .about-expert-section .testimonial-card { padding: 16px; } } @media (max-width: 640px) { .about-expert-section .testimonial-card { padding: 12.8px; } } @media (max-width: 480px) { .about-expert-section .testimonial-card { padding: 16px; } } .about-expert-section .testimonial-card__quote { font-size: 16px; font-style: italic; line-height: 1.7; color: #312020; margin: 0 0 24px 0; position: relative; padding-left: 24px; } @media (max-width: 1770px) { .about-expert-section .testimonial-card__quote { font-size: 13.6px; padding-left: 21.6px; } } @media (max-width: 1440px) { .about-expert-section .testimonial-card__quote { font-size: 12px; padding-left: 19.2px; } } @media (max-width: 1200px) { .about-expert-section .testimonial-card__quote { font-size: 10.4px; padding-left: 16.8px; } } @media (max-width: 992px) { .about-expert-section .testimonial-card__quote { font-size: 8.8px; padding-left: 14.4px; } } @media (max-width: 768px) { .about-expert-section .testimonial-card__quote { font-size: 14px; padding-left: 12px; } } @media (max-width: 640px) { .about-expert-section .testimonial-card__quote { font-size: 14px; padding-left: 9.6px; } } @media (max-width: 480px) { .about-expert-section .testimonial-card__quote { font-size: 14px; padding-left: 12px; } } .about-expert-section .testimonial-card__quote::before { content: '"'; position: absolute; left: 0; top: -8px; font-size: 42px; font-family: Georgia, serif; color: #00704a; line-height: 1; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media (max-width: 1770px) { .about-expert-section .testimonial-card__quote::before { font-size: 35.7px; top: -7px; } } @media (max-width: 1440px) { .about-expert-section .testimonial-card__quote::before { font-size: 31.5px; top: -6px; } } @media (max-width: 1200px) { .about-expert-section .testimonial-card__quote::before { font-size: 27.3px; top: -5px; } } @media (max-width: 992px) { .about-expert-section .testimonial-card__quote::before { font-size: 23.1px; top: -4px; } } @media (max-width: 768px) { .about-expert-section .testimonial-card__quote::before { font-size: 21px; top: -4px; } } @media (max-width: 640px) { .about-expert-section .testimonial-card__quote::before { font-size: 20px; top: -3px; } } @media (max-width: 480px) { .about-expert-section .testimonial-card__quote::before { font-size: 20px; top: -4px; } } .about-expert-section .testimonial-card__meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; } .about-expert-section .testimonial-card__avatar { width: 48px; height: 48px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media (max-width: 1770px) { .about-expert-section .testimonial-card__avatar { width: 43.2px; height: 43.2px; } } @media (max-width: 1440px) { .about-expert-section .testimonial-card__avatar { width: 38.4px; height: 38.4px; } } @media (max-width: 1200px) { .about-expert-section .testimonial-card__avatar { width: 33.6px; height: 33.6px; } } @media (max-width: 992px) { .about-expert-section .testimonial-card__avatar { width: 28.8px; height: 28.8px; } } @media (max-width: 768px) { .about-expert-section .testimonial-card__avatar { width: 24px; height: 24px; } } @media (max-width: 640px) { .about-expert-section .testimonial-card__avatar { width: 20px; height: 20px; } } @media (max-width: 480px) { .about-expert-section .testimonial-card__avatar { width: 24px; height: 24px; } } .about-expert-section .testimonial-card__avatar--letter { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: linear-gradient(135deg, #00704a 0%, #00723f 100%); color: #ffffff; font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 700; } @media (max-width: 1770px) { .about-expert-section .testimonial-card__avatar--letter { font-size: 15.3px; } } @media (max-width: 1440px) { .about-expert-section .testimonial-card__avatar--letter { font-size: 13.5px; } } @media (max-width: 1200px) { .about-expert-section .testimonial-card__avatar--letter { font-size: 11.7px; } } @media (max-width: 992px) { .about-expert-section .testimonial-card__avatar--letter { font-size: 9.9px; } } @media (max-width: 768px) { .about-expert-section .testimonial-card__avatar--letter { font-size: 14px; } } @media (max-width: 640px) { .about-expert-section .testimonial-card__avatar--letter { font-size: 14px; } } @media (max-width: 480px) { .about-expert-section .testimonial-card__avatar--letter { font-size: 14px; } } .about-expert-section .testimonial-card__name { font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 600; color: #312020; margin: 0 0 4px 0; } @media (max-width: 1770px) { .about-expert-section .testimonial-card__name { font-size: 13.6px; margin-bottom: 3.6px; } } @media (max-width: 1440px) { .about-expert-section .testimonial-card__name { font-size: 12px; margin-bottom: 3.2px; } } @media (max-width: 1200px) { .about-expert-section .testimonial-card__name { font-size: 10.4px; margin-bottom: 2.8px; } } @media (max-width: 992px) { .about-expert-section .testimonial-card__name { font-size: 8.8px; margin-bottom: 2.4px; } } @media (max-width: 768px) { .about-expert-section .testimonial-card__name { font-size: 14px; margin-bottom: 2px; } } @media (max-width: 640px) { .about-expert-section .testimonial-card__name { font-size: 14px; margin-bottom: 1.6px; } } @media (max-width: 480px) { .about-expert-section .testimonial-card__name { font-size: 14px; margin-bottom: 2px; } } .about-expert-section .testimonial-card__role { font-size: 14px; color: #aaaaaa; margin: 0; } @media (max-width: 1770px) { .about-expert-section .testimonial-card__role { font-size: 11.9px; } } @media (max-width: 1440px) { .about-expert-section .testimonial-card__role { font-size: 10.5px; } } @media (max-width: 1200px) { .about-expert-section .testimonial-card__role { font-size: 9.1px; } } @media (max-width: 992px) { .about-expert-section .testimonial-card__role { font-size: 7.7px; } } @media (max-width: 768px) { .about-expert-section .testimonial-card__role { font-size: 12px; } } @media (max-width: 640px) { .about-expert-section .testimonial-card__role { font-size: 12px; } } @media (max-width: 480px) { .about-expert-section .testimonial-card__role { font-size: 12px; } } .about-expert-section .testimonial-quote-icon { width: 25px; height: 23px; } @media screen and (max-width: 1770px) { .about-expert-section .testimonial-quote-icon { width: 22.5px; height: 20.7px; } } @media screen and (max-width: 1440px) { .about-expert-section .testimonial-quote-icon { width: 20px; height: 18.4px; } } @media screen and (max-width: 1200px) { .about-expert-section .testimonial-quote-icon { width: 17.5px; height: 16.1px; } } @media screen and (max-width: 992px) { .about-expert-section .testimonial-quote-icon { width: 15px; height: 13.8px; } } @media screen and (max-width: 768px) { .about-expert-section .testimonial-quote-icon { width: 12.5px; height: 11.5px; } } @media screen and (max-width: 640px) { .about-expert-section .testimonial-quote-icon { width: 10px; height: 9.2px; } } @media screen and (max-width: 480px) { .about-expert-section .testimonial-quote-icon { width: 12.5px; height: 12px; } } .about-expert-section .testimonial-quote-icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .about-expert-section .testimonial-text { font-size: 16px; color: #312020; margin: 19px 0 0 0; font-family: "Be Vietnam Pro", sans-serif; padding-right: 12px; line-height: 1.6; } @media screen and (max-width: 1770px) { .about-expert-section .testimonial-text { font-size: 14px; padding-right: 11px; } } @media screen and (max-width: 1440px) { .about-expert-section .testimonial-text { font-size: 14px; padding-right: 10px; } } @media screen and (max-width: 1200px) { .about-expert-section .testimonial-text { font-size: 14px; padding-right: 8px; } } @media screen and (max-width: 992px) { .about-expert-section .testimonial-text { font-size: 14px; padding-right: 6px; } } @media screen and (max-width: 768px) { .about-expert-section .testimonial-text { font-size: 14px; padding-right: 0; } } @media screen and (max-width: 640px) { .about-expert-section .testimonial-text { font-size: 14px; } } @media screen and (max-width: 480px) { .about-expert-section .testimonial-text { font-size: 14px; } } .about-expert-section .testimonial-divider { width: 94px; height: 3px; background-color: #00704a; margin: 36px 0; border-radius: 0px; } @media screen and (max-width: 1770px) { .about-expert-section .testimonial-divider { width: 84.6px; margin: 32.4px 0; } } @media screen and (max-width: 1440px) { .about-expert-section .testimonial-divider { width: 75.2px; margin: 28.8px 0; } } @media screen and (max-width: 1200px) { .about-expert-section .testimonial-divider { width: 65.8px; margin: 25.2px 0; } } @media screen and (max-width: 992px) { .about-expert-section .testimonial-divider { width: 56.4px; margin: 21.6px 0; } } @media screen and (max-width: 768px) { .about-expert-section .testimonial-divider { width: 47px; margin: 18px 0; height: 2px; } } @media screen and (max-width: 640px) { .about-expert-section .testimonial-divider { width: 37.6px; margin: 14.4px 0; } } @media screen and (max-width: 480px) { .about-expert-section .testimonial-divider { width: 47px; margin: 18px 0; } } .about-expert-section .testimonial-author { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 19px; margin-top: auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } @media screen and (max-width: 1770px) { .about-expert-section .testimonial-author { gap: 17.1px; } } @media screen and (max-width: 1440px) { .about-expert-section .testimonial-author { gap: 15.2px; } } @media screen and (max-width: 1200px) { .about-expert-section .testimonial-author { gap: 13.3px; } } @media screen and (max-width: 992px) { .about-expert-section .testimonial-author { gap: 11.4px; } } @media screen and (max-width: 768px) { .about-expert-section .testimonial-author { gap: 9.5px; } } @media screen and (max-width: 680px) { .about-expert-section .testimonial-author { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 9.5px; } } @media screen and (max-width: 640px) { .about-expert-section .testimonial-author { gap: 7.6px; } } @media screen and (max-width: 480px) { .about-expert-section .testimonial-author { gap: 9.5px; } } .about-expert-section .author-avatar { width: 102px; height: 102px; border-radius: 24px; overflow: hidden; -ms-flex-negative: 0; flex-shrink: 0; background-color: #f5f5f5; } @media screen and (max-width: 1770px) { .about-expert-section .author-avatar { width: 91.8px; height: 91.8px; border-radius: 21.6px; } } @media screen and (max-width: 1440px) { .about-expert-section .author-avatar { width: 81.6px; height: 81.6px; border-radius: 19.2px; } } @media screen and (max-width: 1200px) { .about-expert-section .author-avatar { width: 71.4px; height: 71.4px; border-radius: 16.8px; } } @media screen and (max-width: 992px) { .about-expert-section .author-avatar { width: 61.2px; height: 61.2px; border-radius: 14.4px; } } @media screen and (max-width: 768px) { .about-expert-section .author-avatar { width: 51px; height: 51px; border-radius: 12px; } } @media screen and (max-width: 640px) { .about-expert-section .author-avatar { width: 40.8px; height: 40.8px; border-radius: 9.6px; } } @media screen and (max-width: 480px) { .about-expert-section .author-avatar { width: 51px; height: 51px; border-radius: 12px; } } .about-expert-section .author-avatar img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .about-expert-section .author-info { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .about-expert-section .author-name { font-size: 20px; font-weight: 600; color: #312020; margin-bottom: 8px; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 1770px) { .about-expert-section .author-name { font-size: 17px; margin-bottom: 7.2px; } } @media screen and (max-width: 1440px) { .about-expert-section .author-name { font-size: 15px; margin-bottom: 6.4px; } } @media screen and (max-width: 1200px) { .about-expert-section .author-name { font-size: 13px; margin-bottom: 5.6px; } } @media screen and (max-width: 992px) { .about-expert-section .author-name { font-size: 11px; margin-bottom: 4.8px; } } @media screen and (max-width: 768px) { .about-expert-section .author-name { font-size: 10px; margin-bottom: 4px; } } @media screen and (max-width: 640px) { .about-expert-section .author-name { font-size: 16px; margin-bottom: 3.2px; } } @media screen and (max-width: 480px) { .about-expert-section .author-name { font-size: 16px; margin-bottom: 4px; } } .about-expert-section .author-position { font-size: 16px; font-weight: 400; color: #312020; margin-bottom: 4px; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 1770px) { .about-expert-section .author-position { font-size: 13.6px; margin-bottom: 3.6px; } } @media screen and (max-width: 1440px) { .about-expert-section .author-position { font-size: 12px; margin-bottom: 3.2px; } } @media screen and (max-width: 1200px) { .about-expert-section .author-position { font-size: 10.4px; margin-bottom: 2.8px; } } @media screen and (max-width: 992px) { .about-expert-section .author-position { font-size: 8.8px; margin-bottom: 2.4px; } } @media screen and (max-width: 768px) { .about-expert-section .author-position { font-size: 8px; margin-bottom: 2px; } } @media screen and (max-width: 640px) { .about-expert-section .author-position { font-size: 14px; margin-bottom: 1.6px; } } @media screen and (max-width: 480px) { .about-expert-section .author-position { font-size: 14px; margin-bottom: 2px; } } .about-expert-section .author-organization { font-size: 16px; color: #312020; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 1770px) { .about-expert-section .author-organization { font-size: 13.6px; } } @media screen and (max-width: 1440px) { .about-expert-section .author-organization { font-size: 12px; } } @media screen and (max-width: 1200px) { .about-expert-section .author-organization { font-size: 10.4px; } } @media screen and (max-width: 992px) { .about-expert-section .author-organization { font-size: 8.8px; } } @media screen and (max-width: 768px) { .about-expert-section .author-organization { font-size: 14px; } } @media screen and (max-width: 640px) { .about-expert-section .author-organization { font-size: 14px; } } @media screen and (max-width: 480px) { .about-expert-section .author-organization { font-size: 14px; } } .about-expert-section .swiper-slide { height: 361px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } @media screen and (max-width: 1770px) { .about-expert-section .swiper-slide { height: 324.9px; } } @media screen and (max-width: 1440px) { .about-expert-section .swiper-slide { height: 288.8px; } } @media screen and (max-width: 1200px) { .about-expert-section .swiper-slide { height: 252.7px; } } @media screen and (max-width: 992px) { .about-expert-section .swiper-slide { height: auto; min-height: 216.6px; } } @media screen and (max-width: 768px) { .about-expert-section .swiper-slide { min-height: 180.5px; } } @media screen and (max-width: 640px) { .about-expert-section .swiper-slide { min-height: 144.4px; } } @media screen and (max-width: 480px) { .about-expert-section .swiper-slide { min-height: 180.5px; } } .about-expert-section .about-expert-pagination { position: relative; margin-top: 90px; text-align: center; } @media screen and (max-width: 1770px) { .about-expert-section .about-expert-pagination { margin-top: 81px; } } @media screen and (max-width: 1440px) { .about-expert-section .about-expert-pagination { margin-top: 72px; } } @media screen and (max-width: 1200px) { .about-expert-section .about-expert-pagination { margin-top: 63px; } } @media screen and (max-width: 992px) { .about-expert-section .about-expert-pagination { margin-top: 54px; } } @media screen and (max-width: 768px) { .about-expert-section .about-expert-pagination { margin-top: 45px; } } @media screen and (max-width: 640px) { .about-expert-section .about-expert-pagination { margin-top: 36px; } } @media screen and (max-width: 480px) { .about-expert-section .about-expert-pagination { margin-top: 45px; } } .about-expert-section .about-expert-pagination .swiper-pagination-bullet { width: 18px; height: 18px; background-color: #d9d9d9; opacity: 1; margin: 0 6px; -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } @media screen and (max-width: 1770px) { .about-expert-section .about-expert-pagination .swiper-pagination-bullet { width: 16.2px; height: 16.2px; margin: 0 5.4px; } } @media screen and (max-width: 1440px) { .about-expert-section .about-expert-pagination .swiper-pagination-bullet { width: 14.4px; height: 14.4px; margin: 0 4.8px; } } @media screen and (max-width: 1200px) { .about-expert-section .about-expert-pagination .swiper-pagination-bullet { width: 12.6px; height: 12.6px; margin: 0 4.2px; } } @media screen and (max-width: 992px) { .about-expert-section .about-expert-pagination .swiper-pagination-bullet { width: 10.8px; height: 10.8px; margin: 0 3.6px; } } @media screen and (max-width: 768px) { .about-expert-section .about-expert-pagination .swiper-pagination-bullet { width: 9px; height: 9px; margin: 0 3px; } } @media screen and (max-width: 640px) { .about-expert-section .about-expert-pagination .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 2.4px; } } @media screen and (max-width: 480px) { .about-expert-section .about-expert-pagination .swiper-pagination-bullet { width: 9px; height: 9px; margin: 0 3px; } } .about-expert-section .about-expert-pagination .swiper-pagination-bullet-active { background-color: #00704a; } /* About Intro Section --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .about-intro-section { position: relative; width: 100%; padding: 0px 0 50px; } @media screen and (max-width: 992px) { .about-intro-section { padding: 0 0 50px; } } @media screen and (max-width: 768px) { .about-intro-section { padding: 0 0 50px; } } @media screen and (max-width: 480px) { .about-intro-section { padding: 0 0 50px; } } .about-intro-section .section-title { font-size: 36px; font-weight: 700; color: #00704a; margin: 0 0 30px; font-family: "Montserrat", sans-serif; } @media screen and (max-width: 1440px) { .about-intro-section .section-title { font-size: 34px; margin-bottom: 28px; } } @media screen and (max-width: 1280px) { .about-intro-section .section-title { font-size: 32px; margin-bottom: 26px; } } @media screen and (max-width: 1023px) { .about-intro-section .section-title { font-size: 30px; margin-bottom: 24px; } } @media screen and (max-width: 992px) { .about-intro-section .section-title { font-size: 28px; margin-bottom: 22px; } } @media screen and (max-width: 768px) { .about-intro-section .section-title { font-size: 26px; margin-bottom: 20px; } } @media screen and (max-width: 480px) { .about-intro-section .section-title { font-size: 22px; margin-bottom: 16px; } } .about-intro-section .about-intro-content { display: grid; grid-template-columns: 1fr 1fr; gap: 78px; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } @media screen and (max-width: 1440px) { .about-intro-section .about-intro-content { gap: 70px; } } @media screen and (max-width: 1280px) { .about-intro-section .about-intro-content { gap: 60px; } } @media screen and (max-width: 1023px) { .about-intro-section .about-intro-content { gap: 50px; } } @media screen and (max-width: 992px) { .about-intro-section .about-intro-content { grid-template-columns: 1fr; gap: 48px; } } @media screen and (max-width: 768px) { .about-intro-section .about-intro-content { gap: 32px; } } @media screen and (max-width: 480px) { .about-intro-section .about-intro-content { gap: 24px; } } .about-intro-section .about-intro-content strong { color: #00704a; } .about-intro-section .about-intro-text .intro-content p { font-size: 18px; line-height: 1.8; color: #312020; margin: 0 0 30px; font-family: "Be Vietnam Pro", sans-serif; text-align: justify; } .about-intro-section .about-intro-text .intro-content p:last-child { margin-bottom: 0; } @media screen and (max-width: 992px) { .about-intro-section .about-intro-text .intro-content p { font-size: 16px; line-height: 1.7; margin-bottom: 24px; } } @media screen and (max-width: 768px) { .about-intro-section .about-intro-text .intro-content p { font-size: 15px; line-height: 1.6; margin-bottom: 20px; } } @media screen and (max-width: 480px) { .about-intro-section .about-intro-text .intro-content p { font-size: 14px; line-height: 1.5; margin-bottom: 16px; } } .about-intro-section .about-intro-image { padding-top: 16px; position: sticky; top: 102px; -ms-flex-item-align: start; align-self: flex-start; } @media screen and (max-width: 992px) { .about-intro-section .about-intro-image { padding-top: 0; -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; position: static; } } .about-intro-section .about-intro-image .image-title { font-size: 32px; font-weight: 700; color: #00704a; margin: 0 0 24px; font-family: "Montserrat", sans-serif; text-align: center; } @media screen and (max-width: 992px) { .about-intro-section .about-intro-image .image-title { font-size: 26px; margin-bottom: 20px; } } @media screen and (max-width: 768px) { .about-intro-section .about-intro-image .image-title { font-size: 24px; margin-bottom: 16px; } } @media screen and (max-width: 480px) { .about-intro-section .about-intro-image .image-title { font-size: 20px; margin-bottom: 12px; } } .about-intro-section .about-intro-image .image-wrapper img { width: 100%; height: auto; display: block; border-radius: 8px; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; } /* Core Values Section --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .core-values-section { position: relative; width: 100%; padding: 0px 0 50px; } @media screen and (max-width: 992px) { .core-values-section { padding: 0 0 50px; } } @media screen and (max-width: 768px) { .core-values-section { padding: 0 0 50px; } } @media screen and (max-width: 480px) { .core-values-section { padding: 0 0 50px; } } .core-values-section .section-title { font-size: 36px; font-weight: 700; color: #00704a; margin: 0 0 30px; font-family: "Montserrat", sans-serif; } @media screen and (max-width: 1440px) { .core-values-section .section-title { font-size: 34px; margin-bottom: 28px; } } @media screen and (max-width: 1280px) { .core-values-section .section-title { font-size: 32px; margin-bottom: 26px; } } @media screen and (max-width: 1023px) { .core-values-section .section-title { font-size: 30px; margin-bottom: 24px; } } @media screen and (max-width: 992px) { .core-values-section .section-title { font-size: 28px; margin-bottom: 22px; } } @media screen and (max-width: 768px) { .core-values-section .section-title { font-size: 26px; margin-bottom: 20px; } } @media screen and (max-width: 480px) { .core-values-section .section-title { font-size: 22px; margin-bottom: 16px; } } .core-values-section .core-values-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; } .core-values-section .core-values-grid .value-item-1, .core-values-section .core-values-grid .value-item-2, .core-values-section .core-values-grid .value-item-3 { grid-column: span 2; } .core-values-section .core-values-grid .value-item-4 { grid-column: span 3; } .core-values-section .core-values-grid .value-item-5 { grid-column: span 3; } .core-values-section .core-values-grid .value-item-6 { grid-column: 3/5; } @media screen and (max-width: 1440px) { .core-values-section .core-values-grid { gap: 18px; } } @media screen and (max-width: 1280px) { .core-values-section .core-values-grid { gap: 16px; } } @media screen and (max-width: 1023px) { .core-values-section .core-values-grid { gap: 16px; } } @media screen and (max-width: 992px) { .core-values-section .core-values-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .core-values-section .core-values-grid .value-item-1, .core-values-section .core-values-grid .value-item-2, .core-values-section .core-values-grid .value-item-3 { grid-column: span 1; } .core-values-section .core-values-grid .value-item-4 { grid-column: span 1; } .core-values-section .core-values-grid .value-item-5 { grid-column: 1/-1; } .core-values-section .core-values-grid .value-item-6 { grid-column: span 1; } } @media screen and (max-width: 768px) { .core-values-section .core-values-grid { grid-template-columns: 1fr; gap: 20px; } .core-values-section .core-values-grid .value-item-1, .core-values-section .core-values-grid .value-item-2, .core-values-section .core-values-grid .value-item-3, .core-values-section .core-values-grid .value-item-4, .core-values-section .core-values-grid .value-item-5, .core-values-section .core-values-grid .value-item-6 { grid-column: 1/-1; } } @media screen and (max-width: 480px) { .core-values-section .core-values-grid { gap: 16px; } } .core-values-section .core-value-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 30px; background-color: #f8f9fa; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 10px; -webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease; transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease; position: relative; } .core-values-section .core-value-item:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); } @media screen and (max-width: 992px) { .core-values-section .core-value-item { padding: 28px; } } @media screen and (max-width: 768px) { .core-values-section .core-value-item { padding: 24px; text-align: center; } } @media screen and (max-width: 480px) { .core-values-section .core-value-item { padding: 20px; } } .core-values-section .core-value-item.value-item-1 { background-color: #f0fdf7; } .core-values-section .core-value-item.value-item-2 { background-color: #f4f4f4; } .core-values-section .core-value-item.value-item-3 { background-color: #f4f4f4; } .core-values-section .core-value-item.value-item-4 { background-color: #f4f4f4; } .core-values-section .core-value-item.value-item-5 { background-color: #f0fdf7; } .core-values-section .core-value-item.value-item-6 { background-color: #f4f4f4; } .core-values-section .core-value-item .value-icon { -ms-flex-negative: 0; flex-shrink: 0; width: 64px; height: 64px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 19px; } @media screen and (max-width: 992px) { .core-values-section .core-value-item .value-icon { width: 56px; height: 56px; margin-bottom: 16px; } } @media screen and (max-width: 768px) { .core-values-section .core-value-item .value-icon { width: 52px; height: 52px; margin-bottom: 16px; margin-left: auto; margin-right: auto; } } @media screen and (max-width: 480px) { .core-values-section .core-value-item .value-icon { width: 48px; height: 48px; margin-bottom: 14px; } } .core-values-section .core-value-item .value-icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .core-values-section .core-value-item .value-title { font-size: 24px; font-weight: 600; color: #312020; margin: 0 0 19px; font-family: "Montserrat", sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); } @media screen and (max-width: 992px) { .core-values-section .core-value-item .value-title { font-size: 22px; margin-bottom: 14px; } } @media screen and (max-width: 768px) { .core-values-section .core-value-item .value-title { font-size: 20px; margin-bottom: 12px; } } @media screen and (max-width: 480px) { .core-values-section .core-value-item .value-title { font-size: 18px; margin-bottom: 10px; } } .core-values-section .core-value-item .value-description { font-size: 16px; line-height: 1.6; color: #312020; margin: 0; font-family: "Be Vietnam Pro", sans-serif; text-align: justify; font-weight: 300; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); } @media screen and (max-width: 992px) { .core-values-section .core-value-item .value-description { font-size: 15px; line-height: 1.5; text-align: left; } } @media screen and (max-width: 768px) { .core-values-section .core-value-item .value-description { font-size: 14px; line-height: 1.5; text-align: center; } } @media screen and (max-width: 480px) { .core-values-section .core-value-item .value-description { font-size: 13px; line-height: 1.5; } } /* Expert Section --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .expert-section { padding: 84px 0; } @media screen and (max-width: 1770px) { .expert-section { padding: 76px 0; } } @media screen and (max-width: 1440px) { .expert-section { padding: 67px 0; } } @media screen and (max-width: 1200px) { .expert-section { padding: 59px 0; } } @media screen and (max-width: 992px) { .expert-section { padding: 50px 0; } } @media screen and (max-width: 768px) { .expert-section { padding: 42px 0; } } @media screen and (max-width: 640px) { .expert-section { padding: 34px 0; } } @media screen and (max-width: 480px) { .expert-section { padding: 42px 0; } } .expert-section .expert-title { font-size: 36px; font-weight: 700; color: #00704a; font-family: "Montserrat", sans-serif; margin: 0 0 48px; line-height: 150%; } @media screen and (max-width: 1770px) { .expert-section .expert-title { font-size: 31px; margin-bottom: 43px; } } @media screen and (max-width: 1440px) { .expert-section .expert-title { font-size: 27px; margin-bottom: 38px; } } @media screen and (max-width: 1200px) { .expert-section .expert-title { font-size: 23px; margin-bottom: 34px; } } @media screen and (max-width: 992px) { .expert-section .expert-title { font-size: 20px; margin-bottom: 32px; } } @media screen and (max-width: 768px) { .expert-section .expert-title { font-size: 18px; margin-bottom: 24px; } } @media screen and (max-width: 640px) { .expert-section .expert-title { font-size: 16px; margin-bottom: 19px; } } @media screen and (max-width: 480px) { .expert-section .expert-title { font-size: 18px; margin-bottom: 20px; } } .expert-section .expert-testimonials { margin-top: 42px; padding: 32px 0; position: relative; overflow: hidden; } @media screen and (max-width: 1770px) { .expert-section .expert-testimonials { margin-top: 38px; padding: 29px 0; } } @media screen and (max-width: 1440px) { .expert-section .expert-testimonials { margin-top: 34px; padding: 26px 0; } } @media screen and (max-width: 1200px) { .expert-section .expert-testimonials { margin-top: 29px; padding: 22px 0; } } @media screen and (max-width: 992px) { .expert-section .expert-testimonials { margin-top: 25px; padding: 19px 0; } } @media screen and (max-width: 768px) { .expert-section .expert-testimonials { margin-top: 21px; padding: 16px 16px; } } @media screen and (max-width: 640px) { .expert-section .expert-testimonials { margin-top: 17px; padding: 13px 12px; } } @media screen and (max-width: 480px) { .expert-section .expert-testimonials { margin-top: 21px; padding: 16px 12px; } } .expert-section .expert-testimonials .swiper-wrapper { position: relative; } .expert-section .expert-testimonials::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 225px; background: -webkit-gradient(linear, left top, right top, from(rgb(255, 255, 255)), color-stop(40%, rgba(255, 255, 255, 0.5)), color-stop(70%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0.3) 70%, rgba(255, 255, 255, 0) 100%); pointer-events: none; z-index: 10; } @media screen and (max-width: 1770px) { .expert-section .expert-testimonials::before { width: 203px; } } @media screen and (max-width: 1440px) { .expert-section .expert-testimonials::before { width: 180px; } } @media screen and (max-width: 1200px) { .expert-section .expert-testimonials::before { width: 158px; } } @media screen and (max-width: 992px) { .expert-section .expert-testimonials::before { width: 135px; } } @media screen and (max-width: 768px) { .expert-section .expert-testimonials::before { display: none; } } .expert-section .expert-testimonials::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 225px; background: -webkit-gradient(linear, right top, left top, from(rgb(255, 255, 255)), color-stop(30%, rgba(255, 255, 255, 0.9)), color-stop(60%, rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0))); background: linear-gradient(270deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.9) 30%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0) 100%); pointer-events: none; z-index: 10; } @media screen and (max-width: 1770px) { .expert-section .expert-testimonials::after { width: 203px; } } @media screen and (max-width: 1440px) { .expert-section .expert-testimonials::after { width: 180px; } } @media screen and (max-width: 1200px) { .expert-section .expert-testimonials::after { width: 158px; } } @media screen and (max-width: 992px) { .expert-section .expert-testimonials::after { width: 135px; } } @media screen and (max-width: 768px) { .expert-section .expert-testimonials::after { width: 113px; } } @media screen and (max-width: 480px) { .expert-section .expert-testimonials::after { display: none; } } .expert-section .testimonial-card { width: 100%; background-color: #ffffff; padding: 32px; -webkit-box-shadow: 8px 8px 24px 0 rgba(0, 0, 0, 0.25); box-shadow: 8px 8px 24px 0 rgba(0, 0, 0, 0.25); position: relative; height: 311px; max-width: 900px; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-radius: 16px; overflow: hidden; -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .expert-section .testimonial-card:hover { -webkit-transform: translateY(-8px); transform: translateY(-8px); -webkit-box-shadow: 0 20px 48px rgba(49, 32, 32, 0.2); box-shadow: 0 20px 48px rgba(49, 32, 32, 0.2); } .expert-section .testimonial-card:hover .author-avatar { -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.2); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.2); } @media screen and (max-width: 1770px) { .expert-section .testimonial-card { padding: 29px; height: auto; } } @media screen and (max-width: 1440px) { .expert-section .testimonial-card { padding: 26px; } } @media screen and (max-width: 1200px) { .expert-section .testimonial-card { padding: 22px; } } @media screen and (max-width: 992px) { .expert-section .testimonial-card { padding: 19px; margin: 0; } } @media screen and (max-width: 768px) { .expert-section .testimonial-card { padding: 16px; } } @media screen and (max-width: 640px) { .expert-section .testimonial-card { padding: 13px; } } @media screen and (max-width: 480px) { .expert-section .testimonial-card { padding: 16px; } } .expert-section .testimonial-quote-icon { width: 25px; height: 23px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media screen and (max-width: 1770px) { .expert-section .testimonial-quote-icon { width: 23px; height: 21px; } } @media screen and (max-width: 1440px) { .expert-section .testimonial-quote-icon { width: 20px; height: 18px; } } @media screen and (max-width: 1200px) { .expert-section .testimonial-quote-icon { width: 18px; height: 16px; } } @media screen and (max-width: 992px) { .expert-section .testimonial-quote-icon { width: 15px; height: 14px; } } @media screen and (max-width: 768px) { .expert-section .testimonial-quote-icon { width: 13px; height: 12px; } } .expert-section .testimonial-quote-icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .expert-section .testimonial-text { font-size: 16px; color: #312020; margin: 14px 0 0 0; font-family: "Be Vietnam Pro", sans-serif; padding-right: 12px; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } @media screen and (max-width: 1770px) { .expert-section .testimonial-text { font-size: 14px; padding-right: 11px; } } @media screen and (max-width: 1440px) { .expert-section .testimonial-text { font-size: 14px; padding-right: 10px; } } @media screen and (max-width: 1200px) { .expert-section .testimonial-text { font-size: 14px; padding-right: 8px; } } @media screen and (max-width: 992px) { .expert-section .testimonial-text { font-size: 14px; padding-right: 6px; } } @media screen and (max-width: 768px) { .expert-section .testimonial-text { font-size: 14px; padding-right: 0; } } @media screen and (max-width: 640px) { .expert-section .testimonial-text { font-size: 14px; } } @media screen and (max-width: 480px) { .expert-section .testimonial-text { font-size: 14px; } } .expert-section .testimonial-divider { width: 80px; height: 3px; background-color: #00704a; margin: 28px 0; border-radius: 0px; } @media screen and (max-width: 1770px) { .expert-section .testimonial-divider { width: 72px; margin: 25px 0; } } @media screen and (max-width: 1440px) { .expert-section .testimonial-divider { width: 64px; margin: 22px 0; } } @media screen and (max-width: 1200px) { .expert-section .testimonial-divider { width: 56px; margin: 20px 0; } } @media screen and (max-width: 992px) { .expert-section .testimonial-divider { width: 48px; margin: 17px 0; } } @media screen and (max-width: 768px) { .expert-section .testimonial-divider { width: 40px; margin-bottom: 14px; } } @media screen and (max-width: 640px) { .expert-section .testimonial-divider { width: 32px; margin: 13px 0; } } @media screen and (max-width: 480px) { .expert-section .testimonial-divider { width: 40px; margin: 14px 0; } } .expert-section .testimonial-author { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; margin-top: auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } @media screen and (max-width: 1770px) { .expert-section .testimonial-author { gap: 14px; } } @media screen and (max-width: 1440px) { .expert-section .testimonial-author { gap: 13px; } } @media screen and (max-width: 1200px) { .expert-section .testimonial-author { gap: 11px; } } @media screen and (max-width: 992px) { .expert-section .testimonial-author { gap: 10px; } } .expert-section .author-avatar { width: 87px; height: 87px; border-radius: 20px; overflow: hidden; -ms-flex-negative: 0; flex-shrink: 0; background-color: #f5f5f5; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media screen and (max-width: 1770px) { .expert-section .author-avatar { width: 79px; height: 79px; border-radius: 18px; } } @media screen and (max-width: 1440px) { .expert-section .author-avatar { width: 70px; height: 70px; border-radius: 16px; } } @media screen and (max-width: 1200px) { .expert-section .author-avatar { width: 60px; height: 60px; border-radius: 14px; } } .expert-section .author-avatar img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .expert-section .author-info { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .expert-section .author-name { font-size: 20px; font-weight: 600; color: #312020; margin-bottom: 8px; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 1770px) { .expert-section .author-name { font-size: 17px; margin-bottom: 7px; } } @media screen and (max-width: 1440px) { .expert-section .author-name { font-size: 15px; margin-bottom: 6px; } } @media screen and (max-width: 1200px) { .expert-section .author-name { font-size: 14px; margin-bottom: 5px; } } @media screen and (max-width: 992px) { .expert-section .author-name { font-size: 16px; margin-bottom: 4px; } } @media screen and (max-width: 768px) { .expert-section .author-name { font-size: 16px; margin-bottom: 4px; } } @media screen and (max-width: 640px) { .expert-section .author-name { font-size: 16px; margin-bottom: 3px; } } @media screen and (max-width: 480px) { .expert-section .author-name { font-size: 16px; margin-bottom: 4px; } } .expert-section .author-position { font-size: 16px; font-weight: 400; color: #312020; margin-bottom: 4px; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 1770px) { .expert-section .author-position { font-size: 14px; margin-bottom: 3px; } } @media screen and (max-width: 1440px) { .expert-section .author-position { font-size: 12px; margin-bottom: 2px; } } @media screen and (max-width: 1200px) { .expert-section .author-position { font-size: 14px; margin-bottom: 2px; } } @media screen and (max-width: 992px) { .expert-section .author-position { font-size: 14px; margin-bottom: 2px; } } @media screen and (max-width: 768px) { .expert-section .author-position { font-size: 14px; } } @media screen and (max-width: 640px) { .expert-section .author-position { font-size: 13px; } } @media screen and (max-width: 480px) { .expert-section .author-position { font-size: 13px; } } .expert-section .author-organization { font-size: 16px; color: #312020; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 1770px) { .expert-section .author-organization { font-size: 14px; } } @media screen and (max-width: 1440px) { .expert-section .author-organization { font-size: 12px; } } @media screen and (max-width: 1200px) { .expert-section .author-organization { font-size: 14px; } } @media screen and (max-width: 992px) { .expert-section .author-organization { font-size: 14px; } } @media screen and (max-width: 768px) { .expert-section .author-organization { font-size: 14px; } } @media screen and (max-width: 640px) { .expert-section .author-organization { font-size: 13px; } } @media screen and (max-width: 480px) { .expert-section .author-organization { font-size: 13px; } } .expert-section .swiper-slide { height: 311px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } @media screen and (max-width: 1770px) { .expert-section .swiper-slide { height: auto; } } /* Expert Team Section --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .expert-team-section { padding: 0 0 50px; } @media screen and (max-width: 992px) { .expert-team-section { padding: 0 0 40px; } } @media screen and (max-width: 768px) { .expert-team-section { padding: 0 0 30px; } } @media screen and (max-width: 480px) { .expert-team-section { padding: 0 0 24px; } } .expert-team-section .expert-team-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 30px; } @media screen and (max-width: 1440px) { .expert-team-section .expert-team-header { margin-bottom: 28px; } } @media screen and (max-width: 1280px) { .expert-team-section .expert-team-header { margin-bottom: 26px; } } @media screen and (max-width: 1023px) { .expert-team-section .expert-team-header { margin-bottom: 24px; } } @media screen and (max-width: 992px) { .expert-team-section .expert-team-header { margin-bottom: 22px; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 12px; } } @media screen and (max-width: 768px) { .expert-team-section .expert-team-header { margin-bottom: 20px; gap: 10px; } } @media screen and (max-width: 480px) { .expert-team-section .expert-team-header { margin-bottom: 16px; gap: 8px; } } .expert-team-section .expert-team-title { font-size: 36px; font-weight: 700; color: #00704a; margin: 0; font-family: "Montserrat", sans-serif; } @media screen and (max-width: 1440px) { .expert-team-section .expert-team-title { font-size: 34px; } } @media screen and (max-width: 1280px) { .expert-team-section .expert-team-title { font-size: 32px; } } @media screen and (max-width: 1023px) { .expert-team-section .expert-team-title { font-size: 30px; } } @media screen and (max-width: 992px) { .expert-team-section .expert-team-title { font-size: 28px; } } @media screen and (max-width: 768px) { .expert-team-section .expert-team-title { font-size: 26px; } } @media screen and (max-width: 480px) { .expert-team-section .expert-team-title { font-size: 22px; } } .expert-team-section .expert-team-navigation { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } @media screen and (max-width: 768px) { .expert-team-section .expert-team-navigation { gap: 8px; } } .expert-team-section .expert-team-nav-btn { width: 40px; height: 40px; background: transparent; border: none; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .expert-team-section .expert-team-nav-btn:hover { opacity: 0.7; } .expert-team-section .expert-team-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; } .expert-team-section .expert-team-nav-btn svg { width: 16px; height: 21px; display: block; } @media screen and (max-width: 480px) { .expert-team-section .expert-team-nav-btn { width: 32px; height: 32px; } .expert-team-section .expert-team-nav-btn svg { width: 14px; height: 18px; } } .expert-team-section .expert-team-slider { position: relative; padding: 0; } .expert-team-section .swiper-wrapper { padding: 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 1440px) { .expert-team-section .swiper-wrapper { padding: 14px; } } @media screen and (max-width: 1280px) { .expert-team-section .swiper-wrapper { padding: 13px; } } @media screen and (max-width: 1024px) { .expert-team-section .swiper-wrapper { padding: 12px; } } @media screen and (max-width: 992px) { .expert-team-section .swiper-wrapper { padding: 12px; } } @media screen and (max-width: 768px) { .expert-team-section .swiper-wrapper { padding: 10px; } } @media screen and (max-width: 480px) { .expert-team-section .swiper-wrapper { padding: 8px; } } .expert-team-section .expert-card { background: #ffffff; overflow: hidden; position: relative; height: auto; padding: 27.8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 22px; border: 1.4px solid transparent; -webkit-transition: all 0.6s cubic-bezier(0.64, 0.01, 0.07, 1.65); transition: all 0.6s cubic-bezier(0.64, 0.01, 0.07, 1.65); border-radius: 22px; -webkit-box-shadow: 7px 7px 14px 0px rgba(0, 0, 0, 0.15); box-shadow: 7px 7px 14px 0px rgba(0, 0, 0, 0.15); } @media screen and (max-width: 1440px) { .expert-team-section .expert-card { padding: 26px; gap: 21px; border-radius: 21px; } } @media screen and (max-width: 1280px) { .expert-team-section .expert-card { padding: 25px; gap: 20px; border-radius: 20px; } } @media screen and (max-width: 1024px) { .expert-team-section .expert-card { padding: 24px; gap: 19px; border-radius: 20px; } } @media screen and (max-width: 992px) { .expert-team-section .expert-card { padding: 24px; gap: 18px; border-radius: 20px; } } @media screen and (max-width: 768px) { .expert-team-section .expert-card { padding: 20px; gap: 16px; border-radius: 18px; } } @media screen and (max-width: 576px) { .expert-team-section .expert-card { padding: 18px; gap: 15px; border-radius: 16px; } } @media screen and (max-width: 480px) { .expert-team-section .expert-card { padding: 16px; gap: 14px; border-radius: 16px; } } .expert-team-section .expert-card:hover { -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); border-color: #00704a; -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-transition: all 0.6s cubic-bezier(0.64, 0.01, 0.07, 1.65); transition: all 0.6s cubic-bezier(0.64, 0.01, 0.07, 1.65); } .expert-team-section .expert-card:hover .expert-info .expert-description { opacity: 1; max-height: 200px; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media screen and (max-width: 1440px) { .expert-team-section .expert-card:hover .expert-info .expert-description { max-height: 195px; } } @media screen and (max-width: 1280px) { .expert-team-section .expert-card:hover .expert-info .expert-description { max-height: 190px; } } @media screen and (max-width: 1024px) { .expert-team-section .expert-card:hover .expert-info .expert-description { max-height: 185px; } } @media screen and (max-width: 992px) { .expert-team-section .expert-card:hover .expert-info .expert-description { max-height: 180px; } } @media screen and (max-width: 768px) { .expert-team-section .expert-card:hover .expert-info .expert-description { max-height: 160px; } } @media screen and (max-width: 480px) { .expert-team-section .expert-card:hover .expert-info .expert-description { max-height: 140px; } } .expert-team-section .expert-card:hover .expert-image img { -webkit-transform: scale(1.05); transform: scale(1.05); } .expert-team-section .expert-card .expert-image { width: 100%; aspect-ratio: 1/1; overflow: hidden; -ms-flex-negative: 0; flex-shrink: 0; border-radius: 11px; position: relative; } @media screen and (max-width: 1440px) { .expert-team-section .expert-card .expert-image { border-radius: 10.5px; } } @media screen and (max-width: 1280px) { .expert-team-section .expert-card .expert-image { border-radius: 10px; } } @media screen and (max-width: 1024px) { .expert-team-section .expert-card .expert-image { border-radius: 10px; } } @media screen and (max-width: 768px) { .expert-team-section .expert-card .expert-image { border-radius: 10px; } } @media screen and (max-width: 480px) { .expert-team-section .expert-card .expert-image { border-radius: 8px; } } .expert-team-section .expert-card .expert-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .expert-team-section .expert-card .expert-info { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; gap: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; min-height: 100px; } @media screen and (max-width: 1440px) { .expert-team-section .expert-card .expert-info { gap: 4.5px; min-height: 95px; } } @media screen and (max-width: 1280px) { .expert-team-section .expert-card .expert-info { gap: 4.5px; min-height: 92px; } } @media screen and (max-width: 1024px) { .expert-team-section .expert-card .expert-info { gap: 4px; min-height: 90px; } } @media screen and (max-width: 992px) { .expert-team-section .expert-card .expert-info { gap: 4px; min-height: 90px; } } @media screen and (max-width: 768px) { .expert-team-section .expert-card .expert-info { gap: 4px; min-height: 80px; } } @media screen and (max-width: 480px) { .expert-team-section .expert-card .expert-info { gap: 3px; min-height: 70px; } } .expert-team-section .expert-card .expert-info .expert-name { font-size: 24px; font-weight: 600; color: #312020; font-family: "Montserrat", sans-serif; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; margin: 0; } @media screen and (max-width: 1440px) { .expert-team-section .expert-card .expert-info .expert-name { font-size: 23px; } } @media screen and (max-width: 1280px) { .expert-team-section .expert-card .expert-info .expert-name { font-size: 22px; } } @media screen and (max-width: 1024px) { .expert-team-section .expert-card .expert-info .expert-name { font-size: 22px; } } @media screen and (max-width: 768px) { .expert-team-section .expert-card .expert-info .expert-name { font-size: 22px; } } @media screen and (max-width: 480px) { .expert-team-section .expert-card .expert-info .expert-name { font-size: 20px; } } .expert-team-section .expert-card .expert-info .expert-position { font-size: 18px; color: #535353; font-family: "Be Vietnam Pro", sans-serif; font-weight: 400; line-height: 1.5; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; margin: 0; } @media screen and (max-width: 1440px) { .expert-team-section .expert-card .expert-info .expert-position { font-size: 17px; } } @media screen and (max-width: 1280px) { .expert-team-section .expert-card .expert-info .expert-position { font-size: 17px; } } @media screen and (max-width: 1024px) { .expert-team-section .expert-card .expert-info .expert-position { font-size: 17px; } } @media screen and (max-width: 768px) { .expert-team-section .expert-card .expert-info .expert-position { font-size: 17px; } } @media screen and (max-width: 480px) { .expert-team-section .expert-card .expert-info .expert-position { font-size: 16px; } } .expert-team-section .expert-card .expert-info .expert-description { text-align: left; color: #aaaaaa; opacity: 0; margin: 0; max-height: 0; overflow: hidden; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; margin: 0; } .expert-team-section .expert-card .expert-info .expert-description p { font-size: 16px; margin: 0; font-family: "Be Vietnam Pro", sans-serif; font-weight: 400; line-height: 1.6; } @media screen and (max-width: 1440px) { .expert-team-section .expert-card .expert-info .expert-description p { font-size: 15px; } } @media screen and (max-width: 1280px) { .expert-team-section .expert-card .expert-info .expert-description p { font-size: 15px; } } @media screen and (max-width: 1024px) { .expert-team-section .expert-card .expert-info .expert-description p { font-size: 15px; } } @media screen and (max-width: 768px) { .expert-team-section .expert-card .expert-info .expert-description p { font-size: 15px; line-height: 1.5; } } @media screen and (max-width: 480px) { .expert-team-section .expert-card .expert-info .expert-description p { font-size: 14px; line-height: 1.5; } } /* Featured Products Section --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * Featured Products Section Styles */ .featured-products-section { padding: 84px 0 0px; } @media (max-width: 1200px) { .featured-products-section { padding: 60px 0 0px; } } @media (max-width: 768px) { .featured-products-section { padding: 40px 0 0px; } } @media (max-width: 576px) { .featured-products-section { padding: 32px 0 0px; } } .featured-products-section__grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; gap: 20px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } @media (max-width: 1920px) { .featured-products-section__grid { gap: 20px; } } @media (max-width: 1440px) { .featured-products-section__grid { gap: 18px; } } @media (max-width: 1200px) { .featured-products-section__grid { gap: 16px; } } @media (max-width: 992px) { .featured-products-section__grid { gap: 14px; } } @media (max-width: 768px) { .featured-products-section__grid { gap: 10px; } } @media (max-width: 640px) { .featured-products-section__grid { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } } .featured-product-card { position: relative; height: 138px; border-radius: 12px; overflow: hidden; background: #00704a; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; -webkit-box-flex: 1; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; max-width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } @media (max-width: 640px) { .featured-product-card { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; min-width: 100%; max-width: 100%; } } @media (max-width: 480px) { .featured-product-card { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; min-width: 100%; max-width: 100%; } } @media (max-width: 1770px) { .featured-product-card { height: auto; } } @media (max-width: 1440px) { .featured-product-card { border-radius: 10px; } } @media (max-width: 1200px) { .featured-product-card { border-radius: 8px; } } @media (max-width: 992px) { .featured-product-card { border-radius: 8px; } } @media (max-width: 768px) { .featured-product-card { border-radius: 6px; } } @media (max-width: 640px) { .featured-product-card { border-radius: 6px; } } @media (max-width: 480px) { .featured-product-card { border-radius: 8px; } } .featured-product-card:hover { -webkit-transform: translateY(-3px) scale(1.02); transform: translateY(-3px) scale(1.02); -webkit-box-shadow: 0 8px 24px rgba(0, 112, 74, 0.25); box-shadow: 0 8px 24px rgba(0, 112, 74, 0.25); } @media (max-width: 768px) { .featured-product-card:hover { -webkit-transform: translateY(-2px) scale(1.01); transform: translateY(-2px) scale(1.01); -webkit-box-shadow: 0 4px 16px rgba(0, 112, 74, 0.2); box-shadow: 0 4px 16px rgba(0, 112, 74, 0.2); } } .featured-product-card:active { -webkit-transform: translateY(-3px) scale(1.01); transform: translateY(-3px) scale(1.01); -webkit-box-shadow: 0 4px 16px rgba(0, 112, 74, 0.2); box-shadow: 0 4px 16px rgba(0, 112, 74, 0.2); } @media (max-width: 768px) { .featured-product-card:active { -webkit-transform: translateY(-1px) scale(1); transform: translateY(-1px) scale(1); } } .featured-product-card__link { text-decoration: none; color: inherit; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; position: relative; z-index: 1; padding: 20px; min-width: 0; max-width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 1770px) { .featured-product-card__link { padding: 18px; gap: 10px; } } @media (max-width: 1440px) { .featured-product-card__link { padding: 16px; gap: 8px; } } @media (max-width: 1200px) { .featured-product-card__link { padding: 14px; gap: 6px; } } @media (max-width: 992px) { .featured-product-card__link { padding: 12px; gap: 5px; } } @media (max-width: 768px) { .featured-product-card__link { padding: 10px; gap: 4px; } } @media (max-width: 640px) { .featured-product-card__link { padding: 8px; gap: 4px; } } @media (max-width: 480px) { .featured-product-card__link { padding: 10px; gap: 6px; } } .featured-product-card__badge { height: 32px; min-width: 97px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 0 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #fff; color: #00704a; border-radius: 8px; font-size: 14px; font-weight: 700; font-family: "Be Vietnam Pro", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .featured-product-card__badge:hover { background: #00704a; color: #fff; -webkit-transform: translateY(-2px) scale(1.01); transform: translateY(-2px) scale(1.01); -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.25); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.25); } @media (max-width: 1770px) { .featured-product-card__badge { height: 28px; min-width: 85px; padding: 0 10px; font-size: 12px; border-radius: 6px; } } @media (max-width: 1440px) { .featured-product-card__badge { height: 26px; min-width: 80px; padding: 0 9px; font-size: 11px; border-radius: 6px; } } @media (max-width: 1200px) { .featured-product-card__badge { height: 24px; min-width: 75px; padding: 0 8px; font-size: 10px; } } @media (max-width: 992px) { .featured-product-card__badge { height: 22px; min-width: 70px; padding: 0 7px; font-size: 9px; } } @media (max-width: 768px) { .featured-product-card__badge { height: 20px; min-width: 65px; padding: 0 6px; font-size: 8px; border-radius: 4px; } } @media (max-width: 640px) { .featured-product-card__badge { height: 22px; min-width: 70px; padding: 0 7px; font-size: 9px; border-radius: 4px; } } @media (max-width: 480px) { .featured-product-card__badge { height: 22px; min-width: 70px; padding: 0 7px; font-size: 9px; } } .featured-product-card__title { font-size: 28px; font-weight: 600; font-family: "Montserrat", sans-serif; color: #fff; margin: 0; line-height: 150%; height: 42px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; word-break: break-word; } @media (max-width: 1770px) { .featured-product-card__title { font-size: 22px; height: auto; } } @media (max-width: 1440px) { .featured-product-card__title { font-size: 18px; } } @media (max-width: 1200px) { .featured-product-card__title { font-size: 16px; } } @media (max-width: 992px) { .featured-product-card__title { font-size: 14px; } } @media (max-width: 768px) { .featured-product-card__title { font-size: 13px; } } @media (max-width: 640px) { .featured-product-card__title { font-size: 16px; } } @media (max-width: 480px) { .featured-product-card__title { font-size: 16px; } } .featured-product-card__pricing { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 9px; height: 32px; min-width: 0; max-width: 100%; -ms-flex-negative: 0; flex-shrink: 0; } @media (max-width: 1770px) { .featured-product-card__pricing { height: 28px; gap: 8px; } } @media (max-width: 1440px) { .featured-product-card__pricing { height: 26px; gap: 7px; } } @media (max-width: 1200px) { .featured-product-card__pricing { height: 24px; gap: 6px; } } @media (max-width: 992px) { .featured-product-card__pricing { height: 22px; gap: 5px; } } @media (max-width: 768px) { .featured-product-card__pricing { height: 20px; gap: 5px; } } @media (max-width: 640px) { .featured-product-card__pricing { height: 22px; gap: 6px; } } @media (max-width: 480px) { .featured-product-card__pricing { height: 22px; gap: 6px; } } .featured-product-card__price { font-size: 28px; font-weight: 400; font-family: "Be Vietnam Pro", sans-serif; color: #fff; margin: 0; line-height: 150%; white-space: nowrap; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1770px) { .featured-product-card__price { font-size: 20px; } } @media (max-width: 1440px) { .featured-product-card__price { font-size: 16px; } } @media (max-width: 1200px) { .featured-product-card__price { font-size: 15px; } } @media (max-width: 992px) { .featured-product-card__price { font-size: 13px; } } @media (max-width: 768px) { .featured-product-card__price { font-size: 12px; } } @media (max-width: 640px) { .featured-product-card__price { font-size: 14px; } } @media (max-width: 480px) { .featured-product-card__price { font-size: 14px; } } .featured-product-card__original-price { font-size: 20px; color: #dadada; text-decoration: line-through; font-weight: 400; font-family: "Be Vietnam Pro", sans-serif; line-height: 20px; margin: 0; white-space: nowrap; } @media (max-width: 1770px) { .featured-product-card__original-price { font-size: 16px; line-height: 16px; } } @media (max-width: 1440px) { .featured-product-card__original-price { font-size: 14px; line-height: 14px; display: none; } } @media (max-width: 1200px) { .featured-product-card__original-price { font-size: 13px; line-height: 13px; } } @media (max-width: 992px) { .featured-product-card__original-price { font-size: 12px; line-height: 12px; } } @media (max-width: 768px) { .featured-product-card__original-price { font-size: 11px; line-height: 11px; } } @media (max-width: 640px) { .featured-product-card__original-price { font-size: 12px; line-height: 12px; display: inline-block; } } @media (max-width: 480px) { .featured-product-card__original-price { font-size: 12px; line-height: 12px; display: inline-block; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * Promotions Section Styles * Sử dụng lại styles từ featured-products-section * Chỉ thêm các styles riêng cho promotions */ .promotions-section .featured-product-card { min-height: 180px; } @media (max-width: 1770px) { .promotions-section .featured-product-card { min-height: 150px; } } @media (max-width: 1440px) { .promotions-section .featured-product-card { min-height: 140px; } } @media (max-width: 1200px) { .promotions-section .featured-product-card { min-height: 130px; } } @media (max-width: 992px) { .promotions-section .featured-product-card { min-height: 120px; } } @media (max-width: 768px) { .promotions-section .featured-product-card { min-height: 100px; } } @media (max-width: 640px) { .promotions-section .featured-product-card { min-height: 100px; } } .promotions-section .featured-product-card__link { position: relative; z-index: 1; gap: 15px; } .promotions-section .featured-product-card__title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; height: auto; } .promotions-section .featured-product-card__date { font-size: 14px; color: #fff; font-family: "Be Vietnam Pro", sans-serif; font-weight: 500; } @media (max-width: 1770px) { .promotions-section .featured-product-card__date { font-size: 13px; } } @media (max-width: 1440px) { .promotions-section .featured-product-card__date { font-size: 12px; } } @media (max-width: 1200px) { .promotions-section .featured-product-card__date { font-size: 11px; } } @media (max-width: 992px) { .promotions-section .featured-product-card__date { font-size: 10px; } } @media (max-width: 768px) { .promotions-section .featured-product-card__date { font-size: 10px; } } @media (max-width: 640px) { .promotions-section .featured-product-card__date { font-size: 12px; } } .promotions-section .featured-product-card__badge { font-size: 12px; padding: 0 10px; } @media (max-width: 1770px) { .promotions-section .featured-product-card__badge { font-size: 11px; padding: 0 8px; } } @media (max-width: 1440px) { .promotions-section .featured-product-card__badge { font-size: 10px; } } @media (max-width: 1200px) { .promotions-section .featured-product-card__badge { font-size: 9px; } } @media (max-width: 992px) { .promotions-section .featured-product-card__badge { font-size: 8px; } } @media (max-width: 640px) { .promotions-section .featured-product-card__badge { font-size: 10px; } } .featured-products-section__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 16px; } @media (max-width: 768px) { .featured-products-section__header { margin-bottom: 12px; } } .featured-products-section__view-more { font-size: 16px; font-style: italic; font-weight: 500; font-family: "Be Vietnam Pro", sans-serif; color: #00704a; text-decoration: none; border-bottom: 1px solid #00704a; padding-bottom: 2px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .featured-products-section__view-more:hover { color: rgb(0, 61, 40.3035714286); border-bottom-color: rgb(0, 61, 40.3035714286); } @media (max-width: 768px) { .featured-products-section__view-more { font-size: 14px; } } @media (max-width: 576px) { .featured-products-section__view-more { font-size: 13px; } } /* Doctors Grid Section --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .doctors-grid-section { padding: 50px 0; } @media (max-width: 1770px) { .doctors-grid-section { padding: 45px 0; } } @media (max-width: 1440px) { .doctors-grid-section { padding: 40px 0; } } @media (max-width: 1200px) { .doctors-grid-section { padding: 35px 0; } } @media (max-width: 992px) { .doctors-grid-section { padding: 30px 0; } } @media (max-width: 768px) { .doctors-grid-section { padding: 25px 0; } } @media (max-width: 640px) { .doctors-grid-section { padding: 20px 0; } } @media (max-width: 480px) { .doctors-grid-section { padding: 20px 0; } } .doctors-grid-section .doctors-category-section { margin-bottom: 42px; } @media (max-width: 1770px) { .doctors-grid-section .doctors-category-section { margin-bottom: 38px; } } @media (max-width: 1440px) { .doctors-grid-section .doctors-category-section { margin-bottom: 34px; } } @media (max-width: 1200px) { .doctors-grid-section .doctors-category-section { margin-bottom: 30px; } } @media (max-width: 992px) { .doctors-grid-section .doctors-category-section { margin-bottom: 25px; } } @media (max-width: 768px) { .doctors-grid-section .doctors-category-section { margin-bottom: 21px; } } @media (max-width: 640px) { .doctors-grid-section .doctors-category-section { margin-bottom: 17px; } } @media (max-width: 480px) { .doctors-grid-section .doctors-category-section { margin-bottom: 16px; } } .doctors-grid-section .doctors-category-section:last-child { margin-bottom: 0; } .doctors-grid-section .doctors-category-section .category-title { font-size: 36px; font-weight: 700; color: #00704a; margin: 0 0 42px; font-family: "Montserrat", sans-serif; } @media (max-width: 1770px) { .doctors-grid-section .doctors-category-section .category-title { font-size: 30px; margin-bottom: 36px; } } @media (max-width: 1440px) { .doctors-grid-section .doctors-category-section .category-title { font-size: 27px; margin-bottom: 34px; } } @media (max-width: 1200px) { .doctors-grid-section .doctors-category-section .category-title { font-size: 24px; margin-bottom: 30px; } } @media (max-width: 992px) { .doctors-grid-section .doctors-category-section .category-title { font-size: 22px; margin-bottom: 25px; } } @media (max-width: 768px) { .doctors-grid-section .doctors-category-section .category-title { font-size: 20px; margin-bottom: 21px; } } @media (max-width: 640px) { .doctors-grid-section .doctors-category-section .category-title { font-size: 18px; margin-bottom: 17px; } } @media (max-width: 480px) { .doctors-grid-section .doctors-category-section .category-title { font-size: 16px; margin-bottom: 14px; } } .doctors-grid-section .doctors-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; row-gap: 42px; } @media (max-width: 1770px) { .doctors-grid-section .doctors-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; row-gap: 38px; } } @media (max-width: 1440px) { .doctors-grid-section .doctors-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; row-gap: 34px; } } @media (max-width: 1200px) { .doctors-grid-section .doctors-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; row-gap: 30px; } } @media (max-width: 992px) { .doctors-grid-section .doctors-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; row-gap: 25px; } } @media (max-width: 768px) { .doctors-grid-section .doctors-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; row-gap: 21px; } } @media (max-width: 640px) { .doctors-grid-section .doctors-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; row-gap: 17px; } } @media (max-width: 480px) { .doctors-grid-section .doctors-grid { grid-template-columns: 1fr; gap: 10px; row-gap: 16px; } } .doctors-grid-section .doctor-card { position: relative; border-radius: 22px; overflow: hidden; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; padding: 12px; border: 1px solid #eeeeee; } @media (max-width: 1770px) { .doctors-grid-section .doctor-card { border-radius: 20px; padding: 11px; } } @media (max-width: 1440px) { .doctors-grid-section .doctor-card { border-radius: 18px; padding: 10px; } } @media (max-width: 1200px) { .doctors-grid-section .doctor-card { border-radius: 16px; padding: 10px; } } @media (max-width: 992px) { .doctors-grid-section .doctor-card { border-radius: 14px; padding: 9px; } } @media (max-width: 768px) { .doctors-grid-section .doctor-card { border-radius: 12px; padding: 8px; } } @media (max-width: 640px) { .doctors-grid-section .doctor-card { border-radius: 10px; padding: 8px; } } @media (max-width: 480px) { .doctors-grid-section .doctor-card { border-radius: 10px; padding: 8px; } } .doctors-grid-section .doctor-card:hover { -webkit-transform: translateY(-8px); transform: translateY(-8px); -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } .doctors-grid-section .doctor-card:hover .doctor-image img { -webkit-transform: scale(1.05); transform: scale(1.05); } @media (max-width: 768px) { .doctors-grid-section .doctor-card:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } } .doctors-grid-section .doctor-card .doctor-image { position: relative; width: 100%; padding-top: 100%; overflow: hidden; border-radius: 16px; } @media (max-width: 1440px) { .doctors-grid-section .doctor-card .doctor-image { border-radius: 14px; } } @media (max-width: 1200px) { .doctors-grid-section .doctor-card .doctor-image { border-radius: 12px; } } @media (max-width: 768px) { .doctors-grid-section .doctor-card .doctor-image { border-radius: 10px; } } @media (max-width: 480px) { .doctors-grid-section .doctor-card .doctor-image { border-radius: 8px; } } .doctors-grid-section .doctor-card .doctor-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .doctors-grid-section .doctor-card .doctor-info { padding: 24px 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 6px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } @media (max-width: 1770px) { .doctors-grid-section .doctor-card .doctor-info { padding: 22px 18px; gap: 5px; } } @media (max-width: 1440px) { .doctors-grid-section .doctor-card .doctor-info { padding: 20px 16px; gap: 5px; } } @media (max-width: 1200px) { .doctors-grid-section .doctor-card .doctor-info { padding: 18px 14px; gap: 4px; } } @media (max-width: 992px) { .doctors-grid-section .doctor-card .doctor-info { padding: 16px 12px; gap: 4px; } } @media (max-width: 768px) { .doctors-grid-section .doctor-card .doctor-info { padding: 14px 10px; gap: 3px; } } @media (max-width: 640px) { .doctors-grid-section .doctor-card .doctor-info { padding: 12px 10px; gap: 3px; } } @media (max-width: 480px) { .doctors-grid-section .doctor-card .doctor-info { padding: 12px 8px; gap: 2px; } } .doctors-grid-section .doctor-card .doctor-info .doctor-name { font-size: 20px; font-family: "Be Vietnam Pro", sans-serif; font-weight: 600; color: #20313A; margin: 0; line-height: auto; } @media (max-width: 1770px) { .doctors-grid-section .doctor-card .doctor-info .doctor-name { font-size: 18px; } } @media (max-width: 1440px) { .doctors-grid-section .doctor-card .doctor-info .doctor-name { font-size: 17px; } } @media (max-width: 1200px) { .doctors-grid-section .doctor-card .doctor-info .doctor-name { font-size: 16px; } } @media (max-width: 992px) { .doctors-grid-section .doctor-card .doctor-info .doctor-name { font-size: 15px; } } @media (max-width: 768px) { .doctors-grid-section .doctor-card .doctor-info .doctor-name { font-size: 14px; } } @media (max-width: 640px) { .doctors-grid-section .doctor-card .doctor-info .doctor-name { font-size: 13px; } } @media (max-width: 480px) { .doctors-grid-section .doctor-card .doctor-info .doctor-name { font-size: 12px; } } .doctors-grid-section .doctor-card .doctor-info .doctor-onelab-title { font-size: 14px; color: #312020; margin: 0; line-height: 1.5; font-weight: 500; } @media (max-width: 1770px) { .doctors-grid-section .doctor-card .doctor-info .doctor-onelab-title { font-size: 13px; } } @media (max-width: 1440px) { .doctors-grid-section .doctor-card .doctor-info .doctor-onelab-title { font-size: 12px; } } @media (max-width: 1200px) { .doctors-grid-section .doctor-card .doctor-info .doctor-onelab-title { font-size: 12px; } } @media (max-width: 992px) { .doctors-grid-section .doctor-card .doctor-info .doctor-onelab-title { font-size: 11px; } } @media (max-width: 768px) { .doctors-grid-section .doctor-card .doctor-info .doctor-onelab-title { font-size: 11px; } } @media (max-width: 640px) { .doctors-grid-section .doctor-card .doctor-info .doctor-onelab-title { font-size: 10px; } } @media (max-width: 480px) { .doctors-grid-section .doctor-card .doctor-info .doctor-onelab-title { font-size: 10px; } } .doctors-grid-section .doctor-card .doctor-info .doctor-position { font-size: 14px; color: #0066cc; margin: 0 0 8px 0; line-height: 1.5; font-weight: 500; } @media (max-width: 1770px) { .doctors-grid-section .doctor-card .doctor-info .doctor-position { font-size: 13px; margin-bottom: 7px; } } @media (max-width: 1440px) { .doctors-grid-section .doctor-card .doctor-info .doctor-position { font-size: 12px; margin-bottom: 6px; } } @media (max-width: 1200px) { .doctors-grid-section .doctor-card .doctor-info .doctor-position { font-size: 12px; margin-bottom: 6px; } } @media (max-width: 992px) { .doctors-grid-section .doctor-card .doctor-info .doctor-position { font-size: 11px; margin-bottom: 5px; } } @media (max-width: 768px) { .doctors-grid-section .doctor-card .doctor-info .doctor-position { font-size: 11px; margin-bottom: 4px; } } @media (max-width: 640px) { .doctors-grid-section .doctor-card .doctor-info .doctor-position { font-size: 10px; margin-bottom: 4px; } } @media (max-width: 480px) { .doctors-grid-section .doctor-card .doctor-info .doctor-position { font-size: 9px; margin-bottom: 3px; } } .doctors-grid-section .doctor-card .doctor-info .doctor-workplace { font-size: 13px; color: #666; margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 1770px) { .doctors-grid-section .doctor-card .doctor-info .doctor-workplace { font-size: 12px; } } @media (max-width: 1440px) { .doctors-grid-section .doctor-card .doctor-info .doctor-workplace { font-size: 11px; } } @media (max-width: 1200px) { .doctors-grid-section .doctor-card .doctor-info .doctor-workplace { font-size: 11px; } } @media (max-width: 992px) { .doctors-grid-section .doctor-card .doctor-info .doctor-workplace { font-size: 10px; } } @media (max-width: 768px) { .doctors-grid-section .doctor-card .doctor-info .doctor-workplace { font-size: 10px; } } @media (max-width: 640px) { .doctors-grid-section .doctor-card .doctor-info .doctor-workplace { font-size: 9px; -webkit-line-clamp: 1; line-clamp: 1; } } @media (max-width: 480px) { .doctors-grid-section .doctor-card .doctor-info .doctor-workplace { font-size: 9px; -webkit-line-clamp: 1; line-clamp: 1; } } .doctors-grid-section .doctor-card .doctor-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; text-decoration: none; } .doctors-grid-section .doctor-card .doctor-link .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .doctors-grid-section .no-doctors { text-align: center; padding: 60px 20px; color: #999; font-size: 16px; } @media (max-width: 1770px) { .doctors-grid-section .no-doctors { padding: 54px 18px; font-size: 15px; } } @media (max-width: 1440px) { .doctors-grid-section .no-doctors { padding: 48px 16px; font-size: 15px; } } @media (max-width: 1200px) { .doctors-grid-section .no-doctors { padding: 42px 16px; font-size: 14px; } } @media (max-width: 992px) { .doctors-grid-section .no-doctors { padding: 36px 16px; font-size: 14px; } } @media (max-width: 768px) { .doctors-grid-section .no-doctors { padding: 30px 16px; font-size: 13px; } } @media (max-width: 640px) { .doctors-grid-section .no-doctors { padding: 24px 16px; font-size: 12px; } } @media (max-width: 480px) { .doctors-grid-section .no-doctors { padding: 20px 12px; font-size: 12px; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .modal-doctor-info .onelab-modal-content { max-width: 600px; max-height: 70vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; } @media screen and (max-width: 1770px) { .modal-doctor-info .onelab-modal-content { max-width: 540px; } } @media screen and (max-width: 1440px) { .modal-doctor-info .onelab-modal-content { max-width: 480px; } } @media screen and (max-width: 1200px) { .modal-doctor-info .onelab-modal-content { max-width: 420px; } } @media screen and (max-width: 768px) { .modal-doctor-info .onelab-modal-content { max-width: calc(100% - 32px); max-height: 85vh; } } @media screen and (max-width: 640px) { .modal-doctor-info .onelab-modal-content { max-width: calc(100% - 24px); max-height: 85vh; } } @media screen and (max-width: 480px) { .modal-doctor-info .onelab-modal-content { max-width: calc(100% - 24px); max-height: 90vh; } } .modal-doctor-info .onelab-modal-header { -ms-flex-negative: 0; flex-shrink: 0; padding: 12px 36px; border-bottom: 1px solid rgba(49, 32, 32, 0.1); } @media (max-width: 768px) { .modal-doctor-info .onelab-modal-header { padding: 12px 24px; } } @media (max-width: 576px) { .modal-doctor-info .onelab-modal-header { padding: 10px 16px; } } .modal-doctor-info .onelab-modal-header .doctor-info-modal__header-info .doctor-info-modal__doctor-name { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: #312020; font-family: "Be Vietnam Pro", sans-serif; } @media (max-width: 768px) { .modal-doctor-info .onelab-modal-header .doctor-info-modal__header-info .doctor-info-modal__doctor-name { font-size: 18px; margin: 0 0 6px; } } @media (max-width: 576px) { .modal-doctor-info .onelab-modal-header .doctor-info-modal__header-info .doctor-info-modal__doctor-name { font-size: 16px; margin: 0 0 4px; } } .modal-doctor-info .onelab-modal-header .doctor-info-modal__header-info .doctor-info-modal__doctor-position { margin: 0; font-size: 14px; color: rgba(49, 32, 32, 0.7); font-weight: 400; font-family: "Be Vietnam Pro", sans-serif; } @media (max-width: 576px) { .modal-doctor-info .onelab-modal-header .doctor-info-modal__header-info .doctor-info-modal__doctor-position { font-size: 13px; } } .modal-doctor-info .onelab-modal-body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow-y: auto; padding: 24px 36px; overflow-x: hidden; } @media (max-width: 768px) { .modal-doctor-info .onelab-modal-body { padding: 20px 24px; } } @media (max-width: 576px) { .modal-doctor-info .onelab-modal-body { padding: 16px; } } .modal-doctor-info .onelab-modal-footer { display: none; } .modal-doctor-info .doctor-info-modal__group .expertise-area { padding: 0; } .modal-doctor-info .doctor-info-modal__group .expertise-area__title { font-size: 20px; font-weight: 700; margin: 0 0 24px; color: #312020; } @media (max-width: 768px) { .modal-doctor-info .doctor-info-modal__group .expertise-area__title { font-size: 18px; margin: 0 0 20px; } } @media (max-width: 640px) { .modal-doctor-info .doctor-info-modal__group .expertise-area__title { font-size: 16px; margin: 0 0 16px; } } @media (max-width: 576px) { .modal-doctor-info .doctor-info-modal__group .expertise-area__title { font-size: 14px; margin: 0 0 14px; } } @media (max-width: 480px) { .modal-doctor-info .doctor-info-modal__group .expertise-area__title { font-size: 14px; margin: 0 0 12px; } } .modal-doctor-info .doctor-info-modal__group .expertise-area__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; } @media (max-width: 768px) { .modal-doctor-info .doctor-info-modal__group .expertise-area__list { gap: 14px; } } @media (max-width: 640px) { .modal-doctor-info .doctor-info-modal__group .expertise-area__list { gap: 12px; } } @media (max-width: 576px) { .modal-doctor-info .doctor-info-modal__group .expertise-area__list { gap: 11px; } } @media (max-width: 480px) { .modal-doctor-info .doctor-info-modal__group .expertise-area__list { gap: 10px; } } .modal-doctor-info .doctor-info-modal__group .expertise-area__list li { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; font-size: 16px; line-height: 1.5; color: #312020; -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease; transition: opacity 0.2s ease, -webkit-transform 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease; cursor: default; } @media (max-width: 768px) { .modal-doctor-info .doctor-info-modal__group .expertise-area__list li { font-size: 15px; gap: 11px; line-height: 1.48; } } @media (max-width: 640px) { .modal-doctor-info .doctor-info-modal__group .expertise-area__list li { font-size: 14px; gap: 10px; line-height: 1.44; } } @media (max-width: 576px) { .modal-doctor-info .doctor-info-modal__group .expertise-area__list li { font-size: 13px; gap: 9px; line-height: 1.42; } } @media (max-width: 480px) { .modal-doctor-info .doctor-info-modal__group .expertise-area__list li { font-size: max(13px, 3.2vw); gap: 8px; line-height: 1.4; } } .modal-doctor-info .doctor-info-modal__group .expertise-area__list li:hover { -webkit-transform: translateX(4px); transform: translateX(4px); opacity: 0.9; } .modal-doctor-info .doctor-info-modal__group .expertise-area__list li img { width: 20px; height: 20px; -ms-flex-negative: 0; flex-shrink: 0; margin-top: 5px; -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } @media (max-width: 768px) { .modal-doctor-info .doctor-info-modal__group .expertise-area__list li img { width: 19px; height: 19px; margin-top: 4px; } } @media (max-width: 640px) { .modal-doctor-info .doctor-info-modal__group .expertise-area__list li img { width: 18px; height: 18px; margin-top: 3px; } } @media (max-width: 576px) { .modal-doctor-info .doctor-info-modal__group .expertise-area__list li img { width: 17px; height: 17px; margin-top: 3px; } } @media (max-width: 480px) { .modal-doctor-info .doctor-info-modal__group .expertise-area__list li img { width: 16px; height: 16px; margin-top: 2px; } } .modal-doctor-info .doctor-info-modal__group .expertise-area__list li img:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .modal-doctor-info .doctor-info-modal__group .expertise-area__list li span { font-size: inherit; } .modal-doctor-info .doctor-info-modal__group .certificates-training { padding: 0; } .modal-doctor-info .doctor-info-modal__group .certificates-training__title { font-size: 20px; font-weight: 700; margin: 0 0 24px; color: #00704a; } @media (max-width: 768px) { .modal-doctor-info .doctor-info-modal__group .certificates-training__title { font-size: 18px; margin: 0 0 20px; } } @media (max-width: 640px) { .modal-doctor-info .doctor-info-modal__group .certificates-training__title { font-size: 16px; margin: 0 0 16px; } } @media (max-width: 576px) { .modal-doctor-info .doctor-info-modal__group .certificates-training__title { font-size: 14px; margin: 0 0 14px; } } @media (max-width: 480px) { .modal-doctor-info .doctor-info-modal__group .certificates-training__title { font-size: 14px; margin: 0 0 12px; } } .modal-doctor-info .doctor-info-modal__group .certificates-training__list { list-style: disc; padding-left: 24px; margin: 0; display: grid; gap: 16px; } @media (max-width: 768px) { .modal-doctor-info .doctor-info-modal__group .certificates-training__list { padding-left: 23px; gap: 14px; } } @media (max-width: 640px) { .modal-doctor-info .doctor-info-modal__group .certificates-training__list { padding-left: 22px; gap: 12px; } } @media (max-width: 576px) { .modal-doctor-info .doctor-info-modal__group .certificates-training__list { padding-left: 21px; gap: 11px; } } @media (max-width: 480px) { .modal-doctor-info .doctor-info-modal__group .certificates-training__list { padding-left: 20px; gap: 10px; } } .modal-doctor-info .doctor-info-modal__group .certificates-training__list li { display: list-item; font-size: 16px; line-height: 1.5; color: #312020; -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease; transition: opacity 0.2s ease, -webkit-transform 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease; cursor: default; } @media (max-width: 768px) { .modal-doctor-info .doctor-info-modal__group .certificates-training__list li { font-size: 15px; line-height: 1.48; } } @media (max-width: 640px) { .modal-doctor-info .doctor-info-modal__group .certificates-training__list li { font-size: 14px; line-height: 1.44; } } @media (max-width: 576px) { .modal-doctor-info .doctor-info-modal__group .certificates-training__list li { font-size: 13px; line-height: 1.42; } } @media (max-width: 480px) { .modal-doctor-info .doctor-info-modal__group .certificates-training__list li { font-size: max(13px, 3.2vw); line-height: 1.4; } } .modal-doctor-info .doctor-info-modal__group .certificates-training__list li::marker { color: #00704a; } .modal-doctor-info .doctor-info-modal__group .certificates-training__list li:hover { -webkit-transform: translateX(4px); transform: translateX(4px); opacity: 0.9; color: #00704a; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .modal-doctor-info .doctor-info-modal__group .certificates-training__list li:hover span { color: #00704a; } .modal-doctor-info .doctor-info-modal__group .certificates-training__list li span { font-size: inherit; } /* Single Doctor --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .doctor-info-section { padding: 84px 0; } @media (max-width: 1770px) { .doctor-info-section { padding: 75px 0; } } @media (max-width: 1440px) { .doctor-info-section { padding: 63px 0; } } @media (max-width: 1200px) { .doctor-info-section { padding: 55px 0; } } @media (max-width: 992px) { .doctor-info-section { padding: 46px 0; } } @media (max-width: 768px) { .doctor-info-section { padding: 35px 0 25px; } } @media (max-width: 640px) { .doctor-info-section { padding: 28px 0 20px; } } @media (max-width: 480px) { .doctor-info-section { padding: 24px 0 16px; } } .doctor-info-section__category { font-size: 36px; font-weight: 700; line-height: 55px; color: #00704a; margin: 0 0 42px; display: inline-block; } @media (max-width: 1770px) { .doctor-info-section__category { font-size: 32px; line-height: 49px; margin: 0 0 38px; } } @media (max-width: 1440px) { .doctor-info-section__category { font-size: 28px; line-height: 42px; margin: 0 0 34px; } } @media (max-width: 1200px) { .doctor-info-section__category { font-size: 26px; line-height: 39px; margin: 0 0 30px; } } @media (max-width: 992px) { .doctor-info-section__category { font-size: 24px; line-height: 36px; margin: 0 0 25px; } } @media (max-width: 768px) { .doctor-info-section__category { font-size: 22px; line-height: 33px; margin: 0 0 21px; } } @media (max-width: 640px) { .doctor-info-section__category { font-size: 20px; line-height: 30px; margin: 0 0 17px; } } @media (max-width: 480px) { .doctor-info-section__category { font-size: max(18px, 4.5vw); line-height: 27px; margin: 0 0 14px; } } .doctor-info__header { display: grid; grid-template-columns: 278px 1fr; gap: 35px; padding-left: 86px; } @media (max-width: 1770px) { .doctor-info__header { padding-left: 77px; gap: 32px; grid-template-columns: 256px 1fr; } } @media (max-width: 1440px) { .doctor-info__header { padding-left: 61px; gap: 28px; grid-template-columns: 240px 1fr; } } @media (max-width: 1200px) { .doctor-info__header { padding-left: 50px; gap: 25px; grid-template-columns: 220px 1fr; } } @media (max-width: 992px) { .doctor-info__header { padding-left: 40px; gap: 22px; grid-template-columns: 200px 1fr; } } @media (max-width: 768px) { .doctor-info__header { grid-template-columns: 1fr; gap: 24px; padding-left: 0; } } @media (max-width: 640px) { .doctor-info__header { gap: 20px; } } @media (max-width: 480px) { .doctor-info__header { gap: 16px; } } .doctor-info__header-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .doctor-info__thumbnail { width: 278px; height: 278px; border-radius: 50%; overflow: hidden; border: 8px solid #fff; -webkit-box-shadow: 0 0px 49px 0px rgba(0, 152, 100, 0.09); box-shadow: 0 0px 49px 0px rgba(0, 152, 100, 0.09); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media (max-width: 1770px) { .doctor-info__thumbnail { width: 256px; height: 256px; border: 7px solid #fff; } } @media (max-width: 1440px) { .doctor-info__thumbnail { width: 240px; height: 240px; border: 7px solid #fff; } } @media (max-width: 1200px) { .doctor-info__thumbnail { width: 220px; height: 220px; border: 6px solid #fff; } } @media (max-width: 992px) { .doctor-info__thumbnail { width: 200px; height: 200px; border: 6px solid #fff; } } @media (max-width: 768px) { .doctor-info__thumbnail { width: 180px; height: 180px; border: 5px solid #fff; } } @media (max-width: 640px) { .doctor-info__thumbnail { width: 160px; height: 160px; border: 5px solid #fff; } } @media (max-width: 480px) { .doctor-info__thumbnail { width: 140px; height: 140px; border: 4px solid #fff; } } .doctor-info__thumbnail:hover { -webkit-transform: scale(1.05); transform: scale(1.05); border-color: rgba(0, 152, 100, 0.15); -webkit-box-shadow: 0 0px 49px 0px rgba(0, 152, 100, 0.15); box-shadow: 0 0px 49px 0px rgba(0, 152, 100, 0.15); } @media (max-width: 768px) { .doctor-info__thumbnail:hover { -webkit-transform: scale(1.03); transform: scale(1.03); } } .doctor-info__thumbnail img { width: 100%; height: 100%; display: block; -o-object-fit: cover; object-fit: cover; } .doctor-info__header-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 667px; } @media (max-width: 1770px) { .doctor-info__header-right { max-width: 600px; } } @media (max-width: 1440px) { .doctor-info__header-right { max-width: 550px; } } @media (max-width: 1200px) { .doctor-info__header-right { max-width: 500px; } } @media (max-width: 992px) { .doctor-info__header-right { max-width: 100%; } } @media (max-width: 768px) { .doctor-info__header-right { max-width: 100%; } } .doctor-info__title { font-size: 24px; font-weight: 500; color: #312020; margin: 0 0 8px; line-height: 24px; letter-spacing: -0.31px; } @media (max-width: 1770px) { .doctor-info__title { font-size: 23px; margin: 0 0 7px; } } @media (max-width: 1440px) { .doctor-info__title { font-size: 22px; margin: 0 0 7px; } } @media (max-width: 1200px) { .doctor-info__title { font-size: 21px; margin: 0 0 6px; } } @media (max-width: 992px) { .doctor-info__title { font-size: 20px; margin: 0 0 6px; } } @media (max-width: 768px) { .doctor-info__title { font-size: 19px; margin: 0 0 5px; } } @media (max-width: 640px) { .doctor-info__title { font-size: 18px; margin: 0 0 4px; } } @media (max-width: 480px) { .doctor-info__title { font-size: max(16px, 4vw); margin: 0 0 4px; } } .doctor-info__position { font-size: 20px; color: #312020; margin: 0 0 4px; line-height: 24px; letter-spacing: -0.31px; } @media (max-width: 1770px) { .doctor-info__position { font-size: 19px; margin: 0 0 3px; } } @media (max-width: 1440px) { .doctor-info__position { font-size: 18px; margin: 0 0 3px; } } @media (max-width: 1200px) { .doctor-info__position { font-size: 17px; margin: 0 0 2px; } } @media (max-width: 992px) { .doctor-info__position { font-size: 16px; margin: 0 0 2px; } } @media (max-width: 768px) { .doctor-info__position { font-size: 15px; margin: 0 0 2px; } } @media (max-width: 640px) { .doctor-info__position { font-size: 14px; margin: 0 0 1px; } } @media (max-width: 480px) { .doctor-info__position { font-size: max(13px, 3.5vw); } } .doctor-info__specialized-fields { font-size: 20px; color: #312020; margin: 0 0 19px; line-height: 24px; letter-spacing: -0.31px; } @media (max-width: 1770px) { .doctor-info__specialized-fields { font-size: 19px; margin: 0 0 17px; } } @media (max-width: 1440px) { .doctor-info__specialized-fields { font-size: 18px; margin: 0 0 15px; } } @media (max-width: 1200px) { .doctor-info__specialized-fields { font-size: 17px; margin: 0 0 13px; } } @media (max-width: 992px) { .doctor-info__specialized-fields { font-size: 16px; margin: 0 0 11px; } } @media (max-width: 768px) { .doctor-info__specialized-fields { font-size: 15px; margin: 0 0 10px; } } @media (max-width: 640px) { .doctor-info__specialized-fields { font-size: 14px; margin: 0 0 8px; } } @media (max-width: 480px) { .doctor-info__specialized-fields { font-size: max(13px, 3.5vw); margin: 0 0 7px; } } .doctor-info__work-info { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 24px; row-gap: 8px; margin: 0 0 24px; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 1770px) { .doctor-info__work-info { gap: 22px; row-gap: 7px; margin: 0 0 22px; } } @media (max-width: 1440px) { .doctor-info__work-info { gap: 20px; row-gap: 6px; margin: 0 0 20px; } } @media (max-width: 1200px) { .doctor-info__work-info { gap: 18px; row-gap: 5px; margin: 0 0 18px; } } @media (max-width: 992px) { .doctor-info__work-info { gap: 16px; row-gap: 5px; margin: 0 0 16px; } } @media (max-width: 768px) { .doctor-info__work-info { gap: 14px; row-gap: 4px; margin: 0 0 14px; } } @media (max-width: 640px) { .doctor-info__work-info { gap: 12px; row-gap: 3px; margin: 0 0 12px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } @media (max-width: 480px) { .doctor-info__work-info { gap: 10px; margin: 0 0 10px; } } .doctor-info__work-info .work-info-item { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 8px; font-size: 16px; color: #312020; line-height: 24px; letter-spacing: -0.31px; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content; } @media (max-width: 1770px) { .doctor-info__work-info .work-info-item { font-size: 15px; gap: 7px; line-height: 22px; } } @media (max-width: 1440px) { .doctor-info__work-info .work-info-item { font-size: 15px; gap: 7px; } } @media (max-width: 1200px) { .doctor-info__work-info .work-info-item { font-size: 14px; gap: 6px; line-height: 21px; } } @media (max-width: 992px) { .doctor-info__work-info .work-info-item { font-size: 14px; gap: 6px; } } @media (max-width: 768px) { .doctor-info__work-info .work-info-item { font-size: 13px; gap: 5px; line-height: 20px; } } @media (max-width: 640px) { .doctor-info__work-info .work-info-item { font-size: 12px; gap: 5px; } } @media (max-width: 480px) { .doctor-info__work-info .work-info-item { font-size: max(13px, 3.2vw); gap: 4px; line-height: 18px; } } .doctor-info__work-info .work-info-item svg, .doctor-info__work-info .work-info-item img { width: 20px; height: 20px; -ms-flex-negative: 0; flex-shrink: 0; margin-top: 3px; } @media (max-width: 1440px) { .doctor-info__work-info .work-info-item svg, .doctor-info__work-info .work-info-item img { width: 18px; height: 18px; margin-top: 2px; } } @media (max-width: 768px) { .doctor-info__work-info .work-info-item svg, .doctor-info__work-info .work-info-item img { width: 16px; height: 16px; margin-top: 2px; } } @media (max-width: 480px) { .doctor-info__work-info .work-info-item svg, .doctor-info__work-info .work-info-item img { width: 14px; height: 14px; margin-top: 1px; } } .doctor-info__work-info .work-info-item span { white-space: normal; word-break: keep-all; overflow-wrap: break-word; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; min-width: 0; } .doctor-info__excerpt { font-size: 16px; color: #312020; line-height: 24px; letter-spacing: -0.31px; } @media (max-width: 1770px) { .doctor-info__excerpt { font-size: 15px; line-height: 23px; } } @media (max-width: 1440px) { .doctor-info__excerpt { font-size: 15px; line-height: 22px; } } @media (max-width: 1200px) { .doctor-info__excerpt { font-size: 14px; line-height: 21px; } } @media (max-width: 992px) { .doctor-info__excerpt { font-size: 14px; line-height: 21px; } } @media (max-width: 768px) { .doctor-info__excerpt { font-size: 13px; line-height: 20px; } } @media (max-width: 640px) { .doctor-info__excerpt { font-size: 12px; line-height: 19px; } } @media (max-width: 480px) { .doctor-info__excerpt { font-size: max(12px, 3vw); line-height: 18px; } } .doctor-info__excerpt p { margin: 0; font-size: 16px; color: #312020; line-height: 24px; letter-spacing: -0.31px; } @media (max-width: 1770px) { .doctor-info__excerpt p { font-size: 15px; line-height: 23px; } } @media (max-width: 1440px) { .doctor-info__excerpt p { font-size: 15px; line-height: 22px; } } @media (max-width: 1200px) { .doctor-info__excerpt p { font-size: 14px; line-height: 21px; } } @media (max-width: 992px) { .doctor-info__excerpt p { font-size: 14px; line-height: 21px; } } @media (max-width: 768px) { .doctor-info__excerpt p { font-size: 13px; line-height: 20px; } } @media (max-width: 640px) { .doctor-info__excerpt p { font-size: 12px; line-height: 19px; } } @media (max-width: 480px) { .doctor-info__excerpt p { font-size: 12px; line-height: 18px; } } .doctor-info__content { margin: 42px 0; text-align: justify; } @media (max-width: 1770px) { .doctor-info__content { padding-left: 75px; margin: 38px 0; } } @media (max-width: 1440px) { .doctor-info__content { padding-left: 58px; margin: 34px 0; } } @media (max-width: 1200px) { .doctor-info__content { padding-left: 32px; margin: 30px 0; } } @media (max-width: 992px) { .doctor-info__content { padding-left: 16px; margin: 25px 0; } } @media (max-width: 768px) { .doctor-info__content { padding-left: 0; margin: 21px 0; } } @media (max-width: 640px) { .doctor-info__content { margin: 17px 0; } } @media (max-width: 480px) { .doctor-info__content { margin: 14px 0; } } .doctor-info__content-title { font-size: 24px; font-weight: 700; color: #312020; margin: 0 0 16px; line-height: auto; text-align: center; } @media (max-width: 1770px) { .doctor-info__content-title { font-size: 22px; margin: 0 0 15px; } } @media (max-width: 1440px) { .doctor-info__content-title { font-size: 20px; margin: 0 0 14px; } } @media (max-width: 1200px) { .doctor-info__content-title { font-size: 18px; margin: 0 0 12px; } } @media (max-width: 992px) { .doctor-info__content-title { font-size: 17px; margin: 0 0 11px; } } @media (max-width: 768px) { .doctor-info__content-title { font-size: 16px; margin: 0 0 10px; } } @media (max-width: 640px) { .doctor-info__content-title { font-size: 15px; margin: 0 0 8px; } } @media (max-width: 480px) { .doctor-info__content-title { font-size: max(14px, 3.5vw); margin: 0 0 7px; } } .doctor-info__content p { padding-left: 84px; } @media (max-width: 1770px) { .doctor-info__content p { padding-left: 75px; } } @media (max-width: 1440px) { .doctor-info__content p { padding-left: 58px; } } @media (max-width: 1200px) { .doctor-info__content p { padding-left: 32px; } } @media (max-width: 992px) { .doctor-info__content p { padding-left: 16px; } } @media (max-width: 768px) { .doctor-info__content p { padding-left: 0; } } .doctor-info__content h2, .doctor-info__content h3, .doctor-info__content h4 { margin-top: 32px; margin-bottom: 16px; color: #1a1a1a; font-size: 24px; } @media (max-width: 1770px) { .doctor-info__content h2, .doctor-info__content h3, .doctor-info__content h4 { margin-top: 28px; margin-bottom: 14px; } } @media (max-width: 1440px) { .doctor-info__content h2, .doctor-info__content h3, .doctor-info__content h4 { margin-top: 25px; margin-bottom: 12px; } } @media (max-width: 1200px) { .doctor-info__content h2, .doctor-info__content h3, .doctor-info__content h4 { margin-top: 22px; margin-bottom: 11px; } } @media (max-width: 992px) { .doctor-info__content h2, .doctor-info__content h3, .doctor-info__content h4 { margin-top: 20px; margin-bottom: 10px; } } @media (max-width: 768px) { .doctor-info__content h2, .doctor-info__content h3, .doctor-info__content h4 { margin-top: 18px; margin-bottom: 9px; } } @media (max-width: 640px) { .doctor-info__content h2, .doctor-info__content h3, .doctor-info__content h4 { margin-top: 16px; margin-bottom: 8px; } } @media (max-width: 480px) { .doctor-info__content h2, .doctor-info__content h3, .doctor-info__content h4 { margin-top: 14px; margin-bottom: 7px; } } .doctor-info__content ul, .doctor-info__content ol { margin-bottom: 16px; padding-left: 24px; } @media (max-width: 1770px) { .doctor-info__content ul, .doctor-info__content ol { margin-bottom: 14px; padding-left: 22px; } } @media (max-width: 1440px) { .doctor-info__content ul, .doctor-info__content ol { margin-bottom: 12px; padding-left: 20px; } } @media (max-width: 1200px) { .doctor-info__content ul, .doctor-info__content ol { margin-bottom: 11px; padding-left: 18px; } } @media (max-width: 768px) { .doctor-info__content ul, .doctor-info__content ol { margin-bottom: 10px; padding-left: 16px; } } @media (max-width: 480px) { .doctor-info__content ul, .doctor-info__content ol { margin-bottom: 8px; padding-left: 14px; } } .doctor-info__content ul li, .doctor-info__content ol li { margin-bottom: 8px; } @media (max-width: 1440px) { .doctor-info__content ul li, .doctor-info__content ol li { margin-bottom: 7px; } } @media (max-width: 768px) { .doctor-info__content ul li, .doctor-info__content ol li { margin-bottom: 6px; } } @media (max-width: 480px) { .doctor-info__content ul li, .doctor-info__content ol li { margin-bottom: 5px; } } .doctor-info__section { padding: 48px; background-color: #f9fbfa; } @media (max-width: 1770px) { .doctor-info__section { padding: 43px; } } @media (max-width: 1440px) { .doctor-info__section { padding: 38px; } } @media (max-width: 1200px) { .doctor-info__section { padding: 33px; } } @media (max-width: 992px) { .doctor-info__section { padding: 28px; } } @media (max-width: 768px) { .doctor-info__section { padding: 20px; } } @media (max-width: 640px) { .doctor-info__section { padding: 16px; } } @media (max-width: 480px) { .doctor-info__section { padding: 14px; } } .doctor-info__section .section-title { font-size: 24px; font-weight: 700; color: #312020; margin: 0 0 42px; line-height: auto; text-align: center; } @media (max-width: 1770px) { .doctor-info__section .section-title { font-size: 22px; margin: 0 0 38px; } } @media (max-width: 1440px) { .doctor-info__section .section-title { font-size: 20px; margin: 0 0 34px; } } @media (max-width: 1200px) { .doctor-info__section .section-title { font-size: 18px; margin: 0 0 30px; } } @media (max-width: 992px) { .doctor-info__section .section-title { font-size: 17px; margin: 0 0 25px; } } @media (max-width: 768px) { .doctor-info__section .section-title { font-size: 16px; margin: 0 0 21px; } } @media (max-width: 640px) { .doctor-info__section .section-title { font-size: 15px; margin: 0 0 17px; } } @media (max-width: 480px) { .doctor-info__section .section-title { font-size: max(14px, 3.5vw); margin: 0 0 14px; } } .doctor-info__expertise-certificates .doctor-info__section-title { font-size: 24px; font-weight: 700; color: #312020; margin: 0 0 42px; text-align: center; } @media (max-width: 1770px) { .doctor-info__expertise-certificates .doctor-info__section-title { font-size: 22px; margin: 0 0 38px; } } @media (max-width: 1440px) { .doctor-info__expertise-certificates .doctor-info__section-title { font-size: 20px; margin: 0 0 34px; } } @media (max-width: 1200px) { .doctor-info__expertise-certificates .doctor-info__section-title { font-size: 18px; margin: 0 0 30px; } } @media (max-width: 992px) { .doctor-info__expertise-certificates .doctor-info__section-title { font-size: 17px; margin: 0 0 25px; } } @media (max-width: 768px) { .doctor-info__expertise-certificates .doctor-info__section-title { font-size: 16px; margin: 0 0 21px; } } @media (max-width: 640px) { .doctor-info__expertise-certificates .doctor-info__section-title { font-size: 15px; margin: 0 0 17px; } } @media (max-width: 480px) { .doctor-info__expertise-certificates .doctor-info__section-title { font-size: max(14px, 3.5vw); margin: 0 0 14px; } } .doctor-info__expertise-certificates .info-groups-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(47%, 1fr)); gap: 32px; position: relative; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } @media (max-width: 1770px) { .doctor-info__expertise-certificates .info-groups-wrapper { gap: 28px; } } @media (max-width: 1440px) { .doctor-info__expertise-certificates .info-groups-wrapper { gap: 24px; } } @media (max-width: 1200px) { .doctor-info__expertise-certificates .info-groups-wrapper { gap: 22px; } } @media (max-width: 992px) { .doctor-info__expertise-certificates .info-groups-wrapper { gap: 20px; } } @media (max-width: 1023px) { .doctor-info__expertise-certificates .info-groups-wrapper { grid-template-columns: 1fr; gap: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .doctor-info__expertise-certificates .info-groups-wrapper > *:nth-child(4n+3) { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .doctor-info__expertise-certificates .info-groups-wrapper > *:nth-child(4n+4) { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .doctor-info__expertise-certificates .info-groups-wrapper > *:nth-child(4n+5) { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .doctor-info__expertise-certificates .info-groups-wrapper > *:nth-child(4n+6) { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .doctor-info__expertise-certificates .info-groups-wrapper > *:nth-child(4n+7) { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .doctor-info__expertise-certificates .info-groups-wrapper > *:nth-child(4n+8) { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } } @media (max-width: 768px) { .doctor-info__expertise-certificates .info-groups-wrapper { gap: 18px; } } @media (max-width: 480px) { .doctor-info__expertise-certificates .info-groups-wrapper { gap: 14px; } } .doctor-info__expertise-certificates .group-more-placeholder { list-style: none !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; padding: 0 0 0 32px; } @media (max-width: 1440px) { .doctor-info__expertise-certificates .group-more-placeholder { padding: 0 0 0 28px; } } @media (max-width: 1200px) { .doctor-info__expertise-certificates .group-more-placeholder { padding: 0 0 0 24px; } } @media (max-width: 768px) { .doctor-info__expertise-certificates .group-more-placeholder { padding: 0; } } .doctor-info__expertise-certificates .group-more-placeholder .more-dots { font-size: 20px; color: inherit; line-height: 1; } @media (max-width: 1440px) { .doctor-info__expertise-certificates .group-more-placeholder .more-dots { font-size: 18px; } } @media (max-width: 768px) { .doctor-info__expertise-certificates .group-more-placeholder .more-dots { font-size: 16px; } } .doctor-info__expertise-certificates .group-view-more { margin-top: 16px; text-align: center; -ms-flex-negative: 0; flex-shrink: 0; } @media (max-width: 1440px) { .doctor-info__expertise-certificates .group-view-more { margin-top: 14px; } } @media (max-width: 768px) { .doctor-info__expertise-certificates .group-view-more { margin-top: 12px; } } @media (max-width: 480px) { .doctor-info__expertise-certificates .group-view-more { margin-top: 10px; } } .doctor-info__expertise-certificates .group-view-more .btn-view-more { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 8px 16px; background-color: transparent; color: inherit; border: none; font-size: 14px; font-weight: 500; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; text-decoration: none; } @media (max-width: 1440px) { .doctor-info__expertise-certificates .group-view-more .btn-view-more { padding: 7px 14px; font-size: 13px; } } @media (max-width: 768px) { .doctor-info__expertise-certificates .group-view-more .btn-view-more { padding: 6px 12px; font-size: 12px; } } @media (max-width: 480px) { .doctor-info__expertise-certificates .group-view-more .btn-view-more { padding: 5px 10px; font-size: max(13px, 3.2vw); } } .doctor-info__expertise-certificates .group-view-more .btn-view-more:hover { text-decoration: underline; } .doctor-info__expertise-certificates .expertise-area .group-view-more .btn-view-more { color: #312020; } .doctor-info__expertise-certificates .certificates-training { background-color: #00704a; border: 1px solid rgba(0, 152, 100, 0.3); } .doctor-info__expertise-certificates .certificates-training .group-view-more .btn-view-more { color: #fff; } .doctor-info__expertise-certificates .certificates-training .group-more-placeholder { list-style: none !important; padding-left: 0 !important; } .doctor-info__expertise-certificates .certificates-training__title { color: #fff; } .doctor-info__expertise-certificates .certificates-training__list { list-style: disc; padding-left: 20px; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } @media (max-width: 1440px) { .doctor-info__expertise-certificates .certificates-training__list { padding-left: 18px; gap: 11px; } } @media (max-width: 768px) { .doctor-info__expertise-certificates .certificates-training__list { padding-left: 16px; gap: 10px; } } @media (max-width: 480px) { .doctor-info__expertise-certificates .certificates-training__list { padding-left: 14px; gap: 8px; } } .doctor-info__expertise-certificates .certificates-training__list li { font-size: 16px; line-height: 1.5; letter-spacing: -0.31px; color: rgb(255, 255, 255); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; display: list-item; text-align: justify; } @media (max-width: 1770px) { .doctor-info__expertise-certificates .certificates-training__list li { font-size: 15px; line-height: 1.48; } } @media (max-width: 1440px) { .doctor-info__expertise-certificates .certificates-training__list li { font-size: 15px; line-height: 1.46; } } @media (max-width: 1200px) { .doctor-info__expertise-certificates .certificates-training__list li { font-size: 14px; line-height: 1.44; } } @media (max-width: 992px) { .doctor-info__expertise-certificates .certificates-training__list li { font-size: 14px; } } @media (max-width: 768px) { .doctor-info__expertise-certificates .certificates-training__list li { font-size: 13px; line-height: 1.42; } } @media (max-width: 640px) { .doctor-info__expertise-certificates .certificates-training__list li { font-size: 12px; } } @media (max-width: 480px) { .doctor-info__expertise-certificates .certificates-training__list li { font-size: max(13px, 3.2vw); line-height: 1.4; } } .doctor-info__expertise-certificates .certificates-training__list li:hover { color: #fff; -webkit-transform: translateX(4px); transform: translateX(4px); font-weight: 400; } @media (max-width: 768px) { .doctor-info__expertise-certificates .certificates-training__list li:hover { -webkit-transform: translateX(2px); transform: translateX(2px); } } .doctor-info__expertise-certificates .certificates-training:hover { -webkit-box-shadow: 0 16px 32px -8px rgba(0, 152, 100, 0.35); box-shadow: 0 16px 32px -8px rgba(0, 152, 100, 0.35); -webkit-transform: translateY(-6px); transform: translateY(-6px); background-color: rgb(0, 152, 100); border-color: rgba(255, 255, 255, 0.2); } @media (max-width: 768px) { .doctor-info__expertise-certificates .certificates-training:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); } } .doctor-info__expertise-certificates .certificates-training:hover .certificates-training__title { color: #fff; } .doctor-info__expertise-certificates .expertise-certificates-grid { display: grid; grid-template-columns: 1fr; gap: 40px; } @media (max-width: 1770px) { .doctor-info__expertise-certificates .expertise-certificates-grid { gap: 36px; } } @media (max-width: 1440px) { .doctor-info__expertise-certificates .expertise-certificates-grid { gap: 32px; } } @media (max-width: 1200px) { .doctor-info__expertise-certificates .expertise-certificates-grid { gap: 28px; } } @media (max-width: 992px) { .doctor-info__expertise-certificates .expertise-certificates-grid { gap: 24px; } } @media (max-width: 768px) { .doctor-info__expertise-certificates .expertise-certificates-grid { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 480px) { .doctor-info__expertise-certificates .expertise-certificates-grid { gap: 20px; } } .doctor-info__expertise-certificates .expertise-area, .doctor-info__expertise-certificates .certificates-training { padding: 48px; border-radius: 10px; -webkit-box-shadow: 0 10px 15px 0px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 15px 0px rgba(0, 0, 0, 0.1); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } @media (max-width: 1770px) { .doctor-info__expertise-certificates .expertise-area, .doctor-info__expertise-certificates .certificates-training { padding: 43px; border-radius: 9px; } } @media (max-width: 1440px) { .doctor-info__expertise-certificates .expertise-area, .doctor-info__expertise-certificates .certificates-training { padding: 38px; border-radius: 9px; } } @media (max-width: 1200px) { .doctor-info__expertise-certificates .expertise-area, .doctor-info__expertise-certificates .certificates-training { padding: 33px; border-radius: 8px; } } @media (max-width: 992px) { .doctor-info__expertise-certificates .expertise-area, .doctor-info__expertise-certificates .certificates-training { padding: 28px; border-radius: 8px; } } @media (max-width: 768px) { .doctor-info__expertise-certificates .expertise-area, .doctor-info__expertise-certificates .certificates-training { padding: 22px; border-radius: 8px; } } @media (max-width: 640px) { .doctor-info__expertise-certificates .expertise-area, .doctor-info__expertise-certificates .certificates-training { padding: 18px; border-radius: 7px; } } @media (max-width: 480px) { .doctor-info__expertise-certificates .expertise-area, .doctor-info__expertise-certificates .certificates-training { padding: 14px; border-radius: 7px; } } .doctor-info__expertise-certificates .expertise-area__title, .doctor-info__expertise-certificates .certificates-training__title { font-size: 20px; font-weight: 700; margin: 0 0 32px; text-align: left; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -ms-flex-negative: 0; flex-shrink: 0; } @media (max-width: 1770px) { .doctor-info__expertise-certificates .expertise-area__title, .doctor-info__expertise-certificates .certificates-training__title { font-size: 19px; margin: 0 0 28px; } } @media (max-width: 1440px) { .doctor-info__expertise-certificates .expertise-area__title, .doctor-info__expertise-certificates .certificates-training__title { font-size: 18px; margin: 0 0 25px; } } @media (max-width: 1200px) { .doctor-info__expertise-certificates .expertise-area__title, .doctor-info__expertise-certificates .certificates-training__title { font-size: 17px; margin: 0 0 22px; } } @media (max-width: 992px) { .doctor-info__expertise-certificates .expertise-area__title, .doctor-info__expertise-certificates .certificates-training__title { font-size: 16px; margin: 0 0 20px; } } @media (max-width: 768px) { .doctor-info__expertise-certificates .expertise-area__title, .doctor-info__expertise-certificates .certificates-training__title { font-size: 15px; margin: 0 0 18px; } } @media (max-width: 640px) { .doctor-info__expertise-certificates .expertise-area__title, .doctor-info__expertise-certificates .certificates-training__title { font-size: 14px; margin: 0 0 16px; } } @media (max-width: 480px) { .doctor-info__expertise-certificates .expertise-area__title, .doctor-info__expertise-certificates .certificates-training__title { font-size: 14px; margin: 0 0 12px; } } .doctor-info__expertise-certificates .expertise-area { background-color: #fff; border: 1px solid #f2f2f2; } .doctor-info__expertise-certificates .expertise-area__title { color: #312020; } .doctor-info__expertise-certificates .expertise-area__list { list-style: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } @media (max-width: 1440px) { .doctor-info__expertise-certificates .expertise-area__list { gap: 11px; } } @media (max-width: 768px) { .doctor-info__expertise-certificates .expertise-area__list { gap: 10px; } } @media (max-width: 480px) { .doctor-info__expertise-certificates .expertise-area__list { gap: 8px; } } .doctor-info__expertise-certificates .expertise-area__list li { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; font-size: 16px; line-height: 1.5; letter-spacing: -0.31px; color: #312020; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; text-align: justify; } @media (max-width: 1770px) { .doctor-info__expertise-certificates .expertise-area__list li { font-size: 15px; gap: 11px; line-height: 1.48; } } @media (max-width: 1440px) { .doctor-info__expertise-certificates .expertise-area__list li { font-size: 15px; gap: 10px; line-height: 1.46; } } @media (max-width: 1200px) { .doctor-info__expertise-certificates .expertise-area__list li { font-size: 14px; gap: 9px; line-height: 1.44; } } @media (max-width: 992px) { .doctor-info__expertise-certificates .expertise-area__list li { font-size: 14px; gap: 9px; } } @media (max-width: 768px) { .doctor-info__expertise-certificates .expertise-area__list li { font-size: 13px; gap: 8px; line-height: 1.42; } } @media (max-width: 640px) { .doctor-info__expertise-certificates .expertise-area__list li { font-size: 12px; gap: 7px; } } @media (max-width: 480px) { .doctor-info__expertise-certificates .expertise-area__list li { font-size: max(13px, 3.2vw); gap: 6px; line-height: 1.4; } } .doctor-info__expertise-certificates .expertise-area__list li:hover { color: #00704a; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform: translateX(4px); transform: translateX(4px); } @media (max-width: 768px) { .doctor-info__expertise-certificates .expertise-area__list li:hover { -webkit-transform: translateX(2px); transform: translateX(2px); } } .doctor-info__expertise-certificates .expertise-area__list li:hover img { -webkit-filter: brightness(0) saturate(100%) invert(39%) sepia(83%) saturate(447%) hue-rotate(123deg) brightness(95%) contrast(90%); filter: brightness(0) saturate(100%) invert(39%) sepia(83%) saturate(447%) hue-rotate(123deg) brightness(95%) contrast(90%); } .doctor-info__expertise-certificates .expertise-area__list li img { width: 20px; height: 20px; -ms-flex-negative: 0; flex-shrink: 0; margin-top: 3px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media (max-width: 1440px) { .doctor-info__expertise-certificates .expertise-area__list li img { width: 18px; height: 18px; margin-top: 2px; } } @media (max-width: 768px) { .doctor-info__expertise-certificates .expertise-area__list li img { width: 16px; height: 16px; margin-top: 2px; } } @media (max-width: 480px) { .doctor-info__expertise-certificates .expertise-area__list li img { width: 14px; height: 14px; margin-top: 1px; } } .doctor-info__expertise-certificates .expertise-area__list li span { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: inherit; } .doctor-info__expertise-certificates .expertise-area:hover { -webkit-box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.16); box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.16); -webkit-transform: translateY(-4px); transform: translateY(-4px); border-color: rgba(0, 152, 100, 0.08); } @media (max-width: 768px) { .doctor-info__expertise-certificates .expertise-area:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } .doctor-info__expertise-certificates .expertise-area:hover .expertise-area__title { color: #00704a; } .doctor-info__expertise-certificates .certificates-training { background-color: #00704a; border: 1px solid rgba(0, 152, 100, 0.3); } .doctor-info__expertise-certificates .certificates-training__title { color: #fff; font-size: 20px; font-weight: 700; margin: 0 0 32px; text-align: left; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -ms-flex-negative: 0; flex-shrink: 0; } @media (max-width: 1770px) { .doctor-info__expertise-certificates .certificates-training__title { font-size: 19px; margin: 0 0 28px; } } @media (max-width: 1440px) { .doctor-info__expertise-certificates .certificates-training__title { font-size: 18px; margin: 0 0 25px; } } @media (max-width: 1200px) { .doctor-info__expertise-certificates .certificates-training__title { font-size: 17px; margin: 0 0 22px; } } @media (max-width: 992px) { .doctor-info__expertise-certificates .certificates-training__title { font-size: 16px; margin: 0 0 20px; } } @media (max-width: 768px) { .doctor-info__expertise-certificates .certificates-training__title { font-size: 15px; margin: 0 0 18px; } } @media (max-width: 640px) { .doctor-info__expertise-certificates .certificates-training__title { font-size: 14px; margin: 0 0 16px; } } @media (max-width: 480px) { .doctor-info__expertise-certificates .certificates-training__title { font-size: 14px; margin: 0 0 12px; } } .doctor-info__expertise-certificates .certificates-training__list { list-style: disc; padding-left: 20px; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } @media (max-width: 1770px) { .doctor-info__expertise-certificates .certificates-training__list { gap: 11px; padding-left: 20px; } } @media (max-width: 1440px) { .doctor-info__expertise-certificates .certificates-training__list { gap: 10px; padding-left: 20px; } } @media (max-width: 1200px) { .doctor-info__expertise-certificates .certificates-training__list { gap: 9px; padding-left: 20px; } } @media (max-width: 992px) { .doctor-info__expertise-certificates .certificates-training__list { gap: 9px; padding-left: 20px; } } @media (max-width: 768px) { .doctor-info__expertise-certificates .certificates-training__list { padding-left: 18px; gap: 8px; } } @media (max-width: 640px) { .doctor-info__expertise-certificates .certificates-training__list { gap: 7px; padding-left: 18px; } } @media (max-width: 480px) { .doctor-info__expertise-certificates .certificates-training__list { padding-left: 18px; gap: 6px; } } .doctor-info__expertise-certificates .certificates-training__list li { font-size: 16px; line-height: 1.5; letter-spacing: -0.31px; color: rgb(255, 255, 255); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; display: list-item; text-align: justify; } @media (max-width: 1770px) { .doctor-info__expertise-certificates .certificates-training__list li { font-size: 15px; line-height: 1.48; } } @media (max-width: 1440px) { .doctor-info__expertise-certificates .certificates-training__list li { font-size: 15px; line-height: 1.46; } } @media (max-width: 1200px) { .doctor-info__expertise-certificates .certificates-training__list li { font-size: 14px; line-height: 1.44; } } @media (max-width: 992px) { .doctor-info__expertise-certificates .certificates-training__list li { font-size: 14px; } } @media (max-width: 768px) { .doctor-info__expertise-certificates .certificates-training__list li { font-size: 13px; line-height: 1.42; } } @media (max-width: 640px) { .doctor-info__expertise-certificates .certificates-training__list li { font-size: 12px; } } @media (max-width: 480px) { .doctor-info__expertise-certificates .certificates-training__list li { font-size: max(13px, 3.2vw); line-height: 1.4; } } .doctor-info__expertise-certificates .certificates-training__list li:hover { color: #fff; -webkit-transform: translateX(4px); transform: translateX(4px); font-weight: 400; } .doctor-info__expertise-certificates .certificates-training__list li span { font-size: inherit; } .doctor-info__expertise-certificates .certificates-training:hover { -webkit-box-shadow: 0 16px 32px -8px rgba(0, 152, 100, 0.35); box-shadow: 0 16px 32px -8px rgba(0, 152, 100, 0.35); -webkit-transform: translateY(-6px); transform: translateY(-6px); background-color: rgb(0, 152, 100); border-color: rgba(255, 255, 255, 0.2); } .doctor-info__expertise-certificates .certificates-training:hover .certificates-training__title { color: #fff; } .doctor-work-history-section { padding: 60px 0 84px; } @media (max-width: 768px) { .doctor-work-history-section { padding: 40px 0 60px; } } .doctor-work-history-section__wrapper { padding: 0 48px; } @media (max-width: 1550px) { .doctor-work-history-section__wrapper { padding: 0; } } .doctor-work-history-section__title { font-size: 24px; font-weight: 700; color: #312020; margin: 0 0 48px; line-height: auto; text-align: center; } .doctor-work-history-section .work-history-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 0px 32px; margin: 0 auto; padding: 0 40px; --timeline-node-size: 64px; --timeline-offset: calc(var(--timeline-node-size) / 2); } @media (max-width: 1770px) { .doctor-work-history-section .work-history-grid { padding: 0 16px; gap: 20px 28px; --timeline-node-size: 56px; } } @media (max-width: 1440px) { .doctor-work-history-section .work-history-grid { padding: 0 8px; gap: 28px 24px; } } @media (max-width: 1280px) { .doctor-work-history-section .work-history-grid { padding: 0; gap: 32px 20px; } } @media (max-width: 768px) { .doctor-work-history-section .work-history-grid { grid-template-columns: 1fr; gap: 32px; padding: 0 0px 0 72px; --timeline-node-size: 48px; --timeline-offset: calc(var(--timeline-node-size) / 2); --mobile-line-x: calc(var(--timeline-node-size) / 2); } } .doctor-work-history-section .work-history-grid::before { content: ""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: var(--line-start, var(--timeline-offset)); bottom: var(--line-end, var(--timeline-offset)); width: 3px; background: repeating-linear-gradient(to bottom, #c9c9c9 0, #c9c9c9 8px, transparent 8px, transparent 16px); z-index: 0; } @media (max-width: 768px) { .doctor-work-history-section .work-history-grid::before { display: block; left: 16px; -webkit-transform: none; transform: none; width: 2px; } } .doctor-work-history-section .work-history-grid .grid-item { position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 32px; -webkit-transition: -webkit-transform 0.25s ease, -webkit-filter 0.25s ease; transition: -webkit-transform 0.25s ease, -webkit-filter 0.25s ease; transition: transform 0.25s ease, filter 0.25s ease; transition: transform 0.25s ease, filter 0.25s ease, -webkit-transform 0.25s ease, -webkit-filter 0.25s ease; } .doctor-work-history-section .work-history-grid .grid-item:nth-child(1) { grid-column: 1; grid-row: 1; } .doctor-work-history-section .work-history-grid .grid-item:nth-child(2) { grid-column: 2; grid-row: 2; } .doctor-work-history-section .work-history-grid .grid-item:nth-child(3) { grid-column: 1; grid-row: 3; } .doctor-work-history-section .work-history-grid .grid-item:nth-child(4) { grid-column: 2; grid-row: 4; } .doctor-work-history-section .work-history-grid .grid-item:nth-child(5) { grid-column: 1; grid-row: 5; } .doctor-work-history-section .work-history-grid .grid-item:nth-child(6) { grid-column: 2; grid-row: 6; } .doctor-work-history-section .work-history-grid .grid-item:nth-child(7) { grid-column: 1; grid-row: 7; } .doctor-work-history-section .work-history-grid .grid-item:nth-child(8) { grid-column: 2; grid-row: 8; } .doctor-work-history-section .work-history-grid .grid-item:nth-child(9) { grid-column: 1; grid-row: 9; } .doctor-work-history-section .work-history-grid .grid-item:nth-child(10) { grid-column: 2; grid-row: 10; } .doctor-work-history-section .work-history-grid .grid-item:nth-child(11) { grid-column: 1; grid-row: 11; } .doctor-work-history-section .work-history-grid .grid-item:nth-child(12) { grid-column: 2; grid-row: 12; } .doctor-work-history-section .work-history-grid .grid-item:nth-child(13) { grid-column: 1; grid-row: 13; } .doctor-work-history-section .work-history-grid .grid-item:nth-child(14) { grid-column: 2; grid-row: 14; } .doctor-work-history-section .work-history-grid .grid-item:nth-child(15) { grid-column: 1; grid-row: 15; } .doctor-work-history-section .work-history-grid .grid-item:nth-child(16) { grid-column: 2; grid-row: 16; } .doctor-work-history-section .work-history-grid .grid-item:nth-child(17) { grid-column: 1; grid-row: 17; } .doctor-work-history-section .work-history-grid .grid-item:nth-child(18) { grid-column: 2; grid-row: 18; } .doctor-work-history-section .work-history-grid .grid-item:nth-child(19) { grid-column: 1; grid-row: 19; } .doctor-work-history-section .work-history-grid .grid-item:nth-child(20) { grid-column: 2; grid-row: 20; } @media (max-width: 768px) { .doctor-work-history-section .work-history-grid .grid-item { grid-column: 1 !important; grid-row: auto !important; padding-left: calc(var(--timeline-node-size) + 16px); gap: 12px; } } .doctor-work-history-section .work-history-grid .grid-item--left { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: right; } .doctor-work-history-section .work-history-grid .grid-item--left .grid-item__icon { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .doctor-work-history-section .work-history-grid .grid-item--left .grid-item__content { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; text-align: right; } .doctor-work-history-section .work-history-grid .grid-item--left .grid-item__period { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .doctor-work-history-section .work-history-grid .grid-item--right { -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: left; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .doctor-work-history-section .work-history-grid .grid-item--right .grid-item__icon { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .doctor-work-history-section .work-history-grid .grid-item--right .grid-item__content { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; text-align: left; } .doctor-work-history-section .work-history-grid .grid-item--right .grid-item__period { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .doctor-work-history-section .work-history-grid .grid-item__icon { -ms-flex-negative: 0; flex-shrink: 0; width: var(--timeline-node-size); height: var(--timeline-node-size); -webkit-filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); -webkit-transition: background-color 0.3s ease, -webkit-transform 0.25s ease, -webkit-filter 0.25s ease; transition: background-color 0.3s ease, -webkit-transform 0.25s ease, -webkit-filter 0.25s ease; transition: transform 0.25s ease, filter 0.25s ease, background-color 0.3s ease; transition: transform 0.25s ease, filter 0.25s ease, background-color 0.3s ease, -webkit-transform 0.25s ease, -webkit-filter 0.25s ease; position: relative; border-radius: 50%; background-color: #ffffff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; } @media (max-width: 768px) { .doctor-work-history-section .work-history-grid .grid-item__icon { position: absolute; left: -80px; top: 72px; -webkit-transform: translateY(0); transform: translateY(0); } } .doctor-work-history-section .work-history-grid .grid-item__icon img { width: 100%; height: 100%; display: block; border-radius: 50%; -webkit-transition: -webkit-filter 0.3s ease; transition: -webkit-filter 0.3s ease; transition: filter 0.3s ease; transition: filter 0.3s ease, -webkit-filter 0.3s ease; } .doctor-work-history-section .work-history-grid .grid-item__content { padding: 25px; border-radius: 10px; -webkit-box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.1); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; width: 100%; max-width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border: 1px solid #f2f2f2; } .doctor-work-history-section .work-history-grid .grid-item__content:hover { -webkit-box-shadow: 0 12px 24px -6px rgba(0, 152, 100, 0.25); box-shadow: 0 12px 24px -6px rgba(0, 152, 100, 0.25); -webkit-transform: translateY(-6px); transform: translateY(-6px); border-color: rgba(0, 152, 100, 0.08); } .doctor-work-history-section .work-history-grid .grid-item__period { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 11px; } .doctor-work-history-section .work-history-grid .grid-item__period .period-text { display: inline-block; padding: 4px 12px; background: rgba(0, 112, 74, 0.07); color: #00704a; border-radius: 20px; font-size: 16px; line-height: 24px; letter-spacing: -0.31px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .doctor-work-history-section .work-history-grid .grid-item__title { font-size: 20px; font-weight: 700; color: #312020; margin: 0 0 11px 0; line-height: 24px; letter-spacing: -0.31px; } .doctor-work-history-section .work-history-grid .grid-item__place { font-size: 16px; color: #00704a; margin: 0 0 11px 0; line-height: 24px; letter-spacing: -0.31px; } .doctor-work-history-section .work-history-grid .grid-item__description { font-size: 16px; color: #312020; margin: 0; line-height: 24px; letter-spacing: -0.31px; } @media (max-width: 768px) { .doctor-work-history-section .work-history-grid .grid-item { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; text-align: left; gap: 12px; padding-left: 0; min-height: var(--timeline-node-size); } .doctor-work-history-section .work-history-grid .grid-item--left .grid-item__icon, .doctor-work-history-section .work-history-grid .grid-item--right .grid-item__icon { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; margin: 0 12px 0 0; } .doctor-work-history-section .work-history-grid .grid-item--left .grid-item__content, .doctor-work-history-section .work-history-grid .grid-item--right .grid-item__content { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; text-align: left; } .doctor-work-history-section .work-history-grid .grid-item--left .grid-item__period, .doctor-work-history-section .work-history-grid .grid-item--right .grid-item__period { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } @media (max-width: 1770px) { .doctor-work-history-section .work-history-grid .grid-item { gap: 28px; } .doctor-work-history-section .work-history-grid .grid-item__content { padding: 22px; } } @media (max-width: 1440px) { .doctor-work-history-section .work-history-grid .grid-item { gap: 24px; } .doctor-work-history-section .work-history-grid .grid-item__content { padding: 20px; border-radius: 9px; } .doctor-work-history-section .work-history-grid .grid-item__title { font-size: 19px; } .doctor-work-history-section .work-history-grid .grid-item__period .period-text { font-size: 15px; } } @media (max-width: 1280px) { .doctor-work-history-section .work-history-grid .grid-item { gap: 20px; } .doctor-work-history-section .work-history-grid .grid-item__content { padding: 18px; } } .doctor-work-history-section .work-history-grid .grid-item:hover .period-text { background-color: #00704a; color: #fff; } .doctor-work-history-section .work-history-grid .grid-item:hover .grid-item__title { color: #00704a; } .doctor-work-history-section .work-history-grid .grid-item:hover .grid-item__icon { background-color: #00704a; -webkit-box-shadow: 0 0 0 6px rgba(0, 113, 74, 0.2); box-shadow: 0 0 0 6px rgba(0, 113, 74, 0.2); -webkit-animation: doctor-icon-border-pulse 1.5s ease-out infinite; animation: doctor-icon-border-pulse 1.5s ease-out infinite; -webkit-filter: drop-shadow(0 4px 10px rgba(0, 152, 100, 0.18)); filter: drop-shadow(0 4px 10px rgba(0, 152, 100, 0.18)); } .doctor-work-history-section .work-history-grid .grid-item:hover .grid-item__icon::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; opacity: 0; -webkit-transform: scale(0.85); transform: scale(0.85); -webkit-animation: doctor-icon-pulse 1.6s ease-out infinite; animation: doctor-icon-pulse 1.6s ease-out infinite; pointer-events: none; } @-webkit-keyframes doctor-icon-pulse { 0% { opacity: 0.5; -webkit-transform: scale(0.85); transform: scale(0.85); } 60% { opacity: 0.08; -webkit-transform: scale(1.25); transform: scale(1.25); } 100% { opacity: 0; -webkit-transform: scale(1.4); transform: scale(1.4); } } @keyframes doctor-icon-pulse { 0% { opacity: 0.5; -webkit-transform: scale(0.85); transform: scale(0.85); } 60% { opacity: 0.08; -webkit-transform: scale(1.25); transform: scale(1.25); } 100% { opacity: 0; -webkit-transform: scale(1.4); transform: scale(1.4); } } @-webkit-keyframes doctor-icon-border-pulse { 0% { -webkit-box-shadow: 0 0 0 6px rgba(0, 113, 74, 0.2); box-shadow: 0 0 0 6px rgba(0, 113, 74, 0.2); } 50% { -webkit-box-shadow: 0 0 0 12px rgba(0, 113, 74, 0.1); box-shadow: 0 0 0 12px rgba(0, 113, 74, 0.1); } 100% { -webkit-box-shadow: 0 0 0 6px rgba(0, 113, 74, 0.2); box-shadow: 0 0 0 6px rgba(0, 113, 74, 0.2); } } @keyframes doctor-icon-border-pulse { 0% { -webkit-box-shadow: 0 0 0 6px rgba(0, 113, 74, 0.2); box-shadow: 0 0 0 6px rgba(0, 113, 74, 0.2); } 50% { -webkit-box-shadow: 0 0 0 12px rgba(0, 113, 74, 0.1); box-shadow: 0 0 0 12px rgba(0, 113, 74, 0.1); } 100% { -webkit-box-shadow: 0 0 0 6px rgba(0, 113, 74, 0.2); box-shadow: 0 0 0 6px rgba(0, 113, 74, 0.2); } } /* Certificate Section --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .certificate-section { text-wrap: pretty; margin: 50px 0 50px; /* ============================================================ MAIN CERTIFICATE AREA ============================================================ */ /* ============================================================ ACCORDION ============================================================ */ /* ============================================================ GRID FOR OTHER CERTIFICATES ============================================================ */ } @media (max-width: 1770px) { .certificate-section { margin: 45px 0 45px; } } @media (max-width: 1550px) { .certificate-section { margin: 40px 0 40px; } } @media (max-width: 1440px) { .certificate-section { margin: 45px 0 45px; } } @media (max-width: 1280px) { .certificate-section { margin: 40px 0 40px; } } @media (max-width: 768px) { .certificate-section { margin: 32px 0 32px; } } @media (max-width: 480px) { .certificate-section { margin: 24px 0 24px; } } .certificate-section .section-title { font-size: 36px; font-weight: 700; color: #00704a; margin: 0 0 42px; } @media (max-width: 1770px) { .certificate-section .section-title { font-size: 32px; margin: 0 0 38px; } } @media (max-width: 1550px) { .certificate-section .section-title { font-size: 30px; margin: 0 0 36px; } } @media (max-width: 1440px) { .certificate-section .section-title { font-size: 32px; margin: 0 0 38px; } } @media (max-width: 1280px) { .certificate-section .section-title { font-size: 30px; margin: 0 0 36px; } } @media (max-width: 992px) { .certificate-section .section-title { font-size: 28px; margin: 0 0 32px; } } @media (max-width: 768px) { .certificate-section .section-title { font-size: 24px; margin: 0 0 28px; } } @media (max-width: 480px) { .certificate-section .section-title { font-size: 22px; margin: 0 0 24px; } } .certificate-section .section-title--spacing { margin-top: 64px; } @media (max-width: 1770px) { .certificate-section .section-title--spacing { margin-top: 58px; } } @media (max-width: 1550px) { .certificate-section .section-title--spacing { margin-top: 51px; } } @media (max-width: 1440px) { .certificate-section .section-title--spacing { margin-top: 56px; } } @media (max-width: 1280px) { .certificate-section .section-title--spacing { margin-top: 45px; } } @media (max-width: 1280px) { .certificate-section .section-title--spacing { margin-top: 48px; } } @media (max-width: 768px) { .certificate-section .section-title--spacing { margin-top: 40px; } } @media (max-width: 480px) { .certificate-section .section-title--spacing { margin-top: 32px; } } .certificate-section .cert-main { display: grid; grid-template-columns: 434px 1fr; gap: 69px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media (max-width: 1770px) { .certificate-section .cert-main { grid-template-columns: 390px 1fr; gap: 62px; } } @media (max-width: 1550px) { .certificate-section .cert-main { grid-template-columns: 347px 1fr; gap: 55px; } } @media (max-width: 1440px) { .certificate-section .cert-main { grid-template-columns: 380px 1fr; gap: 56px; } } @media (max-width: 1280px) { .certificate-section .cert-main { grid-template-columns: 340px 1fr; gap: 48px; } } @media (max-width: 1200px) { .certificate-section .cert-main { grid-template-columns: 320px 1fr; gap: 40px; } } @media (max-width: 992px) { .certificate-section .cert-main { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 768px) { .certificate-section .cert-main { gap: 24px; } } @media (max-width: 480px) { .certificate-section .cert-main { gap: 20px; } } .certificate-section .cert-main__image { position: sticky; top: 120px; overflow: hidden; border-radius: 8px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media (max-width: 991px) { .certificate-section .cert-main__image { position: static; } } .certificate-section .cert-main__image:hover { -webkit-transform: scale(1.02); transform: scale(1.02); -webkit-box-shadow: 0 8px 24px rgba(0, 113, 74, 0.15); box-shadow: 0 8px 24px rgba(0, 113, 74, 0.15); } @media (max-width: 768px) { .certificate-section .cert-main__image:hover { -webkit-transform: scale(1.01); transform: scale(1.01); -webkit-box-shadow: 0 4px 12px rgba(0, 113, 74, 0.1); box-shadow: 0 4px 12px rgba(0, 113, 74, 0.1); } } @media (max-width: 480px) { .certificate-section .cert-main__image:hover { -webkit-transform: none; transform: none; -webkit-box-shadow: none; box-shadow: none; } } .certificate-section .cert-main__image img { width: 100%; height: auto; display: block; -o-object-fit: contain; object-fit: contain; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } @media (max-width: 1440px) { .certificate-section .cert-main__image img { max-height: 500px; } } @media (max-width: 1280px) { .certificate-section .cert-main__image img { max-height: 450px; } } @media (max-width: 992px) { .certificate-section .cert-main__image img { max-height: 400px; } } @media (max-width: 768px) { .certificate-section .cert-main__image img { max-height: 320px; } } @media (max-width: 480px) { .certificate-section .cert-main__image img { max-height: 240px; } } .certificate-section .cert-main__subtitle { font-size: 16px; color: #312020; margin: 0; } @media (max-width: 1770px) { .certificate-section .cert-main__subtitle { font-size: 15px; } } @media (max-width: 1550px) { .certificate-section .cert-main__subtitle { font-size: 14px; } } @media (max-width: 1440px) { .certificate-section .cert-main__subtitle { font-size: 15px; } } @media (max-width: 1280px) { .certificate-section .cert-main__subtitle { font-size: 15px; } } @media (max-width: 768px) { .certificate-section .cert-main__subtitle { font-size: 14px; } } @media (max-width: 480px) { .certificate-section .cert-main__subtitle { font-size: 13px; } } .certificate-section .cert-main__title { font-size: 24px; font-weight: 600; margin: 0 0 32px; line-height: auto; color: #312020; text-align: justify; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } @media (max-width: 1770px) { .certificate-section .cert-main__title { font-size: 22px; margin: 0 0 29px; } } @media (max-width: 1550px) { .certificate-section .cert-main__title { font-size: 21px; margin: 0 0 27px; } } @media (max-width: 1440px) { .certificate-section .cert-main__title { font-size: 22px; margin: 0 0 28px; } } @media (max-width: 1280px) { .certificate-section .cert-main__title { font-size: 20px; margin: 0 0 24px; } } @media (max-width: 1200px) { .certificate-section .cert-main__title { font-size: 20px; margin: 0 0 24px; } } @media (max-width: 992px) { .certificate-section .cert-main__title { font-size: 20px; margin: 0 0 24px; } } @media (max-width: 768px) { .certificate-section .cert-main__title { font-size: 20px; margin: 0 0 20px; } } @media (max-width: 480px) { .certificate-section .cert-main__title { font-size: 18px; margin: 0 0 18px; } } .certificate-section .cert-main__title p { font-size: 24px; font-weight: 600; margin: 0 0 24px; line-height: auto; color: #312020; } @media (max-width: 1770px) { .certificate-section .cert-main__title p { font-size: 22px; margin: 0 0 21px; } } @media (max-width: 1550px) { .certificate-section .cert-main__title p { font-size: 21px; margin: 0 0 19px; } } @media (max-width: 1440px) { .certificate-section .cert-main__title p { font-size: 22px; margin: 0 0 20px; } } @media (max-width: 1280px) { .certificate-section .cert-main__title p { font-size: 20px; margin: 0 0 18px; } } @media (max-width: 1200px) { .certificate-section .cert-main__title p { font-size: 20px; margin: 0 0 16px; } } @media (max-width: 992px) { .certificate-section .cert-main__title p { font-size: 20px; margin: 0 0 16px; } } @media (max-width: 768px) { .certificate-section .cert-main__title p { font-size: 18px; margin: 0 0 14px; } } @media (max-width: 480px) { .certificate-section .cert-main__title p { font-size: 16px; margin: 0 0 12px; } } .certificate-section .cert-main__desc { font-size: 16px; line-height: 1.6; color: #333; margin-bottom: 16px; text-align: justify; } @media (max-width: 1770px) { .certificate-section .cert-main__desc { font-size: 15px; margin-bottom: 15px; } } @media (max-width: 1550px) { .certificate-section .cert-main__desc { font-size: 14px; margin-bottom: 13px; } } @media (max-width: 1440px) { .certificate-section .cert-main__desc { font-size: 14px; margin-bottom: 14px; } } @media (max-width: 1280px) { .certificate-section .cert-main__desc { font-size: 13px; margin-bottom: 12px; } } @media (max-width: 1200px) { .certificate-section .cert-main__desc { font-size: 14px; margin-bottom: 12px; } } @media (max-width: 768px) { .certificate-section .cert-main__desc { font-size: 13px; line-height: 1.5; margin-bottom: 12px; } } @media (max-width: 480px) { .certificate-section .cert-main__desc { font-size: max(13px, 3.2vw); line-height: 1.5; margin-bottom: 10px; } } .certificate-section .cert-main__desc p { margin: 0 0 10px; } @media (max-width: 768px) { .certificate-section .cert-main__desc p { margin: 0 0 8px; } } @media (max-width: 480px) { .certificate-section .cert-main__desc p { margin: 0 0 6px; } } .certificate-section .cert-main__desc p:last-child { margin-bottom: 0; } .certificate-section .cert-main__sub-title { font-size: 24px; font-weight: 700; margin: 0 0 24px; color: #312020; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } @media (max-width: 1770px) { .certificate-section .cert-main__sub-title { font-size: 22px; margin: 0 0 21px; } } @media (max-width: 1550px) { .certificate-section .cert-main__sub-title { font-size: 21px; margin: 0 0 19px; } } @media (max-width: 1440px) { .certificate-section .cert-main__sub-title { font-size: 22px; margin: 0 0 20px; } } @media (max-width: 1280px) { .certificate-section .cert-main__sub-title { font-size: 20px; margin: 0 0 18px; } } @media (max-width: 1200px) { .certificate-section .cert-main__sub-title { font-size: 20px; margin: 0 0 16px; } } @media (max-width: 992px) { .certificate-section .cert-main__sub-title { font-size: 20px; margin: 0 0 16px; } } @media (max-width: 768px) { .certificate-section .cert-main__sub-title { font-size: 18px; margin: 0 0 14px; } } @media (max-width: 480px) { .certificate-section .cert-main__sub-title { font-size: 16px; margin: 0 0 12px; } } .certificate-section .cert-accordion__header { list-style: none; cursor: pointer; padding: 0 0 12px; font-size: 20px; font-weight: 600; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #312020; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .certificate-section .cert-accordion__header:hover { color: #00704a; } .certificate-section .cert-accordion__header:hover::after { -webkit-filter: none; filter: none; -webkit-transform: translateX(2px); transform: translateX(2px); } @media (max-width: 1440px) { .certificate-section .cert-accordion__header { font-size: 19px; padding: 0 0 10px; } } @media (max-width: 1280px) { .certificate-section .cert-accordion__header { font-size: 18px; padding: 0 0 10px; } } @media (max-width: 768px) { .certificate-section .cert-accordion__header { font-size: 18px; padding: 0 0 10px; } } @media (max-width: 480px) { .certificate-section .cert-accordion__header { font-size: 16px; padding: 0 0 8px; } } .certificate-section .cert-accordion__header::-webkit-details-marker { display: none; } .certificate-section .cert-accordion__header::after { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; font-size: 12px; content: url("/wp-content/themes/one-lab/assets/images/icons/cert-dropdown.svg"); width: 24px; height: 24px; display: inline-block; vertical-align: middle; margin-left: 8px; -webkit-filter: grayscale(1) brightness(0); filter: grayscale(1) brightness(0); } @media (max-width: 768px) { .certificate-section .cert-accordion__header::after { width: 20px; height: 20px; margin-left: 6px; } } @media (max-width: 480px) { .certificate-section .cert-accordion__header::after { width: 18px; height: 18px; margin-left: 6px; } } .certificate-section .cert-accordion__item[open] > .cert-accordion__header { color: #00704a; } .certificate-section .cert-accordion__item[open] > .cert-accordion__header::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-filter: none; filter: none; } .certificate-section .cert-accordion__list { margin: 0 0 16px; padding-left: 0; font-size: 16px; line-height: 150%; list-style: none; max-height: 0; opacity: 0; overflow: hidden; -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-transition: max-height 0.3s ease, opacity 0.25s ease, -webkit-transform 0.25s ease; transition: max-height 0.3s ease, opacity 0.25s ease, -webkit-transform 0.25s ease; transition: max-height 0.3s ease, opacity 0.25s ease, transform 0.25s ease; transition: max-height 0.3s ease, opacity 0.25s ease, transform 0.25s ease, -webkit-transform 0.25s ease; } @media (max-width: 1440px) { .certificate-section .cert-accordion__list { font-size: 15px; margin: 0 0 14px; } } @media (max-width: 1280px) { .certificate-section .cert-accordion__list { font-size: 15px; margin: 0 0 12px; } } @media (max-width: 768px) { .certificate-section .cert-accordion__list { font-size: 14px; margin: 0 0 12px; } } @media (max-width: 480px) { .certificate-section .cert-accordion__list { font-size: max(13px, 3.2vw); margin: 0 0 10px; } } .certificate-section .cert-accordion__list li { margin: 2px 0; } @media (max-width: 480px) { .certificate-section .cert-accordion__list li { margin: 1px 0; } } .certificate-section .cert-accordion__list li p { margin: 0 0 2px; } @media (max-width: 480px) { .certificate-section .cert-accordion__list li p { margin: 0 0 1px; } } .certificate-section .cert-accordion__list li p:last-child { margin-bottom: 0; } .certificate-section .cert-accordion__item[open] .cert-accordion__list { max-height: 600px; opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } @media (max-width: 768px) { .certificate-section .cert-accordion__item[open] .cert-accordion__list { max-height: 500px; } } @media (max-width: 480px) { .certificate-section .cert-accordion__item[open] .cert-accordion__list { max-height: 400px; } } .certificate-section .cert-accordion__content p { margin: 0 0 10px; } @media (max-width: 480px) { .certificate-section .cert-accordion__content p { margin: 0 0 8px; } } .certificate-section .cert-accordion__content ul { margin: 0 0 10px; } .certificate-section .cert-accordion__content ul li { margin: 0 0 5px; } .certificate-section .cert-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 1440px) { .certificate-section .cert-list { gap: 20px; } } @media (max-width: 1280px) { .certificate-section .cert-list { gap: 18px; } } @media (max-width: 1200px) { .certificate-section .cert-list { grid-template-columns: 1fr 1fr; gap: 20px; } } @media (max-width: 768px) { .certificate-section .cert-list { grid-template-columns: 1fr 1fr; gap: 16px; } } @media (max-width: 480px) { .certificate-section .cert-list { grid-template-columns: 1fr; gap: 20px; } } .certificate-section .cert-item { width: 100%; margin: 0 auto; padding: 0; border: none; background: none; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease; transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease; transition: transform 0.2s ease, box-shadow 0.2s ease; transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease; } .certificate-section .cert-item__image { position: sticky; top: 102px; width: 100%; height: 324px; background: #fff; border-radius: 4px; border: 0.5px solid #b7b7b7; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media screen and (max-width: 1770px) { .certificate-section .cert-item__image { height: 270px; } } @media (max-width: 1440px) { .certificate-section .cert-item__image { height: 250px; } } @media (max-width: 1280px) { .certificate-section .cert-item__image { height: 240px; } } @media (max-width: 1200px) { .certificate-section .cert-item__image { height: 260px; } } @media (max-width: 992px) { .certificate-section .cert-item__image { height: 280px; } } @media (max-width: 768px) { .certificate-section .cert-item__image { height: 260px; } } @media (max-width: 480px) { .certificate-section .cert-item__image { height: 220px; } } .certificate-section .cert-item__image img { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; display: block; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .certificate-section .cert-item__image::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 113, 74, 0); -webkit-transition: background 0.3s ease; transition: background 0.3s ease; z-index: 1; pointer-events: none; } .certificate-section .cert-item__title { margin: 20px 0 0; font-size: 24px; font-weight: 600; line-height: 150%; color: #312020; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 1440px) { .certificate-section .cert-item__title { font-size: 22px; margin: 18px 0 0; } } @media (max-width: 1280px) { .certificate-section .cert-item__title { font-size: 21px; margin: 16px 0 0; } } @media (max-width: 992px) { .certificate-section .cert-item__title { font-size: 20px; margin: 16px 0 0; } } @media (max-width: 768px) { .certificate-section .cert-item__title { font-size: 20px; line-height: 140%; margin: 14px 0 0; } } @media (max-width: 480px) { .certificate-section .cert-item__title { font-size: 18px; line-height: 140%; margin: 12px 0 0; } } .certificate-section .cert-item:hover { -webkit-transform: translateY(-6px); transform: translateY(-6px); } @media (max-width: 768px) { .certificate-section .cert-item:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); } } @media (max-width: 480px) { .certificate-section .cert-item:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } .certificate-section .cert-item:hover .cert-item__image { border-color: #00704a; border-width: 2px; -webkit-box-shadow: 0 8px 24px rgba(0, 113, 74, 0.2); box-shadow: 0 8px 24px rgba(0, 113, 74, 0.2); } @media (max-width: 768px) { .certificate-section .cert-item:hover .cert-item__image { -webkit-box-shadow: 0 4px 12px rgba(0, 113, 74, 0.15); box-shadow: 0 4px 12px rgba(0, 113, 74, 0.15); } } @media (max-width: 480px) { .certificate-section .cert-item:hover .cert-item__image { -webkit-box-shadow: 0 2px 8px rgba(0, 113, 74, 0.1); box-shadow: 0 2px 8px rgba(0, 113, 74, 0.1); } } .certificate-section .cert-item:hover .cert-item__image img { -webkit-transform: scale(1.02); transform: scale(1.02); } @media (max-width: 768px) { .certificate-section .cert-item:hover .cert-item__image img { -webkit-transform: scale(1.02); transform: scale(1.02); } } @media (max-width: 480px) { .certificate-section .cert-item:hover .cert-item__image img { -webkit-transform: scale(1.02); transform: scale(1.02); } } .certificate-section .cert-item:hover .cert-item__image::before { background: rgba(0, 113, 74, 0.05); } .certificate-section .cert-item:hover .cert-item__title { color: #00704a; } .certificate-section .cert-item.is-active .cert-item__image { border-color: #00704a; border-width: 2px; -webkit-box-shadow: 0 4px 12px rgba(0, 113, 74, 0.15); box-shadow: 0 4px 12px rgba(0, 113, 74, 0.15); } .certificate-section .cert-item.is-active .cert-item__title { color: #00704a; } /* Facilities Section --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .facilities-section { text-wrap: pretty; margin: 50px 0 50px; /* ===== GROUP ===== */ /* 1 thiết bị – full width */ /* 2 thiết bị – 2 cột */ /* 4 thiết bị – 2x2 */ /* 5 thiết bị – 3x2, card 1 span 2 ô */ /* 7 thiết bị – 3x3, card 1 & 7 span 2 ô */ /* 3,6,>7 -> dùng grid mặc định 3 cột, không span */ /* ===== CARD ===== */ /* CARD LỚN (span 2 ô) + layout 2 cột */ } @media (max-width: 1440px) { .facilities-section { margin: 45px 0 45px; } } @media (max-width: 1280px) { .facilities-section { margin: 40px 0 40px; } } @media (max-width: 768px) { .facilities-section { margin: 32px 0 32px; } } @media (max-width: 480px) { .facilities-section { margin: 24px 0 24px; } } .facilities-section__title { font-size: 36px; line-height: 55px; font-weight: 700; margin: 0 0 8px; color: #00704a; font-family: "Montserrat", sans-serif; } @media (max-width: 1440px) { .facilities-section__title { font-size: 32px; line-height: 48px; } } @media (max-width: 1200px) { .facilities-section__title { font-size: 30px; line-height: 44px; } } @media (max-width: 992px) { .facilities-section__title { font-size: 28px; line-height: 40px; } } @media (max-width: 768px) { .facilities-section__title { font-size: 26px; line-height: 38px; } } @media (max-width: 640px) { .facilities-section__title { font-size: 24px; line-height: 34px; } } @media (max-width: 480px) { .facilities-section__title { font-size: max(18px, 4vw); line-height: 28px; } } .facilities-section__description { font-size: 16px; line-height: 1.6; margin: 0 0 24px; color: #312020; font-family: "Be Vietnam Pro", sans-serif; } @media (max-width: 1440px) { .facilities-section__description { font-size: 15px; margin-bottom: 22px; } } @media (max-width: 1200px) { .facilities-section__description { font-size: 15px; margin-bottom: 20px; } } @media (max-width: 992px) { .facilities-section__description { font-size: 15px; margin-bottom: 18px; } } @media (max-width: 768px) { .facilities-section__description { font-size: 15px; margin-bottom: 16px; } } @media (max-width: 640px) { .facilities-section__description { font-size: 14px; margin-bottom: 14px; } } @media (max-width: 480px) { .facilities-section__description { font-size: max(13px, 3.2vw); margin-bottom: 12px; } } .facilities-section .facility-group { margin-bottom: 72px; } .facilities-section .facility-group__title { font-size: 24px; font-weight: 700; font-family: "Be Vietnam Pro", sans-serif; margin: 0 0 36px; color: #00704a; line-height: 1.4; } @media (max-width: 1440px) { .facilities-section .facility-group__title { font-size: 23px; margin-bottom: 33px; } } @media (max-width: 1200px) { .facilities-section .facility-group__title { font-size: 22px; margin-bottom: 30px; } } @media (max-width: 992px) { .facilities-section .facility-group__title { font-size: 21px; margin-bottom: 28px; } } @media (max-width: 768px) { .facilities-section .facility-group__title { font-size: 20px; margin-bottom: 26px; } } @media (max-width: 640px) { .facilities-section .facility-group__title { font-size: 18px; margin-bottom: 20px; } } @media (max-width: 480px) { .facilities-section .facility-group__title { font-size: max(16px, 3.5vw); margin-bottom: 16px; } } .facilities-section .facility-grid { display: grid; gap: 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .facilities-section .facility-group--1 .facility-grid { grid-template-columns: minmax(0, 1fr); } .facilities-section .facility-group--2 .facility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facilities-section .facility-group--4 .facility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facilities-section .facility-group--5 .facility-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .facilities-section .facility-group--5 .facility-card:nth-child(1) { grid-column: span 2; } .facilities-section .facility-group--7 .facility-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .facilities-section .facility-group--7 .facility-card:nth-child(1), .facilities-section .facility-group--7 .facility-card:nth-child(7) { grid-column: span 2; } .facilities-section .facility-card { position: relative; display: block; width: 100%; border-radius: 16px; overflow: hidden; min-height: 445px; border: 1px solid #e5e5e5; background-color: #fbfbfb; text-wrap: pretty; -webkit-transition: border-color 0.35s ease, -webkit-transform 0.35s ease, -webkit-box-shadow 0.35s ease; transition: border-color 0.35s ease, -webkit-transform 0.35s ease, -webkit-box-shadow 0.35s ease; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, -webkit-transform 0.35s ease, -webkit-box-shadow 0.35s ease; -webkit-box-shadow: 0 18px 42px -28px rgba(0, 0, 0, 0.25); box-shadow: 0 18px 42px -28px rgba(0, 0, 0, 0.25); /* FRAME SVG qua CSS var */ } .facilities-section .facility-card--primary { position: relative; background-color: #f0fdf7; } .facilities-section .facility-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-image: var(--frame-url); background-repeat: no-repeat; background-size: cover; background-position: center; -webkit-transition: opacity 0.35s ease; transition: opacity 0.35s ease; } .facilities-section .facility-card__inner { position: relative; z-index: 1; padding: 37px 40px 36px 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 10px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; text-align: left; height: 100%; text-wrap: pretty; } .facilities-section .facility-card__content { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .facilities-section .facility-card__image { width: 100%; max-width: 290px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 auto 8px; } .facilities-section .facility-card__image img { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; display: block; -webkit-transition: -webkit-transform 0.35s ease; transition: -webkit-transform 0.35s ease; transition: transform 0.35s ease; transition: transform 0.35s ease, -webkit-transform 0.35s ease; } .facilities-section .facility-card__name { font-size: 20px; font-weight: 600; margin: 0px 0 10px; color: #312020; font-family: "Be Vietnam Pro", sans-serif; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; line-height: 1.3; } @media (max-width: 1440px) { .facilities-section .facility-card__name { font-size: 19px; margin-bottom: 9px; } } @media (max-width: 1200px) { .facilities-section .facility-card__name { font-size: 18px; margin-bottom: 8px; } } @media (max-width: 992px) { .facilities-section .facility-card__name { font-size: 18px; margin-bottom: 8px; } } @media (max-width: 768px) { .facilities-section .facility-card__name { font-size: 17px; margin-bottom: 7px; } } @media (max-width: 640px) { .facilities-section .facility-card__name { font-size: 16px; margin-bottom: 6px; } } @media (max-width: 480px) { .facilities-section .facility-card__name { font-size: max(14px, 3.2vw); margin-bottom: 5px; } } .facilities-section .facility-card__subtitle { font-size: 16px; margin: 0px; color: #312020; font-family: "Be Vietnam Pro", sans-serif; line-height: 1.5; } @media (max-width: 1440px) { .facilities-section .facility-card__subtitle { font-size: 15px; } } @media (max-width: 1200px) { .facilities-section .facility-card__subtitle { font-size: 15px; } } @media (max-width: 992px) { .facilities-section .facility-card__subtitle { font-size: 15px; } } @media (max-width: 768px) { .facilities-section .facility-card__subtitle { font-size: 14px; } } @media (max-width: 640px) { .facilities-section .facility-card__subtitle { font-size: 14px; } } @media (max-width: 480px) { .facilities-section .facility-card__subtitle { font-size: max(13px, 3.2vw); } } .facilities-section .facility-card:hover, .facilities-section .facility-card:focus-visible, .facilities-section .facility-card:focus-within { -webkit-transform: translateY(-6px); transform: translateY(-6px); border-color: rgba(0, 112, 74, 0.45); -webkit-box-shadow: 0 24px 60px -26px rgba(0, 0, 0, 0.28); box-shadow: 0 24px 60px -26px rgba(0, 0, 0, 0.28); outline: none; } .facilities-section .facility-card:hover::before, .facilities-section .facility-card:focus-visible::before, .facilities-section .facility-card:focus-within::before { opacity: 0.95; } .facilities-section .facility-card:hover .facility-card__name, .facilities-section .facility-card:focus-visible .facility-card__name, .facilities-section .facility-card:focus-within .facility-card__name { color: #00704a; } .facilities-section .facility-card:hover .facility-card__image img, .facilities-section .facility-card:focus-visible .facility-card__image img, .facilities-section .facility-card:focus-within .facility-card__image img { -webkit-transform: scale(1.05); transform: scale(1.05); } .facilities-section .facility-card--large .facility-card__inner, .facilities-section .facility-group--2 .facility-card .facility-card__inner, .facilities-section .facility-group--4 .facility-card .facility-card__inner { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 16px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; } .facilities-section .facility-card--large .facility-card__content, .facilities-section .facility-group--2 .facility-card .facility-card__content, .facilities-section .facility-group--4 .facility-card .facility-card__content { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; max-width: 63%; -ms-flex-item-align: end; align-self: flex-end; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .facilities-section .facility-card--large .facility-card__image, .facilities-section .facility-group--2 .facility-card .facility-card__image, .facilities-section .facility-group--4 .facility-card .facility-card__image { position: absolute; right: 36px; top: 7px; max-height: 380px; max-width: 380px; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-left: auto; -ms-flex-item-align: start; align-self: flex-start; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media (prefers-reduced-motion: reduce) { .facilities-section .facility-card, .facilities-section .facility-card::before, .facilities-section .facility-card__image img { -webkit-transition: none; transition: none; } } @media (max-width: 1200px) { .facilities-section .facility-group { margin-bottom: 60px; } .facilities-section .facility-grid { gap: 28px; } .facilities-section .facility-card { min-height: 410px; } .facilities-section .facility-card__inner { padding: 32px 32px 30px 32px; gap: 12px; } .facilities-section .facility-card--large .facility-card__image, .facilities-section .facility-group--2 .facility-card .facility-card__image, .facilities-section .facility-group--4 .facility-card .facility-card__image { right: 24px; max-width: 320px; max-height: 320px; } } @media (max-width: 1024px) { .facilities-section .facility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facilities-section .facility-group--1 .facility-grid { grid-template-columns: minmax(0, 1fr); } .facilities-section .facility-group--4 .facility-grid, .facilities-section .facility-group--5 .facility-grid, .facilities-section .facility-group--7 .facility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facilities-section .facility-group--5 .facility-card:nth-child(1), .facilities-section .facility-group--7 .facility-card:nth-child(1), .facilities-section .facility-group--7 .facility-card:nth-child(7) { grid-column: span 2; } .facilities-section .facility-card { min-height: 340px; } .facilities-section .facility-card__image { max-width: 240px; max-height: 220px; } } @media (max-width: 992px) { .facilities-section .facility-group { margin-bottom: 50px; } .facilities-section .facility-group__title { margin-bottom: 26px; } .facilities-section .facility-grid { gap: 26px; } .facilities-section .facility-card { min-height: 330px; } .facilities-section .facility-card__inner { padding: 28px 24px 26px 24px; gap: 14px; } } @media (max-width: 900px) { .facilities-section .facility-group { margin-bottom: 48px; } .facilities-section .facility-group__title { margin: 0 0 28px; font-size: 22px; } .facilities-section .facility-grid { gap: 24px; } .facilities-section .facility-card { min-height: 360px; } .facilities-section .facility-card__inner { padding: 28px 24px 26px 24px; gap: 14px; } .facilities-section .facility-card--large .facility-card__inner, .facilities-section .facility-group--2 .facility-card .facility-card__inner, .facilities-section .facility-group--4 .facility-card .facility-card__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .facilities-section .facility-card--large .facility-card__content, .facilities-section .facility-group--2 .facility-card .facility-card__content, .facilities-section .facility-group--4 .facility-card .facility-card__content { max-width: 100%; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .facilities-section .facility-card--large .facility-card__image, .facilities-section .facility-group--2 .facility-card .facility-card__image, .facilities-section .facility-group--4 .facility-card .facility-card__image { position: relative; right: auto; top: auto; margin: 0 auto 10px; max-width: 260px; max-height: 240px; -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; -ms-flex-item-align: center; align-self: center; } } @media (max-width: 768px) { .facilities-section .facility-group { margin-bottom: 42px; } .facilities-section .facility-grid { gap: 22px; } .facilities-section .facility-card { min-height: 320px; } .facilities-section .facility-card__inner { padding: 24px 20px; gap: 12px; } .facilities-section .facility-card__image { max-width: 200px; max-height: 180px; margin-bottom: 8px; } } @media (max-width: 640px) { .facilities-section__title { font-size: 24px; line-height: 34px; margin-bottom: 6px; } .facilities-section__description { font-size: 14px; margin-bottom: 14px; } .facilities-section .facility-group { margin-bottom: 32px; } .facilities-section .facility-group__title { font-size: 18px; margin-bottom: 20px; } .facilities-section .facility-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; } .facilities-section .facility-group--4 .facility-grid, .facilities-section .facility-group--5 .facility-grid, .facilities-section .facility-group--7 .facility-grid { grid-template-columns: minmax(0, 1fr); } .facilities-section .facility-group--5 .facility-card:nth-child(1), .facilities-section .facility-group--7 .facility-card:nth-child(1), .facilities-section .facility-group--7 .facility-card:nth-child(7) { grid-column: span 1; } .facilities-section .facility-card__image { max-width: 180px; height: 130px; margin-bottom: 10px; } .facilities-section .facility-card { min-height: 280px; } .facilities-section .facility-card__inner { padding: 20px 16px; gap: 12px; } .facilities-section .facility-card__name { font-size: 16px; } .facilities-section .facility-card__subtitle { font-size: 14px; } .facilities-section .facility-card--large .facility-card__inner, .facilities-section .facility-group--2 .facility-card .facility-card__inner, .facilities-section .facility-group--4 .facility-card .facility-card__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 12px; } .facilities-section .facility-card--large .facility-card__content, .facilities-section .facility-group--2 .facility-card .facility-card__content, .facilities-section .facility-group--4 .facility-card .facility-card__content { max-width: 100%; width: 100%; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .facilities-section .facility-card--large .facility-card__image, .facilities-section .facility-group--2 .facility-card .facility-card__image, .facilities-section .facility-group--4 .facility-card .facility-card__image { position: relative; right: auto; top: auto; margin: 0 auto 10px; max-width: 180px; max-height: 130px; -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; -ms-flex-item-align: center; align-self: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media (max-width: 480px) { .facilities-section__title { font-size: max(18px, 4vw); line-height: 28px; margin-bottom: 4px; } .facilities-section__description { font-size: max(13px, 3.2vw); margin-bottom: 10px; } .facilities-section .facility-group { margin-bottom: 24px; } .facilities-section .facility-group__title { font-size: max(16px, 3.5vw); margin-bottom: 12px; } .facilities-section .facility-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; } .facilities-section .facility-card { min-height: 240px; } .facilities-section .facility-card__inner { padding: 16px 14px; gap: 8px; } .facilities-section .facility-card__image { max-width: 140px; height: 100px; margin-bottom: 6px; } .facilities-section .facility-card__image img { -o-object-fit: contain; object-fit: contain; } .facilities-section .facility-card__name { font-size: max(14px, 3.2vw); margin-bottom: 4px; } .facilities-section .facility-card__subtitle { font-size: max(13px, 3.2vw); } .facilities-section .facility-card--large .facility-card__inner, .facilities-section .facility-group--2 .facility-card .facility-card__inner, .facilities-section .facility-group--4 .facility-card .facility-card__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 8px; } .facilities-section .facility-card--large .facility-card__content, .facilities-section .facility-group--2 .facility-card .facility-card__content, .facilities-section .facility-group--4 .facility-card .facility-card__content { max-width: 100%; width: 100%; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .facilities-section .facility-card--large .facility-card__image, .facilities-section .facility-group--2 .facility-card .facility-card__image, .facilities-section .facility-group--4 .facility-card .facility-card__image { position: relative; right: auto; top: auto; margin: 0 auto 6px; max-width: 140px; max-height: 100px; -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; -ms-flex-item-align: center; align-self: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } /* Footer --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * Footer New Layout - 4 Columns * Based on new design with logo, company info, menus, services, and apps/social */ .site-footer--new { background-color: #ffffff; border-top: 1px solid #bbbbbb; } .site-footer--new .footer-logo-section { padding: 32px 0 24px; } .site-footer--new .footer-logo-section .site-logo { display: inline-block; text-decoration: none; } .site-footer--new .footer-logo-section .site-logo img { max-width: 240px; height: auto; max-height: 100px; -o-object-fit: contain; object-fit: contain; } .site-footer--new .footer-logo-section .site-logo svg { width: 200px; fill: #00704a; } .site-footer--new .footer-logo-section .site-logo .site-title { font-family: "Montserrat", sans-serif; font-size: 28px; font-weight: 700; color: #00704a; } @media screen and (max-width: 768px) { .site-footer--new .footer-logo-section { padding: 24px 0 20px; text-align: center; } } .site-footer--new .footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding: 32px 0; } @media screen and (max-width: 1200px) { .site-footer--new .footer-main { grid-template-columns: 1fr 1fr; gap: 32px; } } @media screen and (max-width: 768px) { .site-footer--new .footer-main { grid-template-columns: 1fr; gap: 28px; padding: 28px 0; } } .site-footer--new .footer-col--company .footer-menu-title { font-size: 18px; font-weight: 700; color: #00704a; margin: 0 0 16px; font-family: "Montserrat", sans-serif; text-underline-offset: 3px; text-transform: uppercase; } .site-footer--new .footer-col--company .footer-company-info { margin-bottom: 20px; } .site-footer--new .footer-col--company .footer-company-info .footer-company-name { font-size: 16px; color: #333; margin: 0 0 4px; font-family: "Be Vietnam Pro", sans-serif; line-height: 1.4; } .site-footer--new .footer-col--company .footer-company-info .footer-company-name strong { font-weight: 700; } .site-footer--new .footer-col--company .footer-company-info .footer-company-subtitle { font-family: "Be Vietnam Pro", sans-serif; font-size: 14px; color: #aaaaaa; margin: 0 0 12px; line-height: 1.4; } .site-footer--new .footer-col--company .footer-company-info .footer-info { font-size: 16px; color: #333; margin: 0; font-family: "Be Vietnam Pro", sans-serif; line-height: 1.5; } .site-footer--new .footer-col--company .footer-company-info .footer-info strong { font-weight: 700; } .site-footer--new .footer-col--company .footer-company-info .footer-note { font-size: 13px; color: #aaaaaa; font-style: italic; margin: 0 0 12px; } .site-footer--new .footer-col--company .footer-contact-info .footer-menu-title--contact { margin-top: 16px; margin-bottom: 12px; } .site-footer--new .footer-col--company .footer-contact-info .footer-contact-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 8px; font-size: 16px; color: #333; margin: 0 0 8px; font-family: "Be Vietnam Pro", sans-serif; line-height: 1.5; } .site-footer--new .footer-col--company .footer-contact-info .footer-contact-item .footer-contact-icon { -ms-flex-negative: 0; flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; stroke: #00704a; } .site-footer--new .footer-col--company .footer-contact-info .footer-contact-item strong { font-weight: 700; } .site-footer--new .footer-col--company .footer-contact-info .footer-contact-item a { color: #333; text-decoration: none; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } .site-footer--new .footer-col--company .footer-contact-info .footer-contact-item a:hover { color: #00704a; } .site-footer--new .footer-col--company .footer-contact-info .footer-contact-item--address { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .site-footer--new .footer-col--company .footer-contact-info .footer-contact-item--address span { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .site-footer--new .footer-col--menus { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; } @media screen and (max-width: 576px) { .site-footer--new .footer-col--menus { gap: 16px; } } .site-footer--new .footer-col--services .footer-menu-title { font-size: 18px; font-weight: 700; color: #00704a; margin: 0 0 12px; font-family: "Montserrat", sans-serif; text-underline-offset: 3px; text-transform: uppercase; } .site-footer--new .footer-col--services .footer-links { list-style: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; } .site-footer--new .footer-col--services .footer-links li { margin: 0; } .site-footer--new .footer-col--services .footer-links a { font-size: 14px; color: #333; text-decoration: none; font-family: "Be Vietnam Pro", sans-serif; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } .site-footer--new .footer-col--services .footer-links a:hover { color: #00704a; } .site-footer--new .footer-menu-group .footer-menu-title { font-size: 18px; font-weight: 700; color: #00704a; margin: 0 0 12px; font-family: "Montserrat", sans-serif; text-underline-offset: 3px; text-transform: uppercase; } .site-footer--new .footer-menu-group .footer-links { list-style: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; } .site-footer--new .footer-menu-group .footer-links li { margin: 0; } .site-footer--new .footer-menu-group .footer-links a { font-size: 14px; color: #333; text-decoration: none; font-family: "Be Vietnam Pro", sans-serif; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } .site-footer--new .footer-menu-group .footer-links a:hover { color: #00704a; } .site-footer--new .footer-col--apps { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; } .site-footer--new .footer-col--apps > .footer-menu-title { font-size: 18px; font-weight: 700; color: #00704a; margin: 0 0 8px; font-family: "Montserrat", sans-serif; text-underline-offset: 3px; text-transform: uppercase; } .site-footer--new .footer-app-group { display: -webkit-box; display: -ms-flexbox; display: flex; } .site-footer--new .footer-app-group .footer-app-label { font-size: 16px; color: #333; font-family: "Be Vietnam Pro", sans-serif; font-weight: 700; margin-bottom: 8px; display: block; } .site-footer--new .footer-app-group .footer-app-row { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; } .site-footer--new .footer-app-group .footer-app-row .footer-app-badges { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; max-width: 130px; } .site-footer--new .footer-app-group .footer-app-row .footer-qr { width: 120px; height: 120px; border-radius: 4px; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; margin-top: 1rem; } .site-footer--new .footer-app-group .footer-app-row .footer-qr img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .site-footer--new .footer-app-group .footer-app-badge { display: block; -webkit-transition: opacity 0.3s ease, -webkit-transform 0.2s ease; transition: opacity 0.3s ease, -webkit-transform 0.2s ease; transition: opacity 0.3s ease, transform 0.2s ease; transition: opacity 0.3s ease, transform 0.2s ease, -webkit-transform 0.2s ease; } .site-footer--new .footer-app-group .footer-app-badge img { height: 45px; width: 100%; display: block; -o-object-fit: cover; object-fit: cover; border-radius: 6px; } @media screen and (max-width: 768px) { .site-footer--new .footer-app-group .footer-app-badge img { height: 36px; } } .site-footer--new .footer-app-group .footer-app-badge:hover { opacity: 0.8; -webkit-transform: translateY(-2px); transform: translateY(-2px); } .site-footer--new .footer-social-group { margin-top: 8px; } .site-footer--new .footer-social-group .footer-menu-title { font-size: 18px; font-weight: 700; color: #00704a; margin: 0 0 12px; font-family: "Montserrat", sans-serif; text-underline-offset: 3px; text-transform: uppercase; } .site-footer--new .footer-social-group .footer-social-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .site-footer--new .footer-social-group .footer-social-links .footer-social-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background-color: transparent; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .site-footer--new .footer-social-group .footer-social-links .footer-social-icon svg { width: 24px; height: 24px; fill: #00704a; -webkit-transition: fill 0.3s ease; transition: fill 0.3s ease; } .site-footer--new .footer-social-group .footer-social-links .footer-social-icon img { width: 24px; height: 24px; -o-object-fit: contain; object-fit: contain; } .site-footer--new .footer-social-group .footer-social-links .footer-social-icon:hover { background-color: rgba(0, 112, 74, 0.05); } .site-footer--new .footer-social-group .footer-social-links .footer-social-icon:hover svg { fill: rgba(0, 112, 74, 0.1); } .site-footer--new .footer-bottom { border-top: 1px solid #bbbbbb; padding: 24px 0; } .site-footer--new .footer-bottom .footer-copyright p { font-size: 16px; color: #aaaaaa; margin: 0; font-family: "Be Vietnam Pro", sans-serif; line-height: 1.6; } .site-footer--new .footer-bottom .footer-copyright p strong { font-weight: 700; color: #000; } @media screen and (max-width: 768px) { .site-footer--new .footer-bottom .footer-copyright p { font-size: 12px; } } /* Floating Buttons --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .floating-buttons { position: fixed; bottom: 110px; right: 46px; z-index: 999; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } @media screen and (max-width: 1550px) { .floating-buttons { bottom: 90px; right: 40px; gap: 14px; } } @media screen and (max-width: 1200px) { .floating-buttons { bottom: 80px; right: 36px; gap: 14px; } } @media screen and (max-width: 992px) { .floating-buttons { bottom: 60px; right: 20px; gap: 14px; } } @media screen and (max-width: 768px) { .floating-buttons { bottom: 24px; right: 20px; gap: 12px; } } @media screen and (max-width: 480px) { .floating-buttons { bottom: 20px; right: 20px; gap: 10px; } } @media screen and (max-width: 360px) { .floating-buttons { bottom: 16px; right: 16px; gap: 8px; } } .float-button { width: 60px; height: 60px; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-decoration: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; border: none; padding: 10px; background-color: #ffffff; -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); } .float-button:hover { -webkit-box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1); -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .float-button.float-promo-btn { background: #49A888; } .float-button img { width: 40px; height: 40px; -o-object-fit: contain; object-fit: contain; pointer-events: none; } @media screen and (max-width: 1770px) { .float-button { width: 50px; height: 50px; padding: 8px; } .float-button img { width: 34px; height: 34px; } } @media screen and (max-width: 1550px) { .float-button { width: 40px; height: 40px; padding: 6px; } .float-button img { width: 32px; height: 32px; } } @media screen and (max-width: 1200px) { .float-button { width: 36px; height: 36px; } .float-button img { width: 28px; height: 28px; } } @media screen and (max-width: 992px) { .float-button { width: 44px; height: 44px; padding: 8px; } .float-button img { width: 30px; height: 30px; } } @media screen and (max-width: 768px) { .float-button { width: 42px; height: 42px; padding: 4px; } .float-button img { width: 30px; height: 30px; } } @media screen and (max-width: 480px) { .float-button { width: 38px; height: 38px; padding: 4px; } .float-button img { width: 24px; height: 24px; } } @media screen and (max-width: 360px) { .float-button { width: 48px; height: 50px; padding: 4px; } .float-button img { width: 28px; height: 28px; } } .float-top-btn { background-color: #ffffff; opacity: 0; visibility: hidden; -webkit-transform: scale(0.8) translateY(10px); transform: scale(0.8) translateY(10px); -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease; pointer-events: none; will-change: opacity, transform; display: none !important; } .float-top-btn.visible { opacity: 1; visibility: visible; -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); pointer-events: auto; will-change: auto; } .float-top-btn img { -webkit-filter: brightness(0); filter: brightness(0); } .float-cart-btn { background-color: #ffffff; opacity: 0; visibility: hidden; -webkit-transform: scale(0.8) translateY(10px); transform: scale(0.8) translateY(10px); -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease; pointer-events: none; will-change: opacity, transform; display: none; } .float-cart-btn.visible { opacity: 1; visibility: visible; -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); pointer-events: auto; will-change: auto; display: -webkit-box; display: -ms-flexbox; display: flex; } .float-cart-btn img { -webkit-filter: brightness(0); filter: brightness(0); } .float-change-btn { background-color: #00704a; } .float-change-btn img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .float-change-btn:hover { background-color: rgba(0, 112, 74, 0.85); } .float-change-btn:hover img { -webkit-animation: rotate-icon 0.5s ease-in-out forwards; animation: rotate-icon 0.5s ease-in-out forwards; } @-webkit-keyframes rotate-icon { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } } @keyframes rotate-icon { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-8deg); transform: scale(0.9) rotate(-8deg); } 30%, 50%, 70% { -webkit-transform: scale(1.2) rotate(8deg); transform: scale(1.2) rotate(8deg); } 40%, 60% { -webkit-transform: scale(1.2) rotate(-8deg); transform: scale(1.2) rotate(-8deg); } 100%, 80% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-8deg); transform: scale(0.9) rotate(-8deg); } 30%, 50%, 70% { -webkit-transform: scale(1.2) rotate(8deg); transform: scale(1.2) rotate(8deg); } 40%, 60% { -webkit-transform: scale(1.2) rotate(-8deg); transform: scale(1.2) rotate(-8deg); } 100%, 80% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @-webkit-keyframes phone-pulse { 0%, 100% { -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.1), 0 2px 4px rgba(0, 112, 74, 0.06); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.1), 0 2px 4px rgba(0, 112, 74, 0.06); } 50% { -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.1), 0 2px 4px rgba(0, 112, 74, 0.06), 0 0 0 8px rgba(0, 112, 74, 0.05); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.1), 0 2px 4px rgba(0, 112, 74, 0.06), 0 0 0 8px rgba(0, 112, 74, 0.05); } } @keyframes phone-pulse { 0%, 100% { -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.1), 0 2px 4px rgba(0, 112, 74, 0.06); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.1), 0 2px 4px rgba(0, 112, 74, 0.06); } 50% { -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.1), 0 2px 4px rgba(0, 112, 74, 0.06), 0 0 0 8px rgba(0, 112, 74, 0.05); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.1), 0 2px 4px rgba(0, 112, 74, 0.06), 0 0 0 8px rgba(0, 112, 74, 0.05); } } .float-phone-btn { background-color: #ffffff; -webkit-animation: phone-pulse 2s ease-in-out infinite; animation: phone-pulse 2s ease-in-out infinite; } .float-phone-btn img { -webkit-filter: brightness(0); filter: brightness(0); -webkit-animation: tada 2s linear infinite; animation: tada 2s linear infinite; } .float-phone-btn:hover { -webkit-animation: phone-pulse 1.5s ease-in-out infinite; animation: phone-pulse 1.5s ease-in-out infinite; -webkit-box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1); } .float-phone-btn:hover img { -webkit-animation: tada 2s linear infinite; animation: tada 2s linear infinite; } .float-button-wrapper { position: relative; } .float-tooltip { position: absolute; right: calc(100% + 16px); top: 50%; width: 165px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: #000000; color: #ffffff; padding: 12px 16px; border-radius: 8px; white-space: nowrap; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s ease, visibility 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; font-size: 14px; font-family: "Be Vietnam Pro", sans-serif; line-height: 1.4; max-width: 280px; white-space: normal; text-align: center; } .float-tooltip::after { content: ""; position: absolute; left: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border: 6px solid transparent; border-left-color: #000000; } .float-tooltip span { display: block; } @media screen and (max-width: 992px) { .float-tooltip { right: calc(100% + 12px); padding: 10px 14px; font-size: 13px; max-width: 250px; } } @media screen and (max-width: 768px) { .float-tooltip { right: calc(100% + 12px); padding: 10px 14px; font-size: 12px; max-width: 240px; } } @media screen and (max-width: 480px) { .float-tooltip { display: none; } } .float-button-wrapper:hover .float-tooltip { opacity: 1; visibility: visible; } .float-change-btn:focus { outline: 2px solid #00704a; outline-offset: 2px; } .float-change-btn:focus + .float-tooltip { opacity: 1; visibility: visible; } /* Appointment Form Modal --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .flatpickr-calendar { color: #312020; } .flatpickr-calendar .flatpickr-current-month { height: 60px !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; gap: 8px !important; padding: 0 !important; } .flatpickr-calendar .flatpickr-monthDropdown-months, .flatpickr-calendar .numInputWrapper { height: 32px !important; min-height: unset; font-size: 16px !important; font-weight: 500 !important; color: #312020 !important; padding: 4px 8px !important; border-radius: 8px !important; border: 1px solid #d1d5db !important; } .flatpickr-calendar .flatpickr-current-month .numInputWrapper { width: 80px !important; margin: -1px 0 0 0 !important; } .flatpickr-calendar .flatpickr-months .flatpickr-prev-month, .flatpickr-calendar .flatpickr-months .flatpickr-next-month { top: 9px !important; } .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg { fill: #00704a !important; } .flatpickr-calendar .flatpickr-months .flatpickr-month { height: 60px !important; } .flatpickr-calendar .flatpickr-day { border-radius: 8px; } .flatpickr-calendar .flatpickr-day.today { border-color: #d1d5db; } .flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.startRange, .flatpickr-calendar .flatpickr-day.endRange, .flatpickr-calendar .flatpickr-day.selected.inRange, .flatpickr-calendar .flatpickr-day.startRange.inRange, .flatpickr-calendar .flatpickr-day.endRange.inRange, .flatpickr-calendar .flatpickr-day.selected:focus, .flatpickr-calendar .flatpickr-day.startRange:focus, .flatpickr-calendar .flatpickr-day.endRange:focus, .flatpickr-calendar .flatpickr-day.selected:hover, .flatpickr-calendar .flatpickr-day.startRange:hover, .flatpickr-calendar .flatpickr-day.endRange:hover, .flatpickr-calendar .flatpickr-day.selected.prevMonthDay, .flatpickr-calendar .flatpickr-day.startRange.prevMonthDay, .flatpickr-calendar .flatpickr-day.endRange.prevMonthDay, .flatpickr-calendar .flatpickr-day.selected.nextMonthDay, .flatpickr-calendar .flatpickr-day.startRange.nextMonthDay, .flatpickr-calendar .flatpickr-day.endRange.nextMonthDay { background-color: #00704a; border-color: #00704a; color: #fff; } .flatpickr-calendar .flatpickr-current-month input.cur-year { font-size: 16px !important; font-weight: 500 !important; color: #312020 !important; } .flatpickr-calendar .flatpickr-today-button { width: 107px; padding: 8px 16px; margin: 8px 0 16px; background: #00704a; color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; font-family: "Be Vietnam Pro", sans-serif; cursor: pointer; -webkit-transition: background 0.2s ease; transition: background 0.2s ease; } .flatpickr-calendar .flatpickr-today-button:hover { background: #005a3d; } .flatpickr-calendar .flatpickr-today-button:active { background: #004a30; } /* Search Form --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * Search Form with Autocomplete * * Reusable styles for search forms with autocomplete functionality * Used across location archive, service archive, and other pages * * @package One_Lab */ .service-archive-header__search { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; max-width: 520px; } @media (max-width: 768px) { .service-archive-header__search { max-width: 100%; } } .service-archive-header__search form { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #f7f7f7; border-radius: 10px; padding: 0; } .service-archive-header__search .service-search-select { display: none !important; } .service-archive-header__search .service-search-input { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 100%; border: none; background: transparent; padding: 13.5px 40px 13.5px 44px; font-size: 14px; font-family: "Montserrat", sans-serif; color: #312020; outline: none; } .service-archive-header__search .service-search-input::-webkit-input-placeholder { color: #8b91a6; } .service-archive-header__search .service-search-input::-moz-placeholder { color: #8b91a6; } .service-archive-header__search .service-search-input:-ms-input-placeholder { color: #8b91a6; } .service-archive-header__search .service-search-input::-ms-input-placeholder { color: #8b91a6; } .service-archive-header__search .service-search-input::placeholder { color: #8b91a6; } .service-archive-header__search .select2-container { position: absolute; top: 0; left: 0; width: 100% !important; height: 100%; opacity: 0; pointer-events: none; z-index: 1; } .service-archive-header__search .select2-container .select2-selection { height: 100% !important; border: none !important; background: transparent !important; } .service-archive-header__search .select2-container .select2-selection .select2-selection__rendered { display: none !important; } .service-archive-header__search .select2-container .select2-selection .select2-selection__arrow { display: none !important; } .service-archive-header__search .select2-container.select2-container--open { opacity: 0; pointer-events: none; } .service-archive-header__search .select2-dropdown { z-index: 9999 !important; margin-top: 4px; display: block !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; } .service-archive-header__search .select2-search--dropdown .select2-search__field { padding: 8px 12px; font-size: 15px; font-family: "Be Vietnam Pro", sans-serif; } .service-archive-header__search .search-submit { position: absolute; left: 14px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: none; border: none; padding: 0; cursor: pointer; color: #5c6476; z-index: 2; -webkit-transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out; transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out; } .service-archive-header__search .search-submit:hover:not(:disabled) { color: #00704a; } .service-archive-header__search .search-submit:disabled { cursor: not-allowed; opacity: 0.6; } .service-archive-header__search .search-submit.loading { opacity: 0.7; cursor: wait; } .service-archive-header__search .search-submit.loading img { -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } .service-search-dropdown { border-radius: 8px; border: 1px solid #eceef3; -webkit-box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25); box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25); } .service-search-dropdown .select2-results__option { padding: 10px 16px; font-size: 15px; color: #312020; } .service-search-dropdown .select2-results__option.select2-results__option--highlighted { background: #e8f5ee; color: #00704a; } .search-arrow-icon { position: absolute; right: 6px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 6px; z-index: 2; border-radius: 4px; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; background: transparent; } .search-arrow-icon:hover { background: rgba(0, 112, 74, 0.1); } .search-arrow-icon:hover img { -webkit-transform: scale(1.05); transform: scale(1.05); } .search-arrow-icon:active { background: rgba(0, 112, 74, 0.15); -webkit-transform: translateY(-50%) scale(0.95); transform: translateY(-50%) scale(0.95); } .search-arrow-icon img { width: 24px; height: 24px; display: block; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .ui-autocomplete-spinner { position: absolute; right: 60px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 3; display: none; } .ui-autocomplete-spinner i { font-size: 16px; color: #00704a; } .ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; z-index: 9999 !important; background: #ffffff; border: 1px solid #e1e6ef; border-radius: 12px; -webkit-box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25); box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25); list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; } .ui-autocomplete::-webkit-scrollbar { width: 6px; } .ui-autocomplete::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; } .ui-autocomplete::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; } .ui-autocomplete::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } .ui-autocomplete .ui-menu-item { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #f0f0f0; } .ui-autocomplete .ui-menu-item:last-child { border-bottom: none; } .ui-autocomplete .ui-menu-item-wrapper { padding: 12px 16px; cursor: pointer; } @media (max-width: 768px) { .ui-autocomplete .ui-menu-item-wrapper { padding: 10px 12px; } } @media (max-width: 480px) { .ui-autocomplete .ui-menu-item-wrapper { padding: 8px 10px; } } .ui-autocomplete .ui-state-active, .ui-autocomplete .ui-state-focus { margin: 0; border: none; background: #e8f5ee; color: inherit; } .ui-autocomplete .ui-state-active .autocomplete-item__title, .ui-autocomplete .ui-state-focus .autocomplete-item__title { color: #00704a; } .ui-autocomplete .ui-state-active .autocomplete-item__desc, .ui-autocomplete .ui-state-focus .autocomplete-item__desc { color: rgba(0, 112, 74, 0.1); } .ui-autocomplete .ui-menu-item-empty { padding: 16px; text-align: center; color: #8b91a6; font-size: 14px; } @media (max-width: 768px) { .ui-autocomplete { max-height: 240px; max-width: calc(100vw - 40px); } } @media (max-width: 480px) { .ui-autocomplete { max-height: 200px; max-width: calc(100vw - 20px); } } .autocomplete-item { height: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4px; padding: 10px 16px; cursor: pointer; -webkit-transition: background 0.15s ease-in-out; transition: background 0.15s ease-in-out; } .autocomplete-item__title { font-size: 16px; font-weight: 400; color: #312020; font-family: "Be Vietnam Pro", sans-serif; } @media (max-width: 768px) { .autocomplete-item__title { font-size: 14px; } } @media (max-width: 480px) { .autocomplete-item__title { font-size: 13px; } } /* Service Archive --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * Service Archive Header Components * * Search bar, sort dropdown, và view mode toggle */ .service-archive-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; margin-bottom: 32px; } @media (max-width: 1770px) { .service-archive-header { gap: 18px; margin-bottom: 29px; } } @media (max-width: 1440px) { .service-archive-header { gap: 16px; margin-bottom: 26px; } } @media (max-width: 1200px) { .service-archive-header { gap: 14px; margin-bottom: 22px; } } @media (max-width: 992px) { .service-archive-header { gap: 12px; margin-bottom: 19px; } } @media (max-width: 768px) { .service-archive-header { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 10px; margin-bottom: 16px; } } @media (max-width: 640px) { .service-archive-header { gap: 8px; margin-bottom: 13px; } } @media (max-width: 480px) { .service-archive-header { gap: 10px; margin-bottom: 16px; } } .service-archive-header__left, .service-archive-header__right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .service-archive-header__left { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 32px; } @media (max-width: 1770px) { .service-archive-header__left { gap: 29px; } } @media (max-width: 1440px) { .service-archive-header__left { gap: 26px; } } @media (max-width: 1200px) { .service-archive-header__left { gap: 22px; } } @media (max-width: 992px) { .service-archive-header__left { gap: 19px; } } @media (max-width: 768px) { .service-archive-header__left { width: 100%; gap: 16px; } } @media (max-width: 640px) { .service-archive-header__left { gap: 13px; } } @media (max-width: 480px) { .service-archive-header__left { gap: 16px; } } .service-archive-header .service-product-type-filter { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 32px; } @media (max-width: 1770px) { .service-archive-header .service-product-type-filter { gap: 29px; } } @media (max-width: 1440px) { .service-archive-header .service-product-type-filter { gap: 26px; } } @media (max-width: 1200px) { .service-archive-header .service-product-type-filter { gap: 22px; } } @media (max-width: 992px) { .service-archive-header .service-product-type-filter { gap: 19px; } } @media (max-width: 768px) { .service-archive-header .service-product-type-filter { gap: 16px; -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media (max-width: 640px) { .service-archive-header .service-product-type-filter { gap: 13px; } } @media (max-width: 480px) { .service-archive-header .service-product-type-filter { gap: 16px; } } .service-archive-header .service-product-type-filter .btn-product-type { padding: 8px 16px; font-size: 16px; border-radius: 8px; background-color: #fff; border: 1px solid transparent; font-weight: 600; font-family: "Montserrat", sans-serif; color: #312020; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; text-decoration: none; } @media (max-width: 1770px) { .service-archive-header .service-product-type-filter .btn-product-type { font-size: 14px; padding: 7px 14px; border-radius: 7px; } } @media (max-width: 1440px) { .service-archive-header .service-product-type-filter .btn-product-type { font-size: 14px; padding: 6px 13px; border-radius: 6px; } } @media (max-width: 1200px) { .service-archive-header .service-product-type-filter .btn-product-type { font-size: 14px; padding: 6px 11px; border-radius: 6px; } } @media (max-width: 992px) { .service-archive-header .service-product-type-filter .btn-product-type { font-size: 14px; padding: 5px 10px; } } @media (max-width: 768px) { .service-archive-header .service-product-type-filter .btn-product-type { font-size: 14px; padding: 4px 8px; } } @media (max-width: 640px) { .service-archive-header .service-product-type-filter .btn-product-type { font-size: 14px; padding: 3px 6px; } } @media (max-width: 480px) { .service-archive-header .service-product-type-filter .btn-product-type { font-size: 14px; padding: 4px 8px; } } .service-archive-header .service-product-type-filter .btn-product-type.is-active, .service-archive-header .service-product-type-filter .btn-product-type:hover { background-color: #101828; color: #fff; } .service-archive-header__right { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; gap: 16px; max-width: 539px; } @media (max-width: 1770px) { .service-archive-header__right { max-width: 485px; gap: 14px; } } @media (max-width: 1440px) { .service-archive-header__right { max-width: 431px; gap: 13px; } } @media (max-width: 1200px) { .service-archive-header__right { max-width: 377px; gap: 11px; } } @media (max-width: 992px) { .service-archive-header__right { width: 100%; max-width: none; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 10px; } } @media (max-width: 768px) { .service-archive-header__right { gap: 8px; } } @media (max-width: 640px) { .service-archive-header__right { gap: 6px; } } @media (max-width: 480px) { .service-archive-header__right { gap: 8px; } } .service-archive-header__buttons { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 32px; } @media (max-width: 1770px) { .service-archive-header__buttons { gap: 29px; } } @media (max-width: 1440px) { .service-archive-header__buttons { gap: 26px; } } @media (max-width: 1200px) { .service-archive-header__buttons { gap: 22px; } } @media (max-width: 992px) { .service-archive-header__buttons { gap: 19px; } } @media (max-width: 768px) { .service-archive-header__buttons { width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 16px; } } @media (max-width: 640px) { .service-archive-header__buttons { gap: 13px; } } @media (max-width: 480px) { .service-archive-header__buttons { gap: 16px; } } .service-archive-header__buttons button { height: 40px; padding: 8px 16px; outline: none; border-radius: 8px; cursor: pointer; background: transparent; border: none; font-size: 16px; font-weight: 500; font-family: "Montserrat", sans-serif; color: #312020; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } @media (max-width: 1770px) { .service-archive-header__buttons button { height: 36px; font-size: 14px; padding: 7px 14px; } } @media (max-width: 1440px) { .service-archive-header__buttons button { height: 32px; font-size: 14px; padding: 6px 13px; } } @media (max-width: 1200px) { .service-archive-header__buttons button { height: 28px; font-size: 14px; padding: 6px 11px; } } @media (max-width: 992px) { .service-archive-header__buttons button { height: 24px; font-size: 14px; padding: 5px 10px; } } @media (max-width: 768px) { .service-archive-header__buttons button { height: 20px; font-size: 14px; padding: 4px 8px; } } @media (max-width: 640px) { .service-archive-header__buttons button { height: 16px; font-size: 14px; padding: 3px 6px; } } @media (max-width: 480px) { .service-archive-header__buttons button { height: 20px; font-size: 14px; padding: 4px 8px; } } .service-archive-header__buttons button.is-active { background: #101828; color: #ffffff; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .service-archive-header__buttons button:hover { background: #101828; color: #ffffff; } .service-archive-header__controls { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .service-sort { position: relative; } .service-sort__toggle { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 48px; height: 48px; background: #ffffff; border: 1px solid #e1e6ef; border-radius: 12px; cursor: pointer; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; padding: 0; } @media (max-width: 1770px) { .service-sort__toggle { width: 43px; height: 43px; border-radius: 11px; } } @media (max-width: 1440px) { .service-sort__toggle { width: 38px; height: 38px; border-radius: 10px; } } @media (max-width: 1200px) { .service-sort__toggle { width: 34px; height: 34px; border-radius: 8px; } } @media (max-width: 992px) { .service-sort__toggle { width: 29px; height: 29px; border-radius: 7px; } } @media (max-width: 768px) { .service-sort__toggle { width: 24px; height: 24px; border-radius: 6px; } } @media (max-width: 640px) { .service-sort__toggle { width: 44px; height: 44px; border-radius: 5px; } } @media (max-width: 480px) { .service-sort__toggle { width: 44px; height: 44px; border-radius: 6px; } } .service-sort__toggle:hover { border-color: #00704a; color: #00704a; } .service-sort__toggle svg { width: 20px; height: 20px; } @media (max-width: 1770px) { .service-sort__toggle svg { width: 18px; height: 18px; } } @media (max-width: 1440px) { .service-sort__toggle svg { width: 16px; height: 16px; } } @media (max-width: 1200px) { .service-sort__toggle svg { width: 14px; height: 14px; } } @media (max-width: 992px) { .service-sort__toggle svg { width: 12px; height: 12px; } } @media (max-width: 768px) { .service-sort__toggle svg { width: 10px; height: 10px; } } @media (max-width: 640px) { .service-sort__toggle svg { width: 16px; height: 16px; } } @media (max-width: 480px) { .service-sort__toggle svg { width: 16px; height: 16px; } } .service-sort__toggle span { display: none; } .service-sort__menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 240px; background: #ffffff; border: 1px solid #e1e6ef; border-radius: 12px; -webkit-box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25); box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25); list-style: none; margin: 0; padding: 8px 0; display: none; z-index: 1040; } @media (max-width: 1770px) { .service-sort__menu { min-width: 216px; padding: 7px 0; } } @media (max-width: 1440px) { .service-sort__menu { min-width: 192px; padding: 6px 0; } } @media (max-width: 1200px) { .service-sort__menu { min-width: 168px; padding: 6px 0; } } @media (max-width: 992px) { .service-sort__menu { min-width: 144px; padding: 5px 0; } } @media (max-width: 768px) { .service-sort__menu { min-width: 120px; padding: 4px 0; } } @media (max-width: 640px) { .service-sort__menu { min-width: 180px; padding: 3px 0; } } @media (max-width: 480px) { .service-sort__menu { min-width: 180px; padding: 4px 0; } } .service-sort__menu li { margin: 0; } .service-sort__menu a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; padding: 10px 16px; color: #312020; text-decoration: none; font-size: 14px; font-family: "Be Vietnam Pro", sans-serif; -webkit-transition: background 0.15s ease-in-out; transition: background 0.15s ease-in-out; } @media (max-width: 1770px) { .service-sort__menu a { gap: 11px; padding: 9px 14px; } } @media (max-width: 1440px) { .service-sort__menu a { gap: 10px; padding: 8px 13px; } } @media (max-width: 1200px) { .service-sort__menu a { gap: 8px; padding: 7px 11px; } } @media (max-width: 992px) { .service-sort__menu a { gap: 7px; padding: 6px 10px; } } @media (max-width: 768px) { .service-sort__menu a { gap: 6px; padding: 5px 8px; } } @media (max-width: 640px) { .service-sort__menu a { gap: 5px; padding: 4px 6px; } } @media (max-width: 480px) { .service-sort__menu a { gap: 6px; padding: 5px 8px; } } .service-sort__menu a:hover { background: #f5f5f5; } .service-sort__menu a.is-active { background: #e8f5ee; color: #00704a; font-weight: 500; } .service-sort__icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 20px; height: 20px; -ms-flex-negative: 0; flex-shrink: 0; } @media (max-width: 1770px) { .service-sort__icon { width: 18px; height: 18px; } } @media (max-width: 1440px) { .service-sort__icon { width: 16px; height: 16px; } } @media (max-width: 1200px) { .service-sort__icon { width: 14px; height: 14px; } } @media (max-width: 992px) { .service-sort__icon { width: 12px; height: 12px; } } @media (max-width: 768px) { .service-sort__icon { width: 10px; height: 10px; } } .service-sort__icon svg { width: 100%; height: 100%; display: block; } .service-sort__text { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .service-sort__toggle[aria-expanded=true] + .service-sort__menu { display: block; } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * Service Card Component (Grid View) */ .services-grid { display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 32px; } @media (max-width: 1770px) { .services-grid { grid-template-columns: repeat(2, minmax(252px, 1fr)); gap: 29px; } } @media (max-width: 1440px) { .services-grid { grid-template-columns: repeat(2, minmax(224px, 1fr)); gap: 26px; } } @media (max-width: 1200px) { .services-grid { grid-template-columns: repeat(2, minmax(196px, 1fr)); gap: 22px; } } @media (max-width: 992px) { .services-grid { grid-template-columns: 1fr; gap: 19px; } } @media (max-width: 768px) { .services-grid { gap: 16px; } } @media (max-width: 640px) { .services-grid { gap: 13px; } } @media (max-width: 480px) { .services-grid { gap: 16px; } } .service-card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #ffffff; border: 1px solid #e9edf3; border-radius: 12px; overflow: hidden; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; height: 100%; } .service-card:hover { -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); border-color: #bbbbbb; } .service-card__content { padding: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .lab-test-card-related .service-card__content { padding: 24px 26.5px; } @media (max-width: 1770px) { .service-card__content { padding: 22px; } } @media (max-width: 1440px) { .service-card__content { padding: 19px; } } @media (max-width: 1200px) { .service-card__content { padding: 17px; } } @media (max-width: 992px) { .service-card__content { padding: 14px; } } @media (max-width: 768px) { .service-card__content { padding: 12px; } } @media (max-width: 640px) { .service-card__content { padding: 10px; } } @media (max-width: 480px) { .service-card__content { padding: 12px; } } .service-card__title { margin: 0 0 12px; font-size: 24px; font-weight: 700; color: #312020; font-family: "Montserrat", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1770px) { .service-card__title { font-size: 20px; margin: 0 0 11px; } } @media (max-width: 1440px) { .service-card__title { font-size: 18px; margin: 0 0 10px; } } @media (max-width: 1200px) { .service-card__title { font-size: 16px; margin: 0 0 8px; } } @media (max-width: 992px) { .service-card__title { font-size: 14px; margin: 0 0 7px; } } @media (max-width: 768px) { .service-card__title { font-size: 14px; margin: 0 0 6px; } } @media (max-width: 640px) { .service-card__title { font-size: 14px; margin: 0 0 5px; } } @media (max-width: 480px) { .service-card__title { font-size: 14px; margin: 0 0 6px; } } .service-card__title a { color: inherit; text-decoration: none; -webkit-transition: color 0.15s ease-in-out; transition: color 0.15s ease-in-out; } .service-card__title a:hover { color: #00704a; } .service-card__price { font-size: 32px; font-weight: 700; color: #00704a; font-family: "Montserrat", sans-serif; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 6px; row-gap: 0; margin: 0 0 10px; } .service-card__price .price-label { font-size: 28px; color: #312020; font-weight: 600; font-family: "Be Vietnam Pro", sans-serif; } .service-card__price .price-amount { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .service-card__price .price-amount .currency { margin-top: 8px; } @media (max-width: 1770px) { .service-card__price .price-amount .currency { margin-top: 7px; } } @media (max-width: 1440px) { .service-card__price .price-amount .currency { margin-top: 6px; } } @media (max-width: 1200px) { .service-card__price .price-amount .currency { margin-top: 6px; } } @media (max-width: 992px) { .service-card__price .price-amount .currency { margin-top: 5px; } } @media (max-width: 768px) { .service-card__price .price-amount .currency { margin-top: 4px; } } @media (max-width: 1770px) { .service-card__price { font-size: 27px; margin-bottom: 9px; gap: 5px; } .service-card__price .price-sale { font-size: 27px; } .service-card__price .currency { font-size: 15px; } .service-card__price .price-regular { font-size: 17px; } } @media (max-width: 1440px) { .service-card__price { font-size: 24px; margin-bottom: 8px; gap: 5px; } .service-card__price .price-sale { font-size: 24px; } .service-card__price .currency { font-size: 14px; } .service-card__price .price-regular { font-size: 15px; } } @media (max-width: 1200px) { .service-card__price { font-size: 21px; margin-bottom: 7px; gap: 4px; } .service-card__price .price-sale { font-size: 21px; } .service-card__price .currency { font-size: 14px; } .service-card__price .price-regular { font-size: 14px; } } @media (max-width: 992px) { .service-card__price { font-size: 18px; margin-bottom: 6px; gap: 4px; } .service-card__price .price-sale { font-size: 18px; } .service-card__price .currency { font-size: 14px; } .service-card__price .price-regular { font-size: 14px; } } @media (max-width: 768px) { .service-card__price { font-size: 16px; margin-bottom: 5px; gap: 3px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .service-card__price .price-sale { font-size: 16px; } .service-card__price .currency { font-size: 14px; } .service-card__price .price-regular { font-size: 14px; } } @media (max-width: 640px) { .service-card__price { font-size: 14px; margin-bottom: 4px; gap: 2px; } .service-card__price .price-sale { font-size: 14px; } .service-card__price .currency { font-size: 13px; } .service-card__price .price-regular { font-size: 13px; } } @media (max-width: 480px) { .service-card__price { font-size: 14px; margin-bottom: 5px; gap: 3px; } .service-card__price .price-sale { font-size: 14px; } .service-card__price .currency { font-size: 13px; } .service-card__price .price-regular { font-size: 13px; } } .service-card__price .price-sale { color: #00704a; font-size: 32px; font-weight: 700; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .service-card__price .currency { color: #312020; font-size: 18px; font-weight: 400; } .service-card__price .price-regular { color: #535353; font-size: 20px; font-weight: 400; text-decoration: line-through; } .service-card__description { font-size: 18px; color: #312020; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin: 0 0 40px; font-family: "Be Vietnam Pro", sans-serif; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 1770px) { .service-card__description { font-size: 16px; margin-bottom: 36px; } } @media (max-width: 1440px) { .service-card__description { font-size: 14px; margin-bottom: 32px; } } @media (max-width: 1200px) { .service-card__description { font-size: 14px; margin-bottom: 28px; } } @media (max-width: 992px) { .service-card__description { font-size: 14px; margin-bottom: 24px; } } @media (max-width: 768px) { .service-card__description { font-size: 14px; margin-bottom: 20px; } } @media (max-width: 640px) { .service-card__description { font-size: 14px; margin-bottom: 16px; } } @media (max-width: 480px) { .service-card__description { font-size: 14px; margin-bottom: 20px; } } .service-card__meta-list { margin: 0 0 40px; padding: 0; } @media (max-width: 1770px) { .service-card__meta-list { margin-bottom: 36px; } } @media (max-width: 1440px) { .service-card__meta-list { margin-bottom: 32px; } } @media (max-width: 1200px) { .service-card__meta-list { margin-bottom: 28px; } } @media (max-width: 992px) { .service-card__meta-list { margin-bottom: 24px; } } @media (max-width: 768px) { .service-card__meta-list { margin-bottom: 20px; } } @media (max-width: 640px) { .service-card__meta-list { margin-bottom: 16px; } } @media (max-width: 480px) { .service-card__meta-list { margin-bottom: 20px; } } .service-card__meta-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 0 4px; font-size: 18px; } .service-card__meta-item:last-child { margin: 0; } .service-card__meta-item::before { content: "•"; color: #312020; font-size: 16px; font-weight: 400; font-family: "Be Vietnam Pro", sans-serif; display: inline-block; width: 20px; height: 20px; text-align: center; } .service-card__meta-label { font-weight: 600; } .service-card__actions { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; margin-top: auto; } @media (max-width: 1770px) { .service-card__actions { gap: 14px; } } @media (max-width: 1440px) { .service-card__actions { gap: 13px; } } @media (max-width: 1200px) { .service-card__actions { gap: 11px; } } @media (max-width: 992px) { .service-card__actions { gap: 10px; -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media (max-width: 768px) { .service-card__actions { gap: 8px; } } @media (max-width: 640px) { .service-card__actions { gap: 6px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media (max-width: 480px) { .service-card__actions { gap: 8px; } } .service-card__actions .btn { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 10px 16px; border-radius: 6px; font-size: 16px; font-weight: 600; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; text-decoration: none; text-transform: uppercase; border: none; cursor: pointer; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; white-space: nowrap; font-family: "Montserrat", sans-serif; } @media (max-width: 1770px) { .service-card__actions .btn { font-size: 14px; padding: 9px 14px; } } @media (max-width: 1440px) { .service-card__actions .btn { font-size: 14px; padding: 8px 13px; } } @media (max-width: 1200px) { .service-card__actions .btn { font-size: 14px; padding: 7px 11px; } } @media (max-width: 992px) { .service-card__actions .btn { font-size: 14px; padding: 6px 10px; } } @media (max-width: 768px) { .service-card__actions .btn { font-size: 14px; padding: 5px 8px; } } @media (max-width: 640px) { .service-card__actions .btn { font-size: 14px; padding: 4px 6px; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; width: 100%; } } @media (max-width: 480px) { .service-card__actions .btn { font-size: 14px; padding: 5px 8px; } } .service-card__actions .btn-outline { background: #ffffff; color: #00704a; border: 1px solid #00704a; } .service-card__actions .btn-outline:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); } .service-card__actions .btn-primary { background: #00704a; color: #ffffff; border: 2px solid #00704a; } .service-card__actions .btn-primary:hover { opacity: 0.9; -webkit-transform: translateY(-2px); transform: translateY(-2px); } .service-card__actions--vaccines { margin-top: auto; } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * Service List Component (List View) */ .services-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; } .service-list-item { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 24px; background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; -webkit-transition: -webkit-box-shadow 0.3s ease; transition: -webkit-box-shadow 0.3s ease; transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease; } .service-list-item:hover { -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .service-list-item__image { -webkit-box-flex: 0; -ms-flex: 0 0 300px; flex: 0 0 300px; height: 220px; overflow: hidden; background: #f5f5f5; } @media (max-width: 768px) { .service-list-item__image { -webkit-box-flex: 0; -ms-flex: 0 0 200px; flex: 0 0 200px; height: 150px; } } .service-list-item__image a { display: block; width: 100%; height: 100%; } .service-list-item__image a img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } .service-list-item__image:hover img { -webkit-transform: scale(1.05); transform: scale(1.05); } .service-list-item__content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 24px 24px 24px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } @media (max-width: 768px) { .service-list-item__content { padding: 16px; } } .service-list-item__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.4; } .service-list-item__title a { color: #1a1a1a; text-decoration: none; -webkit-transition: color 0.2s; transition: color 0.2s; } .service-list-item__title a:hover { color: #00a651; } .service-list-item__price { font-size: 18px; font-weight: 700; color: #00a651; } .service-list-item__description { font-size: 14px; line-height: 1.6; color: #666; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .service-list-item__meta { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .service-list-item__tag { padding: 4px 12px; background: #f0f0f0; border-radius: 4px; font-size: 12px; color: #666; white-space: nowrap; } .service-list-item__actions { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; margin-top: auto; } .service-list-item__actions .btn { padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; border: none; cursor: pointer; -webkit-transition: all 0.2s; transition: all 0.2s; white-space: nowrap; } .service-list-item__actions .btn-outline { background: #fff; color: #00a651; border: 1.5px solid #00a651; } .service-list-item__actions .btn-outline:hover { background: #00a651; color: #fff; } .service-list-item__actions .btn-primary { background: #00a651; color: #fff; border: 1.5px solid #00a651; } .service-list-item__actions .btn-primary:hover { background: #008a42; border-color: #008a42; } @media (max-width: 768px) { .service-list-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0; } .service-list-item__image { -webkit-box-flex: 0; -ms-flex: 0 0 200px; flex: 0 0 200px; width: 100%; } .service-list-item__actions { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .service-list-item__actions .btn { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * Service Filter Sidebar */ .service-filter-sidebar { height: 100%; background: #fff; border-right: 1px solid #dcdcdc; padding: 30px 30px 10px 0; } @media (max-width: 1770px) { .service-filter-sidebar { padding: 27px 27px 9px 0; } } @media (max-width: 1440px) { .service-filter-sidebar { padding: 24px 24px 8px 0; } } @media (max-width: 1200px) { .service-filter-sidebar { padding: 21px 21px 7px 0; } } @media (max-width: 992px) { .service-filter-sidebar { padding: 18px 18px 6px 0; } } @media (max-width: 768px) { .service-filter-sidebar { padding: 15px 15px 5px 0; } } @media (max-width: 640px) { .service-filter-sidebar { padding: 12px 12px 4px 0; } } @media (max-width: 480px) { .service-filter-sidebar { padding: 15px 15px 5px 0; } } .service-filter-sidebar__title { font-family: "Montserrat", sans-serif; font-size: 24px; font-weight: 600; margin: 0 0 46px; } @media (max-width: 1770px) { .service-filter-sidebar__title { font-size: 20px; margin: 0 0 41px; } } @media (max-width: 1440px) { .service-filter-sidebar__title { font-size: 18px; margin: 0 0 37px; } } @media (max-width: 1200px) { .service-filter-sidebar__title { font-size: 16px; margin: 0 0 32px; } } @media (max-width: 992px) { .service-filter-sidebar__title { font-size: 14px; margin: 0 0 28px; } } @media (max-width: 768px) { .service-filter-sidebar__title { font-size: 14px; margin: 0 0 23px; } } @media (max-width: 640px) { .service-filter-sidebar__title { font-size: 14px; margin: 0 0 18px; } } @media (max-width: 480px) { .service-filter-sidebar__title { font-size: 14px; margin: 0 0 23px; } } .service-filter-sidebar__title--vaccines { margin-bottom: 16px; } @media (max-width: 1770px) { .service-filter-sidebar__title--vaccines { margin-bottom: 14px; } } @media (max-width: 1440px) { .service-filter-sidebar__title--vaccines { margin-bottom: 13px; } } @media (max-width: 1200px) { .service-filter-sidebar__title--vaccines { margin-bottom: 11px; } } @media (max-width: 992px) { .service-filter-sidebar__title--vaccines { margin-bottom: 10px; } } @media (max-width: 768px) { .service-filter-sidebar__title--vaccines { margin-bottom: 8px; } } @media (max-width: 640px) { .service-filter-sidebar__title--vaccines { margin-bottom: 6px; } } @media (max-width: 480px) { .service-filter-sidebar__title--vaccines { margin-bottom: 8px; } } .service-filter-sidebar__follow-us-title { margin-bottom: 25px; } @media (max-width: 1770px) { .service-filter-sidebar__follow-us-title { margin-bottom: 22px; } } @media (max-width: 1440px) { .service-filter-sidebar__follow-us-title { margin-bottom: 20px; } } @media (max-width: 1200px) { .service-filter-sidebar__follow-us-title { margin-bottom: 18px; } } @media (max-width: 992px) { .service-filter-sidebar__follow-us-title { margin-bottom: 15px; } } @media (max-width: 768px) { .service-filter-sidebar__follow-us-title { margin-bottom: 12px; } } @media (max-width: 640px) { .service-filter-sidebar__follow-us-title { margin-bottom: 10px; } } @media (max-width: 480px) { .service-filter-sidebar__follow-us-title { margin-bottom: 12px; } } .service-filter-sidebar__follow-us-list { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; row-gap: 4px; } @media (max-width: 1770px) { .service-filter-sidebar__follow-us-list { gap: 11px; row-gap: 3px; } } @media (max-width: 1440px) { .service-filter-sidebar__follow-us-list { gap: 10px; row-gap: 3px; } } @media (max-width: 1200px) { .service-filter-sidebar__follow-us-list { gap: 8px; row-gap: 3px; } } @media (max-width: 992px) { .service-filter-sidebar__follow-us-list { gap: 7px; row-gap: 2px; } } @media (max-width: 768px) { .service-filter-sidebar__follow-us-list { gap: 6px; row-gap: 2px; } } @media (max-width: 640px) { .service-filter-sidebar__follow-us-list { gap: 5px; row-gap: 2px; } } @media (max-width: 480px) { .service-filter-sidebar__follow-us-list { gap: 6px; row-gap: 2px; } } .service-filter-sidebar__follow-us-link { width: 34px; height: 34px; min-width: 34px; border-radius: 50%; border: 1px solid #ebebeb; position: relative; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; } @media (max-width: 1770px) { .service-filter-sidebar__follow-us-link { width: 31px; height: 31px; min-width: 31px; } } @media (max-width: 1440px) { .service-filter-sidebar__follow-us-link { width: 27px; height: 27px; min-width: 27px; } } @media (max-width: 1200px) { .service-filter-sidebar__follow-us-link { width: 24px; height: 24px; min-width: 24px; } } @media (max-width: 992px) { .service-filter-sidebar__follow-us-link { width: 20px; height: 20px; min-width: 20px; } } @media (max-width: 768px) { .service-filter-sidebar__follow-us-link { width: 17px; height: 17px; min-width: 17px; } } @media (max-width: 640px) { .service-filter-sidebar__follow-us-link { width: 14px; height: 14px; min-width: 14px; } } @media (max-width: 480px) { .service-filter-sidebar__follow-us-link { width: 17px; height: 17px; min-width: 17px; } } .service-filter-sidebar__follow-us-link .icon-default, .service-filter-sidebar__follow-us-link .icon-hover { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .service-filter-sidebar__follow-us-link .icon-hover { display: none; position: absolute; inset: 0; } .service-filter-sidebar__follow-us-link svg, .service-filter-sidebar__follow-us-link .icon-hover svg { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .service-filter-sidebar__follow-us-link:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); border-color: #00704a; } .service-filter-sidebar__follow-us-link:hover .icon-default svg path { fill: #00704a; } .service-filter-sidebar__follow-us-link--zalo:hover .icon-default { display: none; } .service-filter-sidebar__follow-us-link--zalo:hover .icon-hover { display: -webkit-box; display: -ms-flexbox; display: flex; } .filter-section { padding-bottom: 30px; border-bottom: 1px solid #e5e5e5; } @media (max-width: 1770px) { .filter-section { padding-bottom: 27px; } } @media (max-width: 1440px) { .filter-section { padding-bottom: 24px; } } @media (max-width: 1200px) { .filter-section { padding-bottom: 21px; } } @media (max-width: 992px) { .filter-section { padding-bottom: 18px; } } @media (max-width: 768px) { .filter-section { padding-bottom: 15px; } } @media (max-width: 640px) { .filter-section { padding-bottom: 12px; } } @media (max-width: 480px) { .filter-section { padding-bottom: 15px; } } .filter-section:last-of-type { border-bottom: none; padding-bottom: 0; } .filter-section__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 28px; padding: 0; margin: 0; list-style: none; } @media (max-width: 1770px) { .filter-section__list { gap: 25px; } } @media (max-width: 1440px) { .filter-section__list { gap: 22px; } } @media (max-width: 1200px) { .filter-section__list { gap: 20px; } } @media (max-width: 992px) { .filter-section__list { gap: 17px; } } @media (max-width: 768px) { .filter-section__list { gap: 14px; } } @media (max-width: 640px) { .filter-section__list { gap: 11px; } } @media (max-width: 480px) { .filter-section__list { gap: 14px; } } .filter-item__link { padding: 4px 0 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; color: #00704a; font-size: 20px; font-weight: 500; font-family: "Montserrat", sans-serif; text-transform: uppercase; text-decoration: none; letter-spacing: -0.4px; -webkit-transition: color 0.2s, padding-left 0.2s; transition: color 0.2s, padding-left 0.2s; } @media (max-width: 1770px) { .filter-item__link { font-size: 17px; } } @media (max-width: 1440px) { .filter-item__link { font-size: 15px; } } @media (max-width: 1200px) { .filter-item__link { font-size: 13px; } } @media (max-width: 992px) { .filter-item__link { font-size: 14px; } } @media (max-width: 768px) { .filter-item__link { font-size: 14px; } } @media (max-width: 640px) { .filter-item__link { font-size: 14px; } } @media (max-width: 480px) { .filter-item__link { font-size: 14px; } } .filter-item__link:hover { color: #00704a; padding-left: 6px; background-color: rgba(0, 112, 74, 0.08); } @media (max-width: 1770px) { .filter-item__link:hover { padding-left: 5px; } } @media (max-width: 1440px) { .filter-item__link:hover { padding-left: 5px; } } @media (max-width: 1200px) { .filter-item__link:hover { padding-left: 4px; } } @media (max-width: 992px) { .filter-item__link:hover { padding-left: 4px; } } @media (max-width: 768px) { .filter-item__link:hover { padding-left: 3px; } } @media (max-width: 640px) { .filter-item__link:hover { padding-left: 2px; } } @media (max-width: 480px) { .filter-item__link:hover { padding-left: 3px; } } .filter-item__count { font-size: 12px; color: #999; font-weight: 400; } @media (max-width: 1770px) { .filter-item__count { font-size: 11px; } } @media (max-width: 1440px) { .filter-item__count { font-size: 10px; } } @media (max-width: 1200px) { .filter-item__count { font-size: 10px; } } @media (max-width: 992px) { .filter-item__count { font-size: 10px; } } .filter-item.is-active .filter-item__link { color: #00704a; padding-left: 10px; background-color: rgba(0, 112, 74, 0.08); -webkit-box-shadow: inset 3px 0 0 #00704a; box-shadow: inset 3px 0 0 #00704a; text-decoration: none; } @media (max-width: 1770px) { .filter-item.is-active .filter-item__link { padding-left: 9px; -webkit-box-shadow: inset 3px 0 0 #00704a; box-shadow: inset 3px 0 0 #00704a; } } @media (max-width: 1440px) { .filter-item.is-active .filter-item__link { padding-left: 8px; } } @media (max-width: 1200px) { .filter-item.is-active .filter-item__link { padding-left: 7px; } } @media (max-width: 992px) { .filter-item.is-active .filter-item__link { padding-left: 6px; } } @media (max-width: 768px) { .filter-item.is-active .filter-item__link { padding-left: 5px; } } @media (max-width: 640px) { .filter-item.is-active .filter-item__link { padding-left: 4px; } } @media (max-width: 480px) { .filter-item.is-active .filter-item__link { padding-left: 5px; } } .filter-accordion { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .filter-accordion__header { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; background-color: transparent !important; color: #00704a; font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 500; border: none; outline: none; white-space: nowrap; text-align: left; padding: 0; line-height: 100%; } @media (max-width: 1770px) { .filter-accordion__header { font-size: 16px; gap: 18px; } } @media (max-width: 1440px) { .filter-accordion__header { font-size: 14px; gap: 16px; } } @media (max-width: 1200px) { .filter-accordion__header { font-size: 14px; gap: 14px; } } @media (max-width: 992px) { .filter-accordion__header { font-size: 14px; gap: 12px; } } @media (max-width: 768px) { .filter-accordion__header { font-size: 14px; gap: 10px; } } @media (max-width: 640px) { .filter-accordion__header { font-size: 14px; gap: 8px; } } @media (max-width: 480px) { .filter-accordion__header { font-size: 14px; gap: 10px; } } .filter-accordion__icon { font-size: 12px; -webkit-transition: -webkit-transform 0.25s ease; transition: -webkit-transform 0.25s ease; transition: transform 0.25s ease; transition: transform 0.25s ease, -webkit-transform 0.25s ease; } @media (max-width: 1770px) { .filter-accordion__icon { font-size: 12px; } } @media (max-width: 1440px) { .filter-accordion__icon { font-size: 12px; } } @media (max-width: 1200px) { .filter-accordion__icon { font-size: 12px; } } @media (max-width: 992px) { .filter-accordion__icon { font-size: 12px; } } @media (max-width: 768px) { .filter-accordion__icon { font-size: 12px; } } @media (max-width: 640px) { .filter-accordion__icon { font-size: 12px; } } @media (max-width: 480px) { .filter-accordion__icon { font-size: max(12px, 3vw); } } .filter-accordion__item { padding: 30px 16px 18px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; border-bottom: 1px solid #e1e1e1; } @media (max-width: 1770px) { .filter-accordion__item { padding: 27px 14px 16px 0; gap: 11px; } } @media (max-width: 1440px) { .filter-accordion__item { padding: 24px 13px 14px 0; gap: 10px; } } @media (max-width: 1200px) { .filter-accordion__item { padding: 21px 11px 12px 0; gap: 8px; } } @media (max-width: 992px) { .filter-accordion__item { padding: 18px 10px 11px 0; gap: 7px; } } @media (max-width: 768px) { .filter-accordion__item { padding: 15px 8px 9px 0; gap: 6px; } } @media (max-width: 640px) { .filter-accordion__item { padding: 12px 6px 7px 0; gap: 5px; } } @media (max-width: 480px) { .filter-accordion__item { padding: 15px 8px 9px 0; gap: 6px; } } .filter-accordion__item--vaccines { padding: 0px 16px 18px 0; } @media (max-width: 1770px) { .filter-accordion__item--vaccines { padding: 0px 14px 16px 0; } } @media (max-width: 1440px) { .filter-accordion__item--vaccines { padding: 0px 13px 14px 0; } } @media (max-width: 1200px) { .filter-accordion__item--vaccines { padding: 0px 11px 12px 0; } } @media (max-width: 992px) { .filter-accordion__item--vaccines { padding: 0px 10px 11px 0; } } @media (max-width: 768px) { .filter-accordion__item--vaccines { padding: 0px 8px 9px 0; } } @media (max-width: 640px) { .filter-accordion__item--vaccines { padding: 0px 6px 7px 0; } } @media (max-width: 480px) { .filter-accordion__item--vaccines { padding: 0px 8px 9px 0; } } .filter-accordion__item.is-open .filter-accordion__icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .filter-accordion__panel { padding: 0; max-height: 0; overflow: hidden; -webkit-transition: max-height 0.35s ease; transition: max-height 0.35s ease; will-change: max-height; } .filter-accordion__item.is-open .filter-accordion__panel { max-height: 500px; padding: 0 0 12px; } @media (max-width: 1770px) { .filter-accordion__item.is-open .filter-accordion__panel { padding: 0 0 11px; } } @media (max-width: 1440px) { .filter-accordion__item.is-open .filter-accordion__panel { padding: 0 0 10px; } } @media (max-width: 1200px) { .filter-accordion__item.is-open .filter-accordion__panel { padding: 0 0 8px; } } @media (max-width: 992px) { .filter-accordion__item.is-open .filter-accordion__panel { padding: 0 0 7px; } } @media (max-width: 768px) { .filter-accordion__item.is-open .filter-accordion__panel { padding: 0 0 6px; } } @media (max-width: 640px) { .filter-accordion__item.is-open .filter-accordion__panel { padding: 0 0 5px; } } @media (max-width: 480px) { .filter-accordion__item.is-open .filter-accordion__panel { padding: 0 0 6px; } } .filter-accordion__list { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; } @media (max-width: 1770px) { .filter-accordion__list { gap: 14px; } } @media (max-width: 1440px) { .filter-accordion__list { gap: 13px; } } @media (max-width: 1200px) { .filter-accordion__list { gap: 11px; } } @media (max-width: 992px) { .filter-accordion__list { gap: 10px; } } @media (max-width: 768px) { .filter-accordion__list { gap: 8px; } } @media (max-width: 640px) { .filter-accordion__list { gap: 6px; } } @media (max-width: 480px) { .filter-accordion__list { gap: 8px; } } .filter-accordion__label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 10px; border-bottom: 1px solid #f1f1f1; cursor: pointer; line-height: 150%; font-size: 18px; color: #535353; font-family: "Be Vietnam Pro", sans-serif; } @media (max-width: 1770px) { .filter-accordion__label { font-size: 16px; gap: 9px; } } @media (max-width: 1440px) { .filter-accordion__label { font-size: 14px; gap: 8px; } } @media (max-width: 1200px) { .filter-accordion__label { font-size: 14px; gap: 7px; } } @media (max-width: 992px) { .filter-accordion__label { font-size: 14px; gap: 6px; } } @media (max-width: 768px) { .filter-accordion__label { font-size: 14px; gap: 5px; } } @media (max-width: 640px) { .filter-accordion__label { font-size: 14px; gap: 4px; } } @media (max-width: 480px) { .filter-accordion__label { font-size: 14px; gap: 5px; } } .filter-accordion__label:last-child { border-bottom: none; } .filter-accordion input[type=checkbox] { accent-color: #00704a; width: 16px; height: 16px; cursor: pointer; } @media (max-width: 1770px) { .filter-accordion input[type=checkbox] { width: 15px; height: 15px; } } @media (max-width: 1440px) { .filter-accordion input[type=checkbox] { width: 14px; height: 14px; } } @media (max-width: 640px) { .filter-accordion input[type=checkbox] { width: 16px; height: 16px; } } .service-filter-sidebar__banner { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 40px 0px 16px 0; } @media (max-width: 1770px) { .service-filter-sidebar__banner { padding: 36px 0px 14px 0; } } @media (max-width: 1440px) { .service-filter-sidebar__banner { padding: 32px 0px 13px 0; } } @media (max-width: 1200px) { .service-filter-sidebar__banner { padding: 28px 0px 11px 0; } } @media (max-width: 992px) { .service-filter-sidebar__banner { padding: 24px 0px 10px 0; } } @media (max-width: 768px) { .service-filter-sidebar__banner { padding: 20px 0px 8px 0; } } @media (max-width: 640px) { .service-filter-sidebar__banner { padding: 16px 0px 6px 0; } } @media (max-width: 480px) { .service-filter-sidebar__banner { padding: 20px 0px 8px 0; } } .service-filter-sidebar__banner-title { font-size: 23px; line-height: 28px; margin: 0 0 16px; } @media (max-width: 1770px) { .service-filter-sidebar__banner-title { font-size: 21px; line-height: 25px; margin: 0 0 14px; } } @media (max-width: 1440px) { .service-filter-sidebar__banner-title { font-size: 18px; line-height: 22px; margin: 0 0 13px; } } @media (max-width: 1200px) { .service-filter-sidebar__banner-title { font-size: 16px; line-height: 20px; margin: 0 0 11px; } } @media (max-width: 992px) { .service-filter-sidebar__banner-title { font-size: 14px; line-height: 17px; margin: 0 0 10px; } } @media (max-width: 768px) { .service-filter-sidebar__banner-title { font-size: 14px; line-height: 14px; margin: 0 0 8px; } } @media (max-width: 640px) { .service-filter-sidebar__banner-title { font-size: 14px; line-height: 14px; margin: 0 0 6px; } } @media (max-width: 480px) { .service-filter-sidebar__banner-title { font-size: 14px; line-height: 14px; margin: 0 0 8px; } } .service-filter-sidebar__content { position: relative; width: 100%; min-height: 431px; padding: 40px 30px; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; overflow: hidden; isolation: isolate; } @media (max-width: 1770px) { .service-filter-sidebar__content { min-height: 388px; padding: 36px 27px; } } @media (max-width: 1440px) { .service-filter-sidebar__content { min-height: 345px; padding: 32px 24px; } } @media (max-width: 1200px) { .service-filter-sidebar__content { min-height: 302px; padding: 28px 21px; } } @media (max-width: 992px) { .service-filter-sidebar__content { min-height: 259px; padding: 24px 18px; } } @media (max-width: 768px) { .service-filter-sidebar__content { min-height: 216px; padding: 20px 15px; } } @media (max-width: 640px) { .service-filter-sidebar__content { min-height: 172px; padding: 16px 12px; } } @media (max-width: 480px) { .service-filter-sidebar__content { min-height: 216px; padding: 20px 15px; } } .service-filter-sidebar__content-inner { position: relative; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: end; gap: 16px; } @media (max-width: 1770px) { .service-filter-sidebar__content-inner { gap: 14px; } } @media (max-width: 1440px) { .service-filter-sidebar__content-inner { gap: 13px; } } @media (max-width: 1200px) { .service-filter-sidebar__content-inner { gap: 11px; } } @media (max-width: 992px) { .service-filter-sidebar__content-inner { gap: 10px; } } @media (max-width: 768px) { .service-filter-sidebar__content-inner { gap: 8px; } } @media (max-width: 640px) { .service-filter-sidebar__content-inner { gap: 6px; } } @media (max-width: 480px) { .service-filter-sidebar__content-inner { gap: 8px; } } .service-filter-sidebar__content-image { position: absolute; inset: 0; z-index: 0; } .service-filter-sidebar__content-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-transition: -webkit-transform 0.4s ease; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; display: block; } .service-filter-sidebar__content .service-filter-sidebar__banner-heading { width: 204px; font-size: 24px; line-height: 28px; padding: 0 0 20px; font-family: "Montserrat", sans-serif; border-bottom: 1px solid rgba(255, 255, 255, 0.4); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } @media (max-width: 1770px) { .service-filter-sidebar__content .service-filter-sidebar__banner-heading { width: 184px; font-size: 21px; line-height: 25px; padding: 0 0 18px; } } @media (max-width: 1440px) { .service-filter-sidebar__content .service-filter-sidebar__banner-heading { width: 163px; font-size: 18px; line-height: 22px; padding: 0 0 16px; } } @media (max-width: 1200px) { .service-filter-sidebar__content .service-filter-sidebar__banner-heading { width: 143px; font-size: 16px; line-height: 20px; padding: 0 0 14px; } } @media (max-width: 992px) { .service-filter-sidebar__content .service-filter-sidebar__banner-heading { width: 122px; font-size: 14px; line-height: 17px; padding: 0 0 12px; } } @media (max-width: 768px) { .service-filter-sidebar__content .service-filter-sidebar__banner-heading { width: 102px; font-size: 14px; line-height: 14px; padding: 0 0 10px; } } @media (max-width: 640px) { .service-filter-sidebar__content .service-filter-sidebar__banner-heading { width: 90px; font-size: 14px; line-height: 14px; padding: 0 0 8px; } } @media (max-width: 480px) { .service-filter-sidebar__content .service-filter-sidebar__banner-heading { width: 102px; font-size: 14px; line-height: 14px; padding: 0 0 10px; } } .service-filter-sidebar__content .service-filter-sidebar__banner-button { -ms-flex-item-align: end; align-self: flex-end; text-transform: uppercase; font-size: 14px; line-height: 16px; font-family: "Montserrat", sans-serif; color: #fff; border: none; background-color: transparent !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; padding: 0; cursor: pointer; -webkit-transition: color 0.2s ease, -webkit-transform 0.2s ease; transition: color 0.2s ease, -webkit-transform 0.2s ease; transition: color 0.2s ease, transform 0.2s ease; transition: color 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease; } @media (max-width: 1770px) { .service-filter-sidebar__content .service-filter-sidebar__banner-button { font-size: 12px; line-height: 14px; gap: 7px; } } @media (max-width: 1440px) { .service-filter-sidebar__content .service-filter-sidebar__banner-button { font-size: 11px; line-height: 13px; gap: 6px; } } @media (max-width: 1200px) { .service-filter-sidebar__content .service-filter-sidebar__banner-button { font-size: 10px; line-height: 12px; gap: 6px; } } @media (max-width: 992px) { .service-filter-sidebar__content .service-filter-sidebar__banner-button { font-size: 10px; line-height: 12px; gap: 5px; } } @media (max-width: 768px) { .service-filter-sidebar__content .service-filter-sidebar__banner-button { font-size: 10px; line-height: 12px; gap: 4px; } } @media (max-width: 640px) { .service-filter-sidebar__content .service-filter-sidebar__banner-button { font-size: 10px; line-height: 12px; gap: 3px; } } @media (max-width: 480px) { .service-filter-sidebar__content .service-filter-sidebar__banner-button { font-size: 10px; line-height: 12px; gap: 4px; } } .service-filter-sidebar__content .service-filter-sidebar__banner-button svg { width: 14px; height: 14px; padding-top: 3px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } @media (max-width: 1770px) { .service-filter-sidebar__content .service-filter-sidebar__banner-button svg { width: 12px; height: 12px; padding-top: 2px; } } @media (max-width: 1440px) { .service-filter-sidebar__content .service-filter-sidebar__banner-button svg { width: 11px; height: 11px; padding-top: 2px; } } @media (max-width: 1200px) { .service-filter-sidebar__content .service-filter-sidebar__banner-button svg { width: 10px; height: 10px; padding-top: 2px; } } @media (max-width: 992px) { .service-filter-sidebar__content .service-filter-sidebar__banner-button svg { width: 8px; height: 8px; padding-top: 1px; } } @media (max-width: 768px) { .service-filter-sidebar__content .service-filter-sidebar__banner-button svg { width: 7px; height: 7px; padding-top: 1px; } } @media (max-width: 640px) { .service-filter-sidebar__content .service-filter-sidebar__banner-button svg { width: 6px; height: 6px; padding-top: 1px; } } @media (max-width: 480px) { .service-filter-sidebar__content .service-filter-sidebar__banner-button svg { width: 7px; height: 7px; padding-top: 1px; } } .service-filter-sidebar__content .service-filter-sidebar__banner-button:hover { text-decoration: underline; } .service-filter-sidebar__content .service-filter-sidebar__banner-button:hover svg { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .service-filter-sidebar__content:hover .service-filter-sidebar__content-image img { -webkit-transform: scale(1.2); transform: scale(1.2); } .service-pagination { margin-top: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 1770px) { .service-pagination { margin-top: 36px; } } @media (max-width: 1440px) { .service-pagination { margin-top: 32px; } } @media (max-width: 1200px) { .service-pagination { margin-top: 28px; } } @media (max-width: 992px) { .service-pagination { margin-top: 24px; } } @media (max-width: 768px) { .service-pagination { margin-top: 20px; } } @media (max-width: 640px) { .service-pagination { margin-top: 16px; } } @media (max-width: 480px) { .service-pagination { margin-top: 20px; } } .service-pagination .page-numbers { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; margin: 0 4px; background: #fff; border: 1px solid #d0d0d0; border-radius: 6px; color: #333; font-size: 14px; font-weight: 500; text-decoration: none; -webkit-transition: all 0.2s; transition: all 0.2s; } @media (max-width: 1770px) { .service-pagination .page-numbers { min-width: 36px; height: 36px; padding: 0 11px; margin: 0 3px; font-size: 13px; } } @media (max-width: 1440px) { .service-pagination .page-numbers { min-width: 32px; height: 32px; padding: 0 10px; margin: 0 3px; font-size: 13px; } } @media (max-width: 1200px) { .service-pagination .page-numbers { min-width: 28px; height: 28px; padding: 0 8px; margin: 0 3px; font-size: 12px; } } @media (max-width: 992px) { .service-pagination .page-numbers { min-width: 24px; height: 24px; padding: 0 7px; margin: 0 2px; font-size: 11px; } } @media (max-width: 768px) { .service-pagination .page-numbers { min-width: 20px; height: 20px; padding: 0 6px; margin: 0 2px; font-size: 10px; } } @media (max-width: 640px) { .service-pagination .page-numbers { min-width: 24px; height: 24px; padding: 0 4px; margin: 0 1px; font-size: 10px; } } @media (max-width: 480px) { .service-pagination .page-numbers { min-width: 28px; height: 28px; padding: 0 4px; margin: 0 2px; font-size: 10px; } } .service-pagination .page-numbers:hover { background: #f5f5f5; border-color: #00a651; color: #00a651; } .service-pagination .page-numbers.current { background: #00a651; border-color: #00a651; color: #fff; pointer-events: none; } .service-pagination .page-numbers.prev svg, .service-pagination .page-numbers.next svg { width: 20px; height: 20px; } @media (max-width: 1770px) { .service-pagination .page-numbers.prev svg, .service-pagination .page-numbers.next svg { width: 18px; height: 18px; } } @media (max-width: 1440px) { .service-pagination .page-numbers.prev svg, .service-pagination .page-numbers.next svg { width: 16px; height: 16px; } } @media (max-width: 1200px) { .service-pagination .page-numbers.prev svg, .service-pagination .page-numbers.next svg { width: 14px; height: 14px; } } @media (max-width: 992px) { .service-pagination .page-numbers.prev svg, .service-pagination .page-numbers.next svg { width: 12px; height: 12px; } } @media (max-width: 768px) { .service-pagination .page-numbers.prev svg, .service-pagination .page-numbers.next svg { width: 10px; height: 10px; } } @media (max-width: 640px) { .service-pagination .page-numbers.prev svg, .service-pagination .page-numbers.next svg { width: 8px; height: 8px; } } @media (max-width: 480px) { .service-pagination .page-numbers.prev svg, .service-pagination .page-numbers.next svg { width: 10px; height: 10px; } } .service-pagination .page-numbers.dots { border: none; pointer-events: none; } .service-pagination .page-numbers.dots:hover { background: transparent; } /* Location Archive --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * Location Archive * * Styles for vaccination location archive page * @package One_Lab */ .location-archive__container { padding: 0 0 40px 0; margin: 50px auto 0; } @media (max-width: 1770px) { .location-archive__container { padding: 0 0 39px 0; margin: 48px auto 0; } } @media (max-width: 1440px) { .location-archive__container { padding: 0 0 38px 0; margin: 46px auto 0; } } @media (max-width: 1200px) { .location-archive__container { padding: 0 0 37px 0; margin: 44px auto 0; } } @media (max-width: 768px) { .location-archive__container { padding: 0 0 32px 0; margin: 30px auto 0; } } @media (max-width: 640px) { .location-archive__container { padding: 0 0 28px 0; margin: 25px auto 0; } } @media (max-width: 480px) { .location-archive__container { padding: 0 0 24px 0; margin: 20px auto 0; } } .location-archive__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 30px; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } @media (max-width: 1770px) { .location-archive__layout { margin-top: 28px; } } @media (max-width: 1440px) { .location-archive__layout { margin-top: 27px; } } @media (max-width: 1200px) { .location-archive__layout { margin-top: 24px; } } @media (max-width: 992px) { .location-archive__layout { margin-top: 20px; } } @media (max-width: 640px) { .location-archive__layout { margin-top: 18px; } } .location-archive__map-container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .location-archive__sidebar { position: sticky; top: 20px; -ms-flex-item-align: start; align-self: flex-start; height: 100%; } @media (max-width: 992px) { .location-archive__sidebar { top: 16px; } } .location-map-container { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .location-map { width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-height: 350px; border-radius: 8px 0 0 8px; overflow: hidden; outline: none !important; } @media (min-width: 1200px) { .location-map { min-height: 420px; } } @media (max-width: 1770px) { .location-map { min-height: 410px; border-radius: 8px 0 0 8px; } } @media (max-width: 1440px) { .location-map { min-height: 400px; border-radius: 8px 0 0 8px; } } @media (max-width: 1280px) { .location-map { min-height: 390px; border-radius: 8px 0 0 8px; } } @media (max-width: 1200px) { .location-map { min-height: 380px; border-radius: 8px 8px 0 0; } } @media (max-width: 1024px) { .location-map { min-height: 350px; border-radius: 8px 8px 0 0; } } @media (max-width: 992px) { .location-map { min-height: 330px; } } @media (max-width: 768px) { .location-map { min-height: 290px; } } @media (max-width: 640px) { .location-map { min-height: 270px; } } @media (max-width: 576px) { .location-map { min-height: 250px; } } .custom-location-marker { background: none !important; border: none !important; cursor: pointer; } .custom-location-marker svg { -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .custom-location-marker--default svg { -webkit-filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)); } .custom-location-marker--hover svg { -webkit-filter: drop-shadow(0 3px 6px rgba(76, 175, 80, 0.4)); filter: drop-shadow(0 3px 6px rgba(76, 175, 80, 0.4)); -webkit-transform: scale(1.05); transform: scale(1.05); } .custom-location-marker--active svg { -webkit-filter: drop-shadow(0 4px 10px rgba(0, 112, 74, 0.6)); filter: drop-shadow(0 4px 10px rgba(0, 112, 74, 0.6)); -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-animation: markerPulse 0.3s ease-out; animation: markerPulse 0.3s ease-out; } @-webkit-keyframes markerPulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.15); transform: scale(1.15); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); } } @keyframes markerPulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.15); transform: scale(1.15); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); } } .location-tooltip { background: #ffffff !important; color: #00704a !important; padding: 10px !important; border-radius: 8px !important; border: 1px solid #bbbbbb !important; font-family: "Montserrat", sans-serif !important; font-size: 24px !important; font-weight: 600 !important; -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1) !important; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1) !important; width: 307px !important; max-width: 90vw !important; word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; text-align: center !important; text-wrap: pretty !important; } .location-tooltip::before { border-top-color: #ffffff !important; } @media (max-width: 1770px) { .location-tooltip { font-size: 23px !important; width: 300px !important; } } @media (max-width: 1440px) { .location-tooltip { font-size: 22px !important; width: 290px !important; } } @media (max-width: 1200px) { .location-tooltip { font-size: 21px !important; width: 270px !important; } } @media (max-width: 768px) { .location-tooltip { font-size: 20px !important; padding: 8px !important; width: 250px !important; max-width: 85vw !important; } } @media (max-width: 640px) { .location-tooltip { font-size: 19px !important; width: 230px !important; max-width: 82vw !important; } } @media (max-width: 480px) { .location-tooltip { font-size: 18px !important; padding: 6px !important; width: 200px !important; max-width: 80vw !important; } } .location-popup { padding: 10px; min-width: 250px; } @media (max-width: 1770px) { .location-popup { padding: 9px; min-width: 245px; } } @media (max-width: 1440px) { .location-popup { padding: 9px; min-width: 240px; } } @media (max-width: 1280px) { .location-popup { padding: 9px; min-width: 235px; } } @media (max-width: 1200px) { .location-popup { padding: 8px; min-width: 230px; } } @media (max-width: 1024px) { .location-popup { padding: 8px; min-width: 225px; } } @media (max-width: 992px) { .location-popup { padding: 8px; min-width: 220px; } } @media (max-width: 768px) { .location-popup { padding: 8px; min-width: 210px; } } @media (max-width: 640px) { .location-popup { padding: 7px; min-width: 200px; } } @media (max-width: 480px) { .location-popup { padding: 6px; min-width: 180px; } } .location-popup__title { font-size: 18px; font-weight: 600; margin: 0 0 10px; color: #312020; text-wrap: wrap; } @media (max-width: 1770px) { .location-popup__title { font-size: 17px; margin-bottom: 9px; } } @media (max-width: 1440px) { .location-popup__title { font-size: 17px; margin-bottom: 8px; } } @media (max-width: 1200px) { .location-popup__title { font-size: 16px; margin-bottom: 8px; } } @media (max-width: 768px) { .location-popup__title { font-size: 15px; margin-bottom: 7px; } } @media (max-width: 640px) { .location-popup__title { font-size: 14px; margin-bottom: 6px; } } .location-popup__address, .location-popup__phone, .location-popup__email { margin: 8px 0; font-size: 14px; line-height: 1.5; } @media (max-width: 1770px) { .location-popup__address, .location-popup__phone, .location-popup__email { margin: 7px 0; font-size: 13px; } } @media (max-width: 1440px) { .location-popup__address, .location-popup__phone, .location-popup__email { margin: 7px 0; font-size: 13px; } } @media (max-width: 1200px) { .location-popup__address, .location-popup__phone, .location-popup__email { margin: 6px 0; font-size: 13px; } } @media (max-width: 768px) { .location-popup__address, .location-popup__phone, .location-popup__email { margin: 6px 0; font-size: 12px; } } @media (max-width: 640px) { .location-popup__address, .location-popup__phone, .location-popup__email { margin: 5px 0; font-size: 11px; } } .location-popup__address strong, .location-popup__phone strong, .location-popup__email strong { display: inline-block; min-width: 80px; color: #666; } @media (max-width: 1280px) { .location-popup__address strong, .location-popup__phone strong, .location-popup__email strong { min-width: 78px; } } @media (max-width: 1024px) { .location-popup__address strong, .location-popup__phone strong, .location-popup__email strong { min-width: 75px; } } @media (max-width: 768px) { .location-popup__address strong, .location-popup__phone strong, .location-popup__email strong { min-width: 70px; } } @media (max-width: 640px) { .location-popup__address strong, .location-popup__phone strong, .location-popup__email strong { min-width: 65px; } } .location-popup a { color: #00704a; text-decoration: none; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; } .location-popup a:hover { color: #00723f; text-decoration: underline; } .location-info-panel { background: #f7f7f7; border-radius: 0 8px 8px 0; padding: 64px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 64px; } .location-info-panel .box:last-child { margin-bottom: 0; } .location-info-panel__title { font-family: "Montserrat", sans-serif; font-size: 24px; font-weight: 700; margin: 0 0 16px; color: #312020; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .location-info-panel__title img { width: 32px; height: 32px; -ms-flex-negative: 0; flex-shrink: 0; } @media (max-width: 1770px) { .location-info-panel__title { font-size: 23px; margin-bottom: 15px; } } @media (max-width: 1440px) { .location-info-panel__title { font-size: 23px; margin-bottom: 15px; } } @media (max-width: 1200px) { .location-info-panel__title { font-size: 22px; gap: 6px; margin-bottom: 14px; } } @media (max-width: 992px) { .location-info-panel__title { font-size: 20px; margin-bottom: 14px; } } @media (max-width: 640px) { .location-info-panel__title { font-size: 19px; margin-bottom: 13px; } } .location-info-panel__content { font-family: "Be Vietnam Pro", sans-serif; font-size: 16px; line-height: 1.6; color: #312020; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; border-radius: 4px; } .location-info-panel__subtitle { font-family: "Be Vietnam Pro", sans-serif; font-size: 24px; margin: 0 0 8px; color: #312020; font-weight: 400; } @media (max-width: 1770px) { .location-info-panel__subtitle { font-size: 23px; margin-bottom: 8px; } } @media (max-width: 1440px) { .location-info-panel__subtitle { font-size: 23px; margin-bottom: 8px; } } @media (max-width: 1200px) { .location-info-panel__subtitle { font-size: 22px; margin-bottom: 8px; } } @media (max-width: 992px) { .location-info-panel__subtitle { font-size: 20px; margin-bottom: 7px; } } @media (max-width: 640px) { .location-info-panel__subtitle { font-size: 19px; margin-bottom: 7px; } } .location-info-panel__text { margin: 0 0 8px; color: #312020; font-size: 18px; font-weight: 400; font-family: "Be Vietnam Pro", sans-serif; } .location-info-panel__text:last-child { margin-bottom: 0; } .location-info-panel__text strong { display: inline-block; min-width: 100px; font-weight: 600; color: #312020; } @media (max-width: 1200px) { .location-info-panel__text strong { min-width: 95px; } } @media (max-width: 768px) { .location-info-panel__text strong { min-width: 80px; } } @media (max-width: 640px) { .location-info-panel__text strong { min-width: 75px; } } .location-info-panel__text a { color: #312020; text-decoration: none; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; word-break: break-word; } .location-info-panel__text a:hover { color: #00704a; text-decoration: underline; } @media (max-width: 1770px) { .location-info-panel__text { font-size: 17px; } } @media (max-width: 1440px) { .location-info-panel__text { font-size: 17px; } } @media (max-width: 1200px) { .location-info-panel__text { font-size: 16px; margin-bottom: 7px; } } @media (max-width: 992px) { .location-info-panel__text { font-size: 15px; margin-bottom: 7px; } } @media (max-width: 640px) { .location-info-panel__text { font-size: 14px; margin-bottom: 6px; } } .location-info-panel__empty { color: #999; font-style: italic; text-align: center; padding: 20px 0; margin: 0; font-size: 14px; line-height: 1.5; } @media (max-width: 640px) { .location-info-panel__empty { font-size: 13px; padding: 16px 0; } } @media (max-width: 1770px) { .location-archive__layout { gap: 0; } .location-info-panel { padding: 62px; gap: 62px; } } @media (max-width: 1440px) { .location-archive__layout { gap: 0; } .location-info-panel { padding: 60px; gap: 60px; } } @media (max-width: 1280px) { .location-archive__layout { gap: 0; } .location-info-panel { padding: 56px; gap: 56px; } .location-info-panel__title { font-size: 22px; margin-bottom: 13px; } .location-info-panel__subtitle { font-size: 21px; margin-bottom: 12px; } .location-info-panel__text { font-size: 15px; } } @media (max-width: 1200px) { .location-archive__layout { gap: 16px; } .location-info-panel { padding: 48px; gap: 48px; } } @media (max-width: 1024px) { .location-archive__layout { grid-template-columns: 1fr 380px; gap: 20px; } .location-map { height: 420px; max-height: 420px; } .location-info-panel { padding: 40px; gap: 40px; } .location-info-panel__title { font-size: 20px; margin-bottom: 12px; } .location-info-panel__subtitle { font-size: 19px; margin-bottom: 11px; } .location-info-panel__text { font-size: 14px; } } @media (max-width: 992px) { .location-archive__layout { grid-template-columns: 1fr 350px; gap: 16px; } .location-map { height: 380px; max-height: 380px; } .location-info-panel { padding: 32px; gap: 32px; } } @media (max-width: 768px) { .location-archive__layout { grid-template-columns: 1fr; gap: 20px; } .location-archive__sidebar { position: static; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .location-archive__map-container { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .location-map { height: 320px; max-height: 320px; border-radius: 8px; } .location-info-panel { padding: 32px; border-radius: 8px; gap: 24px; min-height: auto; height: auto; } .location-info-panel__title { font-size: 20px; } .location-info-panel__title img { width: 28px; height: 28px; } .location-info-panel__subtitle { font-size: 18px; } .location-info-panel__text { font-size: 15px; } } @media (max-width: 640px) { .location-archive__layout { grid-template-columns: 1fr; gap: 18px; } .location-archive__sidebar { position: static; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .location-archive__map-container { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .location-map { height: 270px; max-height: 270px; border-radius: 8px; } .location-info-panel { padding: 28px; border-radius: 8px; gap: 22px; min-height: auto; height: auto; } .location-info-panel__title { font-size: 19px; margin-bottom: 12px; gap: 6px; } .location-info-panel__title img { width: 26px; height: 26px; } .location-info-panel__subtitle { font-size: 17px; } .location-info-panel__text { font-size: 14px; } } @media (max-width: 480px) { .location-archive__layout { gap: 16px; margin-top: 20px; } .location-map { min-height: 240px; } .location-info-panel { padding: 24px; gap: 20px; } .location-info-panel__title { font-size: 18px; margin-bottom: 12px; gap: 6px; } .location-info-panel__title img { width: 24px; height: 24px; } .location-info-panel__subtitle { font-size: 16px; margin-bottom: 6px; } .location-info-panel__text { font-size: 14px; margin-bottom: 6px; } .location-info-panel__empty { font-size: 13px; padding: 16px 0; } } @media (max-width: 360px) { .location-map { height: 300px; max-height: 300px; } .location-info-panel { padding: 20px; gap: 16px; } .location-info-panel__title { font-size: 16px; } .location-info-panel__title img { width: 20px; height: 20px; } .location-info-panel__subtitle { font-size: 15px; } .location-info-panel__text { font-size: 13px; } } /* Other Service Archive --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * Other Service Card Component (Grid View) */ .other-services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; row-gap: 35px; } @media (max-width: 1200px) { .other-services-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; row-gap: 24px; } } @media (max-width: 992px) { .other-services-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; row-gap: 20px; } } @media (max-width: 768px) { .other-services-grid { grid-template-columns: 1fr; gap: 20px; row-gap: 20px; } } @media (max-width: 480px) { .other-services-grid { gap: 16px; row-gap: 16px; } } .other-service-card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #ffffff; border: 1px solid #e9edf3; border-radius: 8px; overflow: hidden; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; height: 100%; } .other-service-card:hover { -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); border-color: #bbbbbb; -webkit-transform: translateY(-2px); transform: translateY(-2px); } .other-service-card__image { width: 100%; height: 350px; overflow: hidden; background: #fff; position: relative; aspect-ratio: 16/9; } @media (max-width: 992px) { .other-service-card__image { height: auto; aspect-ratio: 16/9; } } @media (max-width: 768px) { .other-service-card__image { aspect-ratio: 16/9; } } @media (max-width: 480px) { .other-service-card__image { aspect-ratio: 16/9; } } .other-service-card__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } .other-service-card__image:hover img { -webkit-transform: scale(1.05); transform: scale(1.05); } .other-service-card__content { padding: 30px 30px 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; gap: 32px; } @media (max-width: 992px) { .other-service-card__content { padding: 24px; gap: 24px; } } @media (max-width: 768px) { .other-service-card__content { padding: 20px; gap: 20px; } } @media (max-width: 480px) { .other-service-card__content { padding: 16px; gap: 16px; } } .other-service-card__title { margin: 0; font-size: 24px; font-weight: 700; color: #312020; font-family: "Montserrat", sans-serif; } @media (max-width: 992px) { .other-service-card__title { font-size: 22px; } } @media (max-width: 768px) { .other-service-card__title { font-size: 20px; } } @media (max-width: 480px) { .other-service-card__title { font-size: 18px; } } .other-service-card__footer-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 16px; margin-top: auto; width: 100%; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 1024px) { .other-service-card__footer-row { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } } @media (max-width: 768px) { .other-service-card__footer-row { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 12px; } } @media (max-width: 480px) { .other-service-card__footer-row { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 12px; } } .other-service-card__meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; min-width: 0; -ms-flex-negative: 1; flex-shrink: 1; } @media (max-width: 768px) { .other-service-card__meta { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; min-width: -webkit-min-content; min-width: -moz-min-content; min-width: min-content; } } @media (max-width: 480px) { .other-service-card__meta { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 12px; } } .other-service-card__rating { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; } .other-service-card__rating .star-icon { display: block; width: 24px; height: 24px; -ms-flex-negative: 0; flex-shrink: 0; } @media (max-width: 768px) { .other-service-card__rating .star-icon { width: 20px; height: 20px; } } @media (max-width: 480px) { .other-service-card__rating .star-icon { width: 18px; height: 18px; } } .other-service-card__views { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; font-size: 14px; color: #000; font-weight: 400; } @media (max-width: 768px) { .other-service-card__views { gap: 6px; } } .other-service-card__views .eye-icon { width: 24px; height: 24px; -ms-flex-negative: 0; flex-shrink: 0; } @media (max-width: 768px) { .other-service-card__views .eye-icon { width: 20px; height: 20px; } } @media (max-width: 480px) { .other-service-card__views .eye-icon { width: 18px; height: 18px; } } .other-service-card__views span { line-height: 1; font-size: 18px; font-weight: 600; font-family: "Montserrat", sans-serif; } @media (max-width: 768px) { .other-service-card__views span { font-size: 16px; } } @media (max-width: 480px) { .other-service-card__views span { font-size: 14px; } } .other-service-card__button { -ms-flex-negative: 0; flex-shrink: 0; text-align: center; padding: 13px 40px; font-weight: 600; text-transform: uppercase; font-size: 16px; font-family: "Montserrat", sans-serif; color: #ffffff !important; background-color: #00704a; border: none; cursor: pointer; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; white-space: nowrap; border-radius: 6px; text-decoration: none; position: relative; z-index: 1; } @media (max-width: 992px) { .other-service-card__button { padding: 12px 32px; font-size: 15px; } } @media (max-width: 768px) { .other-service-card__button { -ms-flex-negative: 0; flex-shrink: 0; padding: 12px 24px; font-size: 14px; } } @media (max-width: 480px) { .other-service-card__button { width: 100%; padding: 10px 20px; font-size: 13px; } } .other-service-card__button:hover { color: #ffffff; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); -webkit-transform: translateY(-2px); transform: translateY(-2px); } .other-services-archive__grid { margin-bottom: 50px; } @media (max-width: 768px) { .other-services-archive__grid { margin-bottom: 32px; } } @media (max-width: 480px) { .other-services-archive__grid { margin-bottom: 24px; } } /* Pagination --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * Pagination Component * * @package One_Lab */ .pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; margin-top: 32px; padding-left: 10px; } .pagination:has(.prev) { padding-left: 0; } @media screen and (max-width: 1440px) { .pagination { margin-top: 32px; gap: 7px; } } @media screen and (max-width: 1280px) { .pagination { margin-top: 32px; gap: 7px; } } @media screen and (max-width: 1024px) { .pagination { margin-top: 24px; gap: 6px; } } @media screen and (max-width: 768px) { .pagination { margin-top: 24px; gap: 6px; } } @media screen and (max-width: 576px) { .pagination { margin-top: 24px; gap: 4px; } } @media screen and (max-width: 480px) { .pagination { margin-top: 24px; gap: 4px; } } .pagination.post-list__pagination { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 8px; } .pagination ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; } @media screen and (max-width: 1440px) { .pagination ul { gap: 7px; } } @media screen and (max-width: 1280px) { .pagination ul { gap: 7px; } } @media screen and (max-width: 1024px) { .pagination ul { gap: 6px; } } @media screen and (max-width: 768px) { .pagination ul { gap: 6px; } } @media screen and (max-width: 576px) { .pagination ul { gap: 4px; } } @media screen and (max-width: 480px) { .pagination ul { gap: 4px; } } .pagination li { margin: 0; padding: 0; } .pagination .page-numbers { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #0e202a; font-size: 13px; font-weight: 400; gap: 32px; letter-spacing: 2.6px; line-height: 25px; font-family: "Montserrat", sans-serif; text-decoration: none; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position: relative; -webkit-transition: color 0.2s ease, border-color 0.2s ease, -webkit-transform 0.2s ease; transition: color 0.2s ease, border-color 0.2s ease, -webkit-transform 0.2s ease; transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease; } @media screen and (max-width: 1440px) { .pagination .page-numbers { height: 43px; font-size: 13px; padding: 0 11px; gap: 30px; } } @media screen and (max-width: 1280px) { .pagination .page-numbers { height: 42px; font-size: 12.5px; padding: 0 11px; gap: 28px; } } @media screen and (max-width: 1024px) { .pagination .page-numbers { height: 40px; font-size: 12px; padding: 0 10px; gap: 24px; } } @media screen and (max-width: 768px) { .pagination .page-numbers { height: 36px; font-size: 12px; padding: 0 8px; gap: 20px; } } @media screen and (max-width: 576px) { .pagination .page-numbers { height: 32px; font-size: 11px; padding: 0 6px; gap: 16px; } } @media screen and (max-width: 480px) { .pagination .page-numbers { height: 32px; font-size: 11px; padding: 0 4px; gap: 12px; } } .pagination .page-numbers:hover:not(.disabled):not(.current):not(.dots):not(.next):not(.prev):not(.page-numbers)::after { content: ""; position: absolute; bottom: -6px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 28px; height: 1px; background-color: #0e202a; -webkit-transition: width 0.2s ease; transition: width 0.2s ease; } @media screen and (max-width: 1440px) { .pagination .page-numbers:hover:not(.disabled):not(.current):not(.dots):not(.next):not(.prev):not(.page-numbers)::after { width: 27px; } } @media screen and (max-width: 1280px) { .pagination .page-numbers:hover:not(.disabled):not(.current):not(.dots):not(.next):not(.prev):not(.page-numbers)::after { width: 26px; } } @media screen and (max-width: 1024px) { .pagination .page-numbers:hover:not(.disabled):not(.current):not(.dots):not(.next):not(.prev):not(.page-numbers)::after { width: 24px; } } @media screen and (max-width: 768px) { .pagination .page-numbers:hover:not(.disabled):not(.current):not(.dots):not(.next):not(.prev):not(.page-numbers)::after { width: 20px; } } @media screen and (max-width: 576px) { .pagination .page-numbers:hover:not(.disabled):not(.current):not(.dots):not(.next):not(.prev):not(.page-numbers)::after { width: 18px; } } @media screen and (max-width: 480px) { .pagination .page-numbers:hover:not(.disabled):not(.current):not(.dots):not(.next):not(.prev):not(.page-numbers)::after { width: 16px; } } .pagination .page-numbers.current::after { content: ""; position: absolute; bottom: -6px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 28px; height: 1px; background-color: #0e202a; } @media screen and (max-width: 1440px) { .pagination .page-numbers.current::after { width: 27px; } } @media screen and (max-width: 1280px) { .pagination .page-numbers.current::after { width: 26px; } } @media screen and (max-width: 1024px) { .pagination .page-numbers.current::after { width: 24px; } } @media screen and (max-width: 768px) { .pagination .page-numbers.current::after { width: 20px; } } @media screen and (max-width: 576px) { .pagination .page-numbers.current::after { width: 18px; } } @media screen and (max-width: 480px) { .pagination .page-numbers.current::after { width: 16px; } } .pagination .page-numbers.prev, .pagination .page-numbers.next { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid #0e202a; border-radius: 9px; background: transparent; color: #0e202a; -webkit-transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; } @media screen and (max-width: 1440px) { .pagination .page-numbers.prev, .pagination .page-numbers.next { width: 43px; height: 43px; border-radius: 8.5px; } } @media screen and (max-width: 1280px) { .pagination .page-numbers.prev, .pagination .page-numbers.next { width: 42px; height: 42px; border-radius: 8.5px; } } @media screen and (max-width: 1024px) { .pagination .page-numbers.prev, .pagination .page-numbers.next { width: 40px; height: 40px; border-radius: 8px; } } @media screen and (max-width: 768px) { .pagination .page-numbers.prev, .pagination .page-numbers.next { width: 36px; height: 36px; border-radius: 7px; } } @media screen and (max-width: 576px) { .pagination .page-numbers.prev, .pagination .page-numbers.next { width: 32px; height: 32px; border-radius: 6px; } } @media screen and (max-width: 480px) { .pagination .page-numbers.prev, .pagination .page-numbers.next { width: 32px; height: 32px; border-radius: 6px; } } .pagination .page-numbers.prev img, .pagination .page-numbers.prev svg, .pagination .page-numbers.next img, .pagination .page-numbers.next svg { width: 9.4px; height: 12px; display: block; -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } @media screen and (max-width: 1440px) { .pagination .page-numbers.prev img, .pagination .page-numbers.prev svg, .pagination .page-numbers.next img, .pagination .page-numbers.next svg { width: 8.5px; height: 11px; } } @media screen and (max-width: 1280px) { .pagination .page-numbers.prev img, .pagination .page-numbers.prev svg, .pagination .page-numbers.next img, .pagination .page-numbers.next svg { width: 8.5px; height: 11px; } } @media screen and (max-width: 1024px) { .pagination .page-numbers.prev img, .pagination .page-numbers.prev svg, .pagination .page-numbers.next img, .pagination .page-numbers.next svg { width: 7.5px; height: 10px; } } @media screen and (max-width: 768px) { .pagination .page-numbers.prev img, .pagination .page-numbers.prev svg, .pagination .page-numbers.next img, .pagination .page-numbers.next svg { width: 6.5px; height: 9px; } } @media screen and (max-width: 576px) { .pagination .page-numbers.prev img, .pagination .page-numbers.prev svg, .pagination .page-numbers.next img, .pagination .page-numbers.next svg { width: 5.5px; height: 8px; } } @media screen and (max-width: 480px) { .pagination .page-numbers.prev img, .pagination .page-numbers.prev svg, .pagination .page-numbers.next img, .pagination .page-numbers.next svg { width: 5.5px; height: 8px; } } .pagination .page-numbers.prev:hover:not(.disabled), .pagination .page-numbers.next:hover:not(.disabled) { border-color: #00704a; background-color: #00704a; color: #fff !important; } .pagination .page-numbers.prev:hover:not(.disabled) img, .pagination .page-numbers.prev:hover:not(.disabled) svg, .pagination .page-numbers.next:hover:not(.disabled) img, .pagination .page-numbers.next:hover:not(.disabled) svg { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .pagination .page-numbers.prev.disabled, .pagination .page-numbers.next.disabled { border-color: #aaaaaa; color: #aaaaaa; cursor: not-allowed; } .pagination .page-numbers.prev.disabled svg, .pagination .page-numbers.next.disabled svg { color: #aaaaaa; } .pagination .page-numbers .paginate-prev { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .pagination .page-numbers.dots { border: none; pointer-events: none; color: #0e202a; min-width: auto; padding: 0 4px; } @media screen and (max-width: 768px) { .pagination .page-numbers.dots { padding: 0 2px; } } @media screen and (max-width: 480px) { .pagination .page-numbers.dots { padding: 0 2px; } } /* Forms --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /* =========================================== UNIVERSAL FORM STYLES Shared styles for all form types =========================================== */ .form-group { margin-bottom: 16px; } .form-group:last-child { margin-bottom: 0; } .form-group label { display: block; margin-bottom: 6px; font-weight: 400; font-size: 16px; color: #312020; font-family: "Be Vietnam Pro", sans-serif; } .form-group label .required { color: #e53e3e; margin-left: 2px; } .form-group input:not([type=hidden]):not([type=checkbox]):not([type=radio]), .form-group textarea, .form-group select { width: 100%; height: 44px; padding: 10px 12px; border: 1px solid #bbbbbb; border-radius: 8px; font-size: 16px; font-weight: 300; font-family: "Be Vietnam Pro", sans-serif; color: #312020; -webkit-transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease; transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease; transition: border-color 0.15s ease, box-shadow 0.15s ease; transition: border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease; background-color: #fff; outline: none; } .form-group input:not([type=hidden]):not([type=checkbox]):not([type=radio])::-webkit-input-placeholder, .form-group textarea::-webkit-input-placeholder, .form-group select::-webkit-input-placeholder { color: #bbbbbb; } .form-group input:not([type=hidden]):not([type=checkbox]):not([type=radio])::-moz-placeholder, .form-group textarea::-moz-placeholder, .form-group select::-moz-placeholder { color: #bbbbbb; } .form-group input:not([type=hidden]):not([type=checkbox]):not([type=radio]):-ms-input-placeholder, .form-group textarea:-ms-input-placeholder, .form-group select:-ms-input-placeholder { color: #bbbbbb; } .form-group input:not([type=hidden]):not([type=checkbox]):not([type=radio])::-ms-input-placeholder, .form-group textarea::-ms-input-placeholder, .form-group select::-ms-input-placeholder { color: #bbbbbb; } .form-group input:not([type=hidden]):not([type=checkbox]):not([type=radio])::placeholder, .form-group textarea::placeholder, .form-group select::placeholder { color: #bbbbbb; } .form-group input:not([type=hidden]):not([type=checkbox]):not([type=radio]):focus, .form-group input:not([type=hidden]):not([type=checkbox]):not([type=radio]):focus-visible, .form-group textarea:focus, .form-group textarea:focus-visible, .form-group select:focus, .form-group select:focus-visible { border-color: #00704a !important; outline: none; -webkit-box-shadow: none !important; box-shadow: none !important; } .form-group input:not([type=hidden]):not([type=checkbox]):not([type=radio]).error, .form-group input:not([type=hidden]):not([type=checkbox]):not([type=radio]).is-error, .form-group textarea.error, .form-group textarea.is-error, .form-group select.error, .form-group select.is-error { border-color: #e53e3e !important; } .form-group .date-input-wrapper.is-error input, .form-group .date-input-wrapper.is-error select, .form-group .select-wrapper.is-error input, .form-group .select-wrapper.is-error select { border-color: #e53e3e !important; } .form-group .select2-container.is-error .select2-selection { border-color: #e53e3e !important; } .form-group .time-slots-grid.is-error { border: 1px solid #e53e3e; border-radius: 8px; padding: 8px; } .form-group textarea { height: auto; min-height: 100px; resize: vertical; line-height: 1.5; } .form-group .onelab-form__error { display: block; margin-top: 4px; font-size: 14px; color: #e53e3e; font-family: "Be Vietnam Pro", sans-serif; opacity: 0; max-height: 0; overflow: hidden; -webkit-transition: opacity 0.2s ease, max-height 0.2s ease; transition: opacity 0.2s ease, max-height 0.2s ease; } .form-group .onelab-form__error.is-visible { opacity: 1; max-height: 50px; } .time-slots-container { margin-top: 16px; } .time-slots-container .time-slots-label { display: block; margin-bottom: 8px; font-weight: 400; font-size: 14px; color: #312020; font-family: "Be Vietnam Pro", sans-serif; } .time-slots-container .time-slots-label .required { color: #e53e3e; margin-left: 2px; } .time-slots-container .time-slots-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } @media (max-width: 1770px) { .time-slots-container .time-slots-grid { gap: 7px; grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1440px) { .time-slots-container .time-slots-grid { gap: 6px; grid-template-columns: repeat(3, minmax(80px, 1fr)); } } @media (max-width: 768px) { .time-slots-container .time-slots-grid { gap: 6px; grid-template-columns: repeat(2, minmax(75px, 1fr)); } } @media (max-width: 480px) { .time-slots-container .time-slots-grid { gap: 6px; grid-template-columns: repeat(2, minmax(70px, 1fr)); } } .time-slots-container .time-slot { padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 6px; text-align: center; font-size: 13px; font-family: "Be Vietnam Pro", sans-serif; color: #312020; background-color: #fff; cursor: pointer; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } @media (max-width: 1770px) { .time-slots-container .time-slot { padding: 7px 10px; font-size: 12px; } } @media (max-width: 1440px) { .time-slots-container .time-slot { padding: 6px 9px; font-size: 12px; border-radius: 5px; } } .time-slots-container .time-slot:hover:not(.time-slot-disabled) { border-color: #00704a; background-color: #00704a; color: #fff; } .time-slots-container .time-slot.time-slot-selected { border-color: #00704a; background-color: #00704a; color: #fff; font-weight: 500; } .time-slots-container .time-slot.time-slot-disabled { background-color: #f7fafc; color: #cbd5e0; cursor: not-allowed; opacity: 0.6; } .time-slots-container .time-slot.time-slot-available { background-color: #fff; } .time-slots-container .onelab-form__error { display: block; margin-top: 8px; font-size: 14px; color: #e53e3e; font-family: "Be Vietnam Pro", sans-serif; opacity: 0; max-height: 0; overflow: hidden; -webkit-transition: opacity 0.2s ease, max-height 0.2s ease; transition: opacity 0.2s ease, max-height 0.2s ease; } .time-slots-container .onelab-form__error.is-visible { opacity: 1; max-height: 50px; } .onelab-form__message { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 15px; font-family: "Be Vietnam Pro", sans-serif; display: none; } .onelab-form__message.success { display: block; background-color: #f0fdf4; color: #166534; border: 1px solid #86efac; } .onelab-form__message.error { display: block; background-color: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; } .onelab-form { position: relative; } .onelab-form .form-loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 200px; background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(2px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 1000; border-radius: 8px; pointer-events: all; opacity: 1; } .onelab-form .form-loading-spinner-large { width: 40px; height: 40px; border: 3px solid rgba(0, 112, 74, 0.15); border-top: 3px solid #00704a; border-right: 3px solid rgba(0, 112, 74, 0.7); border-bottom: 3px solid rgba(0, 112, 74, 0.3); border-radius: 50%; -webkit-animation: form-spin 0.8s linear infinite; animation: form-spin 0.8s linear infinite; -webkit-box-shadow: 0 0 10px rgba(0, 112, 74, 0.2); box-shadow: 0 0 10px rgba(0, 112, 74, 0.2); } .onelab-form__submit, .btn-book-appointment, .onelab-modal-btn { position: relative; } .onelab-form__submit.is-loading, .btn-book-appointment.is-loading, .onelab-modal-btn.is-loading { pointer-events: none; opacity: 0.8; } .onelab-form__submit.is-loading .form-loading-spinner, .btn-book-appointment.is-loading .form-loading-spinner, .onelab-modal-btn.is-loading .form-loading-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-top: 2px solid #fff; border-right: 2px solid rgba(255, 255, 255, 0.6); border-radius: 50%; -webkit-animation: form-spin 0.6s linear infinite; animation: form-spin 0.6s linear infinite; margin-right: 8px; vertical-align: middle; } .onelab-form__submit.is-loading .form-loading-text, .btn-book-appointment.is-loading .form-loading-text, .onelab-modal-btn.is-loading .form-loading-text { vertical-align: middle; } @keyframes form-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .onelab-form__section { margin-bottom: 32px; } @media screen and (max-width: 1770px) { .onelab-form__section { margin-bottom: 29px; } } @media screen and (max-width: 1440px) { .onelab-form__section { margin-bottom: 26px; } } @media screen and (max-width: 1200px) { .onelab-form__section { margin-bottom: 22px; } } @media screen and (max-width: 992px) { .onelab-form__section { margin-bottom: 19px; } } @media screen and (max-width: 768px) { .onelab-form__section { margin-bottom: 24px; } } @media screen and (max-width: 640px) { .onelab-form__section { margin-bottom: 19px; } } @media screen and (max-width: 480px) { .onelab-form__section { margin-bottom: 20px; } } .onelab-form__section:last-child { margin-bottom: 0; } .onelab-form__section-title { font-size: 20px; font-weight: 600; color: #312020; margin: 0 0 17px 0; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 1770px) { .onelab-form__section-title { font-size: 18px; margin-bottom: 15px; } } @media screen and (max-width: 1440px) { .onelab-form__section-title { font-size: 17px; margin-bottom: 14px; } } @media screen and (max-width: 1200px) { .onelab-form__section-title { font-size: 16px; margin-bottom: 13px; } } @media screen and (max-width: 992px) { .onelab-form__section-title { font-size: 15px; margin-bottom: 12px; } } @media screen and (max-width: 768px) { .onelab-form__section-title { font-size: 18px; margin-bottom: 14px; } } @media screen and (max-width: 640px) { .onelab-form__section-title { font-size: 16px; margin-bottom: 12px; } } @media screen and (max-width: 480px) { .onelab-form__section-title { font-size: 16px; margin-bottom: 12px; } } .onelab-form__group { margin-bottom: 16px; } @media screen and (max-width: 1770px) { .onelab-form__group { margin-bottom: 14px; } } @media screen and (max-width: 1440px) { .onelab-form__group { margin-bottom: 13px; } } @media screen and (max-width: 1200px) { .onelab-form__group { margin-bottom: 11px; } } @media screen and (max-width: 992px) { .onelab-form__group { margin-bottom: 10px; } } @media screen and (max-width: 768px) { .onelab-form__group { margin-bottom: 14px; } } @media screen and (max-width: 640px) { .onelab-form__group { margin-bottom: 12px; } } @media screen and (max-width: 480px) { .onelab-form__group { margin-bottom: 12px; } } .onelab-form__group:last-child { margin-bottom: 0; } .onelab-form__label { display: block; margin-bottom: 6px; font-weight: 400; font-size: 16px; color: #312020; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 1770px) { .onelab-form__label { font-size: 15px; margin-bottom: 5px; } } @media screen and (max-width: 1440px) { .onelab-form__label { font-size: 15px; margin-bottom: 5px; } } @media screen and (max-width: 1200px) { .onelab-form__label { font-size: 14px; margin-bottom: 5px; } } @media screen and (max-width: 992px) { .onelab-form__label { font-size: 14px; margin-bottom: 4px; } } @media screen and (max-width: 768px) { .onelab-form__label { font-size: 15px; margin-bottom: 5px; } } @media screen and (max-width: 640px) { .onelab-form__label { font-size: 14px; margin-bottom: 4px; } } @media screen and (max-width: 480px) { .onelab-form__label { font-size: 14px; margin-bottom: 4px; } } .onelab-form__label .required { color: #e53e3e; margin-left: 2px; } .onelab-form__input, .onelab-form__textarea, .onelab-form__select { width: 100%; height: 44px; padding: 10px 12px !important; border: 1px solid #bbbbbb !important; border-radius: 8px; font-size: 16px; font-weight: 300; font-family: "Be Vietnam Pro", sans-serif; color: #312020; -webkit-transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease; transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease; transition: border-color 0.15s ease, box-shadow 0.15s ease; transition: border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease; background-color: #fff; outline: none; } @media screen and (max-width: 1770px) { .onelab-form__input, .onelab-form__textarea, .onelab-form__select { height: 40px; padding: 9px 11px !important; font-size: 15px; border-radius: 7px; } } @media screen and (max-width: 1440px) { .onelab-form__input, .onelab-form__textarea, .onelab-form__select { height: 40px; padding: 9px 11px !important; font-size: 15px; border-radius: 7px; } } @media screen and (max-width: 1200px) { .onelab-form__input, .onelab-form__textarea, .onelab-form__select { height: 39px; padding: 8px 10px !important; font-size: 14px; border-radius: 6px; } } @media screen and (max-width: 992px) { .onelab-form__input, .onelab-form__textarea, .onelab-form__select { height: 38px; padding: 8px 10px !important; font-size: 14px; border-radius: 6px; } } @media screen and (max-width: 768px) { .onelab-form__input, .onelab-form__textarea, .onelab-form__select { height: 42px; padding: 9px 11px !important; font-size: 16px; border-radius: 6px; } } @media screen and (max-width: 640px) { .onelab-form__input, .onelab-form__textarea, .onelab-form__select { height: 40px; padding: 8px 10px !important; font-size: 14px; border-radius: 6px; } } @media screen and (max-width: 480px) { .onelab-form__input, .onelab-form__textarea, .onelab-form__select { height: 40px; padding: 8px 10px !important; font-size: 16px; border-radius: 6px; } } .onelab-form__input::-webkit-input-placeholder, .onelab-form__textarea::-webkit-input-placeholder, .onelab-form__select::-webkit-input-placeholder { color: #bbbbbb; } .onelab-form__input::-moz-placeholder, .onelab-form__textarea::-moz-placeholder, .onelab-form__select::-moz-placeholder { color: #bbbbbb; } .onelab-form__input:-ms-input-placeholder, .onelab-form__textarea:-ms-input-placeholder, .onelab-form__select:-ms-input-placeholder { color: #bbbbbb; } .onelab-form__input::-ms-input-placeholder, .onelab-form__textarea::-ms-input-placeholder, .onelab-form__select::-ms-input-placeholder { color: #bbbbbb; } .onelab-form__input::placeholder, .onelab-form__textarea::placeholder, .onelab-form__select::placeholder { color: #bbbbbb; } .onelab-form__input:focus, .onelab-form__input:focus-visible, .onelab-form__textarea:focus, .onelab-form__textarea:focus-visible, .onelab-form__select:focus, .onelab-form__select:focus-visible { border-color: #00704a !important; outline: none; -webkit-box-shadow: 0 0 0 3px rgba(0, 112, 74, 0.1); box-shadow: 0 0 0 3px rgba(0, 112, 74, 0.1); } .onelab-form__input:disabled, .onelab-form__textarea:disabled, .onelab-form__select:disabled { background-color: #f7fafc; cursor: not-allowed; opacity: 0.6; } .onelab-form__input.error, .onelab-form__textarea.error, .onelab-form__select.error { border-color: #e53e3e !important; -webkit-box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1); box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1); } .onelab-form__textarea { resize: vertical; min-height: 100px; height: auto; line-height: 1.5; } @media screen and (max-width: 1770px) { .onelab-form__textarea { min-height: 90px; } } @media screen and (max-width: 1440px) { .onelab-form__textarea { min-height: 85px; } } @media screen and (max-width: 1200px) { .onelab-form__textarea { min-height: 80px; } } @media screen and (max-width: 992px) { .onelab-form__textarea { min-height: 75px; } } @media screen and (max-width: 768px) { .onelab-form__textarea { min-height: 90px; } } @media screen and (max-width: 640px) { .onelab-form__textarea { min-height: 80px; } } @media screen and (max-width: 480px) { .onelab-form__textarea { min-height: 80px; } } .onelab-form__select-wrapper { position: relative; } .onelab-form__select-wrapper select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url('data:image/svg+xml;charset=UTF-8,'); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; padding-right: 36px !important; cursor: pointer; } .onelab-form__select-wrapper.select2-hidden-accessible select { background-image: none; } .onelab-form__error { display: block; margin-top: 4px; font-size: 14px; color: #e53e3e; font-family: "Be Vietnam Pro", sans-serif; opacity: 0; max-height: 0; overflow: hidden; -webkit-transition: opacity 0.2s ease, max-height 0.2s ease; transition: opacity 0.2s ease, max-height 0.2s ease; } @media screen and (max-width: 1770px) { .onelab-form__error { font-size: 13px; margin-top: 3px; } } @media screen and (max-width: 1440px) { .onelab-form__error { font-size: 13px; margin-top: 3px; } } @media screen and (max-width: 1200px) { .onelab-form__error { font-size: 12px; margin-top: 3px; } } @media screen and (max-width: 992px) { .onelab-form__error { font-size: 12px; margin-top: 3px; } } @media screen and (max-width: 768px) { .onelab-form__error { font-size: 13px; margin-top: 3px; } } @media screen and (max-width: 640px) { .onelab-form__error { font-size: 12px; margin-top: 3px; } } @media screen and (max-width: 480px) { .onelab-form__error { font-size: 13px; margin-top: 3px; } } .onelab-form__error.is-visible { opacity: 1; max-height: 50px; } .onelab-form__time-slots-grid { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 1770px) { .onelab-form__time-slots-grid { gap: 7px; grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)); } } @media screen and (max-width: 1440px) { .onelab-form__time-slots-grid { gap: 6px; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); } } @media screen and (max-width: 1200px) { .onelab-form__time-slots-grid { gap: 6px; grid-template-columns: repeat(auto-fit, minmax(75px, 1fr)); } } @media screen and (max-width: 992px) { .onelab-form__time-slots-grid { gap: 6px; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); } } @media screen and (max-width: 768px) { .onelab-form__time-slots-grid { gap: 6px; grid-template-columns: repeat(auto-fit, minmax(65px, 1fr)); } } @media screen and (max-width: 640px) { .onelab-form__time-slots-grid { gap: 6px; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); } } @media screen and (max-width: 480px) { .onelab-form__time-slots-grid { gap: 6px; grid-template-columns: repeat(auto-fit, minmax(55px, 1fr)); } } .onelab-form__submit { height: 44px; padding: 10px 24px; font-size: 16px; font-weight: 600; border-radius: 8px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media screen and (max-width: 1770px) { .onelab-form__submit { height: 40px; padding: 9px 22px; font-size: 15px; border-radius: 7px; } } @media screen and (max-width: 1440px) { .onelab-form__submit { height: 40px; padding: 9px 20px; font-size: 15px; border-radius: 7px; } } @media screen and (max-width: 1200px) { .onelab-form__submit { height: 39px; padding: 8px 18px; font-size: 14px; border-radius: 6px; } } @media screen and (max-width: 992px) { .onelab-form__submit { height: 38px; padding: 8px 16px; font-size: 14px; border-radius: 6px; } } @media screen and (max-width: 768px) { .onelab-form__submit { height: 42px; padding: 9px 20px; font-size: 15px; border-radius: 6px; } } @media screen and (max-width: 640px) { .onelab-form__submit { height: 40px; padding: 8px 16px; font-size: 14px; border-radius: 6px; } } @media screen and (max-width: 480px) { .onelab-form__submit { height: 40px; padding: 8px 16px; font-size: 14px; border-radius: 6px; } } .select2-container--default .select2-selection--single { border: 1px solid #bbbbbb !important; border-radius: 8px; height: 44px; } .select2-container--default .select2-selection--single:focus { border-color: #00704a !important; outline: none; -webkit-box-shadow: none !important; box-shadow: none !important; } .select2-container--default .select2-selection--single.error { border-color: #e53e3e !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .form-group select.error + .select2-container--default .select2-selection--single, .form-group .select-wrapper select.error + .select2-container--default .select2-selection--single, .onelab-form__group select.error + .select2-container--default .select2-selection--single, .onelab-form__group .select-wrapper select.error + .select2-container--default .select2-selection--single { border-color: #e53e3e !important; -webkit-box-shadow: none !important; box-shadow: none !important; } @keyframes spin { to { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } @media (max-width: 768px) { .form-group { margin-bottom: 14px; } .form-group label { font-size: 15px; margin-bottom: 5px; } .form-group input:not([type=hidden]):not([type=checkbox]):not([type=radio]), .form-group textarea, .form-group select { height: 42px; padding: 9px 11px; font-size: 16px; } .form-group textarea { min-height: 90px; } .onelab-form__section { margin-bottom: 24px; } .onelab-form__section-title { font-size: 18px; margin-bottom: 14px; } .onelab-form__group { margin-bottom: 14px; } .onelab-form__label { font-size: 15px; margin-bottom: 5px; } .onelab-form__input, .onelab-form__textarea, .onelab-form__select { height: 42px; padding: 9px 11px !important; font-size: 16px; } .onelab-form__textarea { min-height: 90px; } .onelab-form__time-slots-grid { grid-template-columns: repeat(2, 1fr); } .onelab-form__submit { height: 44px; font-size: 15px; } .time-slots-container { margin-top: 12px; } .time-slots-container .time-slots-label { font-size: 13px; margin-bottom: 6px; } .time-slots-container .time-slots-grid { gap: 6px; } .time-slots-container .time-slot { padding: 7px 10px; font-size: 12px; } .onelab-form__message { padding: 10px 14px; font-size: 14px; margin-bottom: 14px; } } @media (max-width: 480px) { .form-group { margin-bottom: 12px; } .form-group label { font-size: 14px; margin-bottom: 4px; } .form-group input:not([type=hidden]):not([type=checkbox]):not([type=radio]), .form-group textarea, .form-group select { height: 40px; padding: 8px 10px; font-size: 16px; border-radius: 6px; } .form-group textarea { min-height: 80px; } .form-group .onelab-form__error { font-size: 13px; margin-top: 3px; } .onelab-form__section { margin-bottom: 20px; } .onelab-form__section-title { font-size: 16px; margin-bottom: 12px; } .onelab-form__group { margin-bottom: 12px; } .onelab-form__label { font-size: 14px; margin-bottom: 4px; } .onelab-form__input, .onelab-form__textarea, .onelab-form__select { height: 40px; padding: 8px 10px !important; font-size: 16px; border-radius: 6px; } .onelab-form__textarea { min-height: 80px; } .onelab-form__error { font-size: 13px; margin-top: 3px; } .onelab-form__time-slots-grid { grid-template-columns: 1fr; gap: 6px; } .onelab-form__submit { height: 42px; font-size: 14px; padding: 10px 16px; } .time-slots-container { margin-top: 10px; } .time-slots-container .time-slots-label { font-size: 12px; margin-bottom: 5px; } .time-slots-container .time-slots-grid { gap: 6px; } .time-slots-container .time-slot { padding: 6px 8px; font-size: 11px; border-radius: 5px; } .onelab-form__message { padding: 8px 12px; font-size: 13px; margin-bottom: 12px; border-radius: 6px; } .select2-container--default .select2-selection--single { height: 40px !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px !important; padding: 0 32px 0 10px !important; font-size: 16px !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px !important; right: 10px !important; } } @media (max-width: 375px) { .form-group { margin-bottom: 10px; } .form-group label { font-size: 13px; } .form-group input:not([type=hidden]):not([type=checkbox]):not([type=radio]), .form-group textarea, .form-group select { height: 38px; padding: 7px 9px; font-size: 16px; } .onelab-form__section-title { font-size: 15px; margin-bottom: 10px; } .onelab-form__label { font-size: 13px; } .onelab-form__input, .onelab-form__textarea, .onelab-form__select { height: 38px; padding: 7px 9px !important; } .onelab-form__submit { height: 40px; font-size: 13px; padding: 9px 14px; } .time-slots-container .time-slot { padding: 5px 6px; font-size: 10px; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * Booking Form Styles - Minimal Modern Design * * @package One_Lab */ .onelab-booking-form { background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url("/wp-content/themes/one-lab/assets/images/booking-form-bgr.webp"); background-color: #e8f5f0; padding: 50px; border-radius: 8px; width: 100%; max-width: 100%; } @media screen and (max-width: 1770px) { .onelab-booking-form { padding: 45px; } } @media screen and (max-width: 1440px) { .onelab-booking-form { padding: 40px; } } @media screen and (max-width: 1200px) { .onelab-booking-form { padding: 35px; } } @media screen and (max-width: 992px) { .onelab-booking-form { padding: 30px; } } @media screen and (max-width: 768px) { .onelab-booking-form { padding: 28px; } } @media screen and (max-width: 640px) { .onelab-booking-form { padding: 24px; } } @media screen and (max-width: 480px) { .onelab-booking-form { padding: 20px 16px; } } .onelab-booking-form__title { position: relative; z-index: 1; font-size: 32px; font-weight: 700; color: #fff; margin: 0 0 24px 0; font-family: "Montserrat", sans-serif; line-height: 40px; } @media screen and (max-width: 1770px) { .onelab-booking-form__title { font-size: 29px; margin-bottom: 22px; line-height: 36px; } } @media screen and (max-width: 1440px) { .onelab-booking-form__title { font-size: 26px; margin-bottom: 20px; line-height: 32px; } } @media screen and (max-width: 1200px) { .onelab-booking-form__title { font-size: 23px; margin-bottom: 18px; line-height: 28px; } } @media screen and (max-width: 992px) { .onelab-booking-form__title { font-size: 20px; margin-bottom: 16px; line-height: 24px; } } @media screen and (max-width: 768px) { .onelab-booking-form__title { font-size: 18px; margin-bottom: 16px; line-height: 24px; } } @media screen and (max-width: 640px) { .onelab-booking-form__title { font-size: 16px; margin-bottom: 14px; line-height: 20px; } } @media screen and (max-width: 480px) { .onelab-booking-form__title { font-size: 18px; margin-bottom: 16px; line-height: 24px; } } .onelab-booking-form__fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } @media screen and (max-width: 1770px) { .onelab-booking-form__fields { grid-template-columns: repeat(4, 1fr); gap: 11px; } } @media screen and (max-width: 1440px) { .onelab-booking-form__fields { grid-template-columns: repeat(4, 1fr); gap: 10px; } } @media screen and (max-width: 1200px) { .onelab-booking-form__fields { grid-template-columns: repeat(3, 1fr); gap: 9px; } } @media screen and (max-width: 992px) { .onelab-booking-form__fields { grid-template-columns: repeat(2, 1fr); gap: 8px; } } @media screen and (max-width: 768px) { .onelab-booking-form__fields { grid-template-columns: repeat(2, 1fr); gap: 8px; } } @media screen and (max-width: 640px) { .onelab-booking-form__fields { grid-template-columns: 1fr; gap: 8px; } } @media screen and (max-width: 480px) { .onelab-booking-form__fields { grid-template-columns: 1fr; gap: 10px; } } .onelab-booking-form__field { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .onelab-booking-form input.onelab-booking-form__input { width: 100%; height: 48px; padding: 0 24px; border: 1px solid #bbbbbb; border-radius: 8px; background: #fff; font-size: 15px; font-family: inherit; color: #312020; outline: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media screen and (max-width: 1770px) { .onelab-booking-form input.onelab-booking-form__input { height: 43px; padding: 0 22px; font-size: 14px; border-radius: 7px; } } @media screen and (max-width: 1440px) { .onelab-booking-form input.onelab-booking-form__input { height: 42px; padding: 0 20px; font-size: 14px; border-radius: 7px; } } @media screen and (max-width: 1200px) { .onelab-booking-form input.onelab-booking-form__input { height: 40px; padding: 0 18px; font-size: 13px; border-radius: 6px; } } @media screen and (max-width: 992px) { .onelab-booking-form input.onelab-booking-form__input { height: 38px; padding: 0 16px; font-size: 13px; border-radius: 6px; } } @media screen and (max-width: 768px) { .onelab-booking-form input.onelab-booking-form__input { height: 40px; padding: 0 18px; font-size: 13px; border-radius: 6px; } } @media screen and (max-width: 640px) { .onelab-booking-form input.onelab-booking-form__input { height: 36px; padding: 0 14px; font-size: 12px; border-radius: 6px; } } @media screen and (max-width: 480px) { .onelab-booking-form input.onelab-booking-form__input { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 6px; } } .onelab-booking-form input.onelab-booking-form__input::-webkit-input-placeholder { color: #646464; } .onelab-booking-form input.onelab-booking-form__input::-moz-placeholder { color: #646464; } .onelab-booking-form input.onelab-booking-form__input:-ms-input-placeholder { color: #646464; } .onelab-booking-form input.onelab-booking-form__input::-ms-input-placeholder { color: #646464; } .onelab-booking-form input.onelab-booking-form__input::placeholder { color: #646464; } .onelab-booking-form input.onelab-booking-form__input:focus { border-color: #00704a; -webkit-box-shadow: 0 0 0 3px rgba(0, 112, 74, 0.1); box-shadow: 0 0 0 3px rgba(0, 112, 74, 0.1); } .onelab-booking-form input.onelab-booking-form__input.error { border-color: #e53e3e; -webkit-box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1); box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1); } .onelab-booking-form input.onelab-booking-form__input:disabled { background: #f5f5f5; color: #646464; cursor: not-allowed; opacity: 0.6; } .onelab-booking-form__error { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; display: none; margin-top: 4px; padding: 3px 12px 3px 12px; font-family: "Be Vietnam Pro", sans-serif; font-size: 13px; line-height: 1.4; border-radius: 3px; color: #e53e3e; background-color: #fbeaea; } @media screen and (max-width: 1770px) { .onelab-booking-form__error { font-size: 12px; padding: 3px 11px; } } @media screen and (max-width: 1440px) { .onelab-booking-form__error { font-size: 12px; padding: 3px 10px; } } @media screen and (max-width: 1200px) { .onelab-booking-form__error { font-size: 11px; padding: 2px 9px; } } @media screen and (max-width: 992px) { .onelab-booking-form__error { font-size: 11px; padding: 2px 8px; } } @media screen and (max-width: 768px) { .onelab-booking-form__error { font-size: 11px; padding: 2px 8px; } } @media screen and (max-width: 640px) { .onelab-booking-form__error { font-size: 11px; padding: 2px 8px; } } @media screen and (max-width: 480px) { .onelab-booking-form__error { font-size: 12px; padding: 3px 10px; } } .onelab-booking-form__error.is-visible { display: block; } .onelab-booking-form__submit { height: 48px; padding: 0 32px; background: #00704a; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; font-family: inherit; text-transform: uppercase; cursor: pointer; white-space: nowrap; line-height: 150%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 1770px) { .onelab-booking-form__submit { height: 43px; padding: 0 29px; font-size: 15px; border-radius: 7px; } } @media screen and (max-width: 1440px) { .onelab-booking-form__submit { height: 42px; padding: 0 26px; font-size: 14px; border-radius: 7px; } } @media screen and (max-width: 1200px) { .onelab-booking-form__submit { height: 40px; padding: 0 22px; font-size: 14px; border-radius: 6px; } } @media screen and (max-width: 992px) { .onelab-booking-form__submit { height: 38px; padding: 0 19px; font-size: 13px; border-radius: 6px; grid-column: 1/-1; } } @media screen and (max-width: 768px) { .onelab-booking-form__submit { height: 40px; padding: 0 22px; font-size: 13px; border-radius: 6px; grid-column: 1/-1; } } @media screen and (max-width: 640px) { .onelab-booking-form__submit { height: 36px; padding: 0 18px; font-size: 12px; border-radius: 6px; grid-column: 1; } } @media screen and (max-width: 480px) { .onelab-booking-form__submit { height: 40px; padding: 0 24px; font-size: 14px; border-radius: 6px; grid-column: 1/-1; } } .onelab-booking-form__submit:hover:not(:disabled):not(.is-loading) { -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.3); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.3); } .onelab-booking-form__submit:disabled:not(.is-loading) { opacity: 0.5; cursor: not-allowed; } .onelab-booking-form__submit.is-loading { cursor: not-allowed; } .onelab-booking-form__submit.is-loading::after { content: ""; position: relative; display: inline-block; margin-left: 8px; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; -webkit-animation: onelab-spinner-rotate 0.8s linear infinite; animation: onelab-spinner-rotate 0.8s linear infinite; vertical-align: middle; } .onelab-booking-form__message { margin-top: 4px; padding: 3px 8px 3px 8px; border-radius: 3px; color: #312020; background-color: #f5f5f5; font-family: "Be Vietnam Pro", sans-serif; font-size: 13px; line-height: 1.4; display: none; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @media screen and (max-width: 1770px) { .onelab-booking-form__message { font-size: 12px; } } @media screen and (max-width: 1200px) { .onelab-booking-form__message { font-size: 11px; } } @media screen and (max-width: 640px) { .onelab-booking-form__message { font-size: 11px; } } @media screen and (max-width: 480px) { .onelab-booking-form__message { font-size: 12px; } } .onelab-booking-form__message.success { display: block; color: #2e7d32; background-color: #e8f5f0; } @-webkit-keyframes onelab-spinner-rotate { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes onelab-spinner-rotate { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* // Responsive // ============================================ */ @media (max-width: 1770px) { .onelab-booking-form input.onelab-booking-form__input { padding: 0 12px; } } @media (max-width: 1440px) { .onelab-booking-form input.onelab-booking-form__input { padding: 0 12px; } } @media (max-width: 1366px) { .onelab-booking-form { padding: 36px 32px; } .onelab-booking-form__fields { grid-template-columns: repeat(3, 1fr); gap: 8px; row-gap: 12px; } .onelab-booking-form__title { font-size: 26px; margin-bottom: 18px; line-height: 34px; } .onelab-booking-form input.onelab-booking-form__input { height: 46px; font-size: 14px; padding: 0 20px; } .onelab-booking-form__submit { font-size: 15px; padding: 0 28px; } } @media (max-width: 1280px) { .onelab-booking-form { padding: 32px 28px; } .onelab-booking-form__title { font-size: 24px; margin-bottom: 16px; line-height: 32px; } .onelab-booking-form__fields { row-gap: 10px; } } @media (max-width: 1024px) { .onelab-booking-form { padding: 32px 40px; } .onelab-booking-form__fields { grid-template-columns: 1fr 1fr; gap: 12px; row-gap: 16px; } .onelab-booking-form__submit { grid-column: 1/-1; width: 100%; } .onelab-booking-form__title { font-size: 22px; margin-bottom: 14px; line-height: 30px; } .onelab-booking-form input.onelab-booking-form__input { height: 44px; font-size: 14px; padding: 0 16px; } .onelab-booking-form__submit { height: 44px; font-size: 14px; padding: 0 24px; } } @media (max-width: 768px) { .onelab-booking-form { padding: 24px 32px; } .onelab-booking-form__fields { grid-template-columns: 1fr; gap: 12px; row-gap: 16px; } .onelab-booking-form__title { font-size: 20px; margin-bottom: 12px; line-height: 26px; } .onelab-booking-form input.onelab-booking-form__input { height: 42px; font-size: 13px; padding: 0 14px; } .onelab-booking-form__submit { height: 42px; font-size: 13px; padding: 0 20px; } .onelab-booking-form__error { font-size: 11px; margin-top: 2px; padding: 2px 6px 2px 5px; } .onelab-booking-form__message { font-size: 11px; padding: 2px 5px; } } @media (max-width: 576px) { .onelab-booking-form { padding: 20px 16px; } .onelab-booking-form__fields { gap: 10px; row-gap: 12px; } .onelab-booking-form__title { font-size: 18px; margin-bottom: 10px; line-height: 24px; } .onelab-booking-form input.onelab-booking-form__input { height: 40px; font-size: 12px; padding: 0 12px; } .onelab-booking-form__submit { height: 40px; font-size: 12px; padding: 0 18px; } .onelab-booking-form__error { font-size: 10px; margin-top: 2px; padding: 1px 5px 1px 4px; } .onelab-booking-form__message { font-size: 10px; padding: 1px 5px; } } @media (max-width: 480px) { .onelab-booking-form { padding: 14px 10px; } .onelab-booking-form__fields { gap: 3px; row-gap: 6px; } .onelab-booking-form__title { font-size: 16px; margin-bottom: 8px; line-height: 22px; } .onelab-booking-form input.onelab-booking-form__input { height: 38px; font-size: 11px; padding: 0 10px; } .onelab-booking-form__submit { height: 38px; font-size: 11px; padding: 0 16px; } .onelab-booking-form__submit.is-loading::after { width: 11px; height: 11px; margin-left: 5px; border-width: 1.5px; } .onelab-booking-form__error { font-size: 9px; margin-top: 1px; padding: 1px 4px 1px 3px; } .onelab-booking-form__message { font-size: 9px; padding: 1px 4px; } } @media (max-width: 375px) { .onelab-booking-form { padding: 12px 8px; } .onelab-booking-form__fields { gap: 2px; row-gap: 5px; } .onelab-booking-form__title { font-size: 15px; margin-bottom: 6px; line-height: 20px; } .onelab-booking-form input.onelab-booking-form__input { height: 36px; font-size: 10px; padding: 0 8px; } .onelab-booking-form__submit { height: 36px; font-size: 10px; padding: 0 14px; } .onelab-booking-form__submit.is-loading::after { width: 10px; height: 10px; margin-left: 4px; border-width: 1.5px; } .onelab-booking-form__error { font-size: 8px; margin-top: 1px; padding: 1px 3px 1px 2px; } .onelab-booking-form__message { font-size: 8px; padding: 1px 3px; } } /* Post List --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * Post List Component * * @package One_Lab */ .post-list { padding-top: 54px; } @media screen and (max-width: 1440px) { .post-list { padding-top: 50px; } } @media screen and (max-width: 1280px) { .post-list { padding-top: 48px; } } @media screen and (max-width: 1024px) { .post-list { padding-top: 44px; } } @media screen and (max-width: 768px) { .post-list { padding-top: 40px; } } @media screen and (max-width: 576px) { .post-list { padding-top: 36px; } } @media screen and (max-width: 480px) { .post-list { padding-top: 32px; } } .post-list__title { font-size: 32px; font-family: "Montserrat", sans-serif; font-weight: 700; color: #312020; text-transform: uppercase; margin: 0 0 24px; line-height: 1.3; } @media screen and (max-width: 1440px) { .post-list__title { font-size: 30px; margin-bottom: 22px; } } @media screen and (max-width: 1280px) { .post-list__title { font-size: 28px; margin-bottom: 20px; } } @media screen and (max-width: 1024px) { .post-list__title { font-size: 24px; margin-bottom: 18px; } } @media screen and (max-width: 1200px) { .post-list__title { font-size: 26px; margin-bottom: 16px; } } @media screen and (max-width: 768px) { .post-list__title { font-size: 22px; margin-bottom: 14px; } } @media screen and (max-width: 576px) { .post-list__title { font-size: 20px; margin-bottom: 12px; } } @media screen and (max-width: 480px) { .post-list__title { font-size: 18px; margin-bottom: 10px; } } .post-list__items { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; position: relative; min-height: 200px; } @media screen and (max-width: 1440px) { .post-list__items { gap: 22px; } } @media screen and (max-width: 1280px) { .post-list__items { gap: 20px; } } @media screen and (max-width: 1024px) { .post-list__items { gap: 18px; } } @media screen and (max-width: 768px) { .post-list__items { gap: 16px; } } @media screen and (max-width: 576px) { .post-list__items { gap: 14px; } } @media screen and (max-width: 480px) { .post-list__items { gap: 12px; } } .post-card { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 32px; padding-bottom: 24px; border-bottom: 1px solid #e2e2e2; margin: 0 !important; } @media screen and (max-width: 1440px) { .post-card { gap: 30px; padding-bottom: 22px; } } @media screen and (max-width: 1280px) { .post-card { gap: 28px; padding-bottom: 20px; } } @media screen and (max-width: 1024px) { .post-card { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; padding-bottom: 18px; } } @media screen and (max-width: 768px) { .post-card { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; padding-bottom: 16px; } } @media screen and (max-width: 576px) { .post-card { gap: 16px; padding-bottom: 14px; } } @media screen and (max-width: 480px) { .post-card { gap: 12px; padding-bottom: 12px; } } .post-card__image { -ms-flex-negative: 0; flex-shrink: 0; width: 322px; height: 156px; aspect-ratio: 322/156; border-radius: 8px; overflow: hidden; } @media screen and (max-width: 1440px) { .post-card__image { width: 290px; height: 140.4968944099px; border-radius: 8px; } } @media screen and (max-width: 1280px) { .post-card__image { width: 260px; height: 125.9627329193px; border-radius: 8px; } } @media screen and (max-width: 1024px) { .post-card__image { width: 220px; height: 106.5838509317px; border-radius: 8px; } } @media screen and (max-width: 768px) { .post-card__image { width: 100%; height: auto; max-height: 240px; border-radius: 6px; } } @media screen and (max-width: 576px) { .post-card__image { max-height: 200px; border-radius: 6px; } } @media screen and (max-width: 480px) { .post-card__image { max-height: 160px; border-radius: 4px; } } .post-card__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } .post-card__image:hover img { -webkit-transform: scale(1.05); transform: scale(1.05); } .post-card__image--empty { position: relative; } .post-card__image--empty::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(135deg, rgba(1, 31, 25, 0.15), rgba(1, 31, 25, 0.05)); } .post-card__content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; } @media screen and (max-width: 768px) { .post-card__content { gap: 10px; } } @media screen and (max-width: 576px) { .post-card__content { gap: 8px; } } @media screen and (max-width: 480px) { .post-card__content { gap: 6px; } } .post-card__tags { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 5px; row-gap: 6px; } @media screen and (max-width: 1440px) { .post-card__tags { gap: 4px; row-gap: 5px; } } @media screen and (max-width: 1280px) { .post-card__tags { gap: 4px; row-gap: 5px; } } @media screen and (max-width: 768px) { .post-card__tags { gap: 3px; row-gap: 4px; } } @media screen and (max-width: 576px) { .post-card__tags { gap: 2px; row-gap: 3px; } } @media screen and (max-width: 480px) { .post-card__tags { gap: 2px; row-gap: 3px; } } .post-card__tag { display: inline-block; padding: 8px 12px; font-size: 12px; font-family: "Montserrat", sans-serif; font-weight: 400; color: #fff !important; border-radius: 55px; white-space: nowrap; text-transform: uppercase; text-decoration: none; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; line-height: 1.4; } @media screen and (max-width: 1440px) { .post-card__tag { padding: 7px 11px; font-size: 11px; } } @media screen and (max-width: 1280px) { .post-card__tag { padding: 7px 11px; font-size: 11px; } } @media screen and (max-width: 1024px) { .post-card__tag { padding: 6px 10px; font-size: 10px; } } @media screen and (max-width: 768px) { .post-card__tag { padding: 6px 10px; font-size: 10px; } } @media screen and (max-width: 576px) { .post-card__tag { padding: 5px 8px; font-size: 9px; } } @media screen and (max-width: 480px) { .post-card__tag { padding: 4px 7px; font-size: 8px; } } .post-card__tag:hover { opacity: 0.9; -webkit-transform: translateY(-2px); transform: translateY(-2px); } .post-card__tag--more { background-color: rgba(1, 31, 25, 0.1) !important; color: #312020 !important; border: 1px solid rgba(1, 31, 25, 0.2); font-weight: 500; } .post-card__tag--more:hover { background-color: rgba(1, 31, 25, 0.15) !important; border-color: rgba(1, 31, 25, 0.3); opacity: 1; } .post-card__title { font-size: 18px; margin: 0; font-family: "Montserrat", sans-serif; color: #312020; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; } @media screen and (max-width: 1440px) { .post-card__title { font-size: 17px; } } @media screen and (max-width: 1280px) { .post-card__title { font-size: 16px; } } @media screen and (max-width: 1024px) { .post-card__title { font-size: 15px; } } @media screen and (max-width: 768px) { .post-card__title { font-size: 15px; } } @media screen and (max-width: 576px) { .post-card__title { font-size: 14px; } } @media screen and (max-width: 480px) { .post-card__title { font-size: 13px; } } .post-card__title a { color: inherit; text-decoration: none; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post-card__title a:hover { color: #00704a; } .post-card__excerpt { margin: 0; font-size: 18px; color: #312020; width: 100%; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; } @media screen and (max-width: 1440px) { .post-card__excerpt { font-size: 17px; } } @media screen and (max-width: 1280px) { .post-card__excerpt { font-size: 16px; } } @media screen and (max-width: 1024px) { .post-card__excerpt { font-size: 15px; } } @media screen and (max-width: 768px) { .post-card__excerpt { font-size: 14px; } } @media screen and (max-width: 576px) { .post-card__excerpt { font-size: 13px; } } @media screen and (max-width: 480px) { .post-card__excerpt { font-size: 12px; } } .post-card__footer { margin-top: auto; font-size: 14px; color: #535353; line-height: 1.4; } @media screen and (max-width: 1440px) { .post-card__footer { font-size: 13px; } } @media screen and (max-width: 1280px) { .post-card__footer { font-size: 13px; } } @media screen and (max-width: 1024px) { .post-card__footer { font-size: 13px; } } @media screen and (max-width: 768px) { .post-card__footer { font-size: 12px; } } @media screen and (max-width: 576px) { .post-card__footer { font-size: 11px; } } @media screen and (max-width: 480px) { .post-card__footer { font-size: 10px; } } /* Loading Spinner --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * Loading Spinner Component * Reusable loading spinner with overlay option * * @package One_Lab */ .loading { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .loading[aria-hidden=false] { display: -webkit-box; display: -ms-flexbox; display: flex; opacity: 1; } .loading--overlay { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(2px); } .loading--small .loading__spinner { width: 24px; height: 24px; border-width: 2px; } .loading--medium .loading__spinner { width: 40px; height: 40px; border-width: 4px; } @media screen and (max-width: 768px) { .loading--medium .loading__spinner { width: 36px; height: 36px; border-width: 3px; } } @media screen and (max-width: 480px) { .loading--medium .loading__spinner { width: 32px; height: 32px; border-width: 3px; } } .loading--large .loading__spinner { width: 56px; height: 56px; border-width: 5px; } @media screen and (max-width: 768px) { .loading--large .loading__spinner { width: 48px; height: 48px; border-width: 4px; } } @media screen and (max-width: 480px) { .loading--large .loading__spinner { width: 40px; height: 40px; border-width: 3px; } } .loading__spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #00704a; border-radius: 50%; -webkit-animation: loading-spin 1s linear infinite; animation: loading-spin 1s linear infinite; } @-webkit-keyframes loading-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loading-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .is-loading { pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; } .is-loading .loading { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; opacity: 1; } .is-loading > *:not(.loading) { opacity: 0.5; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } /* Single Pages --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .lab-test-section.lab-test-related { margin: 48px 0; } .lab-test-section.lab-test-related .lab-test-section__title { color: #00704a; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 36px; line-height: 40px; margin-bottom: 24px; } .lab-test-related__slider { position: relative; } .lab-test-related__swiper { padding: 0px 0 40px !important; overflow: visible; } .lab-test-related__swiper .swiper-slide { height: auto; padding: 0; } .lab-test-card { padding: 24px; background: #fff; border: 1px solid #dcdee0; border-radius: 8px; -webkit-transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s; transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s; transition: box-shadow 0.3s, transform 0.3s; transition: box-shadow 0.3s, transform 0.3s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .lab-test-card:hover { -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); -webkit-transform: translateY(-2px); transform: translateY(-2px); } .lab-test-card__title { font-size: 18px; font-weight: 600; margin-bottom: 16px; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .lab-test-card__title a { color: #333; text-decoration: none; -webkit-transition: color 0.3s; transition: color 0.3s; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lab-test-card__title a:hover { color: #00a651; } .lab-test-card__price { margin-bottom: 1rem; } .lab-test-card__price-current { font-size: 20px; font-weight: 700; color: #00a651; } .lab-test-card__actions { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; margin-top: auto; } .lab-test-card__actions .btn { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: 0.875rem; padding: 0.5rem; } .lab-test-related__pagination { position: static; margin-top: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 9px; } @media screen and (max-width: 768px) { .lab-test-related__pagination { gap: 6px; } } @media screen and (max-width: 480px) { .lab-test-related__pagination { gap: 4px; } } .lab-test-related__pagination .swiper-pagination-bullet { background: #d9d9d9; width: 12px; height: 12px; opacity: 1; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } @media screen and (max-width: 768px) { .lab-test-related__pagination .swiper-pagination-bullet { width: 10px; height: 10px; } } @media screen and (max-width: 480px) { .lab-test-related__pagination .swiper-pagination-bullet { width: 8px; height: 8px; } } .lab-test-related__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #00704a; } .lab-test-related__button-prev, .lab-test-related__button-next { width: 40px; height: 40px; background: #fff; border: 1px solid #dcdee0; border-radius: 50%; top: -60px; color: #00a651; -webkit-transition: all 0.3s; transition: all 0.3s; } .lab-test-related__button-prev:hover, .lab-test-related__button-next:hover { background: #00a651; color: #fff; border-color: #00a651; } .lab-test-related__button-prev::after, .lab-test-related__button-next::after { font-size: 18px; font-weight: bold; } .lab-test-related__button-prev { left: auto; right: 55px; } .lab-test-related__button-next { right: 0; } /* Regulation Section --------------------------------------------- */ /** * Result Process Tabs Section * * Styles cho section quy trình trả kết quả với tabs */ .result-process-tabs-section { padding: 60px 0; background-color: white; } .result-process-tabs-section .section-title { margin-bottom: 32px; text-align: center; font-size: 36px; color: var(--color-primary, #006837); font-weight: 700; } @media (max-width: 1770px) { .result-process-tabs-section .section-title { font-size: 32px; } } @media (max-width: 1440px) { .result-process-tabs-section .section-title { font-size: 30px; } } @media (max-width: 1240px) { .result-process-tabs-section .section-title { font-size: 26px; } } @media (max-width: 992px) { .result-process-tabs-section .section-title { font-size: 23px; } } @media (max-width: 768px) { .result-process-tabs-section .section-title { font-size: 20px; } } @media (max-width: 640px) { .result-process-tabs-section .section-title { font-size: 18px; } } .result-process-tabs-section .section-subtitle { margin-bottom: 40px; color: #666; max-width: 600px; margin-left: auto; margin-right: auto; } .result-tabs__nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 0; max-width: 100%; margin-left: 0; margin-right: 0; -webkit-box-shadow: none; box-shadow: none; border-radius: 0; overflow: visible; } .result-tabs__nav__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; position: relative; } .result-tabs__nav__curve { width: 60px; height: 100%; position: relative; overflow: hidden; background-color: transparent; -ms-flex-negative: 0; flex-shrink: 0; } .result-tabs__nav__curve-inner { position: absolute; width: 120px; height: 100%; background-color: var(--color-primary, #3ca573); -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } .result-tabs__nav__curve--right .result-tabs__nav__curve-inner::after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 100%; background-color: white; z-index: 2; border-radius: 0 0 100% 0/0 0 100% 0; } .result-tabs__nav__curve--left .result-tabs__nav__curve-inner::before { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 100%; background-color: white; z-index: 2; border-radius: 0 0 0 100%/0 0 0 100%; } .result-tabs__btn { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 16px 50px; border: none; background-color: var(--color-primary, #3ca573); color: #fff; font-size: 20px; font-weight: 600; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; border-radius: 8px 8px 0 0; text-transform: none; min-width: 320px; text-align: center; overflow: visible; z-index: 1; } .result-tabs__btn:hover { background-color: var(--color-primary-dark, #005530); } .result-tabs__nav__item:hover .result-tabs__btn { background-color: var(--color-primary-dark, #005530); } .result-tabs__nav__item:hover .result-tabs__nav__curve-inner { background-color: var(--color-primary-dark, #005530); } .result-tabs__nav__item.is-active .result-tabs__btn { background-color: var(--color-primary, #006837); color: #fff; } .result-tabs__nav__item.is-active .result-tabs__nav__curve-inner { background-color: var(--color-primary, #006837); } .result-tabs__nav__item.is-active:hover .result-tabs__btn { background-color: var(--color-primary-dark, #005530); } .result-tabs__nav__item.is-active:hover .result-tabs__nav__curve-inner { background-color: var(--color-primary-dark, #005530); } .result-tabs__panels { position: relative; } .result-tabs__panel { display: none; -webkit-animation: fadeIn 0.3s ease; animation: fadeIn 0.3s ease; } .result-tabs__panel.is-active { display: block; } .result-tabs__content { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eff6f3)); background: linear-gradient(180deg, #ffffff 0%, #eff6f3 100%); border-radius: 0 0 16px 16px; padding: 40px 40px 0; -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); min-height: 40vh; overflow: hidden; } .result-tabs__content--left .result-tabs__image { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .result-tabs__content--left .result-tabs__process { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .result-tabs__content--right .result-tabs__image { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .result-tabs__content--right .result-tabs__process { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .result-tabs__image { text-align: center; position: relative; } .result-tabs__image img { max-width: 100%; height: auto; max-height: 400px; -o-object-fit: contain; object-fit: contain; } .result-tabs__image--stacked { position: relative; min-height: 400px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .result-tabs__image--stacked .result-tabs__image-secondary { position: absolute; left: 0; top: 0; max-width: 45%; max-height: 100%; z-index: 1; border-radius: 8px; -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } .result-tabs__image--stacked .result-tabs__image-primary { position: absolute; right: 2rem; top: 5rem; z-index: 2; max-height: 450px; margin-left: auto; } .result-tabs__process { padding: 20px; } .result-tabs__process-title { font-size: 24px; font-weight: 700; color: var(--color-primary, #006837); margin-bottom: 24px; line-height: 1.3; } .result-tabs__steps { list-style: none; padding: 0; margin: 0; position: relative; } .result-tabs__steps::before { content: ""; position: absolute; left: 16px; top: 24px; bottom: 24px; width: 0; border-left: 2px dashed var(--color-primary, #006837); opacity: 0.5; } .result-tabs__step { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 16px; margin-bottom: 20px; position: relative; } .result-tabs__step:last-child { margin-bottom: 0; } .result-tabs__step-number { -ms-flex-negative: 0; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background-color: var(--color-primary, #006837); color: #fff; font-size: 14px; font-weight: 700; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; z-index: 1; } .result-tabs__step-text { font-size: 16px; color: #333; line-height: 1.5; padding-top: 4px; } @-webkit-keyframes fadeIn { from { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @media (max-width: 991px) { .result-tabs__nav { gap: 10px; } .result-tabs__btn { padding: 14px 30px; font-size: 18px; min-width: 140px; } .result-tabs__content { grid-template-columns: 1fr; gap: 30px; padding: 30px; } .result-tabs__content--left .result-tabs__image, .result-tabs__content--right .result-tabs__image { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; overflow: hidden; } .result-tabs__content--left .result-tabs__process, .result-tabs__content--right .result-tabs__process { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .result-tabs__image img { max-height: 300px; } .result-tabs__image--stacked { min-height: 360px; } .result-tabs__image--stacked .result-tabs__image-secondary { left: 5%; } .result-tabs__image--stacked .result-tabs__image-primary { max-width: 100%; } } @media (max-width: 767px) { .result-process-tabs-section { padding: 40px 0; } .result-tabs__nav { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; max-width: 100%; gap: 0; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .result-tabs__nav__curve { width: 30px; } .result-tabs__nav__curve-inner { width: 60px; } .result-tabs__nav__curve--right .result-tabs__nav__curve-inner::after, .result-tabs__nav__curve--left .result-tabs__nav__curve-inner::before { width: 30px; border-radius: 0 0 100% 0/0 0 100% 0; } .result-tabs__nav__curve--left .result-tabs__nav__curve-inner::before { border-radius: 0 0 0 100%/0 0 0 100%; } .result-tabs__btn { padding: 12px 16px; font-size: 16px; min-width: 100px; text-align: center; border-radius: 8px 8px 0 0; } .result-tabs__content { padding: 20px; } .result-tabs__image--stacked { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .result-tabs__image--stacked .result-tabs__image-secondary { max-width: 60%; max-height: 300px; margin-bottom: -40px; } .result-tabs__image--stacked .result-tabs__image-primary { max-width: 100%; margin-left: 0; } .result-tabs__process-title { font-size: 20px; } .result-tabs__step-number { width: 28px; height: 28px; font-size: 12px; } .result-tabs__step-text { font-size: 14px; } .result-tabs__steps::before { left: 14px; } } @media (max-width: 480px) { .result-tabs__btn { padding: 10px 12px; font-size: 14px; min-width: 80px; } .result-tabs__nav__curve { width: 0 !important; overflow: hidden; } .result-tabs__nav__curve--right .result-tabs__nav__curve-inner::after, .result-tabs__nav__curve--left .result-tabs__nav__curve-inner::before { display: none !important; } .result-tabs__nav__curve--right .result-tabs__nav__curve-inner, .result-tabs__nav__curve--left .result-tabs__nav__curve-inner { display: none !important; } .result-tabs__content { gap: 0px; } } /* B2C Components --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .b2c-hero { position: relative; width: 100%; height: 600px; background-size: cover; background-position: center; background-repeat: no-repeat; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: visible; } @media screen and (max-width: 1770px) { .b2c-hero { height: 580px; } } @media screen and (max-width: 1440px) { .b2c-hero { height: 550px; } } @media screen and (max-width: 1200px) { .b2c-hero { height: 520px; } } @media screen and (max-width: 992px) { .b2c-hero { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 54vh; } } @media screen and (max-width: 768px) { .b2c-hero { height: 45vh; } } @media screen and (max-width: 640px) { .b2c-hero { height: 50vh; } } @media screen and (max-width: 480px) { .b2c-hero { height: 50vh; } } .b2c-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, #5e5e5e 100%); pointer-events: none; opacity: 0.5; } .b2c-hero .container { position: relative; z-index: 1; padding: 0; } @media screen and (max-width: 1770px) { .b2c-hero .container { padding: 0 18px; } } @media screen and (max-width: 1440px) { .b2c-hero .container { padding: 0 15px; } } @media screen and (max-width: 1200px) { .b2c-hero .container { padding: 0 12px; } } @media screen and (max-width: 992px) { .b2c-hero .container { padding: 0 10px; } } @media screen and (max-width: 768px) { .b2c-hero .container { padding: 0 10px; } } @media screen and (max-width: 640px) { .b2c-hero .container { padding: 0 8px; } } @media screen and (max-width: 480px) { .b2c-hero .container { padding: 0 12px; } } .b2c-hero .b2c-hero__content { max-width: 600px; color: #ffffff; } @media screen and (max-width: 1770px) { .b2c-hero .b2c-hero__content { max-width: 550px; } } @media screen and (max-width: 1440px) { .b2c-hero .b2c-hero__content { max-width: 500px; } } @media screen and (max-width: 1200px) { .b2c-hero .b2c-hero__content { max-width: 450px; } } @media screen and (max-width: 992px) { .b2c-hero .b2c-hero__content { max-width: 90%; } } @media screen and (max-width: 768px) { .b2c-hero .b2c-hero__content { max-width: 90%; } } @media screen and (max-width: 640px) { .b2c-hero .b2c-hero__content { max-width: 95%; } } @media screen and (max-width: 480px) { .b2c-hero .b2c-hero__content { max-width: 95%; } } .b2c-hero .b2c-hero__content h1 { font-size: 42px; font-weight: 700; line-height: 1.2; margin-bottom: 16px; color: #ffffff; font-family: "Montserrat", sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 6px rgba(0, 0, 0, 0.12); } @media screen and (max-width: 1770px) { .b2c-hero .b2c-hero__content h1 { font-size: 36px; margin-bottom: 14px; } } @media screen and (max-width: 1440px) { .b2c-hero .b2c-hero__content h1 { font-size: 32px; margin-bottom: 12px; } } @media screen and (max-width: 1200px) { .b2c-hero .b2c-hero__content h1 { font-size: 28px; margin-bottom: 11px; } } @media screen and (max-width: 992px) { .b2c-hero .b2c-hero__content h1 { font-size: 24px; margin-bottom: 10px; } } @media screen and (max-width: 768px) { .b2c-hero .b2c-hero__content h1 { font-size: 32px; margin-bottom: 12px; margin-top: 8px; } } @media screen and (max-width: 640px) { .b2c-hero .b2c-hero__content h1 { font-size: 24px; margin-bottom: 10px; margin-top: 6px; } } @media screen and (max-width: 480px) { .b2c-hero .b2c-hero__content h1 { font-size: 24px; margin-bottom: 8px; margin-top: 4px; } } .b2c-hero .b2c-hero__content .btn-view-more { display: block; width: 150px; height: 51px; color: #ffffff; text-align: center; } .b2c-hero .b2c-hero__cards { position: relative; z-index: 2; margin-top: 48px; } @media screen and (max-width: 1770px) { .b2c-hero .b2c-hero__cards { margin-top: 43px; } } @media screen and (max-width: 1440px) { .b2c-hero .b2c-hero__cards { margin-top: 38px; } } @media screen and (max-width: 1200px) { .b2c-hero .b2c-hero__cards { margin-top: 34px; } } @media screen and (max-width: 992px) { .b2c-hero .b2c-hero__cards { margin-top: 29px; } } @media screen and (max-width: 768px) { .b2c-hero .b2c-hero__cards { margin-top: 24px; } } @media screen and (max-width: 640px) { .b2c-hero .b2c-hero__cards { margin-top: 19px; } } @media screen and (max-width: 480px) { .b2c-hero .b2c-hero__cards { margin-top: 16px; } } .b2c-hero .b2c-hero__cards .b2c-hero__cards-grid { max-width: 1121px; display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; gap: 28px; background: #ffffff; padding: 32px 22px; border-radius: 8px; -webkit-box-shadow: 0 4px 39.3px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 4px 39.3px 0 rgba(0, 0, 0, 0.25); -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } @media screen and (max-width: 1770px) { .b2c-hero .b2c-hero__cards .b2c-hero__cards-grid { max-width: 1000px; gap: 25px; padding: 29px 20px; } } @media screen and (max-width: 1440px) { .b2c-hero .b2c-hero__cards .b2c-hero__cards-grid { max-width: 900px; gap: 22px; padding: 26px 18px; } } @media screen and (max-width: 1200px) { .b2c-hero .b2c-hero__cards .b2c-hero__cards-grid { max-width: 800px; gap: 20px; padding: 22px 15px; } } @media screen and (max-width: 992px) { .b2c-hero .b2c-hero__cards .b2c-hero__cards-grid { grid-template-columns: 1fr; gap: 0; padding: 8px 16px; max-width: 100%; } } @media screen and (max-width: 768px) { .b2c-hero .b2c-hero__cards .b2c-hero__cards-grid { padding: 12px 14px; } } @media screen and (max-width: 640px) { .b2c-hero .b2c-hero__cards .b2c-hero__cards-grid { padding: 10px 12px; gap: 12px; } } @media screen and (max-width: 480px) { .b2c-hero .b2c-hero__cards .b2c-hero__cards-grid { padding: 12px; gap: 16px; } } .b2c-hero .b2c-hero__cards .b2c-hero__card-separator { width: 1px; background-color: #aaaaaa; height: calc(100% - 6px); -ms-flex-item-align: stretch; align-self: stretch; } @media screen and (max-width: 768px) { .b2c-hero .b2c-hero__cards .b2c-hero__card-separator { display: none; } } .b2c-hero .b2c-hero__cards .b2c-hero__card { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; cursor: default; border-radius: 8px; position: relative; overflow: hidden; text-decoration: none; } @media screen and (min-width: 1200px) { .b2c-hero .b2c-hero__cards .b2c-hero__card:last-child { width: -webkit-min-content; width: -moz-min-content; width: min-content; } } .b2c-hero .b2c-hero__cards .b2c-hero__card[data-modal-trigger] { cursor: pointer; } @media screen and (max-width: 768px) { .b2c-hero .b2c-hero__cards .b2c-hero__card { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; height: auto; min-height: auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } } .b2c-hero .b2c-hero__cards .b2c-hero__card:hover { cursor: pointer; } .b2c-hero .b2c-hero__cards .b2c-hero__card:hover .b2c-hero__card-content h3 { color: #00723f; } .b2c-hero .b2c-hero__cards .b2c-hero__card:hover .b2c-hero__card-link img { -webkit-transform: rotate(-45deg) scale(1); transform: rotate(-45deg) scale(1); -webkit-filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(1352%) hue-rotate(127deg) brightness(97%) contrast(101%); filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(1352%) hue-rotate(127deg) brightness(97%) contrast(101%); } .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 16px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } @media screen and (max-width: 768px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } } @media screen and (max-width: 480px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-body { gap: 12px; } } .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-icon { -ms-flex-negative: 0; flex-shrink: 0; width: 42px; height: 42px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } @media screen and (max-width: 1770px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-icon { width: 38px; height: 38px; } } @media screen and (max-width: 1440px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-icon { width: 34px; height: 34px; } } @media screen and (max-width: 1200px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-icon { width: 30px; height: 30px; } } @media screen and (max-width: 992px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-icon { width: 26px; height: 26px; } } @media screen and (max-width: 768px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-icon { width: 38px; height: 38px; } } @media screen and (max-width: 640px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-icon { width: 36px; height: 36px; } } @media screen and (max-width: 480px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-icon { width: 36px; height: 36px; } } .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-icon img { width: 100%; height: 100%; -webkit-transition: -webkit-filter 0.3s ease-in-out; transition: -webkit-filter 0.3s ease-in-out; transition: filter 0.3s ease-in-out; transition: filter 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out; } .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-width: 0; } .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-content h3 { margin: 0 0 8px; font-size: 24px; font-weight: 700; color: #345444; white-space: nowrap; font-family: "Be Vietnam Pro", sans-serif; word-wrap: break-word; overflow-wrap: break-word; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; } @media screen and (max-width: 1770px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-content h3 { font-size: 19px; margin-bottom: 7px; } } @media screen and (max-width: 1440px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-content h3 { font-size: 18px; margin-bottom: 6px; } } @media screen and (max-width: 1200px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-content h3 { font-size: 16px; margin-bottom: 5px; } } @media screen and (max-width: 992px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-content h3 { font-size: 16px; margin-bottom: 4px; white-space: normal; } } @media screen and (max-width: 768px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-content h3 { font-size: 20px; margin-bottom: 4px; white-space: normal; } } @media screen and (max-width: 640px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-content h3 { font-size: 16px; margin-bottom: 3px; } } @media screen and (max-width: 480px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-content h3 { font-size: 18px; margin-bottom: 2px; } } .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-content p { font-size: 16px; line-height: 1.6; color: #312020; margin: 0; font-family: "Be Vietnam Pro", sans-serif; padding-right: 16px; word-wrap: break-word; overflow-wrap: break-word; } @media screen and (max-width: 1770px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-content p { font-size: 14px; padding-right: 14px; } } @media screen and (max-width: 1440px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-content p { font-size: 16px; padding-right: 12px; } } @media screen and (max-width: 1200px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-content p { font-size: 14px; padding-right: 10px; } } @media screen and (max-width: 992px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-content p { font-size: 14px; padding-right: 8px; } } @media screen and (max-width: 768px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-content p { font-size: 14px; padding-right: 0; } } @media screen and (max-width: 640px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-content p { font-size: 14px; line-height: 1.6; } } @media screen and (max-width: 480px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-content p { font-size: 13px; line-height: 1.6; } } .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 8px; border-top: 1px solid transparent; -webkit-transition: border-color 0.3s ease-in-out; transition: border-color 0.3s ease-in-out; } @media screen and (max-width: 768px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-link { margin-top: 0; padding-top: 0; border-top: none; -ms-flex-negative: 0; flex-shrink: 0; } } .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-link img { width: 24px; height: 24px; -webkit-transition: -webkit-transform 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out; } @media screen and (max-width: 1770px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-link img { width: 22px; height: 22px; } } @media screen and (max-width: 1440px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-link img { width: 19px; height: 19px; } } @media screen and (max-width: 1200px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-link img { width: 17px; height: 17px; } } @media screen and (max-width: 992px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-link img { width: 15px; height: 15px; } } @media screen and (max-width: 768px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-link img { width: 20px; height: 20px; } } @media screen and (max-width: 640px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-link img { width: 20px; height: 20px; } } @media screen and (max-width: 480px) { .b2c-hero .b2c-hero__cards .b2c-hero__card .b2c-hero__card-link img { width: 20px; height: 20px; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .olhs-packages { padding: 84px 0; overflow-x: hidden; } @media screen and (max-width: 1919px) { .olhs-packages { padding: 72px 0; } } @media screen and (max-width: 1440px) { .olhs-packages { padding: 64px 0; } } @media screen and (max-width: 1200px) { .olhs-packages { padding: 56px 0; } } @media screen and (max-width: 992px) { .olhs-packages { padding: 48px 0; } } @media screen and (max-width: 768px) { .olhs-packages { padding: 40px 0; } } @media screen and (max-width: 576px) { .olhs-packages { padding: 32px 0; } } @media screen and (max-width: 768px) { .olhs-packages .container { padding: 0 12px; } } @media screen and (max-width: 576px) { .olhs-packages .container { padding: 0 8px; } } @media screen and (max-width: 400px) { .olhs-packages .container { padding: 0 6px; } } @media screen and (max-width: 360px) { .olhs-packages .container { padding: 0 4px; } } .olhs-packages .olhs-section-title { margin: 0 0 48px; font-weight: 700; color: #00704a; font-family: "Montserrat", sans-serif; font-style: Bold; font-size: 36px; line-height: 150%; letter-spacing: 0%; vertical-align: middle; } @media screen and (max-width: 1919px) { .olhs-packages .olhs-section-title { margin-bottom: 44px; } } @media screen and (max-width: 1200px) { .olhs-packages .olhs-section-title { margin-bottom: 40px; } } @media screen and (max-width: 992px) { .olhs-packages .olhs-section-title { font-size: 32px; margin-bottom: 36px; } } @media screen and (max-width: 768px) { .olhs-packages .olhs-section-title { font-size: 28px; margin-bottom: 28px; } } @media screen and (max-width: 576px) { .olhs-packages .olhs-section-title { font-size: 24px; } } .olhs-packages .olhs-section-subtitle { margin: 0 0 32px; font-size: 16px; line-height: 150%; color: #312020; text-align: center; } .olhs-packages .olhs-section-subtitle p { margin: 0; } @media screen and (max-width: 1919px) { .olhs-packages .olhs-section-subtitle { margin-bottom: 28px; } } @media screen and (max-width: 1200px) { .olhs-packages .olhs-section-subtitle { margin-bottom: 26px; } } @media screen and (max-width: 768px) { .olhs-packages .olhs-section-subtitle { margin-bottom: 24px; } } .olhs-packages__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 24px; width: 100%; max-width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } @media screen and (max-width: 1920px) { .olhs-packages__grid { gap: 22px; } } @media screen and (max-width: 1600px) { .olhs-packages__grid { gap: 20px; } } @media screen and (max-width: 1400px) { .olhs-packages__grid { gap: 18px; } } @media screen and (max-width: 1280px) { .olhs-packages__grid { gap: 16px; } } @media screen and (max-width: 1200px) { .olhs-packages__grid { gap: 14px; } } @media screen and (max-width: 992px) { .olhs-packages__grid { gap: 12px; } } @media screen and (max-width: 768px) { .olhs-packages__grid { gap: 10px; grid-template-columns: repeat(4, 1fr); } } @media screen and (max-width: 576px) { .olhs-packages__grid { gap: 8px; } } @media screen and (max-width: 480px) { .olhs-packages__grid { gap: 6px; } } @media screen and (max-width: 400px) { .olhs-packages__grid { gap: 5px; } } @media screen and (max-width: 360px) { .olhs-packages__grid { gap: 5px; } } @media screen and (max-width: 320px) { .olhs-packages__grid { gap: 5px; } } .olhs-packages .olhs-package-card { aspect-ratio: 1/1; border: 1px solid #d2d2d2; border-radius: 12px; -webkit-box-shadow: 0px 4px 24.2px 0px rgba(226, 226, 226, 0.2); box-shadow: 0px 4px 24.2px 0px rgba(226, 226, 226, 0.2); padding: 12px 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8px; text-align: center; color: #312020; width: 100%; height: 100%; min-width: 0; max-width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border-color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; transition: border-color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; } .olhs-packages .olhs-package-card:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); color: #00704a; -webkit-box-shadow: 0 20px 36px rgba(0, 0, 0, 0.12); box-shadow: 0 20px 36px rgba(0, 0, 0, 0.12); border-color: rgba(0, 112, 74, 0.5); } @media screen and (max-width: 1600px) { .olhs-packages .olhs-package-card { padding: 10px 6px; } } @media screen and (max-width: 1280px) { .olhs-packages .olhs-package-card { padding: 8px 4px; } } @media screen and (max-width: 992px) { .olhs-packages .olhs-package-card { padding: 6px 3px; border-radius: 10px; } } @media screen and (max-width: 768px) { .olhs-packages .olhs-package-card { padding: 4px 3px; border-radius: 8px; } } @media screen and (max-width: 576px) { .olhs-packages .olhs-package-card { padding: 4px 2px; border-radius: 6px; gap: 4px; } } @media screen and (max-width: 480px) { .olhs-packages .olhs-package-card { padding: 3px 2px; border-radius: 5px; } } @media screen and (max-width: 400px) { .olhs-packages .olhs-package-card { border-radius: 4px; } } @media screen and (max-width: 360px) { .olhs-packages .olhs-package-card { border-radius: 4px; } } @media screen and (max-width: 320px) { .olhs-packages .olhs-package-card { border-radius: 3px; } } .olhs-packages__icon { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-negative: 0; flex-shrink: 0; } .olhs-packages__icon img { width: 90px; height: 90px; -o-object-fit: contain; object-fit: contain; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } @media screen and (max-width: 1600px) { .olhs-packages__icon img { width: 80px; height: 80px; } } @media screen and (max-width: 1280px) { .olhs-packages__icon img { width: 54px; height: 54px; } } @media screen and (max-width: 992px) { .olhs-packages__icon img { width: 54px; height: 54px; } } @media screen and (max-width: 768px) { .olhs-packages__icon img { width: 50px; height: 50px; } } .olhs-packages__label { margin: 0; font-size: 14px; line-height: 130%; font-weight: 600; word-break: break-word; overflow-wrap: break-word; -ms-hyphens: auto; hyphens: auto; } @media screen and (max-width: 1600px) { .olhs-packages__label { font-size: 13px; } } @media screen and (max-width: 1400px) { .olhs-packages__label { font-size: 12px; } } @media screen and (max-width: 1280px) { .olhs-packages__label { font-size: 11px; } } @media screen and (max-width: 1200px) { .olhs-packages__label { font-size: 10px; } } @media screen and (max-width: 768px) { .olhs-packages__label { font-size: 10px; } } @media screen and (max-width: 576px) { .olhs-packages__label { font-size: 10px; } } @media screen and (max-width: 480px) { .olhs-packages__label { font-size: 10px; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * B2C Personalized Healthcare Section Styles * Display all groups (Female, Male, Children) without tabs */ .b2c-personalized { padding: 64px 0; } @media screen and (max-width: 1770px) { .b2c-personalized { padding: 56px 0; } } @media screen and (max-width: 1440px) { .b2c-personalized { padding: 48px 0; } } @media screen and (max-width: 1200px) { .b2c-personalized { padding: 42px 0; } } @media screen and (max-width: 992px) { .b2c-personalized { padding: 36px 0; } } @media screen and (max-width: 768px) { .b2c-personalized { padding: 32px 0; } } @media screen and (max-width: 576px) { .b2c-personalized { padding: 28px 0; } } .b2c-personalized .section-header { margin-bottom: 48px; } @media screen and (max-width: 1200px) { .b2c-personalized .section-header { margin-bottom: 40px; } } @media screen and (max-width: 768px) { .b2c-personalized .section-header { margin-bottom: 32px; } } .b2c-personalized .section-title { font-size: 36px; font-weight: 700; color: #00704a; margin: 0; font-family: "Montserrat", sans-serif; } @media screen and (max-width: 1770px) { .b2c-personalized .section-title { font-size: 36px; } } @media screen and (max-width: 1440px) { .b2c-personalized .section-title { font-size: 32px; } } @media screen and (max-width: 1200px) { .b2c-personalized .section-title { font-size: 32px; } } @media screen and (max-width: 992px) { .b2c-personalized .section-title { font-size: 28px; } } @media screen and (max-width: 768px) { .b2c-personalized .section-title { font-size: 24px; } } @media screen and (max-width: 576px) { .b2c-personalized .section-title { font-size: 20px; } } .b2c-personalized__groups { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 40px; } @media screen and (max-width: 992px) { .b2c-personalized__groups { gap: 32px; } } @media screen and (max-width: 768px) { .b2c-personalized__groups { gap: 24px; } } .b2c-personalized__group { background: #f3fcf9; border-radius: 16px; padding: 32px; } @media screen and (max-width: 1200px) { .b2c-personalized__group { padding: 28px; } } @media screen and (max-width: 992px) { .b2c-personalized__group { padding: 24px; } } @media screen and (max-width: 768px) { .b2c-personalized__group { padding: 20px; } } @media screen and (max-width: 576px) { .b2c-personalized__group { padding: 16px; border-radius: 12px; } } .b2c-personalized__group.is-active { display: block; } .b2c-personalized__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media screen and (max-width: 1200px) { .b2c-personalized__cards { gap: 20px; } } @media screen and (max-width: 992px) { .b2c-personalized__cards { gap: 16px; } } @media screen and (max-width: 768px) { .b2c-personalized__cards { grid-template-columns: repeat(2, 1fr); gap: 14px; } } @media screen and (max-width: 576px) { .b2c-personalized__cards { gap: 12px; } } @media screen and (max-width: 400px) { .b2c-personalized__cards { grid-template-columns: 1fr; } } .b2c-personalized__card { display: block; text-decoration: none; border-radius: 16px; overflow: hidden; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; background: #ffffff; } @media screen and (max-width: 1200px) { .b2c-personalized__card { border-radius: 14px; } } @media screen and (max-width: 992px) { .b2c-personalized__card { border-radius: 12px; } } @media screen and (max-width: 768px) { .b2c-personalized__card { border-radius: 10px; } } .b2c-personalized__card:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-box-shadow: 0 8px 24px rgba(0, 112, 74, 0.15); box-shadow: 0 8px 24px rgba(0, 112, 74, 0.15); } .b2c-personalized__card-image { position: relative; overflow: hidden; } .b2c-personalized__card-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center top; object-position: center top; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .b2c-personalized__card:hover .b2c-personalized__card-image img { -webkit-transform: scale(1.05); transform: scale(1.05); } .b2c-personalized__group { background: #f3fcf9; border-radius: 16px; padding: 32px; } @media screen and (max-width: 1200px) { .b2c-personalized__group { padding: 28px; } } @media screen and (max-width: 992px) { .b2c-personalized__group { padding: 24px; } } @media screen and (max-width: 768px) { .b2c-personalized__group { padding: 20px; } } @media screen and (max-width: 576px) { .b2c-personalized__group { padding: 16px; border-radius: 12px; } } .b2c-personalized__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media screen and (max-width: 1440px) { .b2c-personalized__cards { gap: 20px; } } @media screen and (max-width: 1200px) { .b2c-personalized__cards { grid-template-columns: repeat(3, 1fr); gap: 16px; } } @media screen and (max-width: 992px) { .b2c-personalized__cards { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 576px) { .b2c-personalized__cards { grid-template-columns: 1fr; gap: 12px; } } .b2c-personalized__card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #ffffff; border-radius: 12px; overflow: hidden; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; text-decoration: none; -webkit-box-shadow: none; box-shadow: none; } @media screen and (max-width: 576px) { .b2c-personalized__card { border-radius: 10px; } } .b2c-personalized__card:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .b2c-personalized__card:hover .b2c-personalized__card-link { color: #00723f; } .b2c-personalized__card-image { width: 100%; height: 270px; overflow: hidden; position: relative; border-bottom: 3px solid #00704a; } @media screen and (max-width: 1200px) { .b2c-personalized__card-image { height: 240px; } } @media screen and (max-width: 992px) { .b2c-personalized__card-image { height: 240px; } } @media screen and (max-width: 768px) { .b2c-personalized__card-image { height: 240px; } } @media screen and (max-width: 576px) { .b2c-personalized__card-image { height: 300px; } } .b2c-personalized__card-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center top; object-position: center top; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .b2c-personalized__card:hover .b2c-personalized__card-image img { -webkit-transform: scale(1.05); transform: scale(1.05); } .b2c-personalized__card-content { padding: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } @media screen and (max-width: 1200px) { .b2c-personalized__card-content { padding: 16px; gap: 10px; } } @media screen and (max-width: 768px) { .b2c-personalized__card-content { padding: 14px; gap: 8px; } } .b2c-personalized__card-label { font-size: 20px; font-weight: 800; color: #00704a; font-family: "Montserrat", sans-serif; margin: 0; } @media screen and (max-width: 1200px) { .b2c-personalized__card-label { font-size: 18px; } } @media screen and (max-width: 992px) { .b2c-personalized__card-label { font-size: 16px; } } @media screen and (max-width: 768px) { .b2c-personalized__card-label { font-size: 16px; } } .b2c-personalized__card-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: end; gap: 0px; font-size: 14px; font-weight: 500; color: #00704a; font-family: "Be Vietnam Pro", sans-serif; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } .b2c-personalized__card-link span { margin-right: 1rem; } @media screen and (max-width: 992px) { .b2c-personalized__card-link { font-size: 14px; gap: 6px; } } @media screen and (max-width: 768px) { .b2c-personalized__card-link { font-size: 14px; } } .b2c-personalized__card-icon { width: auto; height: auto; -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (max-width: 768px) { .b2c-personalized__card-icon { width: 30%; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * B2C Promotions Section Styles * Copy từ featured-products/_featured-products-section.scss */ .b2c-promotions { padding: 84px 0 0px; } @media (max-width: 1200px) { .b2c-promotions { padding: 60px 0 0px; } } @media (max-width: 768px) { .b2c-promotions { padding: 40px 0 0px; } } @media (max-width: 576px) { .b2c-promotions { padding: 32px 0 0px; } } .b2c-promotions__grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; gap: 20px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } @media (max-width: 1920px) { .b2c-promotions__grid { gap: 20px; } } @media (max-width: 1440px) { .b2c-promotions__grid { gap: 18px; } } @media (max-width: 1200px) { .b2c-promotions__grid { gap: 16px; } } @media (max-width: 992px) { .b2c-promotions__grid { gap: 14px; } } @media (max-width: 768px) { .b2c-promotions__grid { gap: 10px; } } @media (max-width: 640px) { .b2c-promotions__grid { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } } .b2c-promotions__card { position: relative; height: 138px; border-radius: 12px; overflow: hidden; background: #00704a; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; -webkit-box-flex: 1; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; max-width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } @media (max-width: 640px) { .b2c-promotions__card { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; min-width: 100%; max-width: 100%; } } @media (max-width: 480px) { .b2c-promotions__card { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; min-width: 100%; max-width: 100%; } } @media (max-width: 1770px) { .b2c-promotions__card { height: auto; } } @media (max-width: 1440px) { .b2c-promotions__card { border-radius: 10px; } } @media (max-width: 1200px) { .b2c-promotions__card { border-radius: 8px; } } @media (max-width: 992px) { .b2c-promotions__card { border-radius: 8px; } } @media (max-width: 768px) { .b2c-promotions__card { border-radius: 6px; } } @media (max-width: 640px) { .b2c-promotions__card { border-radius: 6px; } } @media (max-width: 480px) { .b2c-promotions__card { border-radius: 8px; } } .b2c-promotions__card:hover { -webkit-transform: translateY(-3px) scale(1.02); transform: translateY(-3px) scale(1.02); -webkit-box-shadow: 0 8px 24px rgba(0, 112, 74, 0.25); box-shadow: 0 8px 24px rgba(0, 112, 74, 0.25); } @media (max-width: 768px) { .b2c-promotions__card:hover { -webkit-transform: translateY(-2px) scale(1.01); transform: translateY(-2px) scale(1.01); -webkit-box-shadow: 0 4px 16px rgba(0, 112, 74, 0.2); box-shadow: 0 4px 16px rgba(0, 112, 74, 0.2); } } .b2c-promotions__card:active { -webkit-transform: translateY(-3px) scale(1.01); transform: translateY(-3px) scale(1.01); -webkit-box-shadow: 0 4px 16px rgba(0, 112, 74, 0.2); box-shadow: 0 4px 16px rgba(0, 112, 74, 0.2); } @media (max-width: 768px) { .b2c-promotions__card:active { -webkit-transform: translateY(-1px) scale(1); transform: translateY(-1px) scale(1); } } .b2c-promotions__card-link { text-decoration: none; color: inherit; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; position: relative; z-index: 1; padding: 20px; min-width: 0; max-width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 1770px) { .b2c-promotions__card-link { padding: 18px; gap: 10px; } } @media (max-width: 1440px) { .b2c-promotions__card-link { padding: 16px; gap: 8px; } } @media (max-width: 1200px) { .b2c-promotions__card-link { padding: 14px; gap: 6px; } } @media (max-width: 992px) { .b2c-promotions__card-link { padding: 12px; gap: 5px; } } @media (max-width: 768px) { .b2c-promotions__card-link { padding: 10px; gap: 4px; } } @media (max-width: 640px) { .b2c-promotions__card-link { padding: 8px; gap: 4px; } } @media (max-width: 480px) { .b2c-promotions__card-link { padding: 10px; gap: 6px; } } .b2c-promotions__badge { height: 32px; min-width: 97px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 0 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #fff; color: #00704a; border-radius: 8px; font-size: 14px; font-weight: 700; font-family: "Be Vietnam Pro", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .b2c-promotions__badge:hover { background: #00704a; color: #fff; -webkit-transform: translateY(-2px) scale(1.01); transform: translateY(-2px) scale(1.01); -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.25); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.25); } @media (max-width: 1770px) { .b2c-promotions__badge { height: 28px; min-width: 85px; padding: 0 10px; font-size: 12px; border-radius: 6px; } } @media (max-width: 1440px) { .b2c-promotions__badge { height: 26px; min-width: 80px; padding: 0 9px; font-size: 11px; border-radius: 6px; } } @media (max-width: 1200px) { .b2c-promotions__badge { height: 24px; min-width: 75px; padding: 0 8px; font-size: 10px; } } @media (max-width: 992px) { .b2c-promotions__badge { height: 22px; min-width: 70px; padding: 0 7px; font-size: 9px; } } @media (max-width: 768px) { .b2c-promotions__badge { height: 20px; min-width: 65px; padding: 0 6px; font-size: 8px; border-radius: 4px; } } @media (max-width: 640px) { .b2c-promotions__badge { height: 22px; min-width: 70px; padding: 0 7px; font-size: 9px; border-radius: 4px; } } @media (max-width: 480px) { .b2c-promotions__badge { height: 22px; min-width: 70px; padding: 0 7px; font-size: 9px; } } .b2c-promotions__card-title { font-size: 28px; font-weight: 600; font-family: "Montserrat", sans-serif; color: #fff; margin: 0; line-height: 150%; height: 42px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; word-break: break-word; } @media (max-width: 1770px) { .b2c-promotions__card-title { font-size: 22px; height: auto; } } @media (max-width: 1440px) { .b2c-promotions__card-title { font-size: 18px; } } @media (max-width: 1200px) { .b2c-promotions__card-title { font-size: 16px; } } @media (max-width: 992px) { .b2c-promotions__card-title { font-size: 14px; } } @media (max-width: 768px) { .b2c-promotions__card-title { font-size: 13px; } } @media (max-width: 640px) { .b2c-promotions__card-title { font-size: 16px; } } @media (max-width: 480px) { .b2c-promotions__card-title { font-size: 16px; } } .b2c-promotions__card-price { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 9px; height: 32px; min-width: 0; max-width: 100%; -ms-flex-negative: 0; flex-shrink: 0; } @media (max-width: 1770px) { .b2c-promotions__card-price { height: 28px; gap: 8px; } } @media (max-width: 1440px) { .b2c-promotions__card-price { height: 26px; gap: 7px; } } @media (max-width: 1200px) { .b2c-promotions__card-price { height: 24px; gap: 6px; } } @media (max-width: 992px) { .b2c-promotions__card-price { height: 22px; gap: 5px; } } @media (max-width: 768px) { .b2c-promotions__card-price { height: 20px; gap: 5px; } } @media (max-width: 640px) { .b2c-promotions__card-price { height: 22px; gap: 6px; } } @media (max-width: 480px) { .b2c-promotions__card-price { height: 22px; gap: 6px; } } .b2c-promotions__price { font-size: 28px; font-weight: 400; font-family: "Be Vietnam Pro", sans-serif; color: #fff; margin: 0; line-height: 150%; white-space: nowrap; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1770px) { .b2c-promotions__price { font-size: 20px; } } @media (max-width: 1440px) { .b2c-promotions__price { font-size: 16px; } } @media (max-width: 1200px) { .b2c-promotions__price { font-size: 15px; } } @media (max-width: 992px) { .b2c-promotions__price { font-size: 13px; } } @media (max-width: 768px) { .b2c-promotions__price { font-size: 12px; } } @media (max-width: 640px) { .b2c-promotions__price { font-size: 14px; } } @media (max-width: 480px) { .b2c-promotions__price { font-size: 14px; } } .b2c-promotions__price--sale { font-size: 28px; font-weight: 400; font-family: "Be Vietnam Pro", sans-serif; color: #fff; margin: 0; line-height: 150%; white-space: nowrap; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1770px) { .b2c-promotions__price--sale { font-size: 20px; } } @media (max-width: 1440px) { .b2c-promotions__price--sale { font-size: 16px; } } @media (max-width: 1200px) { .b2c-promotions__price--sale { font-size: 15px; } } @media (max-width: 992px) { .b2c-promotions__price--sale { font-size: 13px; } } @media (max-width: 768px) { .b2c-promotions__price--sale { font-size: 12px; } } @media (max-width: 640px) { .b2c-promotions__price--sale { font-size: 14px; } } @media (max-width: 480px) { .b2c-promotions__price--sale { font-size: 14px; } } .b2c-promotions__price--regular { font-size: 20px; color: #dadada; text-decoration: line-through; font-weight: 400; font-family: "Be Vietnam Pro", sans-serif; line-height: 20px; margin: 0; white-space: nowrap; } @media (max-width: 1770px) { .b2c-promotions__price--regular { font-size: 16px; line-height: 16px; } } @media (max-width: 1440px) { .b2c-promotions__price--regular { font-size: 14px; line-height: 14px; display: none; } } @media (max-width: 1200px) { .b2c-promotions__price--regular { font-size: 13px; line-height: 13px; } } @media (max-width: 992px) { .b2c-promotions__price--regular { font-size: 12px; line-height: 12px; } } @media (max-width: 768px) { .b2c-promotions__price--regular { font-size: 11px; line-height: 11px; } } @media (max-width: 640px) { .b2c-promotions__price--regular { font-size: 12px; line-height: 12px; display: inline-block; } } @media (max-width: 480px) { .b2c-promotions__price--regular { font-size: 12px; line-height: 12px; display: inline-block; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * B2C Featured Lab Tests Section * Swiper carousel for popular lab test packages */ .b2c-featured-tests { padding: 64px 0; background: #ffffff; } .b2c-featured-tests .container { position: relative; } .b2c-featured-tests .swiper { padding: 2rem 0; } @media screen and (max-width: 1770px) { .b2c-featured-tests { padding: 56px 0; } } @media screen and (max-width: 1440px) { .b2c-featured-tests { padding: 48px 0; } } @media screen and (max-width: 1200px) { .b2c-featured-tests { padding: 42px 0; } } @media screen and (max-width: 992px) { .b2c-featured-tests { padding: 36px 0; } } @media screen and (max-width: 768px) { .b2c-featured-tests { padding: 32px 0; } } @media screen and (max-width: 576px) { .b2c-featured-tests { padding: 28px 0; } } .b2c-featured-tests .section-header { margin-bottom: 48px; } @media screen and (max-width: 1200px) { .b2c-featured-tests .section-header { margin-bottom: 40px; } } @media screen and (max-width: 768px) { .b2c-featured-tests .section-header { margin-bottom: 32px; } } .b2c-featured-tests__title { font-size: 36px; font-weight: 700; color: #00704a; margin: 0; font-family: "Montserrat", sans-serif; text-align: center; } @media screen and (max-width: 1770px) { .b2c-featured-tests__title { font-size: 36px; } } @media screen and (max-width: 1440px) { .b2c-featured-tests__title { font-size: 32px; } } @media screen and (max-width: 1200px) { .b2c-featured-tests__title { font-size: 28px; } } @media screen and (max-width: 992px) { .b2c-featured-tests__title { font-size: 24px; } } @media screen and (max-width: 768px) { .b2c-featured-tests__title { font-size: 22px; } } @media screen and (max-width: 576px) { .b2c-featured-tests__title { font-size: 20px; } } .b2c-featured-tests__wrapper { position: relative; } .b2c-featured-tests__slider { position: relative; overflow: visible; padding: 20px 0 60px; } @media screen and (max-width: 768px) { .b2c-featured-tests__slider { padding: 16px 0 50px; overflow: hidden; } } .b2c-featured-tests__slider .swiper-container { overflow: hidden; } .b2c-featured-tests__slider .swiper-wrapper { height: auto; } .b2c-featured-tests__slider .swiper-slide { height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; } .b2c-featured-tests__swiper { overflow: visible; padding: 20px 0 60px; } @media screen and (max-width: 768px) { .b2c-featured-tests__swiper { padding: 16px 0 50px; overflow: hidden; } } .b2c-featured-tests__swiper .swiper-wrapper { height: auto; } .b2c-featured-tests__swiper .swiper-slide { height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; } .b2c-featured-tests .swiper-button-prev, .b2c-featured-tests .swiper-button-next { position: absolute; width: 37px; height: 37px; background: transparent; border: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; top: 65%; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-top: -30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; padding: 0; z-index: 10; } @media screen and (max-width: 992px) { .b2c-featured-tests .swiper-button-prev, .b2c-featured-tests .swiper-button-next { width: 28px; height: 28px; } } .b2c-featured-tests .swiper-button-prev:after, .b2c-featured-tests .swiper-button-next:after { content: none; } .b2c-featured-tests .swiper-button-prev { left: -60px; } @media screen and (max-width: 1440px) { .b2c-featured-tests .swiper-button-prev { left: -50px; } } @media screen and (max-width: 1200px) { .b2c-featured-tests .swiper-button-prev { left: -40px; } } @media screen and (max-width: 648px) { .b2c-featured-tests .swiper-button-prev { left: -20px; } } .b2c-featured-tests .swiper-button-next { right: -60px; } @media screen and (max-width: 1440px) { .b2c-featured-tests .swiper-button-next { right: -50px; } } @media screen and (max-width: 1200px) { .b2c-featured-tests .swiper-button-next { right: -40px; } } @media screen and (max-width: 648px) { .b2c-featured-tests .swiper-button-next { right: -20px; } } .b2c-featured-tests__pagination { bottom: 0 !important; } .b2c-featured-tests__pagination .swiper-pagination-bullet { width: 12px; height: 12px; background: #d4d4d4; opacity: 1; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media screen and (max-width: 768px) { .b2c-featured-tests__pagination .swiper-pagination-bullet { width: 10px; height: 10px; } } .b2c-featured-tests__pagination .swiper-pagination-bullet-active { background: #00704a; width: 24px; border-radius: 6px; } @media screen and (max-width: 768px) { .b2c-featured-tests__pagination .swiper-pagination-bullet-active { width: 20px; } } /** * B2C Test Card Component * Copied from .service-card for independent editing */ .b2c-test-card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #ffffff; border: 1px solid #e9edf3; border-radius: 12px; overflow: hidden; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); height: 100%; width: 100%; } .b2c-test-card:hover { -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1); border-color: #bbbbbb; -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .b2c-test-card__content { padding: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } @media (max-width: 1770px) { .b2c-test-card__content { padding: 22px; } } @media (max-width: 1440px) { .b2c-test-card__content { padding: 19px; } } @media (max-width: 1200px) { .b2c-test-card__content { padding: 17px; } } @media (max-width: 992px) { .b2c-test-card__content { padding: 14px; } } @media (max-width: 768px) { .b2c-test-card__content { padding: 12px; } } @media (max-width: 640px) { .b2c-test-card__content { padding: 10px; } } @media (max-width: 480px) { .b2c-test-card__content { padding: 12px; } } .b2c-test-card__title { margin: 0 0 12px; font-size: 24px; font-weight: 700; color: #312020; font-family: "Montserrat", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1770px) { .b2c-test-card__title { font-size: 24px; margin: 0 0 11px; } } @media (max-width: 1440px) { .b2c-test-card__title { font-size: 20px; margin: 0 0 10px; } } @media (max-width: 1200px) { .b2c-test-card__title { font-size: 18px; margin: 0 0 8px; } } @media (max-width: 992px) { .b2c-test-card__title { font-size: 18px; margin: 0 0 7px; } } @media (max-width: 768px) { .b2c-test-card__title { font-size: 16px; margin: 0 0 6px; } } @media (max-width: 640px) { .b2c-test-card__title { font-size: 16px; margin: 0 0 5px; } } @media (max-width: 480px) { .b2c-test-card__title { font-size: 16px; margin: 0 0 6px; } } .b2c-test-card__title a { color: inherit; text-decoration: none; -webkit-transition: color 0.15s ease-in-out; transition: color 0.15s ease-in-out; } .b2c-test-card__title a:hover { color: #00704a; } .b2c-test-card__price { font-size: 32px; font-weight: 700; color: #00704a; font-family: "Montserrat", sans-serif; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 6px; row-gap: 0; margin: 0 0 10px; } .b2c-test-card__price .price-label { font-size: 28px; color: #312020; font-weight: 600; font-family: "Be Vietnam Pro", sans-serif; } .b2c-test-card__price .price-amount { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .b2c-test-card__price .price-amount .currency { margin-top: 8px; } @media (max-width: 1770px) { .b2c-test-card__price .price-amount .currency { margin-top: 7px; } } @media (max-width: 1440px) { .b2c-test-card__price .price-amount .currency { margin-top: 6px; } } @media (max-width: 1200px) { .b2c-test-card__price .price-amount .currency { margin-top: 6px; } } @media (max-width: 992px) { .b2c-test-card__price .price-amount .currency { margin-top: 5px; } } @media (max-width: 768px) { .b2c-test-card__price .price-amount .currency { margin-top: 4px; } } @media (max-width: 1770px) { .b2c-test-card__price { font-size: 27px; margin-bottom: 9px; gap: 5px; } .b2c-test-card__price .price-sale { font-size: 27px; } .b2c-test-card__price .currency { font-size: 15px; } .b2c-test-card__price .price-regular { font-size: 17px; } } @media (max-width: 1440px) { .b2c-test-card__price { font-size: 24px; margin-bottom: 8px; gap: 5px; } .b2c-test-card__price .price-sale { font-size: 24px; } .b2c-test-card__price .currency { font-size: 14px; } .b2c-test-card__price .price-regular { font-size: 15px; } } @media (max-width: 1200px) { .b2c-test-card__price { font-size: 21px; margin-bottom: 7px; gap: 4px; } .b2c-test-card__price .price-sale { font-size: 21px; } .b2c-test-card__price .currency { font-size: 14px; } .b2c-test-card__price .price-regular { font-size: 14px; } } @media (max-width: 992px) { .b2c-test-card__price { font-size: 18px; margin-bottom: 6px; gap: 4px; } .b2c-test-card__price .price-sale { font-size: 18px; } .b2c-test-card__price .currency { font-size: 14px; } .b2c-test-card__price .price-regular { font-size: 14px; } } @media (max-width: 768px) { .b2c-test-card__price { font-size: 16px; margin-bottom: 5px; gap: 3px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .b2c-test-card__price .price-sale { font-size: 16px; } .b2c-test-card__price .currency { font-size: 14px; } .b2c-test-card__price .price-regular { font-size: 14px; } } @media (max-width: 640px) { .b2c-test-card__price { font-size: 14px; margin-bottom: 4px; gap: 2px; } .b2c-test-card__price .price-sale { font-size: 14px; } .b2c-test-card__price .currency { font-size: 13px; } .b2c-test-card__price .price-regular { font-size: 13px; } } @media (max-width: 480px) { .b2c-test-card__price { font-size: 14px; margin-bottom: 5px; gap: 3px; } .b2c-test-card__price .price-sale { font-size: 14px; } .b2c-test-card__price .currency { font-size: 13px; } .b2c-test-card__price .price-regular { font-size: 13px; } } .b2c-test-card__price .price-sale { color: #00704a; font-size: 32px; font-weight: 700; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .b2c-test-card__price .currency { color: #312020; font-size: 18px; font-weight: 400; } .b2c-test-card__price .price-regular { color: #535353; font-size: 20px; font-weight: 400; text-decoration: line-through; } .b2c-test-card__description { font-size: 16px; color: #312020; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin: 0 0 40px; font-family: "Be Vietnam Pro", sans-serif; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 1770px) { .b2c-test-card__description { font-size: 16px; margin-bottom: 36px; } } @media (max-width: 1440px) { .b2c-test-card__description { font-size: 14px; margin-bottom: 32px; } } @media (max-width: 1200px) { .b2c-test-card__description { font-size: 14px; margin-bottom: 28px; } } @media (max-width: 992px) { .b2c-test-card__description { font-size: 14px; margin-bottom: 24px; } } @media (max-width: 768px) { .b2c-test-card__description { font-size: 14px; margin-bottom: 20px; } } @media (max-width: 640px) { .b2c-test-card__description { font-size: 14px; margin-bottom: 16px; } } @media (max-width: 480px) { .b2c-test-card__description { font-size: 14px; margin-bottom: 20px; } } .b2c-test-card__actions { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; margin-top: auto; } @media (max-width: 1770px) { .b2c-test-card__actions { gap: 14px; } } @media (max-width: 1440px) { .b2c-test-card__actions { gap: 13px; } } @media (max-width: 1200px) { .b2c-test-card__actions { gap: 11px; } } @media (max-width: 992px) { .b2c-test-card__actions { gap: 10px; } } @media (max-width: 768px) { .b2c-test-card__actions { gap: 8px; } } @media (max-width: 640px) { .b2c-test-card__actions { gap: 6px; -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media (max-width: 480px) { .b2c-test-card__actions { gap: 8px; } } .b2c-test-card__actions .btn { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 10px 16px; border-radius: 6px; font-size: 16px; font-weight: 600; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; text-decoration: none; text-transform: uppercase; border: none; cursor: pointer; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; white-space: nowrap; font-family: "Montserrat", sans-serif; } @media (max-width: 1770px) { .b2c-test-card__actions .btn { font-size: 14px; padding: 9px 14px; } } @media (max-width: 1440px) { .b2c-test-card__actions .btn { font-size: 14px; padding: 8px 13px; } } @media (max-width: 1200px) { .b2c-test-card__actions .btn { font-size: 14px; padding: 8px 11px; } } @media (max-width: 992px) { .b2c-test-card__actions .btn { font-size: 14px; padding: 8px 10px; } } @media (max-width: 768px) { .b2c-test-card__actions .btn { font-size: 14px; padding: 8px 8px; } } @media (max-width: 640px) { .b2c-test-card__actions .btn { font-size: 14px; padding: 8px 6px; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; width: 100%; } } @media (max-width: 480px) { .b2c-test-card__actions .btn { font-size: 14px; padding: 5px 8px; } } .b2c-test-card__actions .btn-outline { background: #ffffff; color: #00704a; border: 1px solid #00704a; } .b2c-test-card__actions .btn-outline:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); } .b2c-test-card__actions .btn-primary { background: #00704a; color: #ffffff; border: 2px solid #00704a; } .b2c-test-card__actions .btn-primary:hover { opacity: 0.9; -webkit-transform: translateY(-2px); transform: translateY(-2px); } .b2c-organ-groups { padding: 5rem 0; background-color: #f3fcf9; overflow: hidden; } @media screen and (max-width: 1770px) { .b2c-organ-groups { padding: 4.5rem 0; } } @media screen and (max-width: 1550px) { .b2c-organ-groups { padding: 4rem 0; } } @media screen and (max-width: 1440px) { .b2c-organ-groups { padding: 3.5rem 0; } } @media screen and (max-width: 1280px) { .b2c-organ-groups { padding: 3.5rem 0; } } @media screen and (max-width: 1200px) { .b2c-organ-groups { padding: 3rem 0; } } @media screen and (max-width: 992px) { .b2c-organ-groups { padding: 3rem 0; } } @media screen and (max-width: 768px) { .b2c-organ-groups { padding: 3rem 0; } } @media screen and (max-width: 480px) { .b2c-organ-groups { padding: 2rem 0; } } .b2c-organ-groups .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .b2c-organ-groups__header { text-align: center; margin-bottom: 48px; } @media screen and (max-width: 1770px) { .b2c-organ-groups__header { margin-bottom: 43px; } } @media screen and (max-width: 1550px) { .b2c-organ-groups__header { margin-bottom: 40px; } } @media screen and (max-width: 1440px) { .b2c-organ-groups__header { margin-bottom: 36px; } } @media screen and (max-width: 1280px) { .b2c-organ-groups__header { margin-bottom: 32px; } } @media screen and (max-width: 1200px) { .b2c-organ-groups__header { margin-bottom: 28px; } } @media screen and (max-width: 992px) { .b2c-organ-groups__header { margin-bottom: 24px; } } @media screen and (max-width: 768px) { .b2c-organ-groups__header { margin-bottom: 20px; } } @media screen and (max-width: 480px) { .b2c-organ-groups__header { margin-bottom: 16px; } } .b2c-organ-groups__title { font-size: 36px; font-weight: 700; color: #00704a; margin: 0 0 12px; font-family: "Montserrat", sans-serif; line-height: 1.3; } @media screen and (max-width: 1770px) { .b2c-organ-groups__title { font-size: 32px; } } @media screen and (max-width: 1550px) { .b2c-organ-groups__title { font-size: 30px; } } @media screen and (max-width: 1440px) { .b2c-organ-groups__title { font-size: 29px; } } @media screen and (max-width: 1280px) { .b2c-organ-groups__title { font-size: 26px; } } @media screen and (max-width: 1200px) { .b2c-organ-groups__title { font-size: 25px; } } @media screen and (max-width: 992px) { .b2c-organ-groups__title { font-size: 24px; } } @media screen and (max-width: 768px) { .b2c-organ-groups__title { font-size: 22px; } } @media screen and (max-width: 480px) { .b2c-organ-groups__title { font-size: 20px; } } .b2c-organ-groups__subtitle { font-size: 16px; font-weight: 400; color: #312020; margin: 0; font-family: "Be Vietnam Pro", sans-serif; line-height: 1.5; opacity: 0.8; } @media screen and (max-width: 1770px) { .b2c-organ-groups__subtitle { font-size: 15px; } } @media screen and (max-width: 1200px) { .b2c-organ-groups__subtitle { font-size: 14px; } } @media screen and (max-width: 768px) { .b2c-organ-groups__subtitle { font-size: 13px; } } .b2c-organ-groups__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; margin-bottom: 48px; } @media screen and (max-width: 1770px) { .b2c-organ-groups__grid { gap: 29px; margin-bottom: 43px; } } @media screen and (max-width: 1550px) { .b2c-organ-groups__grid { gap: 28px; margin-bottom: 40px; } } @media screen and (max-width: 1440px) { .b2c-organ-groups__grid { gap: 24px; margin-bottom: 36px; } } @media screen and (max-width: 1280px) { .b2c-organ-groups__grid { gap: 20px; margin-bottom: 32px; } } @media screen and (max-width: 1200px) { .b2c-organ-groups__grid { gap: 16px; margin-bottom: 28px; } } @media screen and (max-width: 992px) { .b2c-organ-groups__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } } @media screen and (max-width: 768px) { .b2c-organ-groups__grid { grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; } } @media screen and (max-width: 576px) { .b2c-organ-groups__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; } } @media screen and (max-width: 480px) { .b2c-organ-groups__grid { gap: 10px; } } .b2c-organ-groups__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; text-decoration: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } @media screen and (max-width: 1770px) { .b2c-organ-groups__item { gap: 10px; padding: 22px; } } @media screen and (max-width: 1550px) { .b2c-organ-groups__item { gap: 10px; padding: 20px; } } @media screen and (max-width: 1440px) { .b2c-organ-groups__item { gap: 10px; padding: 18px; } } @media screen and (max-width: 1280px) { .b2c-organ-groups__item { gap: 8px; padding: 16px; } } @media screen and (max-width: 1200px) { .b2c-organ-groups__item { gap: 8px; padding: 14px; } } @media screen and (max-width: 992px) { .b2c-organ-groups__item { gap: 6px; padding: 12px; } } @media screen and (max-width: 768px) { .b2c-organ-groups__item { gap: 6px; padding: 10px; } } .b2c-organ-groups__item:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); } .b2c-organ-groups__item:hover .b2c-organ-groups__icon img { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .b2c-organ-groups__item:hover .b2c-organ-groups__item-title { color: #00704a; text-decoration: underline; } .b2c-organ-groups__item:active { -webkit-transform: translateY(-2px); transform: translateY(-2px); } .b2c-organ-groups__icon { -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } .b2c-organ-groups__item-title { font-size: 24px; font-weight: 600; color: #312020; text-align: center; font-family: "Be Vietnam Pro", sans-serif; line-height: 1.4; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } @media screen and (max-width: 1770px) { .b2c-organ-groups__item-title { font-size: 24px; } } @media screen and (max-width: 1280px) { .b2c-organ-groups__item-title { font-size: 22px; } } @media screen and (max-width: 768px) { .b2c-organ-groups__item-title { font-size: 20px; } } @media screen and (max-width: 568px) { .b2c-organ-groups__item-title { font-size: 18px; } } .b2c-organ-groups__footer { text-align: center; margin-top: 2rem; } @media screen and (max-width: 1550px) { .b2c-organ-groups__footer { margin-top: 2rem; } } @media screen and (max-width: 1440px) { .b2c-organ-groups__footer { margin-top: 1.5rem; } } @media screen and (max-width: 992px) { .b2c-organ-groups__footer { margin-top: 1.5rem; } } @media screen and (max-width: 768px) { .b2c-organ-groups__footer { margin-top: 1rem; } } .b2c-organ-groups__button { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10px 48px; font-size: 14px; font-weight: 600; color: #00704a; background-color: #ffffff; border: 1px solid #00704a; border-radius: 8px; text-decoration: none; font-family: "Be Vietnam Pro", sans-serif; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; letter-spacing: 0.5px; } @media screen and (max-width: 1770px) { .b2c-organ-groups__button { padding: 10px 43px; font-size: 14px; } } @media screen and (max-width: 1550px) { .b2c-organ-groups__button { padding: 10px 40px; } } @media screen and (max-width: 1440px) { .b2c-organ-groups__button { padding: 10px 36px; } } @media screen and (max-width: 1280px) { .b2c-organ-groups__button { padding: 10px 32px; font-size: 13px; } } @media screen and (max-width: 1200px) { .b2c-organ-groups__button { padding: 10px 28px; font-size: 14px; } } @media screen and (max-width: 992px) { .b2c-organ-groups__button { padding: 8px 24px; } } @media screen and (max-width: 768px) { .b2c-organ-groups__button { padding: 8px 20px; font-size: 14px; } } @media screen and (max-width: 480px) { .b2c-organ-groups__button { padding: 8px 16px; } } .b2c-organ-groups__button:hover { background-color: #00704a; color: #ffffff; -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.3); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.3); } .b2c-organ-groups__button:active { -webkit-transform: translateY(0); transform: translateY(0); } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .b2c-why-choose { position: relative; width: 100%; padding: 48px 0; } @media screen and (max-width: 1770px) { .b2c-why-choose { padding: 43px 0; } } @media screen and (max-width: 1440px) { .b2c-why-choose { padding: 38px 0; } } @media screen and (max-width: 1200px) { .b2c-why-choose { padding: 34px 0; } } @media screen and (max-width: 992px) { .b2c-why-choose { padding: 29px 0; } } @media screen and (max-width: 768px) { .b2c-why-choose { padding: 24px 0; } } @media screen and (max-width: 640px) { .b2c-why-choose { padding: 19px 0; } } @media screen and (max-width: 480px) { .b2c-why-choose { padding: 24px 0; } } .b2c-why-choose .b2c-why-choose__title { font-size: 36px; font-weight: 700; color: #00704a; margin: 0 0 48px; font-family: "Montserrat", sans-serif; } @media screen and (max-width: 1770px) { .b2c-why-choose .b2c-why-choose__title { font-size: 31px; margin-bottom: 43px; } } @media screen and (max-width: 1440px) { .b2c-why-choose .b2c-why-choose__title { font-size: 27px; margin-bottom: 38px; } } @media screen and (max-width: 1200px) { .b2c-why-choose .b2c-why-choose__title { font-size: 24px; margin-bottom: 34px; } } @media screen and (max-width: 992px) { .b2c-why-choose .b2c-why-choose__title { font-size: 32px; margin-bottom: 32px; } } @media screen and (max-width: 768px) { .b2c-why-choose .b2c-why-choose__title { font-size: 32px; margin-bottom: 24px; } } @media screen and (max-width: 640px) { .b2c-why-choose .b2c-why-choose__title { font-size: 24px; margin-bottom: 19px; } } @media screen and (max-width: 480px) { .b2c-why-choose .b2c-why-choose__title { font-size: 22px; margin-bottom: 20px; } } .b2c-why-choose .b2c-why-choose__header { margin-bottom: 48px; } @media screen and (max-width: 1770px) { .b2c-why-choose .b2c-why-choose__header { margin-bottom: 43px; } } @media screen and (max-width: 1440px) { .b2c-why-choose .b2c-why-choose__header { margin-bottom: 38px; } } @media screen and (max-width: 1200px) { .b2c-why-choose .b2c-why-choose__header { margin-bottom: 34px; } } @media screen and (max-width: 992px) { .b2c-why-choose .b2c-why-choose__header { margin-bottom: 32px; } } @media screen and (max-width: 768px) { .b2c-why-choose .b2c-why-choose__header { margin-bottom: 24px; } } @media screen and (max-width: 640px) { .b2c-why-choose .b2c-why-choose__header { margin-bottom: 19px; } } @media screen and (max-width: 480px) { .b2c-why-choose .b2c-why-choose__header { margin-bottom: 20px; } } .b2c-why-choose .b2c-why-choose__wrapper { display: grid; grid-template-columns: 500px 1fr; gap: 80px; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } @media screen and (max-width: 1440px) { .b2c-why-choose .b2c-why-choose__wrapper { grid-template-columns: 400px 1fr; gap: 60px; } } @media screen and (max-width: 1280px) { .b2c-why-choose .b2c-why-choose__wrapper { grid-template-columns: 1fr; gap: 40px; } } @media screen and (max-width: 992px) { .b2c-why-choose .b2c-why-choose__wrapper { grid-template-columns: 1fr; gap: 30px; } } @media screen and (max-width: 768px) { .b2c-why-choose .b2c-why-choose__wrapper { grid-template-columns: 1fr; gap: 40px; } } .b2c-why-choose .b2c-why-choose__images { position: relative; margin-top: 3rem; min-height: 100%; -webkit-box-ordinal-group: 2 !important; -ms-flex-order: 1 !important; order: 1 !important; } @media screen and (max-width: 1440px) { .b2c-why-choose .b2c-why-choose__images { min-height: 100%; margin-top: 2rem; } } @media screen and (max-width: 1280px) { .b2c-why-choose .b2c-why-choose__images { min-height: 610px; } } @media screen and (max-width: 992px) { .b2c-why-choose .b2c-why-choose__images { min-height: 610px; } } .b2c-why-choose .b2c-why-choose__image { position: absolute; border-radius: 16px; overflow: hidden; -webkit-box-shadow: 7px 7px 28.4px 0 rgba(114, 114, 114, 0.31); box-shadow: 7px 7px 28.4px 0 rgba(114, 114, 114, 0.31); } .b2c-why-choose .b2c-why-choose__image img { width: 100%; height: 100%; display: block; -o-object-fit: cover; object-fit: cover; } .b2c-why-choose .b2c-why-choose__image--top { top: 0; right: 0; width: 346px; height: 371px; z-index: 1; } @media screen and (max-width: 576px) { .b2c-why-choose .b2c-why-choose__image--top { width: 320px; height: 230px; } } @media screen and (max-width: 992px) { .b2c-why-choose .b2c-why-choose__image--top { width: 300px; height: 210px; } } @media screen and (max-width: 1200px) { .b2c-why-choose .b2c-why-choose__image--top { width: 346px; height: 371px; } } .b2c-why-choose .b2c-why-choose__image--bottom { bottom: 0; left: 0; width: 316px; height: 390px; z-index: 2; } @media screen and (max-width: 576px) { .b2c-why-choose .b2c-why-choose__image--bottom { width: 340px; height: 280px; } } @media screen and (max-width: 992px) { .b2c-why-choose .b2c-why-choose__image--bottom { width: 320px; height: 260px; } } @media screen and (max-width: 1200px) { .b2c-why-choose .b2c-why-choose__image--bottom { width: 316px; height: 390px; } } .b2c-why-choose .b2c-why-choose__features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; -webkit-box-ordinal-group: 3 !important; -ms-flex-order: 2 !important; order: 2 !important; } @media screen and (max-width: 576px) { .b2c-why-choose .b2c-why-choose__features { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media screen and (max-width: 992px) { .b2c-why-choose .b2c-why-choose__features { grid-template-columns: repeat(1, 1fr); gap: 30px; } } .b2c-why-choose .b2c-why-choose__feature { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } .b2c-why-choose .b2c-why-choose__feature-icon { width: 56px; height: 56px; -ms-flex-negative: 0; flex-shrink: 0; } .b2c-why-choose .b2c-why-choose__feature-icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .b2c-why-choose .b2c-why-choose__feature-content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .b2c-why-choose .b2c-why-choose__feature-title { font-size: 24px; font-weight: 700; color: #00704a; margin: 0 0 12px; line-height: 1.3; } .b2c-why-choose .b2c-why-choose__feature-desc { font-size: 16px; color: #312020; margin: 0; line-height: 1.7; } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .b2c-certificate { text-wrap: pretty; margin: 5rem 0 5rem; padding: 3rem 0; background-color: #F9F9FB; /* ============================================================ MAIN CERTIFICATE AREA ============================================================ */ /* ============================================================ ACCORDION ============================================================ */ /* ============================================================ GRID FOR OTHER CERTIFICATES ============================================================ */ } @media (max-width: 1770px) { .b2c-certificate { margin: 45px 0 45px; } } @media (max-width: 1550px) { .b2c-certificate { margin: 40px 0 40px; } } @media (max-width: 1440px) { .b2c-certificate { margin: 45px 0 45px; } } @media (max-width: 1280px) { .b2c-certificate { margin: 40px 0 40px; } } @media (max-width: 768px) { .b2c-certificate { margin: 32px 0 32px; } } @media (max-width: 480px) { .b2c-certificate { margin: 24px 0 24px; } } .b2c-certificate .section-title { font-size: 36px; font-weight: 700; color: #00704a; margin: 0 0 42px; } @media (max-width: 1770px) { .b2c-certificate .section-title { font-size: 32px; margin: 0 0 38px; } } @media (max-width: 1550px) { .b2c-certificate .section-title { font-size: 30px; margin: 0 0 36px; } } @media (max-width: 1440px) { .b2c-certificate .section-title { font-size: 32px; margin: 0 0 38px; } } @media (max-width: 1280px) { .b2c-certificate .section-title { font-size: 30px; margin: 0 0 36px; } } @media (max-width: 992px) { .b2c-certificate .section-title { font-size: 28px; margin: 0 0 32px; } } @media (max-width: 768px) { .b2c-certificate .section-title { font-size: 24px; margin: 0 0 28px; } } @media (max-width: 480px) { .b2c-certificate .section-title { font-size: 22px; margin: 0 0 24px; } } .b2c-certificate .section-title--spacing { margin-top: 64px; } @media (max-width: 1770px) { .b2c-certificate .section-title--spacing { margin-top: 58px; } } @media (max-width: 1550px) { .b2c-certificate .section-title--spacing { margin-top: 51px; } } @media (max-width: 1440px) { .b2c-certificate .section-title--spacing { margin-top: 56px; } } @media (max-width: 1280px) { .b2c-certificate .section-title--spacing { margin-top: 45px; } } @media (max-width: 1280px) { .b2c-certificate .section-title--spacing { margin-top: 48px; } } @media (max-width: 768px) { .b2c-certificate .section-title--spacing { margin-top: 40px; } } @media (max-width: 480px) { .b2c-certificate .section-title--spacing { margin-top: 32px; } } .b2c-certificate .b2c-certificate__main { display: grid; grid-template-columns: 434px 1fr; gap: 69px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media (max-width: 1770px) { .b2c-certificate .b2c-certificate__main { grid-template-columns: 390px 1fr; gap: 62px; } } @media (max-width: 1550px) { .b2c-certificate .b2c-certificate__main { grid-template-columns: 347px 1fr; gap: 55px; } } @media (max-width: 1440px) { .b2c-certificate .b2c-certificate__main { grid-template-columns: 380px 1fr; gap: 56px; } } @media (max-width: 1280px) { .b2c-certificate .b2c-certificate__main { grid-template-columns: 340px 1fr; gap: 48px; } } @media (max-width: 1200px) { .b2c-certificate .b2c-certificate__main { grid-template-columns: 320px 1fr; gap: 40px; } } @media (max-width: 992px) { .b2c-certificate .b2c-certificate__main { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 768px) { .b2c-certificate .b2c-certificate__main { gap: 24px; } } @media (max-width: 480px) { .b2c-certificate .b2c-certificate__main { gap: 20px; } } .b2c-certificate .b2c-certificate__main__image { position: sticky; top: 120px; overflow: hidden; border-radius: 8px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media (max-width: 991px) { .b2c-certificate .b2c-certificate__main__image { position: static; } } .b2c-certificate .b2c-certificate__main__image:hover { -webkit-transform: scale(1.02); transform: scale(1.02); -webkit-box-shadow: 0 8px 24px rgba(0, 113, 74, 0.15); box-shadow: 0 8px 24px rgba(0, 113, 74, 0.15); } @media (max-width: 768px) { .b2c-certificate .b2c-certificate__main__image:hover { -webkit-transform: scale(1.01); transform: scale(1.01); -webkit-box-shadow: 0 4px 12px rgba(0, 113, 74, 0.1); box-shadow: 0 4px 12px rgba(0, 113, 74, 0.1); } } @media (max-width: 480px) { .b2c-certificate .b2c-certificate__main__image:hover { -webkit-transform: none; transform: none; -webkit-box-shadow: none; box-shadow: none; } } .b2c-certificate .b2c-certificate__main__image img { width: 100%; height: auto; display: block; -o-object-fit: contain; object-fit: contain; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } @media (max-width: 1440px) { .b2c-certificate .b2c-certificate__main__image img { max-height: 500px; } } @media (max-width: 1280px) { .b2c-certificate .b2c-certificate__main__image img { max-height: 450px; } } @media (max-width: 992px) { .b2c-certificate .b2c-certificate__main__image img { max-height: 400px; } } @media (max-width: 768px) { .b2c-certificate .b2c-certificate__main__image img { max-height: 320px; } } @media (max-width: 480px) { .b2c-certificate .b2c-certificate__main__image img { max-height: 240px; } } .b2c-certificate .b2c-certificate__main__subtitle { font-size: 16px; color: #312020; margin: 0; } @media (max-width: 1770px) { .b2c-certificate .b2c-certificate__main__subtitle { font-size: 15px; } } @media (max-width: 1550px) { .b2c-certificate .b2c-certificate__main__subtitle { font-size: 14px; } } @media (max-width: 1440px) { .b2c-certificate .b2c-certificate__main__subtitle { font-size: 15px; } } @media (max-width: 1280px) { .b2c-certificate .b2c-certificate__main__subtitle { font-size: 15px; } } @media (max-width: 768px) { .b2c-certificate .b2c-certificate__main__subtitle { font-size: 14px; } } @media (max-width: 480px) { .b2c-certificate .b2c-certificate__main__subtitle { font-size: 13px; } } .b2c-certificate .b2c-certificate__main__title { font-size: 24px; font-weight: 600; margin: 0 0 32px; line-height: auto; color: #312020; text-align: justify; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } @media (max-width: 1770px) { .b2c-certificate .b2c-certificate__main__title { font-size: 22px; margin: 0 0 29px; } } @media (max-width: 1550px) { .b2c-certificate .b2c-certificate__main__title { font-size: 21px; margin: 0 0 27px; } } @media (max-width: 1440px) { .b2c-certificate .b2c-certificate__main__title { font-size: 22px; margin: 0 0 28px; } } @media (max-width: 1280px) { .b2c-certificate .b2c-certificate__main__title { font-size: 20px; margin: 0 0 24px; } } @media (max-width: 1200px) { .b2c-certificate .b2c-certificate__main__title { font-size: 20px; margin: 0 0 24px; } } @media (max-width: 992px) { .b2c-certificate .b2c-certificate__main__title { font-size: 20px; margin: 0 0 24px; } } @media (max-width: 768px) { .b2c-certificate .b2c-certificate__main__title { font-size: 20px; margin: 0 0 20px; } } @media (max-width: 480px) { .b2c-certificate .b2c-certificate__main__title { font-size: 18px; margin: 0 0 18px; } } .b2c-certificate .b2c-certificate__main__title p { font-size: 24px; font-weight: 600; margin: 0 0 24px; line-height: auto; color: #312020; } @media (max-width: 1770px) { .b2c-certificate .b2c-certificate__main__title p { font-size: 22px; margin: 0 0 21px; } } @media (max-width: 1550px) { .b2c-certificate .b2c-certificate__main__title p { font-size: 21px; margin: 0 0 19px; } } @media (max-width: 1440px) { .b2c-certificate .b2c-certificate__main__title p { font-size: 22px; margin: 0 0 20px; } } @media (max-width: 1280px) { .b2c-certificate .b2c-certificate__main__title p { font-size: 20px; margin: 0 0 18px; } } @media (max-width: 1200px) { .b2c-certificate .b2c-certificate__main__title p { font-size: 20px; margin: 0 0 16px; } } @media (max-width: 992px) { .b2c-certificate .b2c-certificate__main__title p { font-size: 20px; margin: 0 0 16px; } } @media (max-width: 768px) { .b2c-certificate .b2c-certificate__main__title p { font-size: 18px; margin: 0 0 14px; } } @media (max-width: 480px) { .b2c-certificate .b2c-certificate__main__title p { font-size: 16px; margin: 0 0 12px; } } .b2c-certificate .b2c-certificate__main__desc { font-size: 16px; line-height: 1.6; color: #333; margin-bottom: 16px; text-align: justify; } @media (max-width: 1770px) { .b2c-certificate .b2c-certificate__main__desc { font-size: 15px; margin-bottom: 15px; } } @media (max-width: 1550px) { .b2c-certificate .b2c-certificate__main__desc { font-size: 14px; margin-bottom: 13px; } } @media (max-width: 1440px) { .b2c-certificate .b2c-certificate__main__desc { font-size: 14px; margin-bottom: 14px; } } @media (max-width: 1280px) { .b2c-certificate .b2c-certificate__main__desc { font-size: 13px; margin-bottom: 12px; } } @media (max-width: 1200px) { .b2c-certificate .b2c-certificate__main__desc { font-size: 14px; margin-bottom: 12px; } } @media (max-width: 768px) { .b2c-certificate .b2c-certificate__main__desc { font-size: 13px; line-height: 1.5; margin-bottom: 12px; } } @media (max-width: 480px) { .b2c-certificate .b2c-certificate__main__desc { font-size: max(13px, 3.2vw); line-height: 1.5; margin-bottom: 10px; } } .b2c-certificate .b2c-certificate__main__desc p { margin: 0 0 10px; } @media (max-width: 768px) { .b2c-certificate .b2c-certificate__main__desc p { margin: 0 0 8px; } } @media (max-width: 480px) { .b2c-certificate .b2c-certificate__main__desc p { margin: 0 0 6px; } } .b2c-certificate .b2c-certificate__main__desc p:last-child { margin-bottom: 0; } .b2c-certificate .b2c-certificate__main__sub-title { font-size: 24px; font-weight: 700; margin: 0 0 24px; color: #312020; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } @media (max-width: 1770px) { .b2c-certificate .b2c-certificate__main__sub-title { font-size: 22px; margin: 0 0 21px; } } @media (max-width: 1550px) { .b2c-certificate .b2c-certificate__main__sub-title { font-size: 21px; margin: 0 0 19px; } } @media (max-width: 1440px) { .b2c-certificate .b2c-certificate__main__sub-title { font-size: 22px; margin: 0 0 20px; } } @media (max-width: 1280px) { .b2c-certificate .b2c-certificate__main__sub-title { font-size: 20px; margin: 0 0 18px; } } @media (max-width: 1200px) { .b2c-certificate .b2c-certificate__main__sub-title { font-size: 20px; margin: 0 0 16px; } } @media (max-width: 992px) { .b2c-certificate .b2c-certificate__main__sub-title { font-size: 20px; margin: 0 0 16px; } } @media (max-width: 768px) { .b2c-certificate .b2c-certificate__main__sub-title { font-size: 18px; margin: 0 0 14px; } } @media (max-width: 480px) { .b2c-certificate .b2c-certificate__main__sub-title { font-size: 16px; margin: 0 0 12px; } } .b2c-certificate .cert-accordion__header { list-style: none; cursor: pointer; padding: 0 0 12px; font-size: 20px; font-weight: 600; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #312020; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .b2c-certificate .cert-accordion__header:hover { color: #00704a; } .b2c-certificate .cert-accordion__header:hover::after { -webkit-filter: none; filter: none; -webkit-transform: translateX(2px); transform: translateX(2px); } @media (max-width: 1440px) { .b2c-certificate .cert-accordion__header { font-size: 19px; padding: 0 0 10px; } } @media (max-width: 1280px) { .b2c-certificate .cert-accordion__header { font-size: 18px; padding: 0 0 10px; } } @media (max-width: 768px) { .b2c-certificate .cert-accordion__header { font-size: 18px; padding: 0 0 10px; } } @media (max-width: 480px) { .b2c-certificate .cert-accordion__header { font-size: 16px; padding: 0 0 8px; } } .b2c-certificate .cert-accordion__header::-webkit-details-marker { display: none; } .b2c-certificate .cert-accordion__header::after { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; font-size: 12px; content: url("/wp-content/themes/one-lab/assets/images/icons/cert-dropdown.svg"); width: 24px; height: 24px; display: inline-block; vertical-align: middle; margin-left: 8px; -webkit-filter: grayscale(1) brightness(0); filter: grayscale(1) brightness(0); } @media (max-width: 768px) { .b2c-certificate .cert-accordion__header::after { width: 20px; height: 20px; margin-left: 6px; } } @media (max-width: 480px) { .b2c-certificate .cert-accordion__header::after { width: 18px; height: 18px; margin-left: 6px; } } .b2c-certificate .cert-accordion__item[open] > .cert-accordion__header { color: #00704a; } .b2c-certificate .cert-accordion__item[open] > .cert-accordion__header::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-filter: none; filter: none; } .b2c-certificate .cert-accordion__list { margin: 0 0 16px; padding-left: 0; font-size: 16px; line-height: 150%; list-style: none; max-height: 0; opacity: 0; overflow: hidden; -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-transition: max-height 0.3s ease, opacity 0.25s ease, -webkit-transform 0.25s ease; transition: max-height 0.3s ease, opacity 0.25s ease, -webkit-transform 0.25s ease; transition: max-height 0.3s ease, opacity 0.25s ease, transform 0.25s ease; transition: max-height 0.3s ease, opacity 0.25s ease, transform 0.25s ease, -webkit-transform 0.25s ease; } @media (max-width: 1440px) { .b2c-certificate .cert-accordion__list { font-size: 15px; margin: 0 0 14px; } } @media (max-width: 1280px) { .b2c-certificate .cert-accordion__list { font-size: 15px; margin: 0 0 12px; } } @media (max-width: 768px) { .b2c-certificate .cert-accordion__list { font-size: 14px; margin: 0 0 12px; } } @media (max-width: 480px) { .b2c-certificate .cert-accordion__list { font-size: max(13px, 3.2vw); margin: 0 0 10px; } } .b2c-certificate .cert-accordion__list li { margin: 2px 0; } @media (max-width: 480px) { .b2c-certificate .cert-accordion__list li { margin: 1px 0; } } .b2c-certificate .cert-accordion__list li p { margin: 0 0 2px; } @media (max-width: 480px) { .b2c-certificate .cert-accordion__list li p { margin: 0 0 1px; } } .b2c-certificate .cert-accordion__list li p:last-child { margin-bottom: 0; } .b2c-certificate .cert-accordion__item[open] .cert-accordion__list { max-height: 600px; opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } @media (max-width: 768px) { .b2c-certificate .cert-accordion__item[open] .cert-accordion__list { max-height: 500px; } } @media (max-width: 480px) { .b2c-certificate .cert-accordion__item[open] .cert-accordion__list { max-height: 400px; } } .b2c-certificate .cert-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 1440px) { .b2c-certificate .cert-list { gap: 20px; } } @media (max-width: 1280px) { .b2c-certificate .cert-list { gap: 18px; } } @media (max-width: 1200px) { .b2c-certificate .cert-list { grid-template-columns: 1fr 1fr; gap: 20px; } } @media (max-width: 768px) { .b2c-certificate .cert-list { grid-template-columns: 1fr 1fr; gap: 16px; } } @media (max-width: 480px) { .b2c-certificate .cert-list { grid-template-columns: 1fr; gap: 20px; } } .b2c-certificate .cert-item { width: 100%; margin: 0 auto; padding: 0; border: none; background: none; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease; transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease; transition: transform 0.2s ease, box-shadow 0.2s ease; transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease; } .b2c-certificate .cert-item__image { position: sticky; top: 102px; width: 100%; height: 324px; background: #fff; border-radius: 4px; border: 0.5px solid #b7b7b7; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media screen and (max-width: 1770px) { .b2c-certificate .cert-item__image { height: 270px; } } @media (max-width: 1440px) { .b2c-certificate .cert-item__image { height: 250px; } } @media (max-width: 1280px) { .b2c-certificate .cert-item__image { height: 240px; } } @media (max-width: 1200px) { .b2c-certificate .cert-item__image { height: 260px; } } @media (max-width: 992px) { .b2c-certificate .cert-item__image { height: 280px; } } @media (max-width: 768px) { .b2c-certificate .cert-item__image { height: 260px; } } @media (max-width: 480px) { .b2c-certificate .cert-item__image { height: 220px; } } .b2c-certificate .cert-item__image img { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; display: block; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .b2c-certificate .cert-item__image::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 113, 74, 0); -webkit-transition: background 0.3s ease; transition: background 0.3s ease; z-index: 1; pointer-events: none; } .b2c-certificate .cert-item__title { margin: 20px 0 0; font-size: 24px; font-weight: 600; line-height: 150%; color: #312020; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 1440px) { .b2c-certificate .cert-item__title { font-size: 22px; margin: 18px 0 0; } } @media (max-width: 1280px) { .b2c-certificate .cert-item__title { font-size: 21px; margin: 16px 0 0; } } @media (max-width: 992px) { .b2c-certificate .cert-item__title { font-size: 20px; margin: 16px 0 0; } } @media (max-width: 768px) { .b2c-certificate .cert-item__title { font-size: 20px; line-height: 140%; margin: 14px 0 0; } } @media (max-width: 480px) { .b2c-certificate .cert-item__title { font-size: 18px; line-height: 140%; margin: 12px 0 0; } } .b2c-certificate .cert-item:hover { -webkit-transform: translateY(-6px); transform: translateY(-6px); } @media (max-width: 768px) { .b2c-certificate .cert-item:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); } } @media (max-width: 480px) { .b2c-certificate .cert-item:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } .b2c-certificate .cert-item:hover .cert-item__image { border-color: #00704a; border-width: 2px; -webkit-box-shadow: 0 8px 24px rgba(0, 113, 74, 0.2); box-shadow: 0 8px 24px rgba(0, 113, 74, 0.2); } @media (max-width: 768px) { .b2c-certificate .cert-item:hover .cert-item__image { -webkit-box-shadow: 0 4px 12px rgba(0, 113, 74, 0.15); box-shadow: 0 4px 12px rgba(0, 113, 74, 0.15); } } @media (max-width: 480px) { .b2c-certificate .cert-item:hover .cert-item__image { -webkit-box-shadow: 0 2px 8px rgba(0, 113, 74, 0.1); box-shadow: 0 2px 8px rgba(0, 113, 74, 0.1); } } .b2c-certificate .cert-item:hover .cert-item__image img { -webkit-transform: scale(1.02); transform: scale(1.02); } @media (max-width: 768px) { .b2c-certificate .cert-item:hover .cert-item__image img { -webkit-transform: scale(1.02); transform: scale(1.02); } } @media (max-width: 480px) { .b2c-certificate .cert-item:hover .cert-item__image img { -webkit-transform: scale(1.02); transform: scale(1.02); } } .b2c-certificate .cert-item:hover .cert-item__image::before { background: rgba(0, 113, 74, 0.05); } .b2c-certificate .cert-item:hover .cert-item__title { color: #00704a; } .b2c-certificate .cert-item.is-active .cert-item__image { border-color: #00704a; border-width: 2px; -webkit-box-shadow: 0 4px 12px rgba(0, 113, 74, 0.15); box-shadow: 0 4px 12px rgba(0, 113, 74, 0.15); } .b2c-certificate .cert-item.is-active .cert-item__title { color: #00704a; } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * B2C Customer Testimonials Section Styles * Updated: Match HTML structure with centered Swiper layout */ .b2c-customer { padding: 64px 0; } .b2c-customer .swiper { padding: 2rem 0; } @media screen and (max-width: 1770px) { .b2c-customer { padding: 56px 0; } } @media screen and (max-width: 1440px) { .b2c-customer { padding: 48px 0; } } @media screen and (max-width: 1200px) { .b2c-customer { padding: 42px 0; } } @media screen and (max-width: 992px) { .b2c-customer { padding: 36px 0; } } @media screen and (max-width: 768px) { .b2c-customer { padding: 32px 0; } } @media screen and (max-width: 576px) { .b2c-customer { padding: 28px 0; } } .b2c-customer__title { font-size: 36px; font-weight: 700; color: #00704a; margin: 0 0 40px; font-family: "Montserrat", sans-serif; } @media screen and (max-width: 1770px) { .b2c-customer__title { font-size: 36px; } } @media screen and (max-width: 1440px) { .b2c-customer__title { font-size: 32px; } } @media screen and (max-width: 1200px) { .b2c-customer__title { font-size: 28px; } } @media screen and (max-width: 992px) { .b2c-customer__title { font-size: 24px; } } @media screen and (max-width: 768px) { .b2c-customer__title { font-size: 22px; } } @media screen and (max-width: 576px) { .b2c-customer__title { font-size: 20px; } } .b2c-customer__slider { position: relative; padding-bottom: 50px; } .b2c-customer__slider::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 225px; background: -webkit-gradient(linear, left top, right top, from(rgb(255, 255, 255)), color-stop(40%, rgba(255, 255, 255, 0.5)), color-stop(70%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0.3) 70%, rgba(255, 255, 255, 0) 100%); pointer-events: none; z-index: 10; } @media screen and (max-width: 1770px) { .b2c-customer__slider::before { width: 203px; } } @media screen and (max-width: 1440px) { .b2c-customer__slider::before { width: 180px; } } @media screen and (max-width: 1200px) { .b2c-customer__slider::before { width: 158px; } } @media screen and (max-width: 992px) { .b2c-customer__slider::before { width: 135px; } } @media screen and (max-width: 768px) { .b2c-customer__slider::before { display: none; } } .b2c-customer__slider::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 225px; background: -webkit-gradient(linear, right top, left top, from(rgb(255, 255, 255)), color-stop(30%, rgba(255, 255, 255, 0.9)), color-stop(60%, rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0))); background: linear-gradient(270deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.9) 30%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0) 100%); pointer-events: none; z-index: 10; } @media screen and (max-width: 1770px) { .b2c-customer__slider::after { width: 203px; } } @media screen and (max-width: 1440px) { .b2c-customer__slider::after { width: 180px; } } @media screen and (max-width: 1200px) { .b2c-customer__slider::after { width: 158px; } } @media screen and (max-width: 992px) { .b2c-customer__slider::after { width: 135px; } } @media screen and (max-width: 768px) { .b2c-customer__slider::after { width: 113px; } } @media screen and (max-width: 480px) { .b2c-customer__slider::after { display: none; } } .b2c-customer__slider .swiper-pagination { bottom: 0; } .b2c-customer__slider .swiper-button-prev, .b2c-customer__slider .swiper-button-next { color: #00704a; width: 44px; height: 44px; background: #ffffff; border-radius: 50%; -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } @media screen and (max-width: 992px) { .b2c-customer__slider .swiper-button-prev, .b2c-customer__slider .swiper-button-next { width: 36px; height: 36px; } } @media screen and (max-width: 768px) { .b2c-customer__slider .swiper-button-prev, .b2c-customer__slider .swiper-button-next { display: none; } } .b2c-customer__slider .swiper-button-prev::after, .b2c-customer__slider .swiper-button-next::after { font-size: 18px; } @media screen and (max-width: 992px) { .b2c-customer__slider .swiper-button-prev::after, .b2c-customer__slider .swiper-button-next::after { font-size: 14px; } } .b2c-customer__slider .swiper-button-prev:hover, .b2c-customer__slider .swiper-button-next:hover { background: #00704a; color: #ffffff; } .b2c-customer__slider .swiper-pagination-bullet { background: #d4d4d4; opacity: 1; } .b2c-customer__slider .swiper-pagination-bullet-active { background: #00704a; } .b2c-customer__card { background: #ffffff; border-radius: 16px; padding: 28px; height: 100%; min-height: 300px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-shadow: 8px 8px 24px 0 rgba(0, 0, 0, 0.25); box-shadow: 8px 8px 24px 0 rgba(0, 0, 0, 0.25); -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .b2c-customer__card:hover { -webkit-transform: translateY(-8px); transform: translateY(-8px); -webkit-box-shadow: 0 20px 48px rgba(49, 32, 32, 0.2); box-shadow: 0 20px 48px rgba(49, 32, 32, 0.2); } .b2c-customer__card:hover .b2c-customer__avatar { -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-box-shadow: 0 4px 12px rgba(0, 112, 74, 0.2); box-shadow: 0 4px 12px rgba(0, 112, 74, 0.2); } @media screen and (max-width: 1440px) { .b2c-customer__card { padding: 24px; border-radius: 14px; min-height: 280px; } } @media screen and (max-width: 1200px) { .b2c-customer__card { padding: 20px; border-radius: 12px; min-height: 280px; } } @media screen and (max-width: 992px) { .b2c-customer__card { padding: 18px; min-height: 280px; } } @media screen and (max-width: 768px) { .b2c-customer__card { padding: 16px; border-radius: 10px; min-height: auto; } } .b2c-customer__quote-icon { width: 32px; height: 32px; margin-bottom: 16px; opacity: 0.3; } @media screen and (max-width: 1200px) { .b2c-customer__quote-icon { width: 28px; height: 28px; margin-bottom: 14px; } } @media screen and (max-width: 992px) { .b2c-customer__quote-icon { width: 24px; height: 24px; margin-bottom: 12px; } } .b2c-customer__quote-icon img { width: 100%; height: 100%; display: block; } .b2c-customer__quote-text { font-size: 18px; color: #312020; margin: 0 0 16px; font-family: "Be Vietnam Pro", sans-serif; line-height: 1.6; font-style: italic; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } @media screen and (max-width: 1440px) { .b2c-customer__quote-text { font-size: 14px; margin-bottom: 14px; } } @media screen and (max-width: 1200px) { .b2c-customer__quote-text { font-size: 13px; margin-bottom: 12px; } } @media screen and (max-width: 992px) { .b2c-customer__quote-text { font-size: 12px; margin-bottom: 10px; } } .b2c-customer__rating { margin-bottom: 16px; } @media screen and (max-width: 992px) { .b2c-customer__rating { margin-bottom: 12px; } } .b2c-customer__star { font-size: 18px; color: #d4d4d4; } @media screen and (max-width: 1200px) { .b2c-customer__star { font-size: 16px; } } @media screen and (max-width: 992px) { .b2c-customer__star { font-size: 14px; } } .b2c-customer__star.is-filled { color: #ffd700; } .b2c-customer__divider { height: 1px; background: #e5e5e5; margin: 20px 0; } @media screen and (max-width: 1200px) { .b2c-customer__divider { margin: 16px 0; } } @media screen and (max-width: 992px) { .b2c-customer__divider { margin: 14px 0; } } .b2c-customer__author { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; } @media screen and (max-width: 992px) { .b2c-customer__author { gap: 10px; } } .b2c-customer__avatar { width: 87px; height: 87px; border-radius: 20px; overflow: hidden; -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (max-width: 1200px) { .b2c-customer__avatar { width: 64px; height: 64px; } } @media screen and (max-width: 992px) { .b2c-customer__avatar { width: 48px; height: 48px; } } .b2c-customer__avatar img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .b2c-customer__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .b2c-customer__name { font-size: 20px; font-weight: 600; color: #312020; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 1200px) { .b2c-customer__name { font-size: 18px; } } @media screen and (max-width: 992px) { .b2c-customer__name { font-size: 16px; } } .b2c-customer__position { font-size: 16px; color: #737373; font-family: "Be Vietnam Pro", sans-serif; margin-bottom: 2px; } @media screen and (max-width: 1200px) { .b2c-customer__position { font-size: 14px; } } @media screen and (max-width: 992px) { .b2c-customer__position { font-size: 14px; } } .b2c-customer__organization { font-size: 16px; color: #737373; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 1200px) { .b2c-customer__organization { font-size: 14px; } } @media screen and (max-width: 992px) { .b2c-customer__organization { font-size: 14px; } } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /** * B2C Consultation Request Section Styles */ .b2c-consultation { padding: 64px 0; position: relative; overflow: hidden; } .b2c-consultation::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 100%; background-image: url("/wp-content/themes/one-lab/assets/images/consultation.webp"); background-size: cover; background-position: center bottom; background-repeat: no-repeat; z-index: -1; } @media screen and (max-width: 992px) { .b2c-consultation::before { height: 50%; } } @media screen and (max-width: 768px) { .b2c-consultation::before { height: 40%; opacity: 0.08; } } .b2c-consultation .container { position: relative; z-index: 1; } @media screen and (max-width: 1770px) { .b2c-consultation { padding: 56px 0; } } @media screen and (max-width: 1440px) { .b2c-consultation { padding: 48px 0; } } @media screen and (max-width: 1200px) { .b2c-consultation { padding: 42px 0; } } @media screen and (max-width: 992px) { .b2c-consultation { padding: 36px 0; } } @media screen and (max-width: 768px) { .b2c-consultation { padding: 32px 0; } } @media screen and (max-width: 576px) { .b2c-consultation { padding: 28px 0; } } .b2c-consultation__wrapper { display: grid; grid-template-columns: 1fr; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .b2c-consultation__title { font-size: 36px; font-weight: 700; color: #00704a; margin: 0 0 20px; font-family: "Montserrat", sans-serif; } @media screen and (max-width: 1770px) { .b2c-consultation__title { font-size: 32px; margin-bottom: 18px; } } @media screen and (max-width: 1440px) { .b2c-consultation__title { font-size: 30px; margin-bottom: 16px; } } @media screen and (max-width: 1200px) { .b2c-consultation__title { font-size: 28px; } } @media screen and (max-width: 992px) { .b2c-consultation__title { font-size: 26px; } } @media screen and (max-width: 768px) { .b2c-consultation__title { font-size: 24px; margin-bottom: 12px; } } @media screen and (max-width: 576px) { .b2c-consultation__title { font-size: 22px; } } .b2c-consultation__description { font-size: 16px; line-height: 1.6; color: #737373; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 1440px) { .b2c-consultation__description { font-size: 15px; } } @media screen and (max-width: 992px) { .b2c-consultation__description { font-size: 14px; } } .b2c-consultation__description p { margin: 0 0 12px; } .b2c-consultation__description p:last-child { margin-bottom: 0; } .b2c-consultation__form-container { border-radius: 16px; } @media screen and (max-width: 1440px) { .b2c-consultation__form-container { padding: 28px; border-radius: 14px; } } @media screen and (max-width: 1200px) { .b2c-consultation__form-container { padding: 24px; border-radius: 12px; } } @media screen and (max-width: 768px) { .b2c-consultation__form-container { padding: 20px; } } @media screen and (max-width: 576px) { .b2c-consultation__form-container { padding: 16px; border-radius: 10px; } } .b2c-consultation__form .form-flex-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 2rem; margin-bottom: 24px; background-color: #fcfcfc; padding: 2rem; border-radius: 8px; } @media screen and (max-width: 992px) { .b2c-consultation__form .form-flex-wrapper { gap: 20px; margin-bottom: 20px; } } @media screen and (max-width: 768px) { .b2c-consultation__form .form-flex-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; margin-bottom: 16px; } } .b2c-consultation__form .form-section { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .b2c-consultation__form .form-section--customer { width: 40%; } .b2c-consultation__form .form-section--needs { width: 60%; } .b2c-consultation__form .form-section--needs .form-group { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .b2c-consultation__form .form-section--needs .form-group textarea { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } @media screen and (max-width: 768px) { .b2c-consultation__form .form-section--customer { width: 100%; } .b2c-consultation__form .form-section--needs { width: 100%; } } .b2c-consultation__form .form-section-header { margin-bottom: 16px; } @media screen and (max-width: 992px) { .b2c-consultation__form .form-section-header { margin-bottom: 14px; } } @media screen and (max-width: 768px) { .b2c-consultation__form .form-section-header { margin-bottom: 12px; } } .b2c-consultation__form .form-section-header h3 { font-size: 24px; font-weight: 600; color: #0e202a; margin: 0; font-family: "Montserrat", sans-serif; } @media screen and (max-width: 1200px) { .b2c-consultation__form .form-section-header h3 { font-size: 20px; } } @media screen and (max-width: 768px) { .b2c-consultation__form .form-section-header h3 { font-size: 18px; } } .b2c-consultation__form .form-group { margin-bottom: 16px; } @media screen and (max-width: 992px) { .b2c-consultation__form .form-group { margin-bottom: 14px; } } @media screen and (max-width: 768px) { .b2c-consultation__form .form-group { margin-bottom: 12px; } } .b2c-consultation__form .form-group:last-child { margin-bottom: 0; } .b2c-consultation__form .form-group label { display: block; font-size: 14px; font-weight: 500; color: #312020; margin-bottom: 8px; font-family: "Be Vietnam Pro", sans-serif; } @media screen and (max-width: 992px) { .b2c-consultation__form .form-group label { font-size: 13px; margin-bottom: 6px; } } .b2c-consultation__form .form-group label .required { color: #e53e3e; margin-left: 2px; } .b2c-consultation__form .form-group input[type=text], .b2c-consultation__form .form-group input[type=tel], .b2c-consultation__form .form-group textarea { width: 100%; padding: 12px 16px; border: 1px solid #d4d4d4; border-radius: 8px; font-size: 15px; font-family: "Be Vietnam Pro", sans-serif; color: #312020; background: #ffffff; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05); } @media screen and (max-width: 1200px) { .b2c-consultation__form .form-group input[type=text], .b2c-consultation__form .form-group input[type=tel], .b2c-consultation__form .form-group textarea { padding: 10px 14px; font-size: 14px; } } @media screen and (max-width: 768px) { .b2c-consultation__form .form-group input[type=text], .b2c-consultation__form .form-group input[type=tel], .b2c-consultation__form .form-group textarea { padding: 9px 12px; font-size: 13px; border-radius: 6px; } } .b2c-consultation__form .form-group input[type=text]::-webkit-input-placeholder, .b2c-consultation__form .form-group input[type=tel]::-webkit-input-placeholder, .b2c-consultation__form .form-group textarea::-webkit-input-placeholder { color: #d4d4d4; } .b2c-consultation__form .form-group input[type=text]::-moz-placeholder, .b2c-consultation__form .form-group input[type=tel]::-moz-placeholder, .b2c-consultation__form .form-group textarea::-moz-placeholder { color: #d4d4d4; } .b2c-consultation__form .form-group input[type=text]:-ms-input-placeholder, .b2c-consultation__form .form-group input[type=tel]:-ms-input-placeholder, .b2c-consultation__form .form-group textarea:-ms-input-placeholder { color: #d4d4d4; } .b2c-consultation__form .form-group input[type=text]::-ms-input-placeholder, .b2c-consultation__form .form-group input[type=tel]::-ms-input-placeholder, .b2c-consultation__form .form-group textarea::-ms-input-placeholder { color: #d4d4d4; } .b2c-consultation__form .form-group input[type=text]::placeholder, .b2c-consultation__form .form-group input[type=tel]::placeholder, .b2c-consultation__form .form-group textarea::placeholder { color: #d4d4d4; } .b2c-consultation__form .form-group input[type=text]:focus, .b2c-consultation__form .form-group input[type=tel]:focus, .b2c-consultation__form .form-group textarea:focus { outline: none; border-color: #00704a; -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(31, 165, 110, 0.1); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(31, 165, 110, 0.1); } .b2c-consultation__form .form-group input[type=text].error, .b2c-consultation__form .form-group input[type=tel].error, .b2c-consultation__form .form-group textarea.error { border-color: #e53e3e; } .b2c-consultation__form .form-group textarea { resize: vertical; min-height: 120px; } @media screen and (max-width: 992px) { .b2c-consultation__form .form-group textarea { min-height: 100px; } } @media screen and (max-width: 768px) { .b2c-consultation__form .form-group textarea { min-height: 80px; } } .form-section--needs .b2c-consultation__form .form-group textarea { height: calc(100% - 16px); min-height: 200px; resize: none; } @media screen and (max-width: 992px) { .form-section--needs .b2c-consultation__form .form-group textarea { min-height: 180px; } } @media screen and (max-width: 768px) { .form-section--needs .b2c-consultation__form .form-group textarea { min-height: 80px; height: auto; resize: vertical; } } .b2c-consultation__form .form-actions { margin-top: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media screen and (max-width: 992px) { .b2c-consultation__form .form-actions { margin-top: 20px; } } @media screen and (max-width: 768px) { .b2c-consultation__form .form-actions { margin-top: 16px; } } .b2c-consultation__form .form-actions .btn-submit { padding: 16px 24px; background: #2f6e4d; color: #ffffff; border: none; border-radius: 8px; font-size: 24px; font-weight: 600; font-family: "Be Vietnam Pro", sans-serif; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8px; } @media screen and (max-width: 1200px) { .b2c-consultation__form .form-actions .btn-submit { padding: 12px 20px; font-size: 20px; } } @media screen and (max-width: 768px) { .b2c-consultation__form .form-actions .btn-submit { padding: 10px 16px; font-size: 18px; border-radius: 6px; } } .b2c-consultation__form .form-actions .btn-submit:hover:not(:disabled) { background: #00723f; -webkit-transform: translateY(-2px); transform: translateY(-2px); } .b2c-consultation__form .form-actions .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; } .b2c-consultation__form .form-actions .btn-submit .btn-loader .spinner { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #ffffff; border-radius: 50%; display: inline-block; -webkit-animation: spin 0.6s linear infinite; animation: spin 0.6s linear infinite; } @keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*-------------------------------------------------------------- # Plugins --------------------------------------------------------------*/ /* Jetpack infinite scroll --------------------------------------------- */ /* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */ .infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer { display: none; } /* Re-display the Theme Footer when Infinite Scroll has reached its end. */ .infinity-end.neverending .site-footer { display: block; } /*-------------------------------------------------------------- # Utilities --------------------------------------------------------------*/ /* Accessibility --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #ffffff; border-radius: 3px; -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #00704a; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* Do not show the outline on the skip link target. */ #primary[tabindex="-1"]:focus { outline: 0; } /* Alignments --------------------------------------------- */ /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ .alignleft { /*rtl:ignore*/ float: left; /*rtl:ignore*/ margin-right: 1.5em; margin-bottom: 1.5em; } .alignright { /*rtl:ignore*/ float: right; /*rtl:ignore*/ margin-left: 1.5em; margin-bottom: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; } /*! Theme Name: One Lab Theme URI: http://underscores.me/ Author: hieptv Author URI: https://axalize.com/ Description: Wordpress website Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: one-lab Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. One Lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ @media (max-width: 768px) { html { font-size: 14px; } body { font-size: 0.95rem; } .main-navigation.toggled ul { width: 280px; padding: 20px 12px; } .main-navigation.toggled ul li a { font-size: 14px; padding: 10px 12px; } .service-card__content { padding: 12px; } .service-card__title { font-size: 18px !important; margin-bottom: 8px !important; } .service-card__price { gap: 6px !important; font-size: 20px !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .service-card__description { font-size: 14px !important; margin-bottom: 16px !important; } .service-card__actions .btn { font-size: 14px; padding: 8px 12px; } } @media (max-width: 576px) { html { font-size: 13px; } body { font-size: 0.92rem; } .main-navigation.toggled ul { width: 260px; padding: 16px 12px; } .service-card__content { padding: 10px; } .service-card__title { font-size: 16px !important; } .service-card__price { font-size: 18px !important; } .service-card__description { font-size: 13px !important; margin-bottom: 12px !important; } .service-card__actions { gap: 8px; } .service-card__actions .btn { height: 32px; font-size: 13px; padding: 6px 10px; } } @media (max-width: 420px) { html { font-size: 12px; } .main-navigation.toggled ul { width: 240px; } .service-card__title { font-size: 15px !important; } .service-card__description { font-size: 12px !important; margin-bottom: 10px !important; } .service-card__actions .btn { width: 100%; height: 36px; } }