/* Template Name: Medixi Template URL: https://html.vecurosoft.com/medixi Description: Medixi - Medical and Health Care HTML Template Author: Vecuro Author URI: https://themeforest.net/user/vecuro_themes Version: 1.0.0 */ /*================================= CSS Index Here ==================================*/ /* 01. Theme Base 1.1. Variable 1.2. Mixin 1.3. Function 1.4. Typography 1.5. Extend 02. Reset 2.1. Container 2.2. Grid 2.3. Input 2.4. Slick Slider 2.5. Mobile Menu 2.6. Date & Time Picker 03. Utilities 3.1. Preloader 3.2. Buttons 3.3. Titles 3.4. Common 3.6. Font 3.7. Background 3.8. Text Color 3.9. Overlay 3.10. Animation 3.11. Flaticon 04. Template Style 4.1. Widget 4.2. Header 4.3. Footer 4.4. Breadcumb 4.5. Popup Search 4.6. Popup Side Menu 4.7. Pagination 4.8. Blog 4.9. Comments 4.10. Hero Area 4.11. About 4.12. Services 4.13. Team 4.14. Form Style 4.15. Testimonial 4.16. Skill Area 4.17. Brand 4.18. Accordion 4.19. Project 4.20. Features 4.21. Contact 4.22. Woocommerce 4.23. Shop 4.24. Simple Sections 4.25. Event 05. Spacing */ /*================================= CSS Index End ==================================*/ /*================================= 01. Theme Base ==================================*/ /*------------------- 1.1. Variable-------------------*/ :root { --theme-color: #07ccec; --theme-color2: #2cb624; --theme-color3: #0033a0; --theme-color4: #1296db; --title-color: #27477d; --title-color2: #000000; --body-color: #888c92; --body-color2: #555555; --secondary-color: #cdf8ff; --smoke-color: #f3f6f7; --light-color: #afafaf; --black-color: #000000; --dark-color: #060d0f; --white-color: #ffffff; --yellow-color: #fec624; --success-color: #28a745; --error-color: #dc3545; --border-color: rgba(0,0,0,0.10); --title-font: "Quicksand", sans-serif; --body-font: "Roboto", sans-serif; --subtitle-font: "Dancing Script", cursive; --icon-font: "Font Awesome 5 Pro"; --flaticon: "Flaticon"; --ripple-ani-duration: 5s; } .home-five { --theme-color: #992222; --title-color: #000000; --body-color: #555555; } /*------------------- 1.2. Mixin -------------------*/ /*------------------- 1.3. Function -------------------*/ /*------------------- 1.4. Typography -------------------*/ html, body { scroll-behavior: auto !important; } body { font-family: var(--body-font); font-size: 16px; font-weight: 400; color: var(--body-color); line-height: 26px; overflow-x: hidden; -webkit-font-smoothing: antialiased; } iframe { border: none; width: 100%; } .slick-slide:focus, button:focus, a:focus, a:active, input, input:hover, input:focus, input:active, textarea, textarea:hover, textarea:focus, textarea:active { outline: none; } input:focus { outline: none; box-shadow: none; } img:not([draggable]), embed, object, video { max-width: 100%; height: auto; } ul { list-style-type: disc; } ol { list-style-type: decimal; } table { margin: 0 0 1.5em; width: 100%; border-collapse: collapse; border-spacing: 0; } th { font-weight: 500; } td, th { border-top: 1px solid var(--border-color); padding: 9px; } a { color: var(--theme-color); text-decoration: none; outline: 0; transition: all ease 0.4s; } a:hover { color: var(--title-color); } a:active, a:focus, a:hover, a:visited { text-decoration: none; outline: 0; } button { transition: all ease 0.4s; } img { border: none; max-width: 100%; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, p a, span a { font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; } p { margin: 0 0 15px 0; color: var(--body-color); line-height: 1.7; } .h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6 { font-family: var(--title-font); color: var(--title-color); text-transform: none; font-weight: 700; line-height: 1.3; margin: 0 0 15px 0; } .h1, h1 { font-size: 48px; } .h2, h2 { font-size: 36px; } .h3, h3 { font-size: 30px; } .h4, h4 { font-size: 24px; } .h5, h5 { font-size: 18px; } .h6, h6 { font-size: 16px; } /* Large devices */ @media (max-width: 1199px) { .h1, h1 { font-size: 42px; } .h2, h2 { font-size: 32px; } .h3, h3 { font-size: 26px; } .h4, h4 { font-size: 22px; } } /* Medium devices */ @media (max-width: 992px) { .h1, h1 { font-size: 38px; } .h2, h2 { font-size: 28px; } .h3, h3 { font-size: 24px; } .h4, h4 { font-size: 20px; } } /* Small devices */ @media (max-width: 767px) { .h1, h1 { font-size: 32px; } .h2, h2 { font-size: 24px; } .h3, h3 { font-size: 22px; } } /* Extra small devices */ @media (max-width: 576px) { .h1, h1 { font-size: 24px; } .h2, h2 { font-size: 22px; } } /*------------------- 1.5. Extend -------------------*/ /*================================= 02. Reset ==================================*/ /*------------------- 2.1. Container -------------------*/ @media only screen and (min-width: 1300px) { .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { --bs-gutter-x: .75rem; max-width: calc(1220px + var(--bs-gutter-x) * 2); } .home-five .container-xxl, .home-five .container-xl, .home-five .container-lg, .home-five .container-md, .home-five .container-sm, .home-five .container, .home-four .container-xxl, .home-four .container-xl, .home-four .container-lg, .home-four .container-md, .home-four .container-sm, .home-four .container { --bs-gutter-x: .75rem; max-width: calc(1295px + var(--bs-gutter-x) * 2); } } @media only screen and (max-width: 1600px) { .container-fluid.px-0:not(.default) { padding-left: 15px !important; padding-right: 15px !important; } .container-fluid.px-0:not(.default) .row { margin-left: 0 !important; margin-right: 0 !important; } } @media (min-width: 1600px) { .custom-container { max-width: 1620px; } .container-style1 { max-width: 1400px; } .vs-container { max-width: 1565px; margin-left: 0; margin-right: auto; /* Hight Resoulation devices */ } } @media (min-width: 1600px) and (min-width: 1921px) { .vs-container { margin-left: auto; } } @media (min-width: 1600px) and (max-width: 1920px) { .home-four .container-style2, .home-five .container-style2, .container-style2 { margin-left: auto; margin-right: 0; padding-right: 0; overflow: hidden; max-width: calc(1586px + var(--bs-gutter-x)); } } @media (max-width: 1599.99px) { .d-none-xxxl { display: none !important; } .vs-container { max-width: 100%; } } .carousel-container { max-width: 1320px; padding: 0 50px; margin: 0 auto; overflow: hidden; /* Medium Large devices */ /* Large devices */ /* Medium devices */ /* Small devices */ /* Extra small devices */ } @media (max-width: 1399px) { .carousel-container { max-width: 1200px; padding: 0 45px; } } @media (max-width: 1199px) { .carousel-container { max-width: 980px; padding: 0 25px; } } @media (max-width: 992px) { .carousel-container { max-width: 740px; padding: 0 25px; } } @media (max-width: 767px) { .carousel-container { max-width: 560px; padding: 0 25px; } } @media (max-width: 576px) { .carousel-container { max-width: 100%; padding: 0 15px; } } .carousel-container .slick-list { overflow: visible; } .carousel-container .slick-slide { opacity: 0; visibility: hidden; transition: all ease 0.4s; } .carousel-container .slick-slide.slick-active { opacity: 1; visibility: visible; } /*------------------- 2.2. Grid -------------------*/ .slick-track > [class*=col] { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) / 2); padding-left: calc(var(--bs-gutter-x) / 2); margin-top: var(--bs-gutter-y); } .gx-2px { --bs-gutter-x: 2px; } @media (min-width: 1399px) { .gx-20 { --bs-gutter-x: 20px; } .gx-30 { --bs-gutter-x: 30px; } .gx-40 { --bs-gutter-x: 40px; } .gx-60 { --bs-gutter-x: 60px; } } /*------------------- 2.3. Input -------------------*/ .form-select, .form-control { border-radius: 0; height: 60px; padding: 0 30px; padding-right: 60px; border: 1px solid #e3e3e3; color: var(--body-color); background-color: var(--white-color); border-radius: 5px; font-weight: 400; } .form-select:focus, .form-control:focus { outline: 0; box-shadow: none; background-color: var(--white-color); border-color: #e3e3e3; } .form-select::-moz-placeholder, .form-control::-moz-placeholder { color: var(--body-color); text-transform: capitalize; } .form-select::-moz-placeholder, .form-control::-moz-placeholder { color: var(--body-color); text-transform: capitalize; } .form-select::placeholder, .form-control::placeholder { color: var(--body-color); text-transform: capitalize; } .form-select.style3, .form-select.style2, .form-control.style3, .form-control.style2 { height: 60px; color: var(--title-color); font-size: 14px; border-radius: 9999px; border: 2px solid #e5e9ee; padding-left: 30px; transition: all ease 0.4s; } .form-select.style3 ~ i, .form-select.style2 ~ i, .form-control.style3 ~ i, .form-control.style2 ~ i { font-size: 16px; top: 22px; color: var(--title-color); right: calc(var(--bs-gutter-x) + 15px); } .form-select.style3::-moz-placeholder, .form-select.style2::-moz-placeholder, .form-control.style3::-moz-placeholder, .form-control.style2::-moz-placeholder { color: var(--title-color); } .form-select.style3::-moz-placeholder, .form-select.style2::-moz-placeholder, .form-control.style3::-moz-placeholder, .form-control.style2::-moz-placeholder { color: var(--title-color); } .form-select.style3::placeholder, .form-select.style2::placeholder, .form-control.style3::placeholder, .form-control.style2::placeholder { color: var(--title-color); } .form-select.style3:focus, .form-select.style2:focus, .form-control.style3:focus, .form-control.style2:focus { border-color: var(--theme-color); box-shadow: 0px 5px 40px 0px rgba(39, 71, 125, 0.1); } .form-select.style3, .form-control.style3 { background-color: transparent; border: 2px solid #dee4eb; background-color: var(--white-color); } .form-select.style3:focus, .form-control.style3:focus { border-color: var(--theme-color); background-color: var(--white-color); } textarea.form-control.style3, textarea.form-control.style2 { border-radius: 20px; } .form-select { cursor: pointer; background-position: right 1.3rem center; } .form-control.shadow, .form-select.shadow { box-shadow: 0px 10px 38px 2px rgba(0, 0, 0, 0.05) !important; } input.form-control::-webkit-outer-spin-button, input.form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input.form-control[type=number] { -moz-appearance: textfield; } textarea.form-control { min-height: 150px; padding-top: 17px; padding-bottom: 17px; } input[type=checkbox] { visibility: hidden; opacity: 0; display: inline-block; vertical-align: middle; width: 0; height: 0; display: none; } input[type=checkbox]:checked ~ label:before { content: "\f00c"; color: var(--theme-color); border-color: var(--theme-color); } input[type=checkbox] ~ label { position: relative; padding-left: 30px; cursor: pointer; display: block; } input[type=checkbox] ~ label:before { content: ""; font-family: var(--icon-font); font-weight: 700; position: absolute; left: 0; top: 6px; background-color: var(--white-color); border: 1px solid var(--border-color); height: 18px; width: 18px; line-height: 18px; text-align: center; font-size: 12px; } input[type=radio] { visibility: hidden; opacity: 0; display: inline-block; vertical-align: middle; width: 0; height: 0; display: none; } input[type=radio] ~ label { position: relative; padding-left: 28px; cursor: pointer; line-height: 1; display: inline-block; font-weight: 600; margin-bottom: 0; } input[type=radio] ~ label::before { content: "\f111"; position: absolute; font-family: var(--icon-font); left: 0; top: 1px; width: 15px; height: 15px; padding-left: 0.5px; font-size: 0.29rem; line-height: 14.9px; text-align: center; border: 1px solid var(--theme-color); border-radius: 100%; font-weight: 700; background: var(--white-color); color: transparent; transition: all 0.2s ease; } input[type=radio]:checked ~ label::before { border-color: var(--theme-color); background-color: var(--theme-color); color: var(--white-color); } label { margin-bottom: 0.6em; text-transform: capitalize; margin-top: -0.3em; display: block; } .form-group { margin-bottom: var(--bs-gutter-x); position: relative; } .form-group > i { position: absolute; right: 30px; top: 20px; font-size: 18px; color: var(--theme-color); } .form-control.is-invalid, .was-validated .form-control:invalid { border: 1px solid var(--error-color) !important; background-position: right calc(0.375em + 0.8875rem) center; background-image: none; } .form-control.is-invalid:focus, .was-validated .form-control:invalid:focus { outline: 0; box-shadow: none; } textarea.form-control.is-invalid { background-position: top calc(0.375em + 0.5875rem) right calc(0.375em + 0.8875rem); } .row.no-gutters > .form-group { margin-bottom: 0; } .form-messages { display: none; } .form-messages.mb-0 * { margin-bottom: 0; } .form-messages.success { color: var(--success-color); display: block; } .form-messages.error { color: var(--error-color); display: block; } .color-select input { display: none; } .color-select input ~ label { margin: 0; padding: 5px; width: 30px; height: 30px; background-color: transparent; border-radius: 50%; vertical-align: middle; transition: all ease 0.4s; } .color-select input ~ label span { display: inline-block; border-radius: inherit; width: 100%; height: 100%; } .color-select input ~ label:before { display: none; } .color-select input:checked ~ label { background-color: var(--white-color); box-shadow: 0px 10px 42.75px 2.25px rgba(0, 0, 0, 0.2); } .quantity { position: relative; display: inline-block; vertical-align: middle; } .quantity input { width: 85px; height: 55px; text-align: center; border: 1px solid var(--secondary-color); color: var(--title-color); font-weight: 600; font-size: 18px; padding-left: 0; padding-right: 30px; /* Firefox */ } .quantity input::-webkit-outer-spin-button, .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .quantity input[type=number] { -moz-appearance: textfield; } .quantity .qut-btn { position: absolute; top: 11px; right: 10px; padding: 0; line-height: 1; color: var(--title-color); font-size: 14px; border: none; background-color: transparent; } .quantity .qut-btn.quantity-minus { top: 30px; } .quantity .qut-btn:hover { color: var(--theme-color); } /* Extra small devices */ @media (max-width: 576px) { .form-select, .form-control { padding-right: 30px; padding-left: 15px; } } /*------------------- 2.4. Slick Slider -------------------*/ .slick-track { min-width: 100%; } .slick-slide img { display: inline-block; } .slick-dots { list-style-type: none; padding: 0; margin: 0; line-height: 0; text-align: center; } .slick-dots li { display: inline-block; margin-right: 10px; } .slick-dots li:last-child { margin-right: 0; } .slick-dots button { font-size: 0; padding: 0; background-color: var(--title-color); width: 20px; height: 8px; line-height: 0; border-radius: 9999px; border: none; opacity: 0.3; transition: all ease 0.4s; } .slick-dots button:hover { background-color: var(--theme-color); opacity: 1; } .slick-dots .slick-active button { background-color: var(--theme-color); opacity: 1; width: 40px; } .slick-arrow { --arrow-horizontal: -130px; position: absolute; left: var(--arrow-horizontal); top: 50%; width: 60px; height: 60px; line-height: 60px; border: none; background-color: var(--white-color); color: var(--theme-color); text-align: center; z-index: 4; border-radius: 50%; box-shadow: 0px 6px 37px 0px rgba(7, 204, 236, 0.2); transform: translateY(-50%); } .slick-arrow:hover { background-color: var(--theme-color); color: var(--white-color); } .slick-arrow.slick-next { left: auto; right: var(--arrow-horizontal); } .arrow-wrap .slick-arrow { opacity: 0; visibility: hidden; } .arrow-wrap:hover .slick-arrow { opacity: 1; visibility: visible; } .slide-nav1 { display: flex; align-items: center; justify-content: center; margin-top: 20px; } .slide-nav1 .slick-arrow { position: relative; --arrow-horizontal: 0; top: auto; transform: none; box-shadow: none; background-color: #faf9f9; opacity: 1; visibility: visible; font-size: 22px; order: 1; } .slide-nav1 .slick-arrow:hover { background-color: var(--theme-color); color: var(--white-color); } .slide-nav1 .slick-arrow.slick-next { order: 3; } .slide-nav1 .slick-dots { order: 2; margin: 0 20px; } .slide-nav1 .slick-dots button { border-radius: 0; background-color: var(--title-color); opacity: 1; width: 10px; height: 10px; margin-right: 5px; } .slide-nav1 .slick-dots button:hover { background-color: var(--theme-color); } .slide-nav1 .slick-dots li:last-child button { margin-right: 0; } .slide-nav1 .slick-dots .slick-active button { width: 160px; background-color: var(--theme-color); } /* Extra large devices */ @media (max-width: 1500px) { .slick-arrow { --arrow-horizontal: -20px; } } /* Medium Large devices */ @media (max-width: 1399px) { .slick-arrow { --arrow-horizontal: 40px; } } /* Medium devices */ @media (max-width: 992px) { .slide-nav1 { margin-top: 10px; } .slide-nav1 .slick-dots .slick-active button { width: 35px; background-color: var(--theme-color); } } /*------------------- 2.5. Mobile Menu -------------------*/ .vs-menu-wrapper { position: fixed; top: 0; left: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 999999; width: 0; height: 100%; transition: all ease 0.8s; } .vs-menu-wrapper .mobile-logo { padding-bottom: 25px; padding-top: 40px; display: inline-block; } .vs-menu-wrapper .vs-menu-toggle { border: none; font-size: 22px; position: absolute; right: 10px; top: 10px; padding: 0; line-height: 1; width: 33px; height: 33px; line-height: 33px; font-size: 18px; z-index: 1; color: var(--white-color); background-color: var(--theme-color); border-radius: 50%; } .vs-menu-wrapper .vs-menu-toggle:hover { background-color: var(--title-color); color: var(--white-color); } .vs-menu-wrapper .vs-menu-area { width: 100%; max-width: 310px; background-color: #fff; border-right: 3px solid var(--theme-color); height: 100%; position: relative; left: -1000px; opacity: 0; visibility: hidden; transition: all ease 1s; z-index: 1; } .vs-menu-wrapper .vs-menu-area:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; max-height: 122px; background-color: var(--theme-color); opacity: 0.1; z-index: -1; } .vs-menu-wrapper.vs-body-visible { opacity: 1; visibility: visible; width: 100%; transition: all ease 0.8s; } .vs-menu-wrapper.vs-body-visible .vs-menu-area { left: 0; opacity: 1; visibility: visible; transition: all ease 1s; } .vs-mobile-menu { overflow-y: scroll; max-height: 58vh; padding-bottom: 40px; margin-top: 33px; text-align: left; } .vs-mobile-menu .new-label { margin-left: 5px; text-transform: capitalize; position: absolute; top: 50%; transform: translateY(-50%); } .vs-mobile-menu ul { margin: 0; padding: 0 0; } .vs-mobile-menu ul li { border-bottom: 1px solid #fdedf1; list-style-type: none; } .vs-mobile-menu ul li li:first-child { border-top: 1px solid #fdedf1; } .vs-mobile-menu ul li a { display: block; position: relative; padding: 12px 0; line-height: 1; font-size: 16px; text-transform: capitalize; color: var(--title-color); } .vs-mobile-menu ul li a:before { content: "\f105"; font-family: var(--icon-font); position: relative; left: 0; top: 0; margin-right: 10px; display: inline-block; } .vs-mobile-menu ul li.vs-active > a { color: var(--theme-color); } .vs-mobile-menu ul li.vs-active > a:before { transform: rotate(90deg); } .vs-mobile-menu ul li ul li { padding-left: 20px; } .vs-mobile-menu ul li ul li:last-child { border-bottom: none; } .vs-mobile-menu ul .vs-item-has-children > a:after { content: "\f067"; font-family: var(--icon-font); position: absolute; right: 0; top: 50%; font-weight: 400; font-size: 12px; width: 25px; height: 25px; line-height: 25px; margin-top: -12.5px; display: inline-block; text-align: center; background-color: var(--smoke-color); color: var(--title-color); box-shadow: 0 0 20px -8px rgba(7, 204, 236, 0.3); border-radius: 50%; } .vs-mobile-menu ul .vs-item-has-children.vs-active > a:after { content: "\f068"; } .vs-mobile-menu > ul { padding: 0 40px; } .vs-mobile-menu > ul > li:last-child { border-bottom: none; } .mobile-menu-form { width: 100%; max-width: 230px; margin-left: auto; margin-right: auto; display: block; position: relative; } .mobile-menu-form input { height: 35px; border: none; background-color: var(--white-color); border-radius: 5px; box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.09); padding-left: 20px; padding-right: 40px; } .mobile-menu-form input:focus { box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.09); } .mobile-menu-form input::-moz-placeholder { color: var(--smoke-color); color: var(--theme-color); } .mobile-menu-form input::placeholder { color: var(--smoke-color); color: var(--theme-color); } .mobile-menu-form button { border: none; background-color: transparent; color: var(--theme-color); position: absolute; right: 13px; top: 3px; } .vs-menu-toggle { width: 50px; height: 50px; padding: 0; font-size: 24px; border: none; background-color: var(--theme-color); color: var(--white-color); display: inline-block; border-radius: 50%; } @media (max-width: 400px) { .vs-menu-wrapper .vs-menu-area { width: 100%; max-width: 270px; } .vs-mobile-menu > ul { padding: 0 20px; } } /*------------------- 2.6. Date & Time Picker -------------------*/ .xdsoft_datetimepicker { z-index: 1080; } .xdsoft_datetimepicker .xdsoft_datepicker { width: 300px; } .xdsoft_datetimepicker .xdsoft_current { color: var(--theme-color); } .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current { background-color: var(--theme-color); border-color: var(--theme-color); color: #fff; } .xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover { background-color: var(--smoke-color); } /*================================= 03. Utilities ==================================*/ /*------------------- 3.1. Preloader -------------------*/ .preloader { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; background-color: var(--white-color); } .preloader .vs-btn { padding: 10px 20px; border-radius: 0; font-size: 14px; } .preloader-inner { text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } .preloader-inner img { display: block; margin: 0 auto 5px auto; } .beat-loader { stroke: var(--theme-color); stroke-dasharray: 175; stroke-dashoffset: 350; animation: draw 1.4s linear; animation-iteration-count: infinite; } @keyframes draw { to { stroke-dashoffset: 0; } } /*------------------- 3.2. Buttons -------------------*/ .vs-btn { position: relative; display: inline-block; border: none; text-align: center; background-color: var(--theme-color); color: var(--white-color); font-size: 16px; line-height: 1; font-weight: 700; padding: 19.5px 48px; border-radius: 9999px; --icon-shape: 40px; --icon-size: 30px; } .vs-btn i { display: inline-block; } .vs-btn:hover { background-color: var(--title-color); color: var(--white-color); } .vs-btn:hover:before, .vs-btn:hover i { animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } .vs-btn.style3, .vs-btn.style2 { margin-left: calc(var(--icon-shape) / 2); } .vs-btn.style3:before, .vs-btn.style2:before { content: ""; position: absolute; left: calc(var(--icon-shape) / -2); top: 50%; width: var(--icon-shape); height: var(--icon-shape); margin-top: calc(var(--icon-shape) / -2); background-color: var(--white-color); border-radius: 50%; box-shadow: inset 0px 5px 5px 0px rgba(7, 204, 236, 0.3); transition: inherit; } .vs-btn.style3 i, .vs-btn.style2 i { position: absolute; left: calc(var(--icon-size) / -2); top: 50%; width: var(--icon-size); height: var(--icon-size); line-height: var(--icon-size); margin-top: calc(var(--icon-size) / -2); border-radius: 50%; background-color: var(--theme-color); font-size: 14px; transition: inherit; } .vs-btn.style2:hover, .vs-btn.style3 { background-color: var(--title-color); } .vs-btn.style2:hover:before, .vs-btn.style3:before { box-shadow: inset 0px 5px 5px 0px rgba(39, 71, 125, 0.3); } .vs-btn.style2:hover i, .vs-btn.style3 i { background-color: var(--title-color); } .vs-btn.style3:hover { background-color: var(--theme-color); } .vs-btn.style3:hover:before { box-shadow: inset 0px 5px 5px 0px rgba(7, 204, 236, 0.3); } .vs-btn.style3:hover i { background-color: var(--theme-color); } .vs-btn.style4 { background-color: var(--white-color); box-shadow: 0px 15px 42.75px 2.25px rgba(39, 71, 125, 0.07); color: var(--body-color); } .vs-btn.style4.active, .vs-btn.style4:hover { background-color: var(--theme-color); color: var(--white-color); box-shadow: none; } .vs-btn.hover-white:hover { background-color: var(--white-color); color: var(--title-color); } .vs-btn.hover-white i { color: var(--white-color); } .vs-btn.style5 { padding: 14.5px 29px; } .vs-btn.style6, .vs-btn.style5 { background-color: var(--theme-color2); color: var(--white-color); } .vs-btn.style6:hover, .vs-btn.style5:hover { background-color: var(--theme-color4); color: var(--white-color); } .vs-btn.style7 { background-color: var(--theme-color4); } .vs-btn.style7:hover { background-color: var(--theme-color2); } .vs-btn.style8 { background-color: var(--title-color); } .vs-btn.style8:hover { background-color: var(--theme-color2); } .vs-btn.style9 { background-color: transparent; border: 2px solid var(--white-color); padding: 16.5px 48px; } .vs-btn.style9:hover { background-color: var(--white-color); color: var(--title-color); border-color: transparent; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } .icon-btn { z-index: 1; display: inline-block; position: relative; transition: 0s; } .icon-btn i { display: inline-block; width: 45px; height: 45px; line-height: 45px; background-color: var(--white-color); color: var(--title-color); text-align: center; border-radius: 50%; transition: all ease 0.4s; z-index: 2; box-shadow: 0px 5px 10px 0px rgba(39, 71, 125, 0.1); } .icon-btn.has-badge { margin-right: 7px; } .icon-btn .badge { right: 0; transition: all ease 0.4s; } .icon-btn:hover i { background-color: var(--theme-color); box-shadow: none; color: var(--white-color); } .icon-btn:hover .badge { background-color: var(--title-color); color: var(--white-color); } .icon-btn.style2 i { background-color: var(--theme-color); color: var(--white-color); box-shadow: none; } .icon-btn.style2 i:hover { background-color: var(--title-color); } .icon-btn.style2:before { content: ""; position: absolute; left: -8px; top: -8px; bottom: -8px; right: -8px; z-index: -1; border-radius: 50%; background-color: var(--white-color); } .icon-btn.style3 i { background-color: rgba(7, 204, 236, 0.2); color: var(--title-color); box-shadow: none; } .icon-btn.style3.active i, .icon-btn.style3:hover i { background-color: var(--title-color); color: var(--white-color); } .icon-btn.style4 i { background-color: var(--theme-color); color: var(--white-color); box-shadow: none; width: 50px; height: 50px; line-height: 50px; font-size: 24px; } .icon-btn.style4 i:hover { background-color: var(--title-color); color: var(--white-color); } .play-btn { display: inline-block; position: relative; z-index: 1; --icon-size: 112px; } .play-btn > i { display: inline-block; width: var(--icon-size); height: var(--icon-size); line-height: var(--icon-size); text-align: center; background-color: var(--theme-color); color: var(--white-color); font-size: var(--icon-font-size, 2em); border-radius: 50%; z-index: 1; transition: all ease 0.4s; } .play-btn:after, .play-btn:before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: var(--theme-color); z-index: -1; border-radius: 50%; transition: all ease 0.4s; } .play-btn:after { animation-delay: 2s; } .play-btn:hover > i, .play-btn:hover::before, .play-btn:hover::after { background-color: var(--title-color); color: var(--white-color); } .play-btn.style2:before, .play-btn.style2:after { border: 2px solid var(--white-color); background-color: transparent; animation-name: ripple-md; } .play-btn.style3 { --icon-size: 64px; } .play-btn.style3:after, .play-btn.style3:before { background-color: var(--white-color); } .play-btn.style3 i { background-color: var(--white-color); color: var(--theme-color); font-size: 1.2em; transition: all ease 0.4s; } .play-btn.style3:hover i { background-color: var(--theme-color); color: var(--white-color); } .play-btn.style4:before, .play-btn.style4:after, .play-btn.style4 i { background-color: transparent; border: 2px solid var(--white-color); transition: all ease 0.4s; } .play-btn.style4:hover:before, .play-btn.style4:hover:after { border-color: var(--theme-color); } .play-btn.style4:hover i { background-color: var(--theme-color); color: var(--white-color); border-color: var(--theme-color); } .link-btn { font-weight: 500; display: inline-block; line-height: 0.8; position: relative; padding-bottom: 2px; margin-bottom: -2px; letter-spacing: 0.03em; } .link-btn i { margin-left: 7px; } .link-btn:before { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background-color: var(--theme-color); transition: all ease 0.4s; } .link-btn:hover { color: var(--theme-color); } .link-btn:hover::before { width: 100%; } .link-btn.style2::before { width: 100%; } .link-btn.style2:hover::before { width: 20%; } .scroll-btn { position: fixed; bottom: 300px; right: 30px; z-index: 94; opacity: 0; background-color: var(--theme-color); color: var(--white-color); visibility: hidden; display: inline-block; text-align: center; font-size: 20px; width: 60px; height: 60px; line-height: 60px; border-radius: 50%; transition: all ease 0.8s; /* Small devices */ } .scroll-btn:focus, .scroll-btn:hover { background-color: var(--title-color); color: var(--white-color); } .scroll-btn i { line-height: inherit; } .scroll-btn.show { bottom: 120px; opacity: 1; visibility: visible; } @media (max-width: 767px) { .scroll-btn { width: 40px; height: 40px; line-height: 40px; right: 15px; bottom: 50px; } .scroll-btn.show { bottom: 15px; } } .ripple-icon { display: inline-block; position: relative; z-index: 1; } .ripple-icon:after, .ripple-icon::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--theme-color); animation: ripple-sm 4s infinite ease-in-out; z-index: -1; border-radius: 50%; } .ripple-icon:after { animation-delay: 1.2s; } .ripple-icon i { width: 70px; height: 70px; background-color: var(--white-color); color: var(--theme-color); border: 4px solid rgba(7, 204, 236, 0.3); display: inline-block; text-align: center; line-height: 65px; font-size: 2em; border-radius: 50%; transition: all ease 0.4s; } .ripple-icon:hover:not(.hover-default) i { background-color: transparent; color: var(--white-color); border-color: var(--white-color); } .ripple-icon.hover-style2:hover i { background-color: var(--white-color); color: var(--theme-color); border-color: var(--theme-color); } .ripple-icon.style2 i { background-color: var(--theme-color); color: var(--white-color); font-size: 22px; } .ripple-icon.style2:hover i { background-color: var(--white-color); color: var(--theme-color); } .scrollToTop { position: fixed; right: 60px; bottom: 500px; opacity: 0; visibility: hidden; transition: all ease 0.4s; z-index: 96; } .scrollToTop.show { bottom: 60px; opacity: 1; visibility: visible; } .scroll-bottom { display: inline-block; } .scroll-bottom i { width: 60px; height: 70px; background-color: var(--white-color); color: var(--theme-color); line-height: 70px; text-align: center; right: 60px; bottom: 0; font-size: 1.2em; box-shadow: 0 -5px 50px 0 rgba(0, 0, 0, 0.1); transition: all ease 0.4s; } .scroll-bottom:hover i { background-color: var(--theme-color); color: var(--white-color); } .scroll-bottom.show { bottom: 0; } .search-btn2 { border: none; padding: 0; background-color: transparent; color: var(--title-color); font-weight: 600; font-size: 14px; } .search-btn2 i { margin-right: 10px; font-size: 18px; vertical-align: middle; position: relative; top: -1px; } .search-btn2:hover { color: var(--theme-color2); } .sec-bottom-btn { margin-top: 40px; text-align: center; margin-bottom: 30px; } /* Medium devices */ @media (max-width: 992px) { .play-btn.style4 { --icon-size: 90px; --icon-font-size: 22px; } } /* Small devices */ @media (max-width: 767px) { .play-btn > i { width: 60px; height: 60px; line-height: 60px; font-size: 1.2em; } .scrollToTop { right: 20px; } .scrollToTop.show { bottom: 20px; } .scroll-bottom { right: 15px; } .scroll-bottom i { width: 35px; height: 35px; line-height: 35px; } .scroll-bottom.show { bottom: 15px; } } /*------------------- 3.3. Titles -------------------*/ .section-title { margin-bottom: 75px; } .section-title .h1 { margin-top: -0.3em; } .section-title .sec-subtitle { margin-top: -0.2em; } .sec-subtitle { display: block; font-family: var(--subtitle-font); font-weight: 400; } .sec-icon { display: inline-block; position: relative; padding: 10px; border: 1px solid var(--theme-color); border-radius: 50%; --line-width: 48px; --line-height: 1px; margin-bottom: 30px; } .sec-icon:after, .sec-icon:before { content: ""; position: absolute; left: calc(var(--line-width) / -1); top: 50%; height: var(--line-height); margin-top: calc(var(--line-height) / -2); width: var(--line-width); background-color: var(--theme-color); } .sec-icon:after { right: calc(var(--line-width) / -1); left: auto; } .sec-icon i { display: inline-block; width: 42px; height: 42px; line-height: 42px; font-size: 22px; background-color: var(--white-color); border-radius: 50%; color: var(--theme-color); box-shadow: 0px 6px 37px 0px rgba(28, 53, 95, 0.1); } .border-title { position: relative; padding-bottom: 20px; margin-bottom: 30px; margin-top: -0.2em; } .border-title:before { content: ""; position: absolute; left: 0; bottom: 0; width: 50px; height: 3px; background-color: var(--theme-color); } .sec-title { color: var(--title-color2); margin: 0 0 10px 0; } .sec-title .inner-text { text-decoration: underline; -webkit-text-decoration-color: var(--theme-color2); text-decoration-color: var(--theme-color2); } .sec-text2, .sec-text { color: var(--body-color2); margin: 0 0 23px 0; } .sec-text2 { font-size: 18px; } .sec-icon2 { padding-bottom: 5px; } .sec-subtitle2 { font-weight: 700; color: var(--theme-color4); text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 3px; display: block; margin-top: -0.3em; } .sec-icon3 { margin-bottom: 13px; } .sec-subtitle5, .sec-subtitle4, .sec-subtitle3 { font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; display: block; margin-bottom: 2px; } .sec-title2 { font-size: 40px; } .sec-subtitle4 { position: relative; margin-bottom: 7px; margin-top: -0.4em; } .sec-subtitle4.text-white:before { background-color: currentColor; } .sec-line { width: 75px; height: 3px; background-color: var(--theme-color); margin-bottom: 10px; display: inline-block; } .sec-subtitle5 { margin-top: -0.4em; font-size: 16px; } .title-wrap2 { margin-bottom: 48px; } /* Medium devices */ @media (max-width: 992px) { .section-title { margin-bottom: 35px; } .sec-title2 { font-size: 36px; } .sec-bottom-btn { margin-top: 20px; } .sec-subtitle4 { letter-spacing: 0; } .sec-subtitle5 { letter-spacing: 0; font-size: 14px; margin-bottom: 5px; } } /* Small devices */ @media (max-width: 767px) { .sec-title2 { font-size: 30px; } } /*------------------- 3.4. Common -------------------*/ .image-scale-hover { overflow: hidden; } .image-scale-hover img { transition: all ease 0.4s; transform: scale(1.001); } .image-scale-hover:hover img { transform: scale(1.2); } .sub-plus { position: absolute; right: 0; top: 0; width: 40px; height: 40px; line-height: 40px; background-color: var(--white-color); font-size: 18px; color: #e4e4e4; display: inline-block; border-radius: 50%; transition: all ease 0.4s; } .z-index-step1 { position: relative; z-index: 4 !important; } .z-index-common { position: relative; z-index: 3; } .z-index-n1 { z-index: -1; } .media-body { flex: 1; } .badge { position: absolute; width: -moz-fit-content; width: fit-content; display: inline-block; text-align: center; background-color: var(--theme-color); color: var(--white-color); padding: 0.35em 0.55em; border-radius: 50%; } .phone-box .box-icon { position: relative; display: inline-block; text-align: center; width: 60px; height: 60px; line-height: 60px; background-color: var(--theme-color); color: var(--white-color); font-size: 22px; border-radius: 50%; z-index: 1; margin-right: 20px; transition: all ease 0.4s; } .phone-box .box-icon:after, .phone-box .box-icon:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--theme-color); border-radius: inherit; z-index: -1; animation: ripple infinite 3s ease-in-out; transition: all ease 0.4s; } .phone-box .box-icon:after { animation-delay: 1.8s; } .phone-box .box-icon:hover, .phone-box .box-icon:hover:after, .phone-box .box-icon:hover:before { background-color: var(--title-color); } .title-divider { position: relative; padding-bottom: 15px; margin-bottom: 20px; } .title-divider:before, .title-divider:after { content: ""; position: absolute; left: 0; bottom: 0; width: 80px; height: 3px; background-color: var(--theme-color); border-radius: 4px; } .title-divider:after { width: 10px; left: 85px; background-color: var(--title-color); } .star-rating { overflow: hidden; position: relative; width: 90px; height: 1.2em; line-height: 1.2em; display: block; font-family: var(--icon-font); font-weight: 700; font-size: 14px; } .star-rating:before { content: "\f005\f005\f005\f005\f005"; color: var(--yellow-color); font-weight: 300; float: left; top: 0; left: 0; position: absolute; letter-spacing: 3px; } .star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; } .star-rating span:before { content: "\f005\f005\f005\f005\f005"; top: 0; position: absolute; left: 0; color: var(--yellow-color); letter-spacing: 3px; } .parallax__container { clip: rect(0, auto, auto, 0); height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: -100; } .parallax { position: fixed; top: 0; transform: translate3d(0, 0, 0); transform-style: preserve-3d; width: 100%; /* BG behaviour */ background-position: center; background-repeat: no-repeat; background-size: cover; } .vs-surface { position: relative; overflow: hidden; } .vs-surface:after, .vs-surface:before { content: ""; height: 100%; position: absolute; top: 0; width: 100%; } .vs-surface:after { background: #fff; z-index: 2; } .vs-surface.animated:before { background: #ddd; animation: vssurface 2s cubic-bezier(0.8, 0, 0.18, 1) both; z-index: 2; } .vs-surface.animated:after { animation: vssurfaceBack 2s cubic-bezier(0.8, 0, 0.18, 1) both; } .has-new-label { position: relative; } .new-label { font-size: 12px; background-color: var(--error-color); color: var(--white-color); line-height: 1; padding: 3px 5px 3px 5px; border-radius: 4px; text-transform: capitalize; position: relative; top: -1px; font-weight: 500; margin-left: 5px; } /* Large devices */ @media (max-width: 1199px) { .text-center.text-xl-start .title-divider:before, .text-center.text-xl-start .title-divider:after { left: 50%; margin-left: -45px; } .text-center.text-xl-start .title-divider:after { margin-left: 40px; } } /*------------------- 3.6. Font -------------------*/ .font-flaticon { font-family: var(--flaticon); } .font-icon { font-family: var(--icon-font); } .font-title { font-family: var(--title-font); } .font-body { font-family: var(--body-font); } .font-subtitle { font-family: var(--subtitle-font); } .fw-light { font-weight: 300; } .fw-normal { font-weight: 400; } .fw-medium { font-weight: 500; } .fw-semibold { font-weight: 600; } .fw-bold { font-weight: 700; } .fw-extrabold { font-weight: 800; } .fs-md { font-size: 18px; } .fs-xs { font-size: 14px; } .fs-20 { font-size: 20px; } .fs-12 { font-size: 12px; } /* Large devices */ @media (max-width: 1199px) { .fs-20 { font-size: 18px; } } /*------------------- 3.7. Background -------------------*/ .bg-theme { background-color: var(--theme-color) !important; } .bg-smoke { background-color: var(--smoke-color) !important; } .bg-secondary { background-color: var(--secondary-color) !important; } .bg-white { background-color: var(--white-color) !important; } .bg-black { background-color: var(--black-color) !important; } .bg-title { background-color: var(--title-color) !important; } .bg-light2 { background-color: #f5f7ff; } [data-bg-src] { background-repeat: no-repeat; background-size: cover; background-position: center center; } .bg-fluid { background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; } .bg-auto { background-size: auto auto; } .bg-top-right { background-position: top right; background-size: auto; } .bg-fixed { background-attachment: fixed; } .bg-box1 { --shape-size: 545px; } .bg-box-shape1 { position: absolute; left: 0; right: 0; top: 0; height: var(--shape-size); z-index: -1; } .bg-box-shape2 { z-index: -1; bottom: 0; right: 0; left: 0; background-size: 100% 100%; background-position: left bottom; height: calc(100% - var(--shape-size)); } .bg-box-shape3 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-height: 685px; } .icon-shape1 { position: absolute; left: 0%; top: 62%; } .icon-shape2 { position: absolute; top: -220px; right: 80px; } .icon-shape3 { position: absolute; bottom: -150px; left: 100px; /* Extra large devices */ } @media (max-width: 1500px) { .icon-shape3 { display: none; } } /* Medium Large devices */ @media (max-width: 1399px) { .bg-box-shape2 { background-size: cover; background-position: right top; } } /*------------------- 3.8. Text Color -------------------*/ .text-theme { color: var(--theme-color) !important; } .text-title { color: var(--title-color) !important; } .text-body { color: var(--body-color) !important; } .text-light { color: var(--light-color) !important; } .text-white { color: var(--white-color) !important; } .text-yellow { color: var(--yellow-color) !important; } .text-success { color: var(--success-color) !important; } .text-error { color: var(--error-color) !important; } .text-inherit { color: inherit; } .text-inherit:hover { color: var(--theme-color); } .text-reset:hover { color: var(--theme-color) !important; } .text-white-light { color: rgba(255, 255, 255, 0.8); } .hover-white:not(.vs-btn):hover { color: var(--white-color) !important; } /*------------------- 3.9. Overlay -------------------*/ .overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .position-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } [data-overlay] { position: relative; } [data-overlay] [class^=col-], [data-overlay] [class*=col-] { z-index: 1; } [data-overlay]:before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; } [data-overlay=theme]:before { background-color: var(--theme-color); } [data-overlay=theme3]:before { background-color: var(--theme-color3); } [data-overlay=title]:before { background-color: var(--title-color); } [data-overlay=white]:before { background-color: var(--white-color); } [data-overlay=dark]:before { background-color: var(--dark-color); } [data-opacity="1"]:before { opacity: 0.1; } [data-opacity="2"]:before { opacity: 0.2; } [data-opacity="3"]:before { opacity: 0.3; } [data-opacity="4"]:before { opacity: 0.4; } [data-opacity="5"]:before { opacity: 0.5; } [data-opacity="6"]:before { opacity: 0.6; } [data-opacity="7"]:before { opacity: 0.7; } [data-opacity="8"]:before { opacity: 0.8; } [data-opacity="9"]:before { opacity: 0.9; } [data-opacity="10"]:before { opacity: 1; } /*------------------- 3.10. Animation -------------------*/ .ripple-animation, .play-btn:after, .play-btn:before { animation-duration: var(--ripple-ani-duration); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-name: ripple; } @keyframes ripple { 0% { transform: scale(1); opacity: 0; } 30% { opacity: 0.4; } 100% { transform: scale(1.5); opacity: 0; } } @keyframes ripple-md { 0% { transform: scale(1); opacity: 0; } 30% { opacity: 0.6; } 100% { transform: scale(1.9); opacity: 0; } } @keyframes ripple-sm { 0% { transform: scale(1); opacity: 0; } 30% { opacity: 0.2; } 100% { transform: scale(1.9); opacity: 0; } } @keyframes ripple-xs { 0% { transform: scale(1); opacity: 0; } 30% { opacity: 0.1; } 100% { transform: scale(1.7); opacity: 0; } } @keyframes vssurface { 0% { transform: translateX(-100%); } 50% { transform: translateX(0); } 100% { transform: translateX(100%); } } @keyframes vssurfaceBack { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } } /*------------------- 3.11. Flaticon -------------------*/ @font-face { font-family: "Flaticon"; src: url("../fonts/Flaticon.eot"); src: url("../fonts/Flaticon-1.eot") format("embedded-opentype"), url("../fonts/Flaticon.woff2") format("woff2"), url("../fonts/Flaticon.woff") format("woff"), url("../fonts/Flaticon.ttf") format("truetype"), url("../fonts/Flaticon.svg") format("svg"); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio: 0) { @font-face { font-family: "Flaticon"; src: url("../fonts/Flaticon.svg") format("svg"); } } [class^=flaticon-]:before, [class*=" flaticon-"]:before, [class^=flaticon-]:after, [class*=" flaticon-"]:after, .fi:before { display: inline-block; font-family: "Flaticon"; font-style: normal; font-weight: normal; font-variant: normal; text-decoration: inherit; text-rendering: optimizeLegibility; text-transform: none; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } .flaticon-blood-pressure:before { content: "\f101"; } .flaticon-computer-mouse:before { content: "\f102"; } .flaticon-discuss:before { content: "\f103"; } .flaticon-ecg:before { content: "\f104"; } .flaticon-electrocardiogram:before { content: "\f105"; } .flaticon-group:before { content: "\f106"; } .flaticon-healthcare:before { content: "\f107"; } .flaticon-injection:before { content: "\f108"; } .flaticon-laboratory-equipment:before { content: "\f109"; } .flaticon-medical-equipment:before { content: "\f10a"; } .flaticon-medical-kit:before { content: "\f10b"; } .flaticon-medical-mask:before { content: "\f10c"; } .flaticon-medical-results:before { content: "\f10d"; } .flaticon-medical-symbol:before { content: "\f10e"; } .flaticon-quality-of-life:before { content: "\f10f"; } .flaticon-quotation:before { content: "\f110"; } .flaticon-quote:before { content: "\f111"; } .flaticon-security:before { content: "\f112"; } .flaticon-stethoscope-1:before { content: "\f113"; } .flaticon-stethoscope:before { content: "\f114"; } /*================================= 04. Template Style ==================================*/ /*------------------- 4.1. Widget -------------------*/ .widget_nav_menu ul, .widget_meta ul, .widget_pages ul, .widget_archive ul, .widget_categories ul { list-style: none; margin: 0; padding: 0; } .widget_nav_menu li, .widget_meta li, .widget_pages li, .widget_archive li, .widget_categories li { display: block; position: relative; } .widget_nav_menu li > span, .widget_meta li > span, .widget_pages li > span, .widget_archive li > span, .widget_categories li > span { color: var(--white-color); background-color: var(--theme-color); text-align: center; position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; line-height: 30px; font-size: 12px; border-radius: 3px; transition: all ease 0.4s; } .widget_nav_menu a, .widget_meta a, .widget_pages a, .widget_archive a, .widget_categories a { display: block; background-color: var(--white-color); color: var(--title-color); padding: 17px 25px 17px 20px; margin-bottom: 10px; padding-right: 50px; line-height: 1; font-size: 15px; border-radius: 5px; } .widget_nav_menu a:before, .widget_meta a:before, .widget_pages a:before, .widget_archive a:before, .widget_categories a:before { content: "\f054"; font-family: var(--icon-font); font-weight: 700; font-size: 12px; color: var(--theme-color); margin-right: 5px; transition: all ease 0.4s; position: relative; top: -1px; } .widget_nav_menu a:hover, .widget_meta a:hover, .widget_pages a:hover, .widget_archive a:hover, .widget_categories a:hover { background-color: var(--theme-color); color: var(--white-color); box-shadow: 0px 15px 42.75px 2.25px rgba(7, 204, 236, 0.07); } .widget_nav_menu a:hover:before, .widget_meta a:hover:before, .widget_pages a:hover:before, .widget_archive a:hover:before, .widget_categories a:hover:before { color: var(--white-color); } .widget_nav_menu li:hover > span, .widget_meta li:hover > span, .widget_pages li:hover > span, .widget_archive li:hover > span, .widget_categories li:hover > span { background-color: var(--white-color); color: var(--title-color); } .widget_nav_menu .children, .widget_meta .children, .widget_pages .children, .widget_archive .children, .widget_categories .children { margin-left: 10px; } .widget_nav_menu a, .widget_meta a, .widget_pages a { padding-right: 20px; } .widget_nav_menu .sub-menu { margin-left: 10px; } .wp-block-archives { list-style: none; margin: 0; padding: 0; margin-bottom: 20px; } .wp-block-archives a:not(:hover) { color: inherit; } .vs-blog ul.wp-block-archives li { margin: 5px 0; } .widget_shopping_cart ul { margin: 0; padding: 0; } .widget_shopping_cart ul li { list-style-type: none; } .widget_shopping_cart ul.woocommerce-mini-cart { margin-top: -20px; } .widget_shopping_cart .mini_cart_item { position: relative; padding: 30px 10px 30px 90px; border-bottom: 1px solid #e5eaee; } .widget_shopping_cart .mini_cart_item:last-child { border-bottom: none; } .widget_shopping_cart .cart_list a:not(.remove) { display: block; color: var(--body-color); font-size: 18px; font-weight: 500; font-family: var(--title-font); font-weight: 600; color: var(--title-color); margin-bottom: 3px; } .widget_shopping_cart .cart_list a:not(.remove):hover { color: var(--theme-color); } .widget_shopping_cart .cart_list a.remove { position: absolute; top: 50%; left: 95%; transform: translateY(-50%); color: var(--body-color); } .widget_shopping_cart .cart_list a.remove:hover { color: var(--theme-color); } .widget_shopping_cart .cart_list img { width: 75px; height: 75px; position: absolute; left: 0; top: 20px; } .widget_shopping_cart .quantity { display: inline-flex; white-space: nowrap; vertical-align: top; margin-right: 20px; font-size: 14px; color: var(--body-color); } .widget_shopping_cart .total { margin-top: 5px; font-size: 18px; margin-bottom: 25px; color: var(--title-color); } .widget_shopping_cart .amount { padding-left: 5px; font-weight: 600; font-family: var(--title-font); } .widget_shopping_cart .vs-btn { margin-right: 20px; } .widget_shopping_cart .vs-btn:last-child { margin-right: 0; } .widget .search-form { position: relative; } .widget .search-form input { width: 100%; height: 60px; background-color: var(--white-color); border: none; color: var(--body-color); padding-left: 30px; padding-right: 50px; border-radius: 5px; } .widget .search-form input::-moz-placeholder { color: var(--body-color); } .widget .search-form input::placeholder { color: var(--body-color); } .widget .search-form button { text-align: center; padding: 0; color: var(--theme-color); background-color: transparent; border: none; position: absolute; top: 18px; right: 30px; } .widget .search-form button:hover { border-color: var(--theme-color); background-color: var(--white-color); color: var(--theme-color); } .wp-block-tag-cloud a, .tagcloud a { display: inline-block; border: none; text-transform: capitalize; font-size: 14px; font-weight: 400; line-height: 1; padding: 10.5px 21px; margin-right: 5px; margin-bottom: 10px; color: var(--body-color); background-color: var(--smoke-color); border-radius: 9999px; } .wp-block-tag-cloud a:hover, .tagcloud a:hover { background-color: var(--theme-color); color: var(--white-color) !important; } .tagcloud { margin-right: -5px; margin-bottom: -10px; } .widget .tagcloud a:not(:hover) { background-color: #fff; } .widget .newsletter-form { position: relative; } .widget .newsletter-form .form-icon { position: absolute; left: 20px; top: 19px; } .widget .newsletter-form .form-control { padding-left: 50px; padding-right: 20px; } .thumb-post { margin-bottom: 15px; padding-bottom: 15px; display: flex; align-items: center; border-bottom: 1px solid #e5eaee; } .thumb-post:last-child { padding-bottom: 0; border-bottom: none; margin-bottom: 0; } .thumb-post .post-date { display: inline-block; font-size: 12px; color: var(--title-color); } .thumb-post .post-date i { position: relative; top: -1px; margin-right: 7px; } .thumb-post .post-date:hover { color: var(--theme-color); } .thumb-post .post-title { font-size: 16px; margin-bottom: 3px; font-weight: 700; } .thumb-post .post-title a { color: inherit; } .thumb-post .post-title a:hover { color: var(--theme-color); } .thumb-post .media-img { margin-right: 20px; overflow: hidden; border-radius: 5px; } .thumb-post .media-img img { transition: all ease 0.4s; transform: scale(1.001); } .thumb-post:hover .media-img img { transform: scale(1.15); } .widget { padding: 40px; margin-bottom: 30px; background-color: var(--smoke-color); border-radius: 5px; } .widget_title { font-size: 22px; line-height: 1em; margin-bottom: 20px; margin-top: -0.07em; } .sidebar-area .widget_title { position: relative; padding: 0 0 20px 0; margin: 0 0 25px 0; } .sidebar-area .widget_title:after, .sidebar-area .widget_title:before { content: ""; position: absolute; left: 0; bottom: 0; width: 50px; height: 3px; background-color: var(--theme-color); } .sidebar-area .widget_title:after { left: 55px; width: 7px; background-color: var(--title-color); } /* Large devices */ @media (max-width: 1199px) { .sidebar-area.pl-30 { padding-left: 0; } .widget { padding: 30px; } } /* Extra small devices */ @media (max-width: 576px) { .widget { padding: 30px 20px; } } .footer-widget { margin-bottom: 50px; } .footer-widget, .footer-widget .widget { padding: 0; border: none; padding-bottom: 0; background-color: transparent; } .footer-widget .widget_title { position: relative; border-left: none; font-family: var(--title-font); padding-left: 0; font-size: 24px; margin-top: -0.1em; margin-bottom: 32px; padding-bottom: 20px; } .footer-widget .widget_title:before { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 4px; background-color: currentColor; border-radius: 3px; } .footer-widget.widget_meta, .footer-widget.widget_pages, .footer-widget.widget_archive, .footer-widget.widget_categories, .footer-widget.widget_nav_menu { margin-bottom: 45px; } .footer-widget.widget_meta .widget_title, .footer-widget.widget_pages .widget_title, .footer-widget.widget_archive .widget_title, .footer-widget.widget_categories .widget_title, .footer-widget.widget_nav_menu .widget_title { margin-bottom: 30px; } .footer-widget.widget_meta a, .footer-widget.widget_pages a, .footer-widget.widget_archive a, .footer-widget.widget_categories a, .footer-widget.widget_nav_menu a { background-color: transparent; padding: 0; position: relative; margin-bottom: 14px; display: inline-block; font-size: 16px; } .footer-widget.widget_meta a:hover, .footer-widget.widget_pages a:hover, .footer-widget.widget_archive a:hover, .footer-widget.widget_categories a:hover, .footer-widget.widget_nav_menu a:hover { background-color: transparent; color: var(--theme-color); } .footer-widget.widget_meta a:hover:before, .footer-widget.widget_pages a:hover:before, .footer-widget.widget_archive a:hover:before, .footer-widget.widget_categories a:hover:before, .footer-widget.widget_nav_menu a:hover:before { color: var(--theme-color); } .footer-widget.widget_meta a:before, .footer-widget.widget_pages a:before, .footer-widget.widget_archive a:before, .footer-widget.widget_categories a:before, .footer-widget.widget_nav_menu a:before { content: "\f30b"; font-family: var(--icon-font); margin-right: 10px; } .footer-widget.widget_meta li > span, .footer-widget.widget_pages li > span, .footer-widget.widget_archive li > span, .footer-widget.widget_categories li > span, .footer-widget.widget_nav_menu li > span { width: auto; height: auto; position: relative; background-color: transparent; color: var(--body-color); line-height: 1; } .footer-widget.widget_meta li:last-child a, .footer-widget.widget_pages li:last-child a, .footer-widget.widget_archive li:last-child a, .footer-widget.widget_categories li:last-child a, .footer-widget.widget_nav_menu li:last-child a { margin-bottom: 0; } .footer-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 30px; } .footer-gallery .gal-item { overflow: hidden; } .footer-gallery .gal-item img { position: relative; transition: all ease 0.4s; transform: scale(1); } .footer-gallery .gal-item:hover img { transform: scale(1.4); } .address-line { padding-left: 30px; position: relative; } .address-line i { position: absolute; left: 0; top: 6px; } .address-line a { text-decoration: underline; } .footer-table table { margin-bottom: 1.2em; } .footer-table td { padding: 10px 0; border: none; border-bottom: 1px dashed rgba(0, 0, 0, 0.1); } .footer-table td + td { text-align: right; } .footer-table tr:first-child td { padding-top: 0; } .footer-social a { display: inline-block; width: 55px; height: 55px; text-align: center; line-height: 55px; background-color: rgba(39, 71, 125, 0.28); color: #7f9ccd; margin-right: 12px; border-radius: 50%; } .footer-social a:last-child { margin-right: 0; } .footer-social a:hover { background-color: var(--theme-color); color: var(--white-color); } .footer-bottom-menu { list-style-type: none; margin: 0; padding: 0; } .footer-bottom-menu li { display: inline-block; margin-right: 10px; } .footer-bottom-menu li:last-child { margin-right: 0; } .footer-layout1 .copyright { padding: 21.5px 0; } .footer-layout1 .footer-top { border-bottom: 1px solid #1a3461; } .footer-layout1 .widget-area { padding-top: 80px; padding-bottom: 25px; } .footer-layout1 .footer-table td { border-bottom: 1px dashed rgba(223, 223, 224, 0.1); } .footer-layout1 .footer-widget.widget_meta a, .footer-layout1 .footer-widget.widget_pages a, .footer-layout1 .footer-widget.widget_archive a, .footer-layout1 .footer-widget.widget_categories a, .footer-layout1 .footer-widget.widget_nav_menu a { color: var(--white-color); } .footer-layout1 .footer-widget.widget_meta a:hover, .footer-layout1 .footer-widget.widget_pages a:hover, .footer-layout1 .footer-widget.widget_archive a:hover, .footer-layout1 .footer-widget.widget_categories a:hover, .footer-layout1 .footer-widget.widget_nav_menu a:hover { color: var(--theme-color); } .footer-layout1 .footer-widget.widget_meta a:hover:before, .footer-layout1 .footer-widget.widget_pages a:hover:before, .footer-layout1 .footer-widget.widget_archive a:hover:before, .footer-layout1 .footer-widget.widget_categories a:hover:before, .footer-layout1 .footer-widget.widget_nav_menu a:hover:before { color: var(--theme-color); } .footer-layout1 .footer-bottom-menu a, .footer-layout1 .footer-table td, .footer-layout1 .address-line, .footer-layout1 p, .footer-layout1 .widget_title { color: var(--white-color); } .footer-layout1 .footer-bottom-menu a:hover { color: var(--title-color); } .footer-text1 { font-size: 16px; line-height: 28px; margin-bottom: 30px; } .footer-social2 a { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 14px; color: var(--white-color); border: 1px solid #9b9b9c; border-radius: 50%; margin-right: 5px; } .footer-social2 a:last-child { margin-right: 0; } .footer-social2 a:hover { background-color: var(--theme-color); color: var(--white-color); border-color: transparent; } .footer-social3 a { display: inline-block; width: 45px; height: 45px; line-height: 45px; text-align: center; font-size: 15px; color: var(--title-color); border: 1px solid var(--border-color); border-radius: 50%; margin-right: 5px; } .footer-social3 a:last-child { margin-right: 0; } .footer-social3 a:hover { background-color: var(--theme-color); color: var(--white-color); border-color: transparent; } .footer-newsletter2 .form-text { font-size: 16px; color: var(--body-color); margin-bottom: 27px; } .footer-newsletter2 input { width: 100%; height: 60px; padding: 0 30px 0 30px; border-radius: 9999px; font-size: 14px; color: #000000; margin-bottom: 15px; } .footer-newsletter2 input::-moz-placeholder { color: #000000; } .footer-newsletter2 input::placeholder { color: #000000; } .footer-newsletter2 .vs-btn:hover { color: #000; background-color: var(--white-color); } .footer-media2 { display: flex; align-items: center; margin-bottom: 25px; } .footer-media2:first-of-type { padding-top: 5px; } .footer-media2:last-child { margin-bottom: 0; } .footer-media2 .media-icon { width: 60px; height: 60px; line-height: 60px; text-align: center; background-color: rgba(255, 255, 255, 0.2); border-radius: 50%; color: var(--white-color); font-size: 24px; margin-right: 20px; } .footer-media2 .media-label { color: var(--white-color); font-size: 16px; } .footer-media2 .media-text { color: var(--white-color); font-weight: 700; margin: 0; } .footer-media2 .media-text a { color: inherit; } .footer-media2 .media-text a:hover { text-decoration: underline; } /* Medium devices */ @media (max-width: 992px) { .footer-social a { width: 45px; height: 45px; line-height: 45px; } .footer-layout1 .widget-area { padding-top: 60px; padding-bottom: 5px; } .copyright p { font-size: 14px; } } /*------------------- 4.2. Header -------------------*/ .header-wrapper { position: relative; z-index: 41; } .will-sticky .sticky-active { position: fixed; top: -100%; right: 0; left: 0; background-color: var(--white-color); transition: all ease 0.8s; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07); } .will-sticky .sticky-active.active { top: 0; } .will-sticky .menu-style1 > ul > li > a { padding: 41px 0; } .main-menu a { display: block; position: relative; font-family: var(--body-font); font-weight: 700; color: var(--title-color); font-size: 18px; /* Large devices */ } @media (max-width: 1199px) { .main-menu a { font-size: 14px; } } .main-menu a:hover { color: var(--theme-color); } .main-menu > ul > li { margin: 0 15px; } .main-menu > ul > li > a .new-label { position: absolute; top: -15px; right: -16px; font-size: 11px; border-radius: 3px; background-color: var(--error-color); } .main-menu > ul > li > a .has-new-lable { position: relative; } .main-menu ul { margin: 0; padding: 0; } .main-menu ul li { list-style-type: none; display: inline-block; position: relative; } .main-menu ul li.menu-item-has-children > a:after { content: "\f107"; position: relative; font-family: var(--icon-font); margin-left: 2px; font-size: 0.8rem; } .main-menu ul li:last-child { margin-right: 0; } .main-menu ul li:first-child { margin-left: 0; } .main-menu ul li:hover .menu-pages, .main-menu ul li:hover > ul.sub-menu, .main-menu ul li:hover ul.mega-menu { visibility: visible; opacity: 1; margin-top: 0; z-index: 9; } .main-menu ul.sub-menu, .main-menu ul.mega-menu { position: absolute; text-align: left; top: 100%; left: 0; background-color: var(--white-color); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1); visibility: hidden; min-width: 190px; width: -moz-max-content; width: max-content; padding: 7px; left: -14px; margin-top: 50px; opacity: 0; z-index: -1; border-bottom: 3px solid var(--theme-color); box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.09), 0px 3px 0px 0px rgba(231, 13, 60, 0.004); transform-origin: top center; transition: margin-top 0.4s ease-in-out 0s, visibility 0.4s ease-in-out 0s, opacity 0.4s ease-in-out 0s, z-index 0s; } .main-menu ul.sub-menu { padding: 18px 20px; left: -27px; } .main-menu ul.sub-menu:before { content: ""; position: absolute; left: 34.5px; top: 30px; width: 1px; background-color: #ededed; height: calc(100% - 60px); } .main-menu ul.sub-menu li { display: block; margin: 0 0; padding: 3px 9px; } .main-menu ul.sub-menu li.menu-item-has-children > a:after { content: "\f105"; float: right; top: 3px; } .main-menu ul.sub-menu li a { position: relative; padding-left: 21px; } .main-menu ul.sub-menu li a:before { content: "\f111"; position: absolute; top: 2.5em; left: 0; font-family: var(--icon-font); width: 11px; height: 11px; text-align: center; border-radius: 50%; display: inline-block; font-size: 0.2em; line-height: 11.5px; color: var(--theme-color); font-weight: 700; background-color: var(--white-color); box-shadow: inset 0px 2px 4px 0px rgba(7, 204, 236, 0.4); } .main-menu ul.sub-menu li a:hover { color: var(--theme-color); } .main-menu ul.sub-menu li ul.sub-menu { left: 100%; right: auto; top: 0; margin: 0 0; margin-left: 20px; } .main-menu ul.sub-menu li ul.sub-menu li ul { left: 100%; right: auto; } .main-menu .mega-menu-wrap { position: static; } .main-menu ul.mega-menu { display: flex; justify-content: space-between; text-align: left; width: 100%; max-width: 1250px; padding: 20px 15px 23px 15px; left: 50%; transform: translateX(-50%); } .main-menu ul.mega-menu li { display: block; width: 100%; padding: 0 15px; } .main-menu ul.mega-menu li li { padding: 4px 0; } .main-menu ul.mega-menu li a { display: inline-block; } .main-menu ul.mega-menu > li > a { display: block; padding: 0; padding-bottom: 15px; margin-bottom: 10px; text-transform: capitalize; letter-spacing: 1px; font-weight: 700; color: var(--title-color); border-color: var(--theme-color); } .main-menu ul.mega-menu > li > a::after, .main-menu ul.mega-menu > li > a::before { content: ""; position: absolute; bottom: 0; left: 0; width: 15px; height: 1px; background-color: var(--theme-color); } .main-menu ul.mega-menu > li > a::after { width: calc(100% - 20px); left: 20px; } .main-menu ul.mega-menu > li > a:hover { padding-left: 0; } .main-menu .menu-pages { display: flex; flex-wrap: wrap; position: absolute; left: 50%; width: 100%; max-width: var(--main-container, 1295px); background-color: var(--white-color); padding: 20px 10px 0 10px; margin-top: 70px; opacity: 0; visibility: hidden; transform: translateX(-50%); transition: margin-top 0.4s ease-in-out 0s, visibility 0.4s ease-in-out 0s, opacity 0.4s ease-in-out 0s, z-index 0s; display: grid; grid-template-columns: repeat(5, 1fr); box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.09), 0px 3px 0px 0px rgba(231, 13, 60, 0.004); } .main-menu .menu-pages > li { width: 100%; padding: 0 10px 20px 10px; } .main-menu .menu-pages img { width: 100%; } .main-menu .menu-pages a { text-align: center; display: block; border: 1px solid rgba(0, 0, 0, 0.05); padding: 0 0 10px 0; transition: all ease 0.4s; background-color: var(--title-color); color: var(--white-color); } .main-menu .menu-pages a img { display: block; margin: 0 0 8px 0; } .main-menu .menu-pages a:hover { background-color: var(--theme-color); color: var(--white-color); } .menu-style1 > ul > li > a { padding: 46px 0; } .menu-style2 > ul > li > a { padding: 44px 0; } .menu-style3 > ul > li { margin: 0 28px; } .menu-style3 > ul > li > a { padding: 16.5px 0; color: var(--white-color); } .menu-style3 > ul > li > a:hover { color: var(--theme-color); } .menu-style4 ul.sub-menu li a:before { box-shadow: inset 0px 2px 4px 0px rgba(242, 0, 0, 0.4); } .menu-style4 > ul > li { margin: 0; } .menu-style4 > ul > li > a { padding: 27px 30px; font-weight: 500; color: var(--white-color); position: relative; font-size: 16px; } .menu-style4 > ul > li > a:before { content: ""; position: absolute; right: 0; top: 50%; background-color: #ff7676; height: 16px; width: 1px; margin: -8px 0 0 0; } .menu-style4 > ul > li > a:hover { color: var(--title-color); } .menu-style4 > ul > li > a .new-label { color: var(--title-color); background-color: var(--white-color); } .menu-style4 > ul > li:first-child > a { padding-left: 0; } .menu-style4 > ul > li:last-child > a { padding-right: 0; } .menu-style4 > ul > li:last-child > a::before { display: none; } .header-top-info li { display: inline-block; font-size: 14px; color: var(--white-color); margin-right: 38px; } .header-top-info li:last-child { margin-right: 0; } .header-top-info li i { color: var(--theme-color); margin-right: 10px; font-size: 16px; vertical-align: middle; } .head-top-links { list-style: none; padding: 0; margin: 0; } .head-top-links a { color: var(--white-color); font-size: 14px; } .head-top-links a:hover { color: var(--theme-color); } .head-top-links > li { display: inline-block; margin-right: 28px; position: relative; padding-right: 31px; } .head-top-links > li:before { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 16px; margin-top: -8px; background-color: #6f87af; } .head-top-links > li:last-child { padding-right: 0; margin-right: 0; } .head-top-links > li:last-child:before { display: none; } .head-top-links .dropdown-toggle i { font-size: 12px; margin-right: 5px; } .head-top-links .dropdown-toggle:after { content: "\f107"; margin: 0; border: none; font-family: var(--icon-font); vertical-align: middle; font-weight: 400; margin-left: 5px; } .head-top-links .dropdown-menu { padding: 10px 15px; border: none; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07); margin: 0; margin-left: 0 !important; margin-top: 15px !important; width: -moz-fit-content; width: fit-content; min-width: auto; position: relative; z-index: 3; border: 1px solid #ededed; } .head-top-links .dropdown-menu:before { content: ""; position: absolute; left: 30px; top: -7px; width: 14px; height: 14px; background-color: var(--white-color); z-index: -1; transform: rotate(45deg); border-top: 1px solid #ededed; border-left: 1px solid #ededed; } .head-top-links .dropdown-menu a { color: var(--title-color); } .head-top-links .dropdown-menu a:hover { color: var(--theme-color); } .head-top-links .dropdown-menu li { margin-bottom: 5px; } .head-top-links .dropdown-menu li:last-child { margin-bottom: 0; } .header-social { list-style-type: none; margin: 0; padding: 0; } .header-social li { display: inline-block; margin-right: 13px; } .header-social li:last-child { margin-right: 0; } .header-social a { font-size: 16px; } .header-search-btn { color: #698fd0; font-size: 12px; background-color: transparent; border: none; display: inline-block; padding: 3px 3px 3px 15px; border-radius: 3px; transition: all ease 0.4s; } .header-search-btn i { width: 25px; height: 25px; line-height: 25px; margin-left: 10px; font-size: 10px; border: none; color: var(--white-color); background-color: #698fd0; border-radius: 50%; transition: all ease 0.4s; } .header-search-btn:hover { background-color: var(--theme-color); color: var(--white-color); } .header-search-btn:hover i { background-color: var(--white-color); color: var(--theme-color); } .header-btn, .header-call.phone-box { padding-left: 42px; margin-left: 40px; position: relative; } .header-btn:before, .header-call.phone-box:before { content: ""; position: absolute; width: 2px; height: 30px; background-color: var(--theme-color); left: 0; top: 50%; margin-top: -15px; } .header-btn.style2, .header-call.phone-box.style2 { padding-left: 30px; margin-left: 0; } .header-btn { position: relative; margin-left: calc(43px - var(--bs-gutter-x)); } .header-btn:before { content: ""; position: absolute; } .header-btn .vs-btn { margin-left: 30px; } .header-btn .icon-btn { margin-left: 10px; } .header-btn .icon-btn:first-child { margin-left: 0; } .header2-btn .vs-btn { margin-left: 25px; } .header2-btn .icon-btn { margin-right: 10px; } .header2-btn .icon-btn:first-child { margin-left: 0; } .header-note { position: relative; border-top: 3px solid var(--title-color); } .header-note .note-inner { position: absolute; margin: 0 auto; left: 0; right: 0; overflow: hidden; } .header-note .note-text { max-width: 100%; width: -moz-max-content; width: max-content; position: relative; margin: -1px 0 0 auto; font-size: 14px; color: var(--white-color); padding: 13.2px 0 13.2px 225px; } .header-note .note-text:before { content: ""; position: absolute; left: 0; top: -1px; width: 99999px; height: 100%; background-color: var(--title-color); z-index: -1; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%); } .header-notice { height: 3px; position: relative; z-index: 1; } .header-notice .notice-text { position: absolute; top: 0; right: 0; left: 0; height: 50px; display: flex; align-items: center; justify-content: flex-end; gap: 0 5px; } .header-notice .shape { position: absolute; height: 50px; width: 100%; max-width: 950px; z-index: -1; right: 0; top: 0; } .header-notice .shape:before { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%); } .header-notice p { display: inline-block; } .header-top-links ul { margin: 0; padding: 0; list-style: none; } .header-top-links li { display: inline-block; color: var(--body-color); font-size: 14px; line-height: 20px; } .header-top-links li:not(:last-child) { padding-right: 20px; margin-right: 17px; border-right: 1px solid #5c84da; } .header-top-links a { color: inherit; } .header-top-links a:hover { color: var(--theme-color2); } .social-title { font-size: 14px; font-weight: 600; color: var(--body-color); } .header-social2 { display: inline-block; margin-left: 20px; } .header-social2 a { display: inline-block; width: 54px; height: 54px; line-height: 54px; text-align: center; background-color: var(--theme-color2); color: var(--white-color); margin-right: 3px; border: none; } .header-social2 a:last-child { margin-right: 0; } .header-social2 a:hover { background-color: var(--theme-color4); color: var(--white-color); } .header-help { margin-left: 17px; padding-left: 40px; border-left: 1px solid #adb3c2; padding: 6px 0 6px 39px; } .header-help__title { color: var(--title-color); font-size: 14px; font-weight: 600; margin-right: 18px; display: inline-block; } .infobox-style1 { background-color: var(--theme-color4); display: flex; padding: 30px 40px 28px 40px; } .infobox-style1 .infobox-icon { color: var(--white-color); font-size: 50px; margin-right: 20px; } .infobox-style1 .infobox-label { display: block; color: var(--white-color); font-weight: 500; font-size: 14px; text-transform: capitalize; } .infobox-style1 .infobox-link { color: var(--white-color); font-size: 20px; font-weight: 700; } .infobox-style1 .infobox-link:hover { color: var(--theme-color3); } .header-list1 ul { margin: 0 0 0 0; } .header-list1 li { display: inline-block; margin-right: 40px; } .header-list1 li:last-child { margin-right: 0; } .header-list1 a { color: var(--title-color); font-weight: 600; display: block; } .header-list1 a i { color: #686868; font-size: 28px; vertical-align: middle; margin: -2px 10px 0 0; transition: all ease 0.4s; } .header-list1 a:hover, .header-list1 a:hover i { color: var(--theme-color); } .header-link1 { color: var(--title-color); margin-right: 20px; } .header-link1:hover { color: var(--theme-color); } .header-link2 { padding: 12px 27px; } .header-link3 { color: Black; font-size: 18px; font-weight: 700; } .header-link3 i { width: 42px; height: 42px; line-height: 42px; background-color: rgba(255, 255, 255, 0.4); color: #992222; text-align: center; font-size: 18px; margin-right: 15px; border-radius: 50%; transition: all ease 0.4s; } .header-link3:hover { text-decoration: underline; color: #992222; } .header-link3:hover i { background-color: var(--white-color); color: var(--theme-color); } .header-layout4 .header-top { background-color: #0033a0; --body-color: #fff; } .header-layout4 .menu-area { position: relative; } .header-layout4 .menu-area .main-menu { position: absolute; left: 0; top: 0; right: 0; } .header-layout4 .will-sticky .main-menu { background-color: var(--theme-color3); padding-left: 30px; padding-right: 30px; } .header-layout5 .header-top { padding: 20px 0 30px 0; } .header-layout5 .vs-menu-toggle { background-color: var(--white-color); color: var(--theme-color); border-radius: 0; margin: 15px 0; } .header-layout5 .menu-area { position: relative; z-index: 31; } .header-layout5 .header-shape1 { position: absolute; right: 0; top: 0; height: 100%; width: 100%; z-index: -1; max-width: 1675px; } .header-layout5 .header-shape1::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--theme-color); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 45px 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 45px 100%); } .header-layout5 .header-shape1:after { content: ""; position: absolute; left: 0; top: 0; border-bottom: 40px solid #dc0000; border-right: 23px solid transparent; border-left: 23px solid transparent; margin-left: -22px; } .header-layout5 .will-sticky .header-shape1 { max-width: 100%; } .header-layout5 .will-sticky .header-shape1:after { opacity: 0; visibility: hidden; } .header-layout5 .will-sticky .header-shape1::before { -webkit-clip-path: none; clip-path: none; } /* Hight Resoulation devices */ @media (min-width: 1921px) { .header-layout5 .header-shape1 { max-width: 85%; } } /* Extra large devices */ @media (max-width: 1500px) { .header-layout5 .menu-area { margin-bottom: 0; } .header-layout5 .header-shape1 { max-width: 100%; } .header-layout5 .header-shape1:before { -webkit-clip-path: none; clip-path: none; } .header-layout5 .header-shape1:after { display: none; } .header-note .note-text { padding: 13.2px 0 13.2px 100px; } } /* Medium Large devices */ @media (max-width: 1399px) { .header-btn { padding-left: 30px; } .header-btn:before { display: none; } .header-btn .vs-btn { margin-left: 0; } .header2-btn .vs-btn { margin-left: 25px; } } /* Large devices */ @media (max-width: 1199px) { .menu-style1 > ul > li > a { padding: 39px 0; } .menu-style3 > ul > li { margin: 0 20px; } .menu-style3 > ul > li > a { color: var(--title-color); } .infobox-style1 { padding: 25px 25px 25px 25px; margin-bottom: 0; } .header-layout4 .menu-top { border-bottom: 1px solid var(--theme-color4); } .header-layout4 .menu-area .main-menu { position: relative; } .header-help { margin-left: 0; padding-left: 40px; padding: 6px 0 6px 25px; } .header-help__title { display: none; } .header-list1 li { margin-right: 25px; } .header-list1 a { font-size: 14px; } .header-list1 a i { font-size: 20px; } } /* Medium devices */ @media (max-width: 992px) { .header-help { border-left: none; padding: 0; } .header-social2 { margin-left: 0; } .header-social2 a { width: 45px; height: 55px; line-height: 55px; } .header-layout5 .header-list1 { display: none; } } /* Small devices */ @media (max-width: 767px) { .header-layout4 .menu-top, .header-layout4 .header-top { padding: 15px 0; } .header-top-links { text-align: center; } .header-top-links li:not(:last-child) { padding-right: 0; margin-right: 17px; border-right: none; } .header-link2 { padding: 10px 13px; font-size: 10px; } .header-layout5 .header-link1 { display: none; } } /* Extra small devices */ @media (max-width: 576px) { .header-link3 { font-size: 16px; } .header-link3 i { width: 30px; height: 30px; line-height: 32px; font-size: 13px; margin-right: 10px; } } /*------------------- 4.3. Footer -------------------*/ .footer1-logo { position: relative; z-index: 1; display: inline-block; } .footer1-logo img { background-color: var(--white-color); padding: 30px; } .footer1-logo:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: -30px; background-color: #0a1830; -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0% 100%); z-index: -1; } .footer-layout2 { position: relative; z-index: 1; } .footer-layout2 .footer-shape1 { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; max-width: 880px; max-height: 410px; background-color: var(--theme-color2); z-index: -1; -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%); clip-path: polygon(100% 0, 0 100%, 100% 100%); } .footer-layout2 .widget-area { --body-color: #fff; --title-color: #fff; padding-top: 115px; padding-bottom: 100px; } .footer-layout2 .widget-column { border-right: 5px solid #2e5dc1; padding-left: 60px; padding-right: 60px; } .footer-layout2 .widget-column:first-child { padding-left: 0; } .footer-layout2 .widget-column:last-child { padding-right: 0; border-right: none; } .footer-layout2 .footer-logo { margin: 0 0 30px 0; } .footer-layout2 .footer-text { line-height: 28px; margin: 0 0 40px 0; max-width: 320px; } .footer-layout2 .widget_title { font-weight: 700; font-size: 24px; margin-bottom: 41px; padding-top: 18px; } .footer-layout2 .footer-widget { margin-bottom: 0; } .footer-layout2 .footer-widget.widget_nav_menu { margin-bottom: 0; } .footer-layout2 .footer-widget.widget_nav_menu .widget_title { margin-bottom: 36px; } .footer-layout2 .footer-widget.widget_nav_menu a { margin-bottom: 22px; } .footer-layout2 .footer-widget.widget_nav_menu a:before { content: "\f105"; top: 1px; position: relative; font-size: 16px; font-weight: 400; } .footer-layout2 .text1 { color: #dadada; font-size: 14px; margin: 0 0 3px 0; padding: 2px 0 0 0; } .footer-layout2 .text2 { font-size: 16px; font-weight: 700; text-transform: uppercase; margin: 0 0 45px 0; } .footer-layout2 .text3 { font-weight: 700; margin: 0; } .footer-layout2 .text4 { text-decoration: underline; } .footer-layout2 .copyright-wrap { padding: 48.5px 0; } .footer-layout2 .footer-bottom-menu li { margin-right: 30px; } .footer-layout2 .footer-bottom-menu li:last-child { margin-right: 0; } .footer-layout2 .footer-bottom-menu a { color: var(--white-color); } .footer-layout2 .footer-bottom-menu a:hover { color: var(--title-color); } .footer-layout3 { margin-top: 15px; } .footer-layout3 .widget-area { --title-color: #fff; --body-color: #c1c1c1; } .footer-layout3 .widget_title { margin-bottom: 35px; } .footer-layout3 .widget-column { padding: 100px 40px 50px 40px; border-left: 1px solid #494949; } .footer-layout3 .widget-column:last-child { background-color: var(--theme-color); border-left: none; position: relative; margin-top: -15px; height: calc(100% + 15px); } .footer-layout3 .widget-column:last-child:before { content: ""; position: absolute; left: -26px; top: 0; border-bottom: 8px solid #b60000; border-top: 8px solid transparent; border-right: 13px solid #b60000; border-left: 13px solid transparent; z-index: 1; display: inline-block; } .footer-layout3 .copyright-wrap { background-color: #000; padding: 33px 0; } .footer-layout3 .copyright-wrap a:hover { color: var(--white-color); } /* Large devices */ @media (max-width: 1199px) { .footer-layout2 .widget-column { padding-left: 40px; padding-right: 40px; } .footer-layout2 .copyright-wrap { padding: 30px 0; } .footer-layout2 .footer-shape1 { max-width: 430px; max-height: 290px; } .footer-layout2 .widget-area { padding-top: 80px; padding-bottom: 80px; } .footer-layout3 .widget-column { padding: 60px 20px 10px 0; border-left: none; } .footer-layout3 .widget-column:last-child { padding-left: 20px; } } /* Medium devices */ @media (max-width: 992px) { .footer-layout2 .widget-column { padding-left: 0; padding-right: 0; border: none; } .footer-layout2 .footer-text { max-width: 70%; margin-bottom: 20px; } .footer-layout2 .footer-logo { margin: 0 0 20px 0; } .footer-layout2 .footer-widget .widget_title, .footer-layout2 .footer-widget.widget_nav_menu .widget_title { margin-bottom: 22px; } .footer-layout3 .widget-column { padding: 0 0 0 0; } .footer-layout3 .widget-column:last-child { padding: 50px 20px 0 20px; } .footer-layout3 .widget-column:last-child:before { display: none; } .footer-layout3 .widget_title { margin-bottom: 20px; } .footer-layout3 .widget-area { padding-top: 60px; } } /* Small devices */ @media (max-width: 767px) { .footer-layout2 .text2 { margin: 0 0 15px 0; } .footer1-logo:before { display: none; } } /*------------------- 4.4. Breadcumb -------------------*/ .breadcumb-menu { max-width: 100%; width: -moz-max-content; width: max-content; margin: 0 0 0 0; padding: 0; list-style-type: none; background-color: var(--white-color); box-shadow: 0px 15px 42.75px 2.25px rgba(39, 71, 125, 0.07); padding: 48px 100px; border-radius: 9999px; } .breadcumb-menu li { display: inline-block; margin-right: 3px; padding-right: 13px; list-style: none; position: relative; } .breadcumb-menu li:last-child { padding-right: 0; margin-right: 0; } .breadcumb-menu li:last-child:after { display: none; } .breadcumb-menu li:after { content: "/"; position: absolute; right: 0; color: var(--title-color); } .breadcumb-menu li, .breadcumb-menu a, .breadcumb-menu span { white-space: normal; color: inherit; word-break: break-word; font-weight: 400; font-size: 18px; color: var(--title-color); } .breadcumb-menu li i, .breadcumb-menu a i, .breadcumb-menu span i { margin-right: 10px; font-size: 0.8rem; position: relative; top: -1px; } .breadcumb-menu li:hover, .breadcumb-menu li.active, .breadcumb-menu a:hover, .breadcumb-menu a.active, .breadcumb-menu span:hover, .breadcumb-menu span.active { color: var(--theme-color); } .breadcumb-title { font-size: 60px; margin-top: -0.3em; } .breadcumb-menu-wrap { position: relative; width: -moz-max-content; width: max-content; margin-left: auto; margin-top: 95px; margin-bottom: -60px; --icon-size: 44px; --shape-size: 60px; } .breadcumb-menu-wrap > i { position: absolute; left: 0; top: 50%; margin-top: calc(var(--icon-size) / -2); margin-left: calc(var(--icon-size) / -2); z-index: 1; } .breadcumb-menu-wrap > i:before { width: var(--icon-size); height: var(--icon-size); line-height: var(--icon-size); background-color: var(--theme-color); font-size: 18px; border-radius: 50%; transition: inherit; color: var(--white-color); text-align: center; display: inline-block; } .breadcumb-menu-wrap > i:after { content: ""; position: absolute; left: 50%; top: 50%; width: var(--shape-size); height: var(--shape-size); margin: calc(var(--shape-size) / -2) 0 0 calc(var(--shape-size) / -2); background-color: var(--white-color); border-radius: 50%; transition: inherit; z-index: -1; box-shadow: inset 0px 5px 5px 0px rgba(7, 204, 236, 0.3); } .breadcumb-wrapper { padding-bottom: 0.05px; padding-top: 160px; margin-bottom: 60px; } /* Large devices */ @media (max-width: 1199px) { .breadcumb-wrapper { padding-top: 100px; } .breadcumb-title { font-size: 48px; } .breadcumb-menu { padding: 25px 60px; } .breadcumb-menu-wrap { margin-top: 60px; margin-bottom: -38.25px; } .breadcumb-wrapper { margin-bottom: 39px; } } /* Medium devices */ @media (max-width: 992px) { .breadcumb-menu-wrap { margin-left: auto; margin-right: auto; left: 15px; } .breadcumb-title { font-size: 36px; } .breadcumb-wrapper { padding-top: 88px; text-align: center; } .breadcumb-menu-wrap { margin-top: 80px; } } /* Small devices */ @media (max-width: 767px) { .breadcumb-title { font-size: 30px; } .breadcumb-menu { padding: 25px 30px; border-radius: 20px; } .breadcumb-menu li, .breadcumb-menu a, .breadcumb-menu span { font-size: 16px; } .breadcumb-menu-wrap { left: 7.5px; } } /*------------------- 4.5. Popup Search -------------------*/ .popup-search-box { position: fixed; top: 0; left: 50%; background-color: rgba(0, 0, 0, 0.95); height: 0; width: 0; overflow: hidden; z-index: 99999; opacity: 0; visibility: hidden; border-radius: 50%; transform: translateX(-50%); transition: all ease 0.4s; } .popup-search-box button.searchClose { width: 60px; height: 60px; position: absolute; top: 40px; right: 40px; border-width: 1px; border-style: solid; border-color: var(--theme-color); background-color: transparent; font-size: 22px; border-radius: 50%; transform: rotate(0); transition: all ease 0.4s; } .popup-search-box button.searchClose:hover { color: var(--body-color); background-color: #fff; border-color: transparent; border-color: transparent; transform: rotate(90deg); } .popup-search-box form { position: absolute; top: 50%; left: 50%; display: inline-block; padding-bottom: 40px; cursor: auto; width: 100%; max-width: 700px; transform: translate(-50%, -50%) scale(0); transition: transform ease 0.4s; /* Large devices */ } @media (max-width: 1199px) { .popup-search-box form { max-width: 600px; } } .popup-search-box form input { font-size: 18px; height: 70px; width: 100%; border: 2px solid var(--theme-color); background-color: transparent; padding-left: 30px; color: #fff; border-radius: 50px; } .popup-search-box form input::-moz-placeholder { color: #fff; } .popup-search-box form input::placeholder { color: #fff; } .popup-search-box form button { position: absolute; top: 0px; background-color: transparent; border: none; color: #fff; font-size: 24px; right: 12px; color: var(--white-color); cursor: pointer; width: 70px; height: 70px; transition: all ease 0.4s; transform: scale(1.001); } .popup-search-box form button:hover { transform: scale(1.1); } .popup-search-box.show { opacity: 1; visibility: visible; width: 100.1%; height: 100%; transition: all ease 0.4s; border-radius: 0; } .popup-search-box.show form { transition-delay: 0.5s; transform: translate(-50%, -50%) scale(1); } /*------------------- 4.6. Popup Side Menu -------------------*/ .sidemenu-wrapper { position: fixed; z-index: 99999; right: 0; top: 0; height: 100%; width: 0; background-color: rgba(0, 0, 0, 0.75); opacity: 0; visibility: hidden; transition: all ease 0.8s; } .sidemenu-wrapper .closeButton { display: inline-block; border: 2px solid var(--border-color); width: 50px; height: 50px; line-height: 50px; font-size: 24px; padding: 0; position: absolute; top: 20px; right: 20px; background-color: var(--white-color); border-radius: 50%; transform: rotate(0); transition: all ease 0.4s; } .sidemenu-wrapper .closeButton:hover { background-color: var(--theme-color); color: var(--white-color); border-color: transparent; transform: rotate(90deg); } .sidemenu-wrapper .sidemenu-content { background-color: var(--white-color); width: 450px; margin-left: auto; padding: 30px 35px; height: 100%; overflow: scroll; position: relative; right: -500px; cursor: auto; transition-delay: 1s; transition: right ease 1s; } .sidemenu-wrapper .sidemenu-content::-webkit-scrollbar-track { box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1); background-color: #F5F5F5; } .sidemenu-wrapper .sidemenu-content::-webkit-scrollbar { width: 2px; background-color: #F5F5F5; } .sidemenu-wrapper .widget { padding: 0; margin-bottom: 40px; border: none; background-color: transparent; } .sidemenu-wrapper .widget .widget_title { position: relative; padding-bottom: 20px; font-size: 24px; margin-bottom: 30px; } .sidemenu-wrapper .widget .widget_title:before { content: ""; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background-color: var(--theme-color); border-radius: 3px; } .sidemenu-wrapper .footer-logo { margin-bottom: 20px; } .sidemenu-wrapper.show { opacity: 1; visibility: visible; width: 100%; transition: all ease 0.8s; } .sidemenu-wrapper.show .sidemenu-content { right: 0; opacity: 1; visibility: visible; } /*------------------- 4.7. Pagination -------------------*/ .vs-pagination { text-align: center; } .vs-pagination ul { margin: 0; padding: 0; } .vs-pagination li { display: inline-block; margin: 0 3px; list-style-type: none; } .vs-pagination li:last-child { margin-right: 0; } .vs-pagination li:first-child { margin-left: 0; } .vs-pagination span, .vs-pagination a { display: inline-block; width: 50px; height: 50px; line-height: 48px; color: var(--title-color); text-align: center; position: relative; border: 2px solid #eef1f5; z-index: 1; font-weight: 700; border-radius: 50%; } .vs-pagination span.active, .vs-pagination span:hover, .vs-pagination a.active, .vs-pagination a:hover { color: var(--white-color); background-color: var(--theme-color); border-color: transparent; } /* Small devices */ @media (max-width: 767px) { .vs-pagination span, .vs-pagination a { width: 40px; height: 40px; line-height: 40px; font-size: 14px; } } /*------------------- 4.8. Blog -------------------*/ blockquote { font-size: 24px; line-height: 34px; padding: 50px 60px 50px 60px; display: block; position: relative; background-color: var(--smoke-color); overflow: hidden; margin: 35px 0; color: var(--title-color); } blockquote p { font-family: inherit; margin-bottom: 0 !important; line-height: 1.6; color: inherit; max-width: 550px; width: 100%; position: relative; z-index: 3; font-style: italic; } blockquote:before { content: "\f10e"; font-family: var(--icon-font); position: absolute; right: 40px; bottom: 40px; font-size: 7rem; font-weight: 300; opacity: 0.1; line-height: 1; color: var(--theme-color); } blockquote p { margin-bottom: 0; } blockquote p a { color: inherit; } blockquote cite { display: inline-block; font-size: 18px; position: relative; padding-left: 45px; border-color: inherit; line-height: 1; font-weight: 400; margin-top: 22px; font-style: normal; color: var(--theme-color); } blockquote cite:before { content: ""; position: absolute; left: 0; bottom: 8px; width: 30px; height: 2px; border-top: 2px solid; border-color: inherit; } .share-links-title { color: var(--title-color); font-size: 18px; font-family: var(--title-font); font-weight: 700; margin-right: 20px; } .blog-social { margin: 0; padding: 0; list-style-type: none; } .blog-social li { display: inline-block; margin-right: 7px; } .blog-social li:last-child { margin-right: 0; } .blog-social a i { display: inline-block; width: 35px; height: 35px; line-height: 35px; font-size: 14px; text-align: center; background-color: var(--theme-color); color: var(--white-color); border-radius: 50%; transition: all ease 0.4s; } .blog-social a i.fa-facebook-f { background-color: #3b5998; } .blog-social a i.fa-twitter { background-color: #00acee; } .blog-social a i.fa-linkedin-in { background-color: #0e76a8; } .blog-social a i.fa-instagram { background-color: #d63084; } .blog-social a i:hover { background-color: var(--theme-color); color: var(--white-color); } .blog-meta span, .blog-meta a { display: inline-block; margin-right: 23px; font-size: 14px; color: var(--title-color); } .blog-meta span:last-child, .blog-meta a:last-child { margin-right: 0; } .blog-meta span i, .blog-meta a i { margin-right: 8px; color: var(--theme-color); } .blog-meta span:hover, .blog-meta a:hover { color: var(--theme-color); } .blog-category { margin-bottom: -10px; } .blog-category a { display: inline-block; color: #fff; padding: 4.5px 24.5px; margin-right: 5px; margin-bottom: 10px; border: 1px solid transparent; background-color: var(--theme-color); } .blog-category a:hover { background-color: var(--white-color); color: var(--body-color); border-color: var(--theme-color); } .vs-blog { margin-bottom: 30px; } .vs-blog .blog-title a { color: inherit; } .vs-blog .blog-title a:hover { color: var(--theme-color); } .blog-card { position: relative; transition: all ease 0.4s; } .blog-card .blog-img { position: relative; overflow: hidden; } .blog-card .blog-img img { transform: scale(1.001); transition: all ease 0.4s; } .blog-card .blog-date { position: absolute; right: 40px; top: 40px; padding: 13px 5px 16px 5px; background-color: var(--white-color); font-size: 14px; line-height: 1.3; width: 60px; border-top: 2px solid var(--theme-color); text-align: center; color: var(--title-color); border-radius: 0 0 10px 10px; z-index: 3; } .blog-card .blog-date .day { font-size: 24px; font-weight: 700; } .blog-card .blog-meta { margin-bottom: 7px; } .blog-card .blog-meta span, .blog-card .blog-meta a { font-size: 14px; color: var(--body-color); transition: all ease 0.4s; } .blog-card .blog-meta span i, .blog-card .blog-meta a i { color: var(--body-color); } .blog-card .blog-meta span:hover, .blog-card .blog-meta a:hover { color: var(--theme-color); text-decoration: underline; } .blog-card .blog-content { padding: 34px 40px 32px 40px; position: relative; z-index: 2; background-color: var(--white-color); transition: all ease 0.4s; border: 2px solid #ebf2fe; border-top: none; } .blog-card .blog-title { margin-bottom: 11px; } .blog-card:hover { box-shadow: 0px 5px 25px 0px rgba(39, 71, 125, 0.1); border-color: transparent; } .blog-card:hover .blog-img img { transform: scale(1.1); } .blog-card.card-animate .blog-img { position: relative; overflow: hidden; } .blog-card.card-animate .blog-img:after, .blog-card.card-animate .blog-img:before { content: ""; position: absolute; left: -50%; top: 0; width: 50%; height: 100%; background-color: var(--theme-color); opacity: 0.5; transition: all ease 0.8s; } .blog-card.card-animate .blog-img:after { left: auto; right: -50%; } .blog-card.card-animate:hover .blog-img:before { left: 50%; } .blog-card.card-animate:hover .blog-img:after { right: 50%; } .blog-single { border: 1px solid rgba(0, 0, 0, 0.05); margin-bottom: 30px; } .blog-single .blog-content { padding: 0 40px 0 40px; margin: 39px 0 33px 0; } .blog-single .blog-meta { margin-bottom: 14px; margin-top: -0.45em; } .blog-single .blog-title { line-height: 1.4; margin-bottom: 14px; } .blog-single .blog-audio { line-height: 1; } .blog-single .blog-img { position: relative; margin: -1px -1px 0 -1px; overflow: hidden; } .blog-single .blog-img .slick-arrow { width: 45px; height: 45px; line-height: 45px; border: none; background-color: var(--title-color); color: var(--white-color); position: absolute; left: 40px; top: 50%; margin-top: -22.5px; z-index: 2; opacity: 0; visibility: hidden; border-radius: 50%; transition: all ease 0.4s; } .blog-single .blog-img .slick-arrow.slick-next { left: auto; right: 40px; } .blog-single .blog-img .slick-arrow:hover { background-color: var(--theme-color); } .blog-single .blog-img .play-btn { position: absolute; left: 50%; top: 50%; margin: -40px 0 0 -40px; } .blog-single .blog-img .play-btn i { width: 80px; height: 80px; line-height: 80px; font-size: 20px; } .blog-single .blog-img img { transition: all ease 0.4s; transform: scale(1.001); } .blog-single .share-links { border-top: 1px solid #f1f1f1; padding-top: 28px; margin-top: 25px; } .blog-single:hover .blog-img .slick-arrow { opacity: 1; visibility: visible; } .blog-single:hover .blog-img img { transform: scale(1.1); } .blog-details .blog-single { border-right: none; border-left: none; border-top: none; padding-bottom: 30px; } .blog-details .blog-single .blog-img { margin: 0; } .blog-details .blog-single .blog-content { padding: 0; } .blog-details .blog-single .blog-content .blog-meta { margin-bottom: 16px; margin-top: -0.3em; } .blog-details .vs-comments-layout1 { margin-top: 70px; } .blog-author { margin-top: 80px; padding: 55px 60px; border-right: 10px solid var(--theme-color); } .blog-author .media-image { display: inline-block; border-radius: 50%; padding: 10px; background-color: var(--white-color); box-shadow: 0px 20px 42.75px 2.25px rgba(40, 71, 125, 0.2); } .blog-style1 .blog-img { overflow: hidden; } .blog-style1 .blog-img img { width: 100%; transition: all ease 0.4s; transform: scale(1.001); } .blog-style1 .blog-date { background-color: var(--theme-color4); color: var(--white-color); width: 100%; display: inline-block; line-height: 1; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; padding: 13px 20px; margin: 0 0 23px 0; } .blog-style1 .blog-date:hover { background-color: var(--theme-color2); color: var(--white-color); } .blog-style1 .blog-title { color: var(--title-color2); margin: 0 0 15px 0; } .blog-style1 .blog-bottom { display: flex; align-items: center; } .blog-style1 .blog-avater { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 1px solid var(--theme-color4); margin: 0 15px 0 0; } .blog-style1 .blog-auth-name { flex: 1; margin: 0; color: #2c2c2c; font-size: 16px; font-weight: 700; } .blog-style1 .blog-auth-name a { text-decoration: underline; margin-left: 5px; } .blog-style1 .blog-content { padding: 0 0 0 40px; margin: -22px 0 0 0; position: relative; z-index: 1; } .blog-style1:hover .blog-img img { transform: scale(1.15); } .blog-style2 { box-shadow: 10px 17.321px 24px 0px rgba(0, 0, 0, 0.03); margin-bottom: 55px; } .blog-style2 .blog-img { overflow: hidden; } .blog-style2 .blog-img img { width: 100%; transform: scale(1); transition: all ease 0.4s; } .blog-style2 .blog-content { border: 1px solid #b7b7b7; border-top: none; padding: 30px 40px 40px 40px; position: relative; transition: all ease 0.4s; } .blog-style2 .blog-date { color: var(--theme-color); font-size: 14px; text-decoration: underline; text-transform: uppercase; font-weight: 700; margin: 0 0 8px 0; display: inline-block; } .blog-style2 .blog-title { font-size: 20px; margin: 0 0 12px 0; } .blog-style2 .blog-btn { display: inline-block; width: 56px; height: 56px; line-height: 56px; text-align: center; font-size: 20px; background-color: var(--white-color); position: absolute; left: 40px; bottom: 0; margin-bottom: -28px; border-radius: 50%; box-shadow: 0.5px 0.866px 27px 0px rgba(35, 31, 32, 0.05); transition: all ease 0.4s; outline: 1px solid var(--theme-color); outline-offset: -4px; } .blog-style2:hover .blog-img img { transform: scale(1.15); } .blog-style2:hover .blog-content { border-color: var(--theme-color); } .blog-style2:hover .blog-btn { background-color: var(--theme-color); color: var(--white-color); outline-color: var(--white-color); } /* Large devices */ @media (max-width: 1199px) { .blog-card .blog-content { padding: 24px 30px 22px 30px; } .blog-card .blog-date { right: 20px; top: 20px; } .blog-style1 .blog-content { padding: 0 0 0 0; margin: 0 0 0 0; } .blog-style1 .blog-title { font-size: 20px; } } /* Medium devices */ @media (max-width: 992px) { blockquote { font-size: 20px; line-height: 34px; padding: 30px 40px 30px 40px; } blockquote cite { font-size: 16px; margin-top: 20px; } blockquote:before { right: 20px; bottom: 20px; font-size: 4rem; } .blog-author { padding: 30px 30px; } .blog-style2 .blog-content { padding: 25px 30px 30px 25px; } } /* Small devices */ @media (max-width: 767px) { .blog-single .blog-content { padding: 0 20px 0 20px; } } /* Extra small devices */ @media (max-width: 576px) { .share-links-title { display: block; margin-bottom: 8px; } .blog-style2 .blog-content { padding: 20px 30px 30px 20px; } } /*------------------- 4.9. Comments -------------------*/ .vs-comment-form { background-color: var(--smoke-color); padding: 60px; margin-bottom: 30px; margin-top: 80px; } .vs-comment-form .h2 { margin-top: -0.3em; } .vs-comments-layout1 li { margin: 0; } .vs-comments-layout1 .vs-post-comment { display: flex; padding: 35px 35px 30px 35px; border: 1px solid #f0f0f0; margin-bottom: 30px; } .vs-comments-layout1 ul.comment-list { list-style: none; margin: 0; padding: 0; } .vs-comments-layout1 ul.comment-list ul ul, .vs-comments-layout1 ul.comment-list ul ol, .vs-comments-layout1 ul.comment-list ol ul, .vs-comments-layout1 ul.comment-list ol ol { margin-bottom: 0; } .vs-comments-layout1 .author-img { width: 100px; height: 100px; margin-right: 30px; border-radius: 50%; overflow: hidden; } .vs-comments-layout1 .comment-content { width: calc(100% - 130px); margin-top: -5px; position: relative; } .vs-comments-layout1 .commented-on { font-size: 14px; display: inline-block; margin-bottom: 10px; font-weight: 700; color: var(--body-color); font-family: var(--title-font); } .vs-comments-layout1 .commented-on:before { content: "\f073"; font-family: var(--icon-font); font-weight: 300; color: var(--theme-color); margin-right: 7px; font-size: 13px; vertical-align: middle; } .vs-comments-layout1 .name { margin-bottom: 2px; } .vs-comments-layout1 .comment-top { display: flex; justify-content: space-between; } .vs-comments-layout1 .text { color: #6b6b6b; margin-bottom: 0; } .vs-comments-layout1 .text:last-child { margin-bottom: 0; } .vs-comments-layout1 .children { margin: 0; padding: 0; list-style-type: none; margin-left: 70px; } .vs-comments-layout1 .replay-btn { font-weight: 600; font-family: var(--title-font); font-size: 14px; color: var(--theme-color); margin-top: 10px; display: inline-block; } .vs-comments-layout1 .replay-btn i { margin-right: 7px; } .vs-comments-layout1 .replay-btn:hover { color: var(--title-color); text-decoration: underline; } .vs-comments-layout1 .star-rating { font-size: 12px; margin-bottom: 10px; position: absolute; top: 5px; right: 0; width: 80px; } /* Large devices */ @media (max-width: 1199px) { .vs-comment-form { padding: 30px; } } /* Medium devices */ @media (max-width: 992px) { .vs-comments-layout1.pt-70 { padding-top: 30px; } .vs-comments-layout1 .vs-post-comment { padding: 25px 25px 20px 25px; } .vs-comment-form { margin-top: 40px; } } /* Small devices */ @media (max-width: 767px) { .vs-comments-layout1 .vs-post-comment { display: block; } .vs-comments-layout1 .star-rating { position: relative; margin-bottom: 15px; } .vs-comments-layout1 .author-img { margin-right: 0; } .vs-comments-layout1 .comment-content { width: 100%; margin-top: 15px; } .vs-comments-layout1 .children { margin-left: 30px; } .vs-comment-form { padding: 25px 15px 25px 15px; } .vs-comment-form .form-title .h4 { font-size: 26px; } } /*------------------- 4.10. Hero Area -------------------*/ .ls-v6 .ls-bottom-nav-wrapper { position: absolute; left: 100px; top: 50% !important; transform: translateY(-50%); display: inline-block; height: -moz-fit-content; height: fit-content; } .ls-v6 .ls-gui-element.ls-bottom-nav-wrapper a { display: block !important; background-color: var(--title-color); margin: 18px 0; border-color: transparent !important; transform: translateX(-50%); transition: all ease 0.4s; } .ls-v6 .ls-gui-element.ls-bottom-nav-wrapper a:first-child { margin-top: 0; } .ls-v6 .ls-gui-element.ls-bottom-nav-wrapper a:last-child { margin-bottom: 0; } .ls-v6 .ls-gui-element.ls-bottom-nav-wrapper a.ls-nav-active:hover, .ls-v6 .ls-gui-element.ls-bottom-nav-wrapper a.ls-nav-active { background-color: var(--theme-color) !important; } .ls-v6 .ls-btn .play-btn { --icon-size: 100px; } .ls-v6 .ls-btn .play-btn i { font-size: 24px; } .ls-v6 a.ls-gui-element.ls-nav-prev, .ls-v6 a.ls-gui-element.ls-nav-next { --btn-size: 40px; left: 150px; background-color: var(--white-color); color: var(--theme-color); width: var(--btn-size); height: var(--btn-size); line-height: var(--btn-size) !important; right: auto; margin-top: -50px; text-align: center; opacity: 0; visibility: hidden; box-shadow: 0px 6px 37px 0px rgba(7, 204, 236, 0.15); transition: all ease 0.4s; } .ls-v6 a.ls-gui-element.ls-nav-prev:before, .ls-v6 a.ls-gui-element.ls-nav-next:before { content: "\f054"; font-family: var(--icon-font); transition: all ease 0.4s; } .ls-v6 a.ls-gui-element.ls-nav-prev:hover, .ls-v6 a.ls-gui-element.ls-nav-next:hover { transform: scale(1.3); background-color: var(--theme-color); color: var(--white-color); } .ls-v6 a.ls-gui-element.ls-nav-next { margin-top: 10px; } .ls-v6 a.ls-gui-element.ls-nav-next:before { content: "\f053"; } .ls-v6 a.ls-gui-element.ls-nav-prev:after, .ls-v6 a.ls-gui-element.ls-nav-next:after { display: none; } .ls-v6:hover a.ls-gui-element.ls-nav-prev, .ls-v6:hover a.ls-gui-element.ls-nav-next { opacity: 1; visibility: visible; } .ls-arrow2, .ls-arrow1 { display: inline-block; width: 50px; height: 50px; line-height: 48px; text-align: center; border: 2px solid rgba(255, 255, 255, 0.5); color: var(--white-color); background-color: transparent; padding: 0; border-radius: 50%; font-size: 16px; margin-right: 5px; } .ls-arrow2:last-child, .ls-arrow1:last-child { margin-right: 0; } .ls-arrow2:hover, .ls-arrow1:hover { border-color: transparent; background-color: var(--white-color); color: var(--title-color); } .ls-arrow2 { border-color: transparent; background-color: var(--white-color); color: var(--title-color); font-size: 18px; } .ls-arrow2:hover { background-color: var(--theme-color); color: var(--white-color); } .ls-custom-dot { width: 7px; height: 3px; background-color: var(--white-color); display: inline-block; border: none; margin-right: 6.5px; transition: all ease 0.4s; } .ls-custom-dot:hover { background-color: rgba(255, 255, 255, 0.5); } .ls-custom-dot.active { width: 120px; } .ls-custom-dot.vertical { height: 7px; width: 3px; display: block; margin-right: 0; margin-bottom: 6.5px; } .ls-custom-dot.vertical:last-child { margin-bottom: 0; } .ls-custom-dot.vertical.active { height: 120px; } .hero-layout5 { margin-top: -42px; } /* Extra large devices */ @media (max-width: 1500px) { .hero-layout5 { margin-top: 0; } .ls-custom-dot.active { width: 80px; } .ls-custom-dot.vertical.active { height: 80px; width: 3px; } } /* Large devices */ @media (max-width: 1199px) { .vs-hero-wrapper .ls-v6 .ls-bottom-nav-wrapper { display: none; } .vs-hero-wrapper a.ls-gui-element.ls-nav-prev, .vs-hero-wrapper a.ls-gui-element.ls-nav-next { display: none; } .ls-layer .vs-btn, .ls-btn .vs-btn { padding: 14px 30px 14px 30px; font-size: 14px; margin-left: 0; } .ls-layer .vs-btn:before, .ls-btn .vs-btn:before { display: none; } .ls-layer .vs-btn i, .ls-btn .vs-btn i { display: none; } } /* Medium devices */ @media (max-width: 992px) { .ls-container .ls-hide-md { display: none !important; } .ls-arrow2, .ls-arrow1 { display: inline-block; width: 40px; height: 40px; line-height: 38px; font-size: 14px; } .ls-v6 .ls-btn .play-btn i { font-size: 16px; } } /* Small devices */ @media (max-width: 767px) { .ls-container .ls-hide-sm { display: none !important; } .ls-btn .vs-btn { padding: 10px 20px 10px 30px; } .ls-layer .vs-btn, .ls-btn .vs-btn { padding: 12px 23px 12px 23px; font-size: 12px; margin-left: 0; } } /*------------------- 4.11. About -------------------*/ .about-img1 { position: relative; } .about-img1 .play-btn { position: absolute; left: 160px; bottom: 160px; } .about-rating { position: relative; z-index: 1; margin-top: 35px; margin-bottom: 18px; padding: 18px 0 35px 34px; } .about-rating .shape { position: absolute; left: 0; top: 0; z-index: -1; } .vs-list li, .about-list li { position: relative; padding-left: 35px; margin-bottom: 18px; } .vs-list li:last-child, .about-list li:last-child { margin-bottom: 0; } .vs-list li:before, .about-list li:before { content: "\f00c"; font-family: var(--icon-font); font-weight: 400; width: 25px; height: 25px; line-height: 25px; position: absolute; top: 0; left: 0; background-color: var(--theme-color); color: var(--white-color); border-radius: 50%; text-align: center; font-size: 12px; } .vs-list li:before { background-color: var(--white-color); color: var(--theme-color); box-shadow: 0px 5px 20px 0px rgba(28, 53, 95, 0.1); } .avater-small { width: 54px; height: 54px; overflow: hidden; border-radius: 50%; } .about-box1 { padding: 45px 60px 60px 60px; } .about-box4 { padding: 130px 0; } .about-box4 .about-content { position: relative; z-index: 1; max-width: 625px; margin-left: auto; } .about-box4 .sec-subtitle4 { color: var(--white-color); } .about-box4 .sec-line { background-color: var(--white-color); } .about-box4 .about-title { color: var(--white-color); max-width: 500px; margin-bottom: 30px; } .about-box4 .img-1 { position: absolute; right: 0; bottom: 0; z-index: 1; } .doctor-box { max-width: 204px; text-align: center; padding: 40px 20px 35px 20px; box-shadow: 0px 6px 37px 0px rgba(39, 71, 125, 0.07); background-color: var(--white-color); border-radius: 20px; } .doctor-box .icon-btn { margin-bottom: 15px; } .counter-list { padding: 20px 30px 17px 30px; background-color: #fff; box-shadow: 5px 0 30px 0 rgba(0, 0, 0, 0.04); border-left: 3px solid var(--theme-color); margin: 30px 0 30px 0; max-width: 500px; } .counter-list li:before, .counter-list .count-number { font-weight: 700; font-family: var(--title-font); font-size: 30px; line-height: 1; color: var(--title-color); } .counter-list .count-number { margin-bottom: 5px; } .counter-list .count-name { font-size: 14px; text-transform: uppercase; } .counter-list li { display: inline-block; padding-right: 34px; margin-right: 24px; position: relative; text-align: center; } .counter-list li:before { content: ":"; position: absolute; right: 0; top: 15px; } .counter-list li:last-child { padding-right: 0; margin-right: 0; } .counter-list li:last-child::before { display: none; } .vs-code-box { position: relative; display: inline-block; overflow: hidden; border: 2px solid var(--theme-color); background-color: var(--white-color); color: var(--title-color); font-weight: 600; padding: 19px 43px; border-radius: 3px; line-height: 1; } .vs-code-box::before { content: ""; position: absolute; background-color: var(--theme-color); width: 30px; height: 30px; right: -17px; bottom: -17px; transform: rotate(45deg); } .about-tab-nav { border-bottom: 1px solid #efefef; padding-bottom: 0 !important; margin-top: 12px !important; } .about-tab-nav .vs-btn { background-color: transparent; color: var(--body-color); font-weight: 400; border: none; position: relative; z-index: 1; border-radius: 10px 10px 0 0; padding: 12px 19px; } .about-tab-nav .vs-btn:hover, .about-tab-nav .vs-btn.active { background-color: var(--theme-color); color: var(--white-color); box-shadow: none; border-color: transparent; } .about-tab-nav .nav-item { margin: 0; } .about-tab-nav .nav-item:last-child { margin-right: 0; } .vs-middle-box { padding: 20px 40px; border-radius: 5px; } .exp-box-bottom { position: absolute; left: -1px; bottom: -1px; padding: 22px 37px 15px 25px; border-top-right-radius: 50px; } .exp-box-bottom .exp-year { font-size: 48px; line-height: 1; font-weight: 700; } .about-img3 { border: 10px solid var(--white-color); background-color: var(--white-color); box-shadow: 0px 20px 70px 0px rgba(28, 53, 95, 0.09); } .list-style1 .title { color: var(--theme-color4); font-weight: 700; font-size: 18px; } .list-style1 li { border-bottom: 1px solid #e5e5e5; padding: 0 0 22px 45px; margin: 0 0 24px 0; color: var(--body-color2); position: relative; } .list-style1 li > i:first-child { position: absolute; font-size: 28px; color: var(--theme-color2); top: 13px; left: 0; } .list-style1 li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .list-style1 ul, .list-style3 ul, .list-style2 ul { margin: 0; padding: 0; list-style-type: none; } .list-style2 { max-width: 310px; margin-bottom: 53px; } .list-style2 .icon { position: absolute; left: 0; top: -1px; } .list-style2 li { position: relative; color: var(--white-color); font-size: 17px; margin-bottom: 20px; padding: 0 0 0 40px; } .list-style3 { margin-bottom: 24px; } .list-style3 li { font-size: 16px; line-height: 26px; position: relative; padding-left: 27px; margin-bottom: 10px; } .list-style3 li i:first-child { position: absolute; left: 0; top: 4px; color: var(--theme-color); font-size: 17px; } .about-box2 .about-title { letter-spacing: -0.02em; margin-bottom: 20px; } .about-box2 .about-title .inner-text { color: var(--theme-color); } .about-box2 .about-text { margin-bottom: 27px; } .about-img2 { position: relative; --icon-size: 85px; --icon-font-size: 22px; z-index: 1; } .about-img2 .img-2 { margin: -145px 0 0 auto; right: 0; width: -moz-max-content; width: max-content; position: relative; max-width: 400px; } .about-img2 .img-2 .play-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .about-img2 .img-3 { position: absolute; left: 70px; bottom: 30px; right: 45px; top: 70px; background-color: var(--theme-color); z-index: -1; } .about-box3 { padding: 40px 0 0 0; position: relative; } .about-box3 .about-title { font-size: 36px; font-weight: 700; color: var(--theme-color); } .about-box3 .about-text { font-size: 18px; line-height: 30px; padding-right: 30px; margin: 0; } .about-box3 .about-number { color: var(--title-color); font-size: 210px; font-weight: 900; font-family: var(--title-font); opacity: 0.04; position: absolute; right: 3%; top: 30%; line-height: 1; letter-spacing: -0.1em; } .about-tab2 { margin-top: -138px; margin-bottom: 60px; position: relative; z-index: 3; } .about-tab2 button { display: flex; align-items: center; justify-content: center; text-transform: uppercase; border: 1px solid #b7b7b7; color: var(--title-color); background-color: var(--white-color); font-size: 16px; font-weight: 500; width: 270px; padding: 32px; margin: -1px; transition: all ease 0.4s; box-shadow: 10px 17.321px 24px 0px rgba(0, 0, 0, 0.03); } .about-tab2 button .tab-no { color: var(--theme-color); font-size: 40px; font-weight: 300; vertical-align: middle; margin-right: 15px; transition: all ease 0.4s; } .about-tab2 button .tab-text { text-align: left; line-height: 22px; } .about-tab2 button.active, .about-tab2 button:hover { background-color: var(--theme-color); color: var(--white-color); border-color: transparent; } .about-tab2 button.active .tab-no, .about-tab2 button:hover .tab-no { color: var(--white-color); } .call-style1 { background-color: var(--theme-color); display: flex; align-items: center; padding: 33px 40px; border-radius: 9999px; } .call-style1 .media-icon { margin-right: 15px; } .call-style1 .media-label { color: var(--white-color); font-size: 14px; font-weight: 400; line-height: 1; display: block; margin-bottom: 7px; } .call-style1 .media-info { line-height: 1; color: var(--white-color); font-size: 22px; font-weight: 700; margin: 0; } .call-style1 .media-info a { color: inherit; } .call-style1 .media-info a:hover { text-decoration: underline; } .media-style1 { background-color: var(--white-color); border-left: 3px solid var(--theme-color); padding: 20px 20px 20px 25px; max-width: 350px; border-radius: 0 4px 4px 0; display: flex; align-items: center; margin-bottom: 30px; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.03); } .media-style1 .media-icon { font-size: 30px; color: var(--theme-color); margin-right: 20px; } .media-style1 .media-title { font-size: 14px; text-transform: uppercase; margin: 0 0 15px 0; font-weight: 700; line-height: 1; color: var(--body-color); } .media-style1 .media-text { font-size: 24px; font-weight: 700; color: var(--title-color); margin: 0; line-height: 1; } .media-style1 .media-text a { color: inherit; } .media-style1 .media-text a:hover { color: var(--theme-color); } .media-style1 .media-text i { margin-right: 10px; font-size: 20px; } .media-style2 { display: flex; align-items: center; margin: 0 0 25px 0; } .media-style2 .media-icon { margin-right: 20px; width: 40px; height: 40px; line-height: 40px; text-align: center; background-color: var(--theme-color4); border-radius: 50%; color: var(--white-color); font-size: 17px; } .media-style2 .media-label { font-size: 14px; text-transform: uppercase; color: var(--white-color); font-weight: 400; letter-spacing: 0.06em; display: block; line-height: 1; margin: 0 0 6px 0; } .media-style2 .media-text { margin: 0; line-height: 1; font-size: 18px; max-width: 230px; line-height: 26px; font-weight: 700; } /* Medium Large devices */ @media (max-width: 1399px) { .about-tab2 { margin-bottom: 40px; margin-top: 0; } } /* Large devices */ @media (max-width: 1199px) { .about-img1 .play-btn { left: 100px; bottom: 100px; } .about-tab2 button { font-size: 14px; width: 225px; padding: 20px; } .about-tab2 button .tab-no { font-size: 34px; margin-right: 10px; } .call-style1 { padding: 25px 25px; } .doctor-box.top-50 { margin-top: 20%; } .about-box1 { margin-bottom: 40px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05); } .about-box2 { padding-left: 30px; margin-left: 0; } .about-box2 .list-style3, .about-box2 .about-text, .about-box2 .about-text { max-width: 100%; } .about-box2 .about-title { margin-bottom: 20px; } .about-box4 { padding: 80px 20px; } .about-box4 .about-content { max-width: 800px; } .about-img2 .img-2 { right: 0; max-width: 100%; width: 100%; margin: 30px 0 0 0; } .about-img2 .img-2 img { width: 100%; } .about-img2 .img-3 { display: none; } .list-style3 li i:first-child { top: 0; } } /* Medium devices */ @media (max-width: 992px) { .about-img1 .play-btn { left: 190px; bottom: 180px; } .middle-box-layout1 { margin-bottom: 80px !important; } .about-img2 img { width: 100%; } .about-box2 { padding-left: 0; margin-top: 40px; } .about-box2 .about-text { font-size: 16px; } .about-box3 { padding-top: 0; } .about-box3 .about-title { font-size: 30px; } .about-box3 .about-text { font-size: 16px; padding: 0; } .about-box3 .about-number { font-size: 130px; } .about-tab2 button { width: 50%; } } /* Small devices */ @media (max-width: 767px) { .about-img1 .play-btn { left: 120px; bottom: 130px; } .about-box4 .img-1 { display: none; } .about-box1 { padding: 0; margin-bottom: 40px; box-shadow: none; } .about-tab-nav .vs-btn { padding: 11px 15px; font-size: 14px; } .about-tab-nav .nav-item { margin-right: 10px; } .vs-list li, .about-list li { padding-left: 30px; } .vs-list li:before, .about-list li:before { width: 20px; height: 20px; line-height: 20px; top: 3px; font-size: 12px; } .counter-list { padding: 20px 18px 17px 13px; margin: 20px 0 20px 0; } .counter-list .count-number { font-size: 24px; margin-bottom: 0; } .counter-list .count-name { font-size: 12px; } .counter-list li { padding-right: 10px; margin-right: 8px; } .counter-list li:before { top: 5px; right: -5px; font-size: 22px; } .exp-box-bottom { padding: 22px 26px 8px 10px; } .exp-box-bottom { padding: 14px 21px 2px 10px; } .exp-box-bottom .exp-year { font-size: 28px; } .exp-box-bottom .text-title { font-size: 14px; } .doctor-box { max-width: 170px; padding: 25px 5px 20px 5px; border-radius: 5px; transform: translateY(-10%) !important; box-shadow: 0px 6px 70px 0px rgba(39, 71, 125, 0.13); } .about-call-text.h4 { font-size: 16px; } .vs-middle-box.d-md-flex .media-icon { margin-right: 0; } .vs-code-box.mt-20 { width: 100%; text-align: center; } .about-rating { margin-top: 20px; margin-bottom: 25px; padding: 17px 0 13px 18px; } .about-rating .total.h2 { font-size: 36px; margin-right: 10px; } .breadcumb-menu-wrap { --icon-size: 30px; --shape-size: 40px; } .breadcumb-menu-wrap > i:before { font-size: 14px; } .about-box3 .about-title { font-size: 24px; margin-bottom: 10px; } .about-tab2 button { display: block; } .about-tab2 button .tab-no { display: block; margin: 0 0 5px 0; } .about-tab2 button .tab-text { line-height: 1.4; text-align: center; display: block; } } /* Extra small devices */ @media (max-width: 576px) { .about-img1 .play-btn { left: 10%; bottom: 10%; } .media-style1 { padding: 20px 15px 20px 15px; } .media-style1 .media-icon { font-size: 24px; margin-right: 15px; } .vs-middle-box { padding: 25px; } .vs-middle-box .text-center.media-icon { margin-right: 0; } } /*------------------- 4.12. Services -------------------*/ .service-card { box-shadow: 0px 6px 13px 0px rgba(39, 71, 125, 0.1); background-color: var(--white-color); text-align: center; padding-top: 43px; overflow: hidden; border-radius: 10px; } .service-card .sr-icon { display: block; width: -moz-fit-content; width: fit-content; margin-left: auto; margin-right: auto; position: relative; --size: 130px; --extra: -8px; --radius: 50%; z-index: 2; } .service-card .sr-icon:before { content: ""; position: absolute; z-index: -1; background-color: var(--white-color); left: var(--extra); right: var(--extra); top: var(--extra); bottom: var(--extra); border-radius: var(--radius); } .service-card .sr-icon i { display: inline-block; background-color: var(--theme-color); color: var(--white-color); width: var(--size); height: var(--size); line-height: var(--size); border-radius: var(--radius); transition: all ease 0.4s; } .service-card .icon-btn { position: relative; margin-bottom: -17px; z-index: 4; transition: ease 0.4s; } .service-card .icon-btn i { background-color: var(--title-color); } .service-card .sr-text { width: 100%; max-width: 345px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; margin: 0 auto 25px auto; } .service-card .sr-img { position: relative; overflow: hidden; margin-top: -90px; } .service-card .sr-img > div { z-index: 1; } .service-card .sr-img img { transform: scale(1); transition: all ease 0.4s; } .service-card .sr-img:before { content: ""; position: absolute; left: 0; bottom: 0; right: 0; height: 0; background-image: linear-gradient(to top, var(--theme-color) 0%, rgba(255, 255, 255, 0) 70%); opacity: 0.6; transition: all ease 0.4s; z-index: 1; } .service-card:hover .icon-btn i { background-color: var(--theme-color); } .service-card:hover .sr-icon i { background-color: var(--title-color); } .service-card:hover .sr-img > img { transform: scale(1.1); } .service-card:hover .sr-img:before { height: 100%; } .notice-bar { padding: 13.5px 30px; display: inline-block; box-shadow: 0px 3px 40px 0px rgba(39, 71, 125, 0.12); border-radius: 9999px; } .notice-bar p { margin-bottom: 0; } .service-box { text-align: center; --shape-size: 92px; padding: 40px 40px 42px 40px; border-radius: 10px; border: 2px solid #e6f8fb; position: relative; margin-bottom: 25px; background-color: var(--white-color); transition: all ease 0.4s; } .service-box .sr-icon { background-color: var(--white-color); padding: 13px; margin-top: calc(var(--shape-size) / -2 - 13px); display: inline-block; margin-bottom: 13px; position: relative; z-index: 2; border-radius: 50%; } .service-box .sr-icon i { width: var(--shape-size); height: var(--shape-size); line-height: var(--shape-size); background-color: var(--theme-color); color: var(--white-color); font-size: 3em; display: inline-block; text-align: center; border-radius: inherit; } .service-box .sr-img { overflow: hidden; border-radius: 10px; position: relative; } .service-box .sr-img:before { content: ""; position: absolute; left: 0; bottom: 0; right: 0; height: 0; background-image: linear-gradient(to top, var(--theme-color) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0.8; transition: all ease 0.4s; z-index: 1; } .service-box .sr-img img { transform: scale(1); transition: all ease 0.4s; } .service-box .sr-content { padding: 0 10px; } .service-box .icon-btn { position: absolute; left: 50%; bottom: 0; margin: 0 0 -24px -25px; } .service-box:hover { border-color: var(--theme-color); box-shadow: 0px 12px 47px 0px rgba(39, 71, 125, 0.07); } .service-box:hover .sr-img:before { height: 100%; } .service-box:hover .sr-img img { transform: scale(1.2); } .service-thumb { position: relative; --size-icon: 88px; padding-bottom: 60px; margin-bottom: 30px; } .service-thumb .sr-icon { display: inline-block; position: absolute; left: 50%; top: calc(var(--size-icon) / -2); width: var(--size-icon); height: var(--size-icon); line-height: var(--size-icon); margin-left: calc(var(--size-icon) / -2); text-align: center; background-color: var(--white-color); border-radius: 50%; color: #1b1b1b; z-index: 2; box-shadow: 0px 15px 42.75px 2.25px rgba(39, 71, 125, 0.07); transition: all ease 0.4s; opacity: 0; visibility: hidden; } .service-thumb .sr-body { position: absolute; left: 0; right: 0; bottom: 0; box-shadow: 0px 15px 42.75px 2.25px rgba(39, 71, 125, 0.07); background-color: var(--white-color); text-align: center; padding: 35px 30px 22px 30px; transition: all ease 0.4s; max-width: 320px; margin-left: auto; margin-right: auto; } .service-thumb .sr-title { transition: all ease 0.4s; } .service-thumb .sr-content { overflow: hidden; transition: all ease 0.4s; margin-bottom: 0; } .service-thumb .sr-text { font-size: 14px; margin-bottom: 6px; } .service-thumb .link-btn { font-size: 14px; } .service-thumb .sr-img { overflow: hidden; } .service-thumb .sr-img img { transition: all ease 0.4s; transform: scale(1); } .service-thumb:hover .sr-icon { opacity: 1; visibility: visible; } .service-thumb:hover .sr-body { padding-top: 70px; padding-top: calc(var(--size-icon) / 2 + 25px); } .service-thumb:hover .sr-icon, .service-thumb:hover .sr-title a { color: var(--theme-color) !important; } .service-thumb:hover .sr-img img { transform: scale(1.3); } .service-bar { padding: 60px 80px; background-color: var(--white-color); box-shadow: 0px 15px 42.75px 2.25px rgba(39, 71, 125, 0.07); margin-top: -87.5px; margin-bottom: 60px; position: relative; z-index: 2; } @media (min-width: 767px) { .service-circle { position: relative; width: 800px; height: 800px; margin-left: auto; margin-right: auto; overflow: hidden; border-radius: 50%; } .service-circle__center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; border-radius: 50%; width: 425px; height: 425px; border-radius: 50%; background-color: var(--theme-color4); } .service-circle__item { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; width: 100%; border-radius: 50%; padding: 20px 20px; text-align: center; transition: all ease 0.4s; opacity: 0; visibility: hidden; } .service-circle__item.active { opacity: 1; visibility: visible; } .service-circle__title { color: var(--white-color); max-width: 260px; position: relative; padding-bottom: 20px; } .service-circle__title a { color: inherit; } .service-circle__title a:hover { text-decoration: underline; } .service-circle__title:after, .service-circle__title:before { content: ""; position: absolute; left: 50%; bottom: 0; width: 220px; margin: 0 0 0 -110px; height: 1px; background-color: var(--white-color); border-radius: 10px; opacity: 0.7; } .service-circle__title:after { height: 3px; width: 40px; margin: 0 0 -1px -20px; opacity: 1; } .service-circle__text { color: var(--white-color); margin: 0 0 3px 0; max-width: 260px; } .service-circle__lines .line { background-color: #f5f7ff; width: 20px; height: 900px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-30deg); z-index: 2; } .service-circle__lines .line:nth-child(2) { transform: translate(-50%, -50%) rotate(30deg); } .service-circle__lines .line:nth-child(3) { transform: translate(-50%, -50%) rotate(90deg); } .service-circle__menu { position: relative; width: 800px; height: 800px; margin: 0 auto; /* Make each list item right corner to center of the menu */ /* rotate deg = 360deg / count-of-item (360/6=60deg); skew deg = 90deg - [rotate deg] each li rotate deg = rotate deg * li-number; */ } .service-circle__menu ul { position: absolute; width: 800px; height: 800px; padding: 0; list-style: none; border-radius: 50%; /* THIS IS IMPORTANT */ overflow: hidden; /* THIS IS IMPORTANT */ } .service-circle__menu li { position: absolute; top: -84px; /* THIS IS IMPORTANT */ left: -84px; /* THIS IS IMPORTANT */ width: 484px; height: 484px; transform-origin: 100% 100%; /* THIS IS IMPORTANT */ overflow: hidden; /* THIS IS IMPORTANT */ transform: rotate(var(--rotate-item, 0)) skew(30deg); } .service-circle__menu li a { display: block; width: 484px; height: 484px; margin-top: 119px; /* THIS IS IMPORTANT */ margin-left: 119px; /* THIS IS IMPORTANT */ background-color: var(--white-color); transform: skew(-30deg) rotate(-60deg); /* THIS IS IMPORTANT */ transition: background-color 0.5s; text-align: center; } .service-circle__menu li a:hover, .service-circle__menu li.active a { background-color: var(--theme-color2); } .service-circle__menu li a:hover img, .service-circle__menu li.active a img { filter: brightness(0) invert(1); } .service-circle__menu li img { position: absolute; left: var(--icon-left, 50%); top: var(--icon-top, 35%); transform: translate(-50%, -50%) rotate(var(--rotate-icon, -300deg)); transform-origin: 50% center; display: block; transition: all ease 0.4s; } .service-circle__menu li:nth-child(2) { --rotate-item: 60deg; --rotate-icon: 0; } .service-circle__menu li:nth-child(3) { --rotate-item: 120deg; --rotate-icon: -60deg; --icon-top: 34%; --icon-left: 46%; } .service-circle__menu li:nth-child(4) { --rotate-item: 180deg; --rotate-icon: -120deg; --icon-left: 46%; } .service-circle__menu li:nth-child(5) { --rotate-item: 240deg; --rotate-icon: -180deg; --icon-left: 48%; } .service-circle__menu li:nth-child(6) { --rotate-item: 300deg; --rotate-icon: -240deg; } } @media (min-width: 767px) and (max-width: 992px) { .service-circle { width: 700px; height: 700px; } .service-circle__center { width: 375px; height: 375px; } .service-circle__menu { width: 700px; height: 700px; /* Make each list item right corner to center of the menu */ /* rotate deg = 360deg / count-of-item (360/6=60deg); skew deg = 90deg - [rotate deg] each li rotate deg = rotate deg * li-number; */ } .service-circle__menu ul { width: 700px; height: 700px; } .service-circle__menu li { top: -34px; /* THIS IS IMPORTANT */ left: -34px; /* THIS IS IMPORTANT */ width: 384px; height: 384px; } .service-circle__menu li a { width: 384px; height: 384px; margin-top: 88px; /* THIS IS IMPORTANT */ margin-left: 88px; /* THIS IS IMPORTANT */ } .service-circle__menu li img { transform: translate(-50%, -70%) rotate(var(--rotate-icon, -300deg)); } } .service-style1 { position: relative; margin-bottom: 30px; overflow: hidden; } .service-style1 .service-img img { width: 100%; } .service-style1 .service-flip-title { position: absolute; left: -3px; top: 50%; margin: 0; text-align: center; z-index: 1; background-color: var(--white-color); font-size: 20px; font-weight: 600; writing-mode: tb-rl; transform: rotate(-180deg) translateY(50%); height: -moz-max-content; height: max-content; padding: 90px 25px 90px 29px; -webkit-clip-path: polygon(0 13%, 100% 0, 100% 100%, 0 87%); clip-path: polygon(0 13%, 100% 0, 100% 100%, 0 87%); transition: all ease 0.4s; opacity: 1; visibility: visible; margin-left: 0; } .service-style1 .service-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--theme-color); z-index: 1; opacity: 0.9; opacity: 0; visibility: hidden; transition: all ease 0.4s; } .service-style1 .service-content { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; z-index: 2; padding: 0 40px; } .service-style1 .service-title { color: var(--white-color); font-size: 24px; } .service-style1 .service-title a { color: inherit; } .service-style1 .service-title a:hover { color: var(--title-color); } .service-style1 .service-text { color: var(--white-color); line-height: 28px; margin: 0; transition: all ease 0.4s; } .service-style1 .service-btn, .service-style1 .service-text, .service-style1 .service-title { transition: all ease 0.4s; opacity: 0; visibility: hidden; transform: translateY(-40px); } .service-style1 .service-btn { width: 40px; height: 40px; line-height: 40px; text-align: center; display: inline-block; background-color: var(--white-color); color: var(--theme-color); position: absolute; left: 50%; bottom: 40px; margin-left: -20px; border-radius: 50%; z-index: 1; transform: translateY(40px); } .service-style1 .service-btn:hover { background-color: var(--title-color); color: var(--white-color); } .service-style1:hover .service-btn, .service-style1:hover .service-text, .service-style1:hover .service-title { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0.1s; } .service-style1:hover .service-title { transition-delay: 0.2s; } .service-style1:hover .service-overlay { opacity: 0.9; visibility: visible; } .service-style1:hover .service-flip-title { margin-left: -100px; opacity: 0; visibility: hidden; } /* Hight Resoulation devices */ @media (min-width: 1921px) { .service-style1 .service-content { padding: 0 20px; } .service-style1 .service-title { font-size: 20px; } .service-style1 .service-btn { bottom: 20px; } } /* Large devices */ @media (max-width: 1199px) { .service-style1 .service-content { padding: 0 20px; } .service-style1 .service-title { font-size: 20px; } .service-style1 .service-btn { bottom: 20px; } } /* Medium Large devices */ @media (max-width: 1399px) { .service-box { --shape-size: 82px; padding: 30px 30px 32px 30px; } .service-box .sr-icon { padding: 8px; } } /* Large devices */ @media (max-width: 1199px) { .service-card { padding-top: 43px; } .service-card .sr-icon { --size: 100px; --extra: -5px; } .service-card .sr-icon i { font-size: 3em; } .service-card .sr-img { margin-top: -60px; } .service-card .sr-text { padding-left: 30px; padding-right: 30px; } .service-box .sr-content { padding: 0; } .service-bar { padding: 35px 40px 40px 40px; margin-top: 40px; margin-bottom: 35px; box-shadow: 0 0 45px -5px rgba(39, 71, 125, 0.14); } } /* Medium devices */ @media (max-width: 992px) { .service-thumb { padding-bottom: 0; } .service-thumb .sr-icon { opacity: 1; visibility: visible; } .service-thumb .sr-body { position: relative; padding-top: calc(var(--size-icon) / 2 + 15px); max-width: 100%; } .service-thumb .sr-icon, .service-thumb .sr-title a { color: var(--theme-color) !important; } .service-thumb .sr-img img { transform: scale(1.3); } .service-thumb:hover .sr-body { padding-top: calc(var(--size-icon) / 2 + 15px); } } /* Small devices */ @media (max-width: 767px) { .notice-bar { border-radius: 10px; } .service-card { padding-top: 33px; } .service-card .sr-text { padding-left: 20px; padding-right: 20px; } .service-card .sr-img { margin-top: -50px; } .service-thumb { --size-icon: 70px; } .service-thumb .sr-icon .fa-3x { font-size: 2.5em; } .service-box { --shape-size: 74px; padding: 20px 20px 30px 20px; } .notice-bar { padding: 13.5px 15px; } .notice-bar.mt-30 { margin-top: 0; } .service-circle__menu ul { margin: 0 0 30px 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; } .service-circle__menu li { display: inline-block; } .service-circle__menu li.active a { background-color: var(--theme-color2); } .service-circle__menu li.active a img { filter: brightness(0) invert(1); } .service-circle__menu a { display: block; background-color: var(--white-color); width: 80px; height: 80px; line-height: 80px; text-align: center; border-radius: 7px; } .service-circle__menu a img { max-width: 40px; transition: all ease 0.4s; } .service-circle__item { display: none; background-color: var(--theme-color4); padding: 30px 20px 20px 20px; border-radius: 7px; text-align: center; } .service-circle__item:not(.active) { opacity: 0; } .service-circle__item.active { display: block; transition: opacity 0.15s linear; } .service-circle__title { color: var(--white-color); } .service-circle__title a { color: inherit; } .service-circle__title a:hover { text-decoration: underline; } .service-circle__text { color: var(--white-color); } } /*------------------- 4.13. Team -------------------*/ .team-info { color: var(--title-color); font-weight: 700; margin-bottom: 5px; } .team-info:last-child { margin-bottom: 0; } .team-info i { display: inline-block; width: 30px; } .team-card-links { display: inline-block; z-index: 1; position: absolute; right: 40px; bottom: 18px; left: 40px; } .team-card-links i { width: 50px; height: 50px; line-height: 50px; color: var(--white-color); background-color: var(--theme-color); text-align: center; border-radius: 50%; transition: all ease 0.4s; } .team-card-links .team-links-toggler i { color: var(--theme-color); background-color: var(--white-color); border: 1px solid var(--border-color); } .team-card-links .team-links-toggler i:hover { color: var(--white-color); background-color: var(--title-color); border-color: transparent; } .team-card-links a { margin-right: 12px; } .team-card-links a:last-child { margin-right: 0; } .team-card-links a:hover i { background-color: rgba(7, 204, 236, 0.7); color: var(--white-color); } .team-social { display: inline-block; } .team-social i { opacity: 0; visibility: hidden; transform: translateX(30px) rotate(90deg); transition: all ease 0.6s; } .team-social i.fa-facebook-f { background-color: #3b5998; } .team-social i.fa-twitter { background-color: #00acee; } .team-social i.fa-basketball-ball { background-color: #ea4c89; } .team-links-toggler { position: relative; display: inline-block; } .team-links-toggler:after { animation-delay: 1.2s; } .team-links-toggler:hover:before, .team-links-toggler:hover:after { background-color: var(--title-color); } .team-card { border: 2px solid #f2f6fe; position: relative; transition: all ease 0.4s; } .team-card:before { content: ""; position: absolute; bottom: -1px; left: -2px; right: auto; width: 0; height: 3px; background-color: var(--theme-color); transition: all ease 0.4s; } .team-card .team-body { padding: 0 40px 35px 40px; } .team-card .team-head { position: relative; } .team-card .degi { letter-spacing: 0.02em; } .team-card:hover { box-shadow: 0px 5px 27px 0px rgba(39, 71, 125, 0.1); border-color: transparent; } .team-card:hover:before { width: calc(100% + 4px); left: auto; right: -2px; } .team-card:hover .team-social i { opacity: 1; visibility: visible; transform: rotate(0) translateX(0); } .team-box { position: relative; text-align: center; overflow: hidden; } .team-box .team-img { overflow: hidden; } .team-box .team-img img { transform: scale(1); transition: all ease 0.4s; } .team-box .team-content { position: absolute; left: 30px; right: 30px; bottom: 0; padding: 25px 0 27px 0; bottom: -120px; } .team-box .name { margin-left: 40px; } .team-box .degi { margin-right: 40px; } .team-box .name, .team-box .degi, .team-box .team-content { opacity: 0; visibility: hidden; transition: all ease 0.4s; } .team-box .text-reset:hover { color: inherit !important; } .team-box:hover .name { margin-left: 0; transition-delay: 0.2s; } .team-box:hover .degi { margin-right: 0; transition-delay: 0.2s; } .team-box:hover .name, .team-box:hover .degi, .team-box:hover .team-content { opacity: 1; visibility: visible; bottom: 0; } .team-box:hover .team-img img { transform: scale(1.3); } .member-table { margin-top: 60px; margin-bottom: 60px; } .member-table th, .member-table td { font-size: 14px; border: none; padding: 20px 30px; vertical-align: top; } .member-table th { color: var(--title-color); } .member-table tr:nth-child(odd) th, .member-table tr:nth-child(odd) td { background-color: #f3f6f7; border-radius: 0 5px 5px 0; } .member-table tr:nth-child(odd) th { border-radius: 5px 0 0 5px; } .member-info-list { list-style-type: none; margin: 0; padding: 0; } .member-info-list li { position: relative; padding-left: 25px; margin-bottom: 5px; } .member-info-list li:last-child { margin-bottom: 0; } .member-info-list li:before { content: "\f00c"; font-family: var(--icon-font); color: var(--theme-color); position: absolute; left: 0; } .team-schedule { padding: 60px 60px 58px 60px; border-radius: 5px; position: relative; margin-bottom: 70px; } .team-schedule .vs-btn { box-shadow: 0px 15px 65px 0px rgba(39, 71, 125, 0.06); background-color: var(--white-color); color: var(--theme-color); font-size: 30px; --icon-shape: 60px; --icon-size: 44px; padding: 0 50px; line-height: 80px; height: 80px; margin-bottom: -40px; position: absolute; left: calc(50% - 15px); bottom: 0; width: -moz-fit-content; width: fit-content; transform: translateX(-50%); display: inline-block; white-space: nowrap; } .team-schedule .vs-btn i { color: var(--white-color); font-size: 1.1rem; } .team-schedule .vs-btn:hover { color: var(--white-color); } .team-schedule-table { margin-top: -0.3em; } .team-schedule-table td { border-top: none; border-bottom: 1px dashed #dfdfe0; } .team-schedule-table td + td { text-align: right; } .team-schedule-table tr:first-child td { border-top: none; padding-top: 0; } .member-angle-links { position: absolute; bottom: 0; left: 0; right: 0; height: 216px; } .member-angle-links .shape { position: absolute; left: 0; top: 0; width: 100%; } .member-angle-links .shape img { width: 100%; } .member-angle-links .middle-icon i, .member-angle-links a { width: 45px; height: 45px; line-height: 47px; font-size: 18px; text-align: center; background-color: var(--white-color); color: var(--title-color); display: inline-block; border-radius: 50%; } .member-angle-links .middle-icon i:hover, .member-angle-links a:hover { background-color: var(--theme-color); color: var(--white-color); } .member-angle-links .middle-icon i:nth-of-type(1):not(.middle-icon):not(i), .member-angle-links a:nth-of-type(1):not(.middle-icon):not(i) { left: 215px; top: 21px; } .member-angle-links .middle-icon i:nth-of-type(2), .member-angle-links a:nth-of-type(2) { left: 169px; top: 57px; } .member-angle-links .middle-icon i:nth-of-type(3), .member-angle-links a:nth-of-type(3) { left: 333px; top: 10px; } .member-angle-links .middle-icon i:nth-of-type(4), .member-angle-links a:nth-of-type(4) { left: 387px; top: 31px; } .member-angle-links a { position: absolute; left: 0; top: 0; } .member-angle-links .middle-icon { position: absolute; display: inline-block; left: 0; top: 0; border-radius: 50%; left: 270px; top: -17px; z-index: 1; } .member-angle-links .middle-icon i { background-color: var(--title-color); color: var(--white-color); } .member-angle-links .middle-icon:before { content: ""; position: absolute; left: -8px; top: -8px; right: -8px; bottom: -8px; background-color: var(--white-color); border-radius: inherit; z-index: -1; } .certifate-link { position: absolute; color: var(--white-color); text-transform: capitalize; text-decoration: underline; line-height: 1; right: 40px; bottom: 40px; } .certifate-link i { margin-left: 5px; } .team-style1 { text-align: center; margin-bottom: 30px; } .team-style1 .team-img { margin: 0 0 26px 0; position: relative; z-index: 1; } .team-style1 .team-shape { position: absolute; right: 0; bottom: 0; width: 100%; height: 390px; background-color: var(--theme-color4); z-index: -1; -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%); clip-path: polygon(100% 0, 0% 100%, 100% 100%); } .team-style1 .team-name { color: var(--title-color2); margin: 0 0 5px 0; } .team-style1 .team-degi { color: var(--theme-color4); font-weight: 500; } .team-style1 .team-links { background-color: var(--white-color); padding: 0 35px; width: -moz-max-content; width: max-content; border-radius: 9999px; margin: 22px auto 0 auto; display: flex; border: 1px solid transparent; transition: all ease 0.4s; box-shadow: none; } .team-style1 .team-links a { color: var(--body-color2); display: inline-block; font-size: 18px; position: relative; width: 70px; height: 60px; line-height: 60px; text-align: center; background-color: transparent; transition: all ease 0.4s; z-index: 1; } .team-style1 .team-links a:before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 30px; margin-top: -15px; background-color: #d0d0d0; z-index: -1; transition: all ease 0.4s; } .team-style1 .team-links a:first-child { margin-right: 0; } .team-style1 .team-links a:first-child:before { display: none; } .team-style1 .team-links a:hover { color: var(--white-color); background-color: var(--theme-color); } .team-style1 .team-links a:hover::before, .team-style1 .team-links a:hover + a::before { opacity: 0; visibility: hidden; } .team-style1:hover .team-links { border-color: var(--theme-color4); box-shadow: 10px 17.321px 24px 0px rgba(0, 0, 0, 0.03); } .team-style1:nth-child(odd) .team-shape { --theme-color4: #d1daff; } /* Extra large devices */ @media (max-width: 1500px) { .member-angle-links { position: absolute; height: auto; left: 30px; top: 30px; width: auto; right: auto; } .member-angle-links .shape { display: none; } .member-angle-links .middle-icon { left: 0; right: auto; top: 0; position: relative; margin-bottom: 20px; } .member-angle-links a { display: block; margin-bottom: 15px; position: static; transform: translateY(60px) rotate(90deg); opacity: 0; visibility: hidden; } .member-angle-links a:last-child { margin-bottom: 0; } .member-angle-links.show .middle-icon.active .fa-share-alt:before { content: "\f068"; } .member-angle-links.show a { transform: translateY(0) rotate(0); opacity: 1; visibility: visible; } .member-details-img { position: relative; } .member-details-img:before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 35%; background-image: linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(255, 255, 255, 0) 84%); opacity: 0.6; } } /* Medium Large devices */ @media (max-width: 1399px) { .team-schedule { padding: 40px 40px 58px 40px; } } /* Large devices */ @media (max-width: 1199px) { .team-card .team-card-links { right: 30px; left: 30px; } .team-card .team-body { padding: 0 30px 25px 30px; } .team-card-links i { width: 40px; height: 40px; line-height: 40px; font-size: 14px; } .team-schedule { padding: 40px 40px 40px 40px; margin-bottom: 65px; } .team-schedule .vs-btn { font-size: 24px; --icon-shape: 40px; --icon-size: 30px; padding: 0 30px; line-height: 60px; height: 60px; margin-bottom: -30px; } .certifate-link { right: 30px; bottom: 30px; } .team-style1 .team-shape { height: 280px; } .team-style1 .team-links { padding: 0 20px; } } /* Medium devices */ @media (max-width: 992px) { .team-layout2 { padding-top: 80px !important; } } /* Small devices */ @media (max-width: 767px) { .team-box .team-content { left: 20px; right: 20px; } .team-schedule { padding: 40px 20px 40px 20px; } .team-schedule .vs-btn { left: calc(55% - 15px); } .member-table { margin-top: 30px; margin-bottom: 40px; } } /* Extra small devices */ @media (max-width: 576px) { .member-table th, .member-table td { font-size: 14px; border: none; padding: 9px 10px; vertical-align: top; } .team-schedule .vs-btn { font-size: 18px; padding: 0 26px; line-height: 60px; height: 60px; margin-left: 10px; } } /*------------------- 4.14. Form Style -------------------*/ .form-wrap1 { box-shadow: 0px 5px 120px 0px rgba(39, 71, 125, 0.15); } .form-wrap1 .form-box, .form-wrap1 .form-title-box { padding: 60px; } .form-wrap2 { box-shadow: 0px 20px 60px 0px rgba(39, 71, 125, 0.07); border-radius: 9999px; padding: 45px; background-color: var(--white-color); } .form-wrap3 { --bs-gutter-x: 1rem; padding: 80px 80px 80px 80px; } .form-style1 { position: relative; } .form-style1 i { position: absolute; right: auto; left: 40px; font-size: 14px; top: 23px; } .form-style1 input { border: 2px solid var(--theme-color); border-radius: 9999px; padding-left: 65px; color: var(--title-color); font-size: 14px; margin-right: 30px; } .form-style1 input::-moz-placeholder { color: var(--title-color); } .form-style1 input::placeholder { color: var(--title-color); } .form-style1 input:focus { border-color: var(--theme-color); } .find-form1 { margin-bottom: 50px; } .find-form1 .form-text { color: var(--title-color2); margin: 0 0 27px 0; } .find-form1 .form-group { position: relative; margin: 0; } .find-form1 input { font-size: 14px; color: var(--body-color2); height: 62px; border-radius: 9999px; padding: 0 60px 0 40px; border: 1px solid var(--theme-color4); box-shadow: 10px 17.321px 24px 0px rgba(0, 0, 0, 0.03); } .find-form1 input::-moz-placeholder { color: #757575; } .find-form1 input::placeholder { color: #757575; } .find-form1 button { border: none; background-color: transparent; padding: 0; color: var(--theme-color4); position: absolute; right: 25px; top: 18px; font-size: 26px; } .find-form1 button:hover { color: var(--theme-color2); } .subscribe-form1 { overflow: hidden; } .subscribe-form1 .form-inner { background-color: var(--white-color); position: relative; padding: 20px 0 20px 45px; } .subscribe-form1 .form-inner::before { content: ""; position: absolute; left: 99.98%; top: 0; bottom: 0; width: 9999px; background-color: inherit; } .subscribe-form1 .form-title { color: var(--title-color2); font-size: 20px; margin: 0; font-weight: 700; } .subscribe-form1 .form-title i { color: var(--theme-color2); font-size: 40px; vertical-align: middle; margin-right: 20px; margin-top: -4px; } .subscribe-form1 .form-group { display: flex; margin: 0; } .subscribe-form1 .form-group input { height: 55px; font-size: 15px; color: var(--title-color2); border: 1px solid var(--theme-color4); margin-right: 20px; border-radius: 9999px; } .subscribe-form1 .form-group input::-moz-placeholder { color: var(--title-color2); } .subscribe-form1 .form-group input::placeholder { color: var(--title-color2); } .booking-form1 { padding: 130px 0 0 100px; max-width: 625px; } .booking-form1 .form-select, .booking-form1 .form-control { height: 64px; border: 1px solid rgb(183, 183, 183); background-color: var(--white-color); background-image: none; box-shadow: 10px 17.321px 24px 0px rgba(0, 0, 0, 0.03); border-radius: 9999px; } .booking-form1 .form-select ~ i, .booking-form1 .form-control ~ i { top: 13px; height: 35px; line-height: 35px; display: inline-block; padding-left: 20px; border-left: 1px solid rgb(183, 183, 183); color: #777777; font-size: 24px; padding-right: 3px; } /* Medium Large devices */ @media (max-width: 1399px) { .form-wrap3 { padding: 60px 60px 60px 60px; } } /* Large devices */ @media (max-width: 1199px) { .form-wrap3 { padding: 40px 40px 40px 40px; } .subscribe-form1 .form-title { font-size: 16px; } .subscribe-form1 .form-title i { font-size: 28px; margin-right: 15px; } .subscribe-form1 .form-inner { padding: 20px 0 20px 30px; } .booking-form1 { padding: 80px 60px 0 60px; max-width: 100%; text-align: center; } .booking-form1 .form-title { margin-left: auto; margin-right: auto; max-width: 400px; } } /* Medium devices */ @media (max-width: 992px) { .subscribe-form1 .form-inner { padding: 30px 20px; } .subscribe-form1 .form-inner:before { display: none; } .subscribe-form1 .form-title { text-align: center; margin-bottom: 20px; } } /* Small devices */ @media (max-width: 767px) { .form-wrap1 .form-box, .form-wrap1 .form-title-box { padding: 20px; } .form-wrap2 { border-radius: 40px; padding: 30px; } .subscribe-form1 .form-group { display: block; text-align: center; } .subscribe-form1 input { padding-left: 30px; margin-bottom: 15px; } .booking-form1 { padding: 80px 20px 0 20px; } .booking-form1 select, .booking-form1 input { padding-left: 25px; } .booking-form1 .form-title { max-width: 100%; } } /* Extra small devices */ @media (max-width: 576px) { .form-wrap2 { padding: 35px 20px; } .form-wrap3 { padding: 40px 20px 40px 20px; } } /*------------------- 4.15. Testimonial -------------------*/ .testimonial-box { padding: 55px 60px 33px 60px; box-shadow: 0px 10px 10px 0px rgba(13, 30, 58, 0.03); border-radius: 0 0 50px 50px; } .testimonial-box .author-info, .testimonial-box .author-img { display: flex; align-items: center; justify-content: space-between; } .testimonial-box .avater { width: 65px; height: 65px; background-color: var(--white-color); padding: 10px; box-shadow: 0px 5px 60px 0px rgba(39, 71, 125, 0.18); border-radius: 50%; } .testimonial-box .avater img { border-radius: inherit; width: 100%; } .testimonial-box .avater-line { width: calc(100% - 85px); height: 2px; margin-right: 20px; background-color: var(--title-color); opacity: 0.1; } .testimonial-box .name { font-family: var(--body-font); margin-bottom: 0; } .testimonial-box .degi { line-height: 1; } .testimonial-box .content p { font-style: normal; font-weight: 500; color: var(--title-color); } .testimonial-box .content p:last-child { margin-bottom: 0; } .avater-slider-box { text-align: center; padding: 60px 0 50px 0; background-color: var(--white-color); position: relative; box-shadow: 0px 5px 37px 0px rgba(28, 53, 95, 0.05); } .avater-slider-box:before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; bottom: -20px; background-color: #000; opacity: 0.03; z-index: -1; border-radius: 10px; } .avater-slider-box .avater { box-shadow: 0px 25px 47.5px 2.5px rgba(39, 71, 125, 0.1); padding: 10px; background-color: var(--white-color); width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin: 0 auto 20px auto; } .avater-slider-box .avater img { border-radius: inherit; } .testimonail-desc .testi-rating { position: relative; margin-bottom: 20px; display: inline-block; --line-width: 230px; padding-right: 10px; } .testimonail-desc .testi-rating:before { content: ""; position: absolute; right: calc(var(--line-width) / -1); top: 50%; width: var(--line-width); height: 1px; background-color: #d7dae1; } .testimonail-desc-slide .slick-dots { margin-top: 33px; text-align: left; } .testimonail-desc-slide .testi-text { font-size: 20px; } .testimonail-quote { position: absolute; right: 80px; bottom: -50px; } .testi-box1 { padding: 50px 70px 42px 70px; } .testi-box1 .testi-quote { margin: 0 0 30px 0; } .testi-box1 .testi-text { color: var(--title-color2); font-size: 28px; line-height: 40px; margin: 0 0 23px 0; } .testi-box1 .testi-name { font-size: 28px; font-weight: 700; color: var(--title-color2); margin: 0 0 5px 0; } .testi-box1 .testi-degi { display: inline-block; font-size: 16px; color: var(--body-color); } .testi-box1 .testi-rating i { color: #ffa33d; margin-right: 5px; font-size: 14px; } .testi-box1 .testi-degi { display: inline-block; margin-right: 10px; } .testi-nav1 { margin: 53px 0 0 0; } .testi-nav1 .testi-avater { width: 90px; height: 90px; border-radius: 50%; overflow: hidden; border: 1px solid var(--theme-color4); position: relative; cursor: pointer; display: inline-block; } .testi-nav1 .testi-avater:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--theme-color4); opacity: 0; visibility: hidden; transition: all ease 0.4s; z-index: 1; } .testi-nav1 .testi-avater img { width: 100%; } .testi-nav1 .testi-avater:hover:before, .testi-nav1 .slick-current .testi-avater:before { opacity: 0.7; visibility: visible; } .testi-shape1 { position: absolute; right: 0; top: 0; width: 1040px; height: 580px; background-color: var(--theme-color2); -webkit-clip-path: polygon(0 0, 100% 100%, 100% 0); clip-path: polygon(0 0, 100% 100%, 100% 0); } .testi-wrap1 { position: relative; padding-top: 90px; padding-bottom: 25px; } .testi-wrap1 .testi-shape2 { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; -webkit-clip-path: polygon(0 32%, 100% 0, 100% 100%, 0 79%); clip-path: polygon(0 32%, 100% 0, 100% 100%, 0 79%); } .testi-wrap1 .testi-shape2:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--theme-color); opacity: 0.85; } .testi-style1 { background-color: var(--black-color); max-width: 680px; text-align: center; padding: 80px 80px 120px 80px; margin: 0 75px 30px 0; position: relative; } .testi-style1::before { content: ""; position: absolute; right: -32px; top: -1px; -webkit-clip-path: polygon(0 0, 0% 100%, 100% 88%); clip-path: polygon(0 0, 0% 100%, 100% 88%); width: 33px; height: 41px; background-color: #4c4c4c; } .testi-style1 .testi-icon { width: 158px; height: 158px; line-height: 158px; background-color: var(--theme-color); color: var(--white-color); margin: 0 auto; position: relative; z-index: 1; border-radius: 50%; margin: 0 auto 58px auto; outline: 1px solid var(--white-color); outline-offset: -10px; } .testi-style1 .testi-icon .sub-plus { top: 15px; right: 3px; color: var(--theme-color); } .testi-style1 .testi-text { color: #e3e3e3; font-size: 24px; font-weight: 500; line-height: 44px; margin: 0 0 27px 0; padding: 0 40px; } .testi-style1 .testi-name { color: var(--white-color); font-size: 32px; font-weight: 700; margin: 0; } .testi-style1 .testi-arrows { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); } .testi-style1 .testi-arrows .slick-arrow { opacity: 1; visibility: visible; box-shadow: none; box-shadow: 10px 17.321px 24px 0px rgba(0, 0, 0, 0.03); border: 1px solid var(--theme-color); position: relative; left: 0; right: 0; top: 0; bottom: 0; transform: none; margin: 0; font-size: 20px; line-height: 58px; } .testi-style1 .testi-arrows .slick-arrow:not(:last-child) { margin-right: 15px; } .testi-slide1 { border: 1px solid var(--theme-color4); background-color: var(--white-color); box-shadow: 10px 17.321px 24px 0px rgba(0, 0, 0, 0.03); } /* Hight Resoulation devices */ @media (min-width: 1921px) { .testi-style1:before { height: 44px; } } /* Extra large devices */ @media (max-width: 1500px) { .testi-box1 { padding: 45px 40px 42px 40px; } .testi-box1 .testi-quote { margin: 0 0 20px 0; } .testi-box1 .testi-text { font-size: 24px; line-height: 34px; margin-bottom: 20px; } .testi-box1 .testi-name { font-size: 22px; } .testi-shape1 { width: 820px; height: 480px; } } /* Medium Large devices */ @media (max-width: 1399px) { .testi-style1 { padding: 80px 30px 80px 30px; margin: 0 0 30px 0; } .testi-style1:before { display: none; } .testi-wrap1 { padding: 130px 0; } .testi-wrap1 .testi-shape2 { -webkit-clip-path: none; clip-path: none; } } /* Large devices */ @media (max-width: 1199px) { .testi-shape1 { width: 500px; height: 430px; } .testi-nav1 .testi-avater { width: 80px; height: 80px; } .testi-style1 .testi-icon { width: 100px; height: 100px; line-height: 100px; margin: 0 auto 40px auto; } .testi-style1 .testi-icon .sub-plus { top: 0; right: 0; width: 30px; height: 30px; font-size: 14px; line-height: 32px; } .testi-style1 .testi-text { font-size: 18px; line-height: 30px; margin: 0 0 17px 0; padding: 0 0; } .testi-style1 .testi-name { font-size: 24px; font-weight: 700; margin: 0; } } /* Medium devices */ @media (max-width: 992px) { .testimonial-box { padding: 25px 30px 30px 30px; border-radius: 0 0 10px 10px; } .testimonail-quote { bottom: -10px; right: 0; max-width: 200px; } .testi-shape1 { display: none; } .testi-nav1 { max-width: 400px; margin-left: auto; margin-right: auto; } .testi-wrap1 { padding: 80px 0; } } /* Small devices */ @media (max-width: 767px) { .avater-slider-box { text-align: center; padding: 0; position: relative; box-shadow: none; background-color: transparent; } .avater-slider-box:before { display: none; } .testi-box1 { padding: 45px 20px 42px 20px; } .testi-box1 .testi-text { font-size: 18px; line-height: 28px; } .testi-box1 .testi-rating { display: block; } .testimonail-desc .testi-rating { margin-right: -1.2em; } .testimonail-desc .testi-rating:before { display: none; } .testi-style1 { padding: 60px 30px 60px 30px; margin: 0 0 30px 0; } } /* Extra small devices */ @media (max-width: 576px) { .testimonial-box { padding: 15px 20px 20px 20px; } .testi-nav1 .testi-avater { width: 60px; height: 60px; } } /*------------------- 4.16. Skill Area -------------------*/ .skill-wrap1 { padding: 60px 100px 25px 100px; border-radius: 0 0 100px 100px; box-shadow: 0px 5px 120px 0px rgba(39, 71, 125, 0.15); } .skill-box { max-width: 310px; } .skill-box .ripple-icon:after, .skill-box .ripple-icon:before { animation: ripple-xs 4s infinite ease-in-out; } /* Medium Large devices */ @media (max-width: 1399px) { .skill-wrap1 { padding: 40px 60px 15px 60px; } } /* Large devices */ @media (max-width: 1199px) { .d-xl-flex.skill-box .ripple-icon.mr-20 { margin-right: 0; } .skill-box { max-width: 250px; } .skill-box.text-xl-start .mr-30 { margin-right: 0; } } /* Medium devices */ @media (max-width: 992px) { .skill-box { max-width: 100%; } .skill-box .text-xl-start .mr-30 { margin-right: 0; } } /* Extra small devices */ @media (max-width: 576px) { .skill-wrap1 { border-radius: 0; padding: 40px 20px 15px 20px; } } /*------------------- 4.17. Brand -------------------*/ .brand-wrap1 { padding: 100px 20px 100px 100px; } .brand-wrap2 { box-shadow: 0px 2px 47.5px 2.5px rgba(36, 68, 121, 0.04); background-color: var(--white-color); padding: 98px 60px; } .vs-brand1 { border: 1px solid rgb(187, 187, 187); width: 100%; height: 155px; text-align: center; line-height: 153px; background-color: var(--white-color); margin-bottom: 30px; box-shadow: 10px 17.321px 24px 0px rgba(0, 0, 0, 0.03); transition: all ease 0.4s; } .vs-brand1:hover { border-color: var(--theme-color); } /* Large devices */ @media (max-width: 1199px) { .brand-wrap1 { padding: 60px; } } /* Medium devices */ @media (max-width: 992px) { .brand-wrap1 { padding: 40px 40px; } .brand-wrap2 { padding: 60px 20px; } } /* Small devices */ @media (max-width: 767px) { .brand-wrap1 { padding: 30px 20px; } .brand-wrap2 { padding: 30px 20px; box-shadow: 0px 2px 77px 2.5px rgba(36, 68, 121, 0.1); } } /*------------------- 4.18. Accordion -------------------*/ .vs-accordion .accordion-item { border-top: 1px solid #efeff0; padding: 25px 0 25px 0; } .vs-accordion .accordion-item:last-child { border-bottom: 1px solid #efeff0; } .vs-accordion .accordion-button { border: none; padding: 0; background-color: transparent; text-align: left; font-size: 18px; font-weight: 700; line-height: 28px; font-family: var(--body-font); color: var(--title-color); padding-left: 60px; position: relative; } .vs-accordion .accordion-button:after { display: none; } .vs-accordion .accordion-button:before { content: "\f068"; background-color: var(--theme-color); color: var(--white-color); font-family: var(--icon-font); position: absolute; left: 0; top: 50%; width: 30px; height: 30px; line-height: 30px; margin-top: -15px; font-size: 14px; font-weight: 400; text-align: center; border-radius: 50%; } .vs-accordion .accordion-button:focus { outline: none; box-shadow: none; } .vs-accordion .accordion-button.collapsed:before { content: "\f067"; background-color: #f5f5f5; color: var(--title-color); } .vs-accordion .accordion-collapse { border: none; } .vs-accordion .accordion-body { padding: 10px 0 0 60px; } .vs-accordion .accordion-body p:last-child { margin-bottom: 0; } .accordion-style2 .accordion-item:last-child, .accordion-style2 .accordion-item { border-color: var(--theme-color); } .accordion-style2 .accordion-button.collapse:before { background-color: red; } /* Small devices */ @media (max-width: 767px) { .vs-accordion .accordion-button { padding-left: 35px; font-size: 16px; } .vs-accordion .accordion-button:before { width: 20px; height: 20px; line-height: 20px; margin-top: 8px; font-size: 13px; top: 0; } .vs-accordion .accordion-body { padding: 10px 0 0 35px; } } /*------------------- 4.19. Project -------------------*/ .vs-project-box { position: relative; padding-bottom: 40px; } .vs-project-box .project-content { position: absolute; left: 40px; right: 40px; bottom: 0; padding: 35px 10px 38px 10px; background-color: var(--white-color); text-align: center; box-shadow: 0px 2px 60px 2.25px rgba(39, 71, 125, 0.11); } .vs-project-box .project-name { margin-bottom: 0; margin-top: 4px; } .vs-project-box .icon-btn { width: 50px; height: 50px; line-height: 50px; margin-top: -25px; position: absolute; right: 40px; top: 0; } .vs-project-box .icon-btn i { box-shadow: 0px 10px 30px 0px rgba(7, 204, 236, 0.25); font-size: 18px; } .vs-project-box .project-img { overflow: hidden; } .vs-project-box .project-img img { transition: all ease 0.4s; } .project-shape { position: absolute; left: 0; top: 0; right: 0; height: 642px; } .project-menu button { margin: 0 7px; margin-bottom: 20px; } .project-menu button:last-child { margin-right: 0; } .project-menu button:first-child { margin-left: 0; } /* Large devices */ @media (max-width: 1199px) { .vs-project-box .project-content { left: 20px; right: 20px; } .project-shape { height: 560px; } } /* Medium devices */ @media (max-width: 992px) { .project-menu button { padding: 16px 24px; font-size: 14px; } } /* Small devices */ @media (max-width: 767px) { .project-menu.mb-40 { margin-bottom: 20px; } } /*------------------- 4.20. Features -------------------*/ .feaures-mark { position: relative; border: 1px solid #e7eaf0; padding: 25px 30px 25px 40px; transition: all ease 0.4s; --icon-size: 40px; margin-left: calc(var(--icon-size) / 2); background-color: var(--white-color); } .feaures-mark .mark-icon { position: absolute; top: 50%; left: calc(var(--icon-size) / -2); display: inline-block; width: var(--icon-size); height: var(--icon-size); line-height: var(--icon-size); margin-top: calc(var(--icon-size) / -2); text-align: center; background-color: var(--white-color); color: var(--theme-color); border-radius: 50%; box-shadow: 0px 6px 37px 0px rgba(39, 71, 125, 0.1); border: 1px solid #e7eaf0; } .feaures-mark:hover { box-shadow: 0px 6px 37px 0px rgba(28, 53, 95, 0.1); } .features-inner { margin-left: 100px; padding: 90px 0 70px 0; } .features-video-box { height: 100%; width: 100%; } .feature-style1 { margin-bottom: 30px; } .feature-style1 .feature-body { border: 1px solid var(--theme-color2); transition: all ease 0.4s; background-size: 100% 100%; } .feature-style1 .feature-content { padding: 40px 50px 27px 50px; } .feature-style1 .feature-title { color: var(--title-color2); margin: 0 0 10px 0; } .feature-style1 .feature-text { color: var(--body-color2); } .feature-style1 .feature-icon { background-color: var(--theme-color2); text-align: center; padding: 40px 0; transition: all ease 0.4s; } .slick-center.feature-style1, .feature-style1:hover { --theme-color2: var(--theme-color4) ; } .feature-wrap1 { background-color: #e4e4e4; margin-top: -57px; position: relative; z-index: 31; box-shadow: 10px 17.321px 24px 0px rgba(0, 0, 0, 0.03); } .feature-style2 .feature-body { text-align: center; background-color: var(--white-color); padding: 50px 30px 40px 30px; transition: all ease 0.4s; } .feature-style2 .feature-icon { width: var(--icon-size, 130px); height: var(--icon-size, 130px); line-height: var(--icon-size, 130px); text-align: center; border: 1px solid #d7d7d7; border-radius: 50%; margin: 0 auto 32px auto; position: relative; transition: all ease 0.4s; } .feature-style2 .feature-icon img { transform: rotateY(0); transition: all ease 0.4s; } .feature-style2 .feature-title { font-size: 20px; line-height: 30px; margin: 0 0 10px 0; transition: all ease 0.4s; } .feature-style2 .feature-title a { color: inherit; } .feature-style2 .feature-text { font-size: 14px; line-height: 24px; margin: 0 0 28px 0; transition: all ease 0.4s; } .feature-style2 .feature-btn { display: inline-block; font-size: 28px; color: #999999; transition: all ease 0.4s; } .feature-style2:hover .feature-icon img { transform: rotateY(180deg); } .slick-center.feature-style2 .feature-body, .feature-style2:hover .feature-body { background-color: var(--theme-color); } .slick-center.feature-style2 .sub-plus, .feature-style2:hover .sub-plus { color: var(--theme-color); } .slick-center.feature-style2 .feature-icon, .feature-style2:hover .feature-icon { background-color: var(--white-color); border-color: var(--white-color); } .slick-center.feature-style2 .feature-title a, .slick-center.feature-style2 .feature-btn, .slick-center.feature-style2 .feature-text, .feature-style2:hover .feature-title a, .feature-style2:hover .feature-btn, .feature-style2:hover .feature-text { color: var(--white-color); } .slick-center.feature-style2 .feature-title a:hover, .slick-center.feature-style2 .feature-btn:hover, .feature-style2:hover .feature-title a:hover, .feature-style2:hover .feature-btn:hover { color: var(--title-color2); } /* Extra large devices */ @media (max-width: 1500px) { .features-inner { margin-left: 40px; padding-right: 40px; } .feaures-mark { max-width: 265px; } } /* Medium Large devices */ @media (max-width: 1399px) { .features-inner { margin-left: 30px; padding-top: 70px; padding-bottom: 50px; } .feature-style1 .feature-content { padding: 25px 30px 14px 30px; } } /* Large devices */ @media (max-width: 1199px) { .feature-wrap1 { margin-top: 130px; } .features-video-box { height: 600px; } .feaures-mark { max-width: 100%; } } /* Medium devices */ @media (max-width: 992px) { .features-video-box { height: 400px; } .features-inner { margin-left: 0; padding-left: 15px; padding-right: 15px; } .feature-style2 .feature-body { padding: 50px 20px 40px 20px; } .feature-wrap1 { margin-top: 100px; } } /* Small devices */ @media (max-width: 767px) { .text-md-start.feaures-mark { --icon-size: 40px; padding: 40px 25px 25px 25px; margin-top: calc(var(--icon-size) / 2); margin-left: 0; } .text-md-start.feaures-mark .mark-icon { top: 0; left: 50%; margin-top: calc(var(--icon-size) / -2); margin-left: calc(var(--icon-size) / -2); } } /*------------------- 4.21. Contact -------------------*/ .contact-info-table td { border-bottom: 1px dashed #dfdfe0; border-top: none; padding-left: 0; padding-right: 10px; } .contact-info-table td + td { padding-right: 0; text-align: right; } /* Medium devices */ @media (max-width: 992px) { .contact-map.mt-70 { margin-top: 10px; } } /*------------------- 4.22. Woocommerce -------------------*/ .vs-checkout-wrapper .border-light { border: 1px solid #eaf0f2 !important; } .woocommerce-message, .woocommerce-info { position: relative; border: 1px solid #d8d8d8; padding: 11px 20px; background-color: var(--body-color); color: var(--white-color); font-size: 14px; font-weight: 700; margin-bottom: 20px; border-radius: 5px; } .woocommerce-message a, .woocommerce-info a { color: inherit; } .woocommerce-message a:hover, .woocommerce-info a:hover { text-decoration: underline; } .woocommerce-message:before, .woocommerce-info:before { content: "\f06a"; font-family: var(--icon-font); font-weight: 900; margin-right: 10px; } .woocommerce-notices-wrapper .woocommerce-message { background-color: var(--theme-color); } .woocommerce-notices-wrapper .woocommerce-message:before { content: "\f14a"; font-weight: 300; } .woocommerce-form-coupon, .woocommerce-form-login { display: none; } .woocommerce-form-login-toggle .woocommerce-info { background-color: var(--theme-color); } .woocommerce-checkout .form-select, .woocommerce-checkout .form-group { margin-bottom: 0.5rem; } .woocommerce-checkout .form-control { margin-bottom: 15px; } .woocommerce-product-rating .star-rating { display: inline-block; vertical-align: middle; } .woocommerce-cart-form { text-align: center; } .cart_table { border: 1px solid #eaf0f2; margin-bottom: 45px; } .cart_table thead { background-color: #ecf0f1; } .cart_table td:before, .cart_table th { font-family: var(--title-font); color: var(--title-color); font-weight: 700; text-transform: uppercase; border: none; padding: 27px 15px; } .cart_table td:before { content: attr(data-title); position: absolute; left: 15px; top: 50%; vertical-align: top; padding: 0; transform: translateY(-50%); display: none; } .cart_table td { border: none; border-bottom: 1px solid #f3f3f3; color: #8b8b8b; padding: 20px 10px; position: relative; } .cart_table .product-quantity { color: var(--title-color); } .cart_table .cart-productname { font-weight: 600; font-family: var(--title-font); color: inherit; } .cart_table .cart-productimage { display: inline-block; border: 1px solid var(--smoke-color); } .cart_table .remove { color: #29af8a; font-size: 18px; } .cart_table .quantity { display: inline-flex; align-items: center; } .cart_table .qut-btn { border: 2px solid var(--secondary-color); background-color: transparent; color: #b8c6d0; padding: 0; width: 30px; height: 30px; font-size: 16px; border-radius: 4px; position: relative; top: 0; left: 0; } .cart_table .qut-btn.quantity-minus { top: 0; } .cart_table .qut-btn:hover { background-color: var(--theme-color); color: var(--white-color); border-color: transparent; } .cart_table .qty-input { vertical-align: middle; border: 2px solid var(--secondary-color); width: 70px; height: 30px; font-size: 14px; text-align: center; color: #2c3e50; font-weight: 700; margin: 0 10px; border-radius: 4px; padding-right: 0; /* Firefox */ } .cart_table .qty-input::-webkit-outer-spin-button, .cart_table .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cart_table .qty-input[type=number] { -moz-appearance: textfield; } .cart_table .actions { text-align: right; vertical-align: middle; } .cart_table .actions > .vs-btn { margin-right: 15px; } .cart_table .actions > .vs-btn:last-child { margin-right: 0; } .cart_table .vs-cart-coupon { float: left; margin: 0; width: 455px; max-width: 100%; display: flex; } .cart_table .vs-cart-coupon input { height: 55px; width: calc(100% - 200px); margin-right: 10px; padding-left: 20px; } .cart_table .vs-cart-coupon .vs-btn { width: 200px; padding-left: 0; padding-right: 0; } .cart_totals { border: 1px solid #ecf0f1; } .cart_totals th, .cart_totals td { vertical-align: top; padding: 20px 20px; border: none; border-bottom: 1px solid #ecf0f1; font-size: 14px; color: var(--title-color); width: 55%; } .cart_totals th:first-child, .cart_totals td:first-child { width: 45%; background-color: #f9fbfb; font-weight: 700; font-size: 14px; color: #333333; } .cart_totals .shipping-calculator-button { display: inline-block; border-bottom: 1px solid; color: var(--title-color); font-weight: 700; } .cart_totals .shipping-calculator-button:hover { color: var(--theme-color); } .cart_totals .woocommerce-shipping-destination { margin-bottom: 10px; } .cart_totals .woocommerce-shipping-methods { margin-bottom: 0; } .cart_totals .shipping-calculator-form { display: none; } .cart_totals .shipping-calculator-form p:first-child { margin-top: 20px; } .cart_totals .shipping-calculator-form p:last-child { margin-bottom: 0; } .cart_totals .shipping-calculator-form .vs-btn { padding: 5px 30px; } .cart_totals .amount { font-weight: 700; } .cart_totals .order-total .amount { color: #1abc9c; } .shipping-calculator-form .form-select, .shipping-calculator-form .form-control { height: 40px; padding-left: 15px; font-size: 16px; border-radius: 0; background-position: right 13px center; } .shipping-calculator-form .vs-btn { font-size: 14px; padding: 0 20px; width: -moz-max-content; width: max-content; height: 40px; } .checkout-ordertable th, .checkout-ordertable td { border: none; vertical-align: top; padding: 5px 0; font-size: 14px; font-weight: 700; color: var(--body-color); border: 1px solid #ededed; text-align: right; padding: 5px 20px; } .checkout-ordertable th { text-align: left; } .checkout-ordertable ul { margin: 0; padding: 0; } .checkout-ordertable .order-total .amount { color: #29af8a; } .checkout-ordertable input[type=hidden] ~ label { color: #29af8a; } .woocommerce-checkout-payment ul { margin: 0; padding: 0; list-style-type: none; } .woocommerce-checkout-payment ul li { padding-top: 10px; border-bottom: 1px solid #d8d8d8; border-radius: 4px; } .woocommerce-checkout-payment .place-order { padding-top: 30px; } .woocommerce-checkout-payment .payment_box { color: #a1b1bc; background-color: #ecf0f1; border: 1px solid #d8d8d8; border-bottom: none; font-size: 14px; padding: 10px 20px; border-radius: 4px; display: none; } .woocommerce-checkout-payment .payment_box p { margin: 0; } .woocommerce-checkout-payment input[type=radio] ~ label { margin-bottom: 15px; color: var(--body-color); } .woocommerce-checkout-payment input[type=radio] ~ label img { margin-bottom: -2px; margin-left: 10px; } .star-rating { overflow: hidden; position: relative; width: 100px; height: 1.2em; line-height: 1.2em; display: block; font-family: var(--icon-font); font-weight: 700; font-size: 14px; } .star-rating:before { content: "\f005\f005\f005\f005\f005"; color: var(--yellow-color); float: left; top: 0; left: 0; font-weight: 400; position: absolute; letter-spacing: 3px; } .star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; } .star-rating span:before { content: "\f005\f005\f005\f005\f005"; top: 0; position: absolute; left: 0; color: var(--yellow-color); letter-spacing: 3px; } .rating-select label { margin: 0; margin-right: 10px; } .rating-select p.stars { margin-bottom: 0; line-height: 1; } .rating-select p.stars a { position: relative; height: 14px; width: 18px; text-indent: -999em; display: inline-block; text-decoration: none; } .rating-select p.stars a::before { display: block; position: absolute; top: 0; left: 0; width: 18px; height: 14px; line-height: 1; font-family: var(--icon-font); content: "\f005"; font-weight: 400; text-indent: 0; color: var(--yellow-color); } .rating-select p.stars a:hover ~ a::before { content: "\f005"; font-weight: 400; } .rating-select p.stars:hover a::before { content: "\f005"; font-weight: 700; } .rating-select p.stars.selected a.active::before { content: "\f005"; font-weight: 700; } .rating-select p.stars.selected a.active ~ a::before { content: "\f005"; font-weight: 400; } .rating-select p.stars.selected a:not(.active)::before { content: "\f005"; font-weight: 700; } /* Medium devices */ @media (max-width: 992px) { .cart_table th { padding: 23px 8px; font-size: 14px; } .cart_table .cart-productname { font-size: 14px; } .cart_table .vs-cart-coupon { width: 100%; margin-bottom: 20px; } .cart_table .actions { text-align: center; } } /* Small devices */ @media (max-width: 767px) { .cart_table { text-align: left; min-width: auto; border-collapse: separate; border-spacing: 0 20px; border: none; } .cart_table thead { display: none; } .cart_table td { padding: 15px; display: block; width: 100%; padding-left: 25%; text-align: right; border: 1px solid #f3f3f3; border-bottom: none; } .cart_table td::before { display: block; } .cart_table td:last-child { border-bottom: 1px solid #f3f3f3; } .cart_table td.actions { padding-left: 15px; text-align: center; } .cart_table td.actions > .vs-btn { margin-top: 10px; margin-right: 0; display: block; width: -moz-max-content; width: max-content; margin-left: auto; margin-right: auto; } .cart_table td.actions > .vs-btn:last-child { margin-right: auto; } .cart_table .vs-cart-coupon { width: 100%; text-align: center; float: none; justify-content: center; display: block; padding-bottom: 10px; } .cart_table .vs-cart-coupon input { width: 100%; margin-bottom: 10px; } tfoot.checkout-ordertable th { display: none; } .woocommerce-checkout-payment ul input[type=radio] ~ label img { max-width: 150px; } .woocommerce-message, .woocommerce-info { font-size: 12px; padding: 5px 10px; } .cart_totals th, .cart_totals td { padding: 15px 10px; } .cart_totals th:first-child, .cart_totals td:first-child { width: 17%; line-height: 1.4; } } /*------------------- 4.23. Shop -------------------*/ .vs-product-box { text-align: center; transition: all ease 0.4s; } .vs-product-box .rating-wrap { display: inline-block; margin-bottom: 10px; } .vs-product-box .star-rating { margin-right: -0.7em; } .vs-product-box .product-title { margin-bottom: 8px; } .vs-product-box .product-title a { color: inherit; } .vs-product-box .price { color: var(--theme-color); font-weight: 700; } .vs-product-box .product-content { padding: 25px 20px; border: 1px solid #f3f6f7; border-top: none; transition: all ease 0.4s; } .vs-product-box .product-img { background-color: #f3f6f7; overflow: hidden; position: relative; } .vs-product-box .product-img:after, .vs-product-box .product-img:before { content: ""; position: absolute; left: -50%; top: 0; width: 50%; height: 100%; background-color: var(--title-color); opacity: 0.5; z-index: 1; transition: all ease 0.4s; } .vs-product-box .product-img:after { left: auto; right: -50%; } .vs-product-box .icon-btn { width: 40px; height: 40px; line-height: 40px; margin: 0 5px; } .vs-product-box .actions-btn { position: absolute; left: 0; top: 50%; right: 0; text-align: center; transform: translateY(-50%); z-index: 3; margin-top: -20px; opacity: 0; visibility: hidden; transition: all ease 0.4s; } .vs-product-box:hover { box-shadow: 0px 7px 40px 0px rgba(39, 71, 125, 0.12); } .vs-product-box:hover .product-content { border-color: transparent; } .vs-product-box:hover .product-img:before { left: 0; } .vs-product-box:hover .product-img:after { right: 0; } .vs-product-box:hover .actions-btn { margin-top: 0; opacity: 1; visibility: visible; transition-delay: 0.4s; } .product-list { display: flex; text-align: left; } .product-list .product-img { width: 100%; max-width: 180px; } .product-list .star-rating { font-size: 12px; width: 86px; } .product-list .product-content { flex: 1; border-top: 1px solid #f3f6f7; border-left: none; display: flex; align-items: center; flex-direction: column; justify-content: center; align-items: flex-start; } .product-list .icon-btn { width: auto; height: auto; line-height: auto; margin: 0 3px; } .product-list .icon-btn i { width: 35px; height: 35px; line-height: 35px; font-size: 13px; } .product-thumb img { cursor: pointer; width: 100%; border: 1px solid transparent; transform: scale(1); transition: all ease 0.4s; } .product-thumb.slick-current img { border-color: var(--theme-color); } .vs-sort-bar .icon-btn { margin-right: 10px; } .vs-sort-bar .icon-btn:last-child { margin-right: 0; } .vs-sort-bar .form-select { height: 35px; border-width: 2px; width: -moz-fit-content; width: fit-content; min-width: auto; color: var(--title-color); padding-right: 30px; padding-left: 20px; font-size: 14px; margin: 0; } .vs-sort-bar label { font-size: 14px; margin-bottom: 0; margin-right: 15px; font-weight: 500; line-height: 1; color: var(--title-color); } .product-big-img { position: relative; } .product-big-img .price { font-size: 30px; font-weight: 700; color: var(--theme-color); display: flex; flex-direction: row-reverse; align-items: flex-end; font-family: var(--title-font); position: absolute; right: 30px; top: 30px; line-height: 1; } .product-big-img .price del { margin-right: 20px; font-size: 0.7em; color: var(--body-color); } .product-big-img .add_to_wishlist { position: absolute; right: 30px; bottom: 30px; font-weight: 400; color: var(--title-color); } .product-big-img .add_to_wishlist i { margin-right: 5px; color: var(--theme-color); } .product-details .woocommerce-product-rating { margin-bottom: 7px; } .product-details .woocommerce-product-rating .star-rating { display: inline-block; vertical-align: middle; } .product-details .woocommerce-product-rating .woocommerce-review-link { color: var(--body-color); margin-left: 10px; font-size: 14px; } .product-details .product-title { padding-bottom: 20px; border-bottom: 1px dashed var(--theme-color); } .product-details .vs-input-group { margin-top: 16px; margin-bottom: 40px; } .product-details .product_meta { margin-top: 33px; } .size-select input[type=radio] ~ label { font-size: 12px; padding: 8px 14px; background-color: #fff; border-radius: 999px; text-transform: none; font-weight: 400; transition: all ease 0.4s; } .size-select input[type=radio] ~ label:before { display: none; } .size-select input[type=radio]:checked ~ label { background-color: var(--theme-color); color: var(--white-color); } .product_meta > span { display: block; color: var(--title-color); margin-bottom: 2px; } .product_meta > span:last-child { margin-bottom: 0; } .product_meta > span a, .product_meta > span span { color: #898b97; display: inline-block; margin-right: 10px; } .product_meta > span a:after, .product_meta > span span:after { content: ","; } .product_meta > span a:last-child, .product_meta > span span:last-child { margin-right: 0; } .product_meta > span a:last-child:after, .product_meta > span span:last-child:after { display: none; } .product_meta > span a:first-child, .product_meta > span span:first-child { margin-left: 5px; } .product_meta > span a:hover { color: var(--theme-color); } .product-tab { position: relative; border-bottom: 1px solid #e5e5e5; margin-top: -0.2em; } .product-tab a { color: var(--title-color); font-size: 18px; font-weight: 700; padding: 0 20px 20px 20px; } .product-tab .indicator { position: absolute; left: 0; top: auto !important; height: 0 !important; bottom: -1px; transition: all ease 0.4s; border-bottom: 1px solid var(--theme-color); } .product-tab .indicator:before { content: ""; position: absolute; top: 0; left: 50%; width: 12px; height: 12px; border-top: 1px solid var(--theme-color); border-left: 1px solid var(--theme-color); transform: rotate(45deg); margin: -6px 0 0 -6px; background-color: var(--white-color); } .product-info-list { list-style-type: none; margin: 0 0 30px 0; padding: 0; } .product-info-list li { font-size: 18px; position: relative; color: #898b97; margin-bottom: 13px; padding-left: 43px; } .product-info-list li:last-child { margin-bottom: 0; } .product-info-list li:before { content: "\f00c"; font-family: var(--icon-font); position: absolute; left: 0; top: 0; width: 25px; height: 25px; border-radius: 50%; line-height: 25px; font-size: 14px; background-color: var(--white-color); color: var(--theme-color); box-shadow: 0px 10px 32.75px 0 rgba(0, 0, 0, 0.15); text-align: center; } .product-info-list li span { color: var(--title-color); margin-right: 3px; } .vs-text-box { border-left: 8px solid var(--theme-color); font-style: italic; font-size: 18px; line-height: 1.6; padding: 48px 50px; margin-bottom: 30px; } .shop-wrap1 { padding: 80px; } /* Large devices */ @media (max-width: 1199px) { .shop-wrap1 { padding: 40px; } .product-big-img .price { font-size: 26px; right: 15px; top: 15px; } .product-big-img .price del { margin-right: 10px; } .product-big-img .add_to_wishlist { right: 15px; bottom: 15px; } .product-details .woocommerce-product-rating .woocommerce-review-link { margin-left: 0; } .product-list .product-img { width: 100%; max-width: 220px; } } /* Medium devices */ @media (max-width: 992px) { .product-list .product-img { width: 100%; max-width: 150px; } } /* Small devices */ @media (max-width: 767px) { .shop-wrap1 { padding: 40px 20px; } .shop-wrap1.mb-80 { margin-bottom: 60px; } .product-details .vs-input-group > .text-title { margin-bottom: 10px; display: block; } .product-details .actions .vs-btn { padding-left: 32px; padding-right: 20px; margin-left: 30px; } .vs-text-box { padding: 30px 30px; } .product-list { display: block; text-align: center; } .product-list .product-img { width: 100%; max-width: 100%; } .product-list .product-content { display: block; border-left: 1px solid #f3f6f7; border-top: none; } } /*------------------- 4.24. Simple Sections -------------------*/ .medical-box { text-align: center; } .medical-box__img { width: 190px; height: 190px; border-radius: 50%; overflow: hidden; margin: 0 auto 15px auto; box-shadow: 10px 17.321px 24px 0px rgba(0, 0, 0, 0.03); border: 1px solid var(--theme-color4); } .medical-box__img img { width: 100%; transform: scale(1); transition: all ease 0.4s; } .medical-box__title { font-size: 24px; color: var(--title-color2); margin: 0 auto 0 auto; max-width: 210px; } .medical-box:hover .medical-box__img img { transform: scale(1.1) rotate(15deg); } .appointment-box { background-color: #f5f7ff; padding: 40px 50px 44px 50px; max-width: 500px; margin-left: auto; margin-bottom: 50px; } .appointment-box__title { color: var(--title-color2); margin: 0 0 5px 0; } .appointment-box__text { margin: 0 0 23px 0; } .appointment-box__number { display: block; width: -moz-max-content; width: max-content; color: var(--title-color2); font-weight: 700; margin: 20px 0 0 0; transition: all ease 0.4s; } .appointment-box__number i { margin-right: 10px; font-size: 20px; } .appointment-box__number:hover { color: var(--theme-color2); } .video-box { position: relative; } .video-box .video-thumb { position: relative; } .video-box .video-thumb img { width: 100%; } .video-box .video-content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 3; } .video-box .play-btn { margin-bottom: 30px; } .video-box .video-title { font-size: 36px; color: var(--white-color); font-weight: 400; max-width: 400px; margin: 0 auto; } .social-bars-title { color: var(--white-color); text-align: center; margin-bottom: 40px; } .social-bars a { width: 100%; height: 66px; line-height: 66px; color: var(--white-color); background-color: var(--theme-color); padding: 0 30px 0 40px; margin-bottom: 15px; font-size: 16px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; display: flex; justify-content: space-between; align-items: center; border-radius: 9999px; transition: all ease 0.4s; } .social-bars a i { border-left: 1px solid var(--white-color); display: inline-block; height: 45px; line-height: 45px; font-size: 24px; padding-left: 25px; } .social-bars a:hover { background-color: var(--title-color); color: var(--white-color); } .social-bars a:last-child { margin-bottom: 0; } .social-bars a.facebook { --theme-color: #1124b1; } .social-bars a.twitter { --theme-color: #3393ec; } .social-bars a.instagram { --theme-color: #ff2800; background-image: linear-gradient(90deg, rgb(10, 0, 178) 0%, rgb(255, 0, 0) 50%, rgb(255, 252, 0) 100%); } .social-bars a.instagram:hover { background-image: linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 252, 0) 50%, rgb(10, 0, 178) 100%); } .facility-style1 { text-align: center; margin-bottom: 22px; } .facility-style1 .facility-icon { display: inline-block; width: 90px; height: 90px; line-height: 90px; text-align: center; font-size: 24px; background-color: var(--white-color); border-radius: 50%; transition: all ease 0.4s; z-index: 1; position: relative; margin: 0 auto 10px auto; box-shadow: 0.5px 0.866px 27px 0px rgba(35, 31, 32, 0.05); outline: 1px solid var(--theme-color); outline-offset: -4px; transition: all ease 0.4s; } .facility-style1 .facility-icon img { transition: all ease 0.4s; } .facility-style1 .facility-title { font-size: 24px; margin: 0 0 2px 0; letter-spacing: -0.01em; } .facility-style1 .facility-text { font-weight: 500; color: var(--title-color); margin: 0; } .facility-style1:hover .facility-icon { outline-color: var(--white-color); background-color: var(--theme-color); } .facility-style1:hover .facility-icon img { filter: brightness(0) invert(1); } /* Medium devices */ @media (max-width: 992px) { .appointment-box { max-width: 100%; } .appointment-box__number { margin-left: auto; margin-right: auto; } .video-box .video-title { font-size: 20px; max-width: 245px; } .video-box .play-btn { margin-bottom: 10px; } } /* Small devices */ @media (max-width: 767px) { .medical-box__img { width: 120px; height: 120px; } .medical-box__title { font-size: 18px; } .appointment-box { padding: 40px 20px 44px 20px; } } /* Extra small devices */ @media (max-width: 576px) { .video-box .video-title { font-size: 12px; max-width: 245px; } } /*------------------- 4.25. Event -------------------*/ .event-style1 .slick-arrow { --arrow-horizontal: 310px; background-color: transparent; border: 1px solid var(--white-color); color: var(--white-color); font-size: 22px; } .event-style1 .slick-arrow:hover { background-color: var(--theme-color4); color: var(--white-color); border-color: transparent; } .event-style1 .event-inner { position: relative; z-index: 1; text-align: center; padding: 125px 0; } .event-style1 .event-img:before, .event-style1 .event-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } .event-style1 .event-img::before { content: ""; background-color: var(--theme-color3); opacity: 0.7; z-index: 1; } .event-style1 .event-time, .event-style1 .event-date { color: var(--white-color); display: block; margin: 0 0 13px 0; } .event-style1 .event-time i, .event-style1 .event-date i { margin-right: 7px; } .event-style1 .event-title { color: var(--white-color); font-size: 40px; margin: 0 0 38px 0; } .event-style1 .event-title a { color: inherit; } .event-style1 .event-title a:hover { color: var(--theme-color2); } .event-style1 .event-counter ul { color: var(--white-color); background-color: var(--theme-color4); width: -moz-max-content; width: max-content; margin: 0 auto 42px auto; padding: 20px 60px 15px 60px; list-style: none; border-radius: 9999px; } .event-style1 .event-counter li { display: inline-block; text-align: center; } .event-style1 .event-counter li:not(:last-child) { border-right: 1px solid #40b6f3; padding-right: 25px; margin-right: 22px; } .event-style1 .event-counter .count-name, .event-style1 .event-counter .count-number { font-size: 14px; font-weight: 700; line-height: 1; } .event-style1 .event-counter .count-number { font-size: 26px; } .event-style1 .event-location { color: var(--white-color); margin: 0; } .event-style1 .event-location i { margin-right: 10px; } /* Extra large devices */ @media (max-width: 1500px) { .event-style1 .slick-arrow { --arrow-horizontal: 90px; } } /* Medium Large devices */ @media (max-width: 1399px) { .event-style1 .slick-arrow { --arrow-horizontal: 30px; } } /* Large devices */ @media (max-width: 1199px) { .event-style1 .event-title { font-size: 36px; } } /* Medium devices */ @media (max-width: 992px) { .event-style1 .event-inner { padding: 75px 0; } .event-style1 .event-title { font-size: 30px; margin-bottom: 28px; } .event-style1 .event-counter .count-name { font-size: 12px; } .event-style1 .event-counter .count-number { font-size: 20px; } .event-style1 .event-counter li:not(:last-child) { padding-right: 15px; margin-right: 11px; } .event-style1 .event-counter ul { margin: 0 auto 20px auto; padding: 20px 35px 15px 35px; } } /*================================= 05. Spacing ==================================*/ /*-- Padding Left And Right --*/ .px-5 { padding-right: 5px; padding-left: 5px; } .px-10 { padding-right: 10px; padding-left: 10px; } .px-15 { padding-right: 15px; padding-left: 15px; } .px-20 { padding-right: 20px; padding-left: 20px; } .px-25 { padding-right: 25px; padding-left: 25px; } .px-30 { padding-right: 30px; padding-left: 30px; } .px-35 { padding-right: 35px; padding-left: 35px; } .px-40 { padding-right: 40px; padding-left: 40px; } .px-45 { padding-right: 45px; padding-left: 45px; } .px-50 { padding-right: 50px; padding-left: 50px; } /*-- Padding Top And Bottom --*/ .py-5 { padding-top: 5px; padding-bottom: 5px; } .py-10 { padding-top: 10px; padding-bottom: 10px; } .py-15 { padding-top: 15px; padding-bottom: 15px; } .py-20 { padding-top: 20px; padding-bottom: 20px; } .py-25 { padding-top: 25px; padding-bottom: 25px; } .py-30 { padding-top: 30px; padding-bottom: 30px; } .py-35 { padding-top: 35px; padding-bottom: 35px; } .py-40 { padding-top: 40px; padding-bottom: 40px; } .py-45 { padding-top: 45px; padding-bottom: 45px; } .py-50 { padding-top: 50px; padding-bottom: 50px; } /*-- Padding Top --*/ .pt-5 { padding-top: 5px; } .pt-10 { padding-top: 10px; } .pt-15 { padding-top: 15px; } .pt-20 { padding-top: 20px; } .pt-25 { padding-top: 25px; } .pt-30 { padding-top: 30px; } .pt-35 { padding-top: 35px; } .pt-40 { padding-top: 40px; } .pt-45 { padding-top: 45px; } .pt-50 { padding-top: 50px; } /*-- Padding Bottom --*/ .pb-5 { padding-bottom: 5px; } .pb-10 { padding-bottom: 10px; } .pb-15 { padding-bottom: 15px; } .pb-20 { padding-bottom: 20px; } .pb-25 { padding-bottom: 25px; } .pb-30 { padding-bottom: 30px; } .pb-35 { padding-bottom: 35px; } .pb-40 { padding-bottom: 40px; } .pb-45 { padding-bottom: 45px; } .pb-50 { padding-bottom: 50px; } /*-- Padding Left --*/ .pl-5 { padding-left: 5px; } .pl-10 { padding-left: 10px; } .pl-15 { padding-left: 15px; } .pl-20 { padding-left: 20px; } .pl-25 { padding-left: 25px; } .pl-30 { padding-left: 30px; } .pl-35 { padding-left: 35px; } .pl-40 { padding-left: 40px; } .pl-45 { padding-left: 45px; } .pl-50 { padding-left: 50px; } /*-- Padding Right --*/ .pr-5 { padding-right: 5px; } .pr-10 { padding-right: 10px; } .pr-15 { padding-right: 15px; } .pr-20 { padding-right: 20px; } .pr-25 { padding-right: 25px; } .pr-30 { padding-right: 30px; } .pr-35 { padding-right: 35px; } .pr-40 { padding-right: 40px; } .pr-45 { padding-right: 45px; } .pr-50 { padding-right: 50px; } .pt-80 { padding-top: 80px; } .pb-80 { padding-bottom: 80px; } .pt-100 { padding-top: 100px; } .pb-70 { padding-bottom: 70px; } .pt-lg-30 { padding-top: 30px; } /* Medium devices */ @media (max-width: 992px) { .no-pl-md { padding-left: 0; } .pt-lg-30 { padding-top: 0; } } /* Small devices */ @media (max-width: 767px) { .no-pt-sm { padding-top: 0; } } /*-- margin Left And Right --*/ .mx-5 { margin-right: 5px; margin-left: 5px; } .mx-10 { margin-right: 10px; margin-left: 10px; } .mx-15 { margin-right: 15px; margin-left: 15px; } .mx-20 { margin-right: 20px; margin-left: 20px; } .mx-25 { margin-right: 25px; margin-left: 25px; } .mx-30 { margin-right: 30px; margin-left: 30px; } .mx-35 { margin-right: 35px; margin-left: 35px; } .mx-40 { margin-right: 40px; margin-left: 40px; } .mx-45 { margin-right: 45px; margin-left: 45px; } .mx-50 { margin-right: 50px; margin-left: 50px; } /*-- margin Top And Bottom --*/ .my-5 { margin-top: 5px; margin-bottom: 5px; } .my-10 { margin-top: 10px; margin-bottom: 10px; } .my-15 { margin-top: 15px; margin-bottom: 15px; } .my-20 { margin-top: 20px; margin-bottom: 20px; } .my-25 { margin-top: 25px; margin-bottom: 25px; } .my-30 { margin-top: 30px; margin-bottom: 30px; } .my-35 { margin-top: 35px; margin-bottom: 35px; } .my-40 { margin-top: 40px; margin-bottom: 40px; } .my-45 { margin-top: 45px; margin-bottom: 45px; } .my-50 { margin-top: 50px; margin-bottom: 50px; } /*-- margin Top --*/ .mt-5 { margin-top: 5px; } .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-35 { margin-top: 35px; } .mt-40 { margin-top: 40px; } .mt-45 { margin-top: 45px; } .mt-50 { margin-top: 50px; } /*-- margin Bottom --*/ .mb-5 { margin-bottom: 5px; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .mb-35 { margin-bottom: 35px; } .mb-40 { margin-bottom: 40px; } .mb-45 { margin-bottom: 45px; } .mb-50 { margin-bottom: 50px; } /*-- margin Left --*/ .ml-5 { margin-left: 5px; } .ml-10 { margin-left: 10px; } .ml-15 { margin-left: 15px; } .ml-20 { margin-left: 20px; } .ml-25 { margin-left: 25px; } .ml-30 { margin-left: 30px; } .ml-35 { margin-left: 35px; } .ml-40 { margin-left: 40px; } .ml-45 { margin-left: 45px; } .ml-50 { margin-left: 50px; } /*-- margin Right --*/ .mr-5 { margin-right: 5px; } .mr-10 { margin-right: 10px; } .mr-15 { margin-right: 15px; } .mr-20 { margin-right: 20px; } .mr-25 { margin-right: 25px; } .mr-30 { margin-right: 30px; } .mr-35 { margin-right: 35px; } .mr-40 { margin-right: 40px; } .mr-45 { margin-right: 45px; } .mr-50 { margin-right: 50px; } .mt-n1 { margin-top: -0.25rem; } .mt-n2 { margin-top: -0.5rem; } .mt-n3 { margin-top: -1rem; } .mt-n4 { margin-top: -1.5rem; } .mt-n5 { margin-top: -3rem; } .mb-6 { margin-bottom: 6px; } .mr-135 { margin-right: 135px; } .mt-70 { margin-top: 70px; } .mb-80 { margin-bottom: 80px; } .mb-60 { margin-bottom: 60px; } .mt-60 { margin-top: 60px; } .space, .space-top { padding-top: 130px; } .space, .space-bottom { padding-bottom: 130px; } .space-md, .space-md-top { padding-top: 100px; } .space-md, .space-md-bottom { padding-bottom: 100px; } /* Medium devices */ @media (max-width: 992px) { .space, .space-top { padding-top: 80px; } .space, .space-bottom { padding-bottom: 80px; } .space-md, .space-md-top { padding-top: 50px; } .space-md, .space-md-bottom { padding-bottom: 50px; } } /*# sourceMappingURL=style.css.map */