/*******************
    3. base
*******************/
html {
    box-sizing: border-box;
    font-size: 16px;
}

html,
body {
    height: 100%;
}


.mobile-view{
    display: none;
  }

*,
*::before,
*::after {
    box-sizing: inherit;
}

a {
    color: #000000;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

a:hover {
    text-decoration: none;
    color: #ffcc00;
}

p {
    margin-bottom: 0;
}

ul {
    margin-bottom: 0;
}

@font-face {
    font-display: swap;
    font-family: "Pacifico";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/pacifico-v22-latin-regular.eot");
    src: url("../fonts/pacifico-v22-latin-regular.eot?#iefix")
            format("embedded-opentype"),
        url("../fonts/pacifico-v22-latin-regular.woff2") format("woff2"),
        url("../fonts/pacifico-v22-latin-regular.woff") format("woff"),
        url("../fonts/pacifico-v22-latin-regular.ttf") format("truetype"),
        url("../fonts/pacifico-v22-latin-regular.svg#Pacifico") format("svg");
}

@font-face {
    font-display: swap;
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/roboto-v30-latin-300.eot");
    src: url("../fonts/roboto-v30-latin-300.eot?#iefix")
            format("embedded-opentype"),
        url("../fonts/roboto-v30-latin-300.woff2") format("woff2"),
        url("../fonts/roboto-v30-latin-300.woff") format("woff"),
        url("../fonts/roboto-v30-latin-300.ttf") format("truetype"),
        url("../fonts/roboto-v30-latin-300.svg#Roboto") format("svg");
}

@font-face {
    font-display: swap;
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/roboto-v30-latin-regular.eot");
    src: url("../fonts/roboto-v30-latin-regular.eot?#iefix")
            format("embedded-opentype"),
        url("../fonts/roboto-v30-latin-regular.woff2") format("woff2"),
        url("../fonts/roboto-v30-latin-regular.woff") format("woff"),
        url("../fonts/roboto-v30-latin-regular.ttf") format("truetype"),
        url("../fonts/roboto-v30-latin-regular.svg#Roboto") format("svg");
}

@font-face {
    font-display: swap;
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/roboto-v30-latin-500.eot");
    src: url("../fonts/roboto-v30-latin-500.eot?#iefix")
            format("embedded-opentype"),
        url("../fonts/roboto-v30-latin-500.woff2") format("woff2"),
        url("../fonts/roboto-v30-latin-500.woff") format("woff"),
        url("../fonts/roboto-v30-latin-500.ttf") format("truetype"),
        url("../fonts/roboto-v30-latin-500.svg#Roboto") format("svg");
}

@font-face {
    font-display: swap;
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/roboto-v30-latin-700.eot");
    src: url("../fonts/roboto-v30-latin-700.eot?#iefix")
            format("embedded-opentype"),
        url("../fonts/roboto-v30-latin-700.woff2") format("woff2"),
        url("../fonts/roboto-v30-latin-700.woff") format("woff"),
        url("../fonts/roboto-v30-latin-700.ttf") format("truetype"),
        url("../fonts/roboto-v30-latin-700.svg#Roboto") format("svg");
}

.none{
    display: none;
}

.social_nav li{
    margin:0 0.2em;
}

.btn-outline-primary:hover {
    background-color: transparent;
}

.filter{
	float:right;
}

.filter:nth-child(2){
	margin-right:2.5em;
}

.filter .filtered{
	float:left;
	position:relative;
	cursor:pointer;
    width: 100%;
}

.filter .filtered span{
	float:left;
    width: 100%;
}

.filter .options{
	width:105%;
    min-width: 165px;
	right:-2.5%;
	top:110%;
	position:absolute;
	display:none;
    background-color: #F2F2F2;
    padding: 0.5em;
    z-index: 20;
    max-height: 250px;
    overflow-y: auto;
}

.filter .options::-webkit-scrollbar{
	width:8px
}

.filter .options::-webkit-scrollbar-track{
	background:#727272;
}

.filter .options::-webkit-scrollbar-thumb{
	background:#01d3ea;
}

.filter .options::-webkit-scrollbar-thumb:hover{
	background:#01d3ea;
}

.filter .options a{
	clear:both;
	float:left;
	font-size:1em;
	cursor:pointer;
	text-decoration:none;
    padding: 0.278em 0 0.278em 0;
	line-height: 1;
	margin:0 0 0.278em;
    border-bottom: 1px solid transparent;
}

.filter .options a:last-child{
	margin:0;
}

.filter .options a.active{
	font-weight:700;
}

.filter .options a:focus,
.filter .options a:active,
.filter .options a:hover{
    text-decoration: none;
}

.description_section img{
    max-width: 100%;
}

@font-face {
    font-display: swap;
    font-family: "Roboto";
    font-style: normal;
    font-weight: 900;
    src: url("../fonts/roboto-v30-latin-900.eot");
    src: url("../fonts/roboto-v30-latin-900.eot?#iefix")
            format("embedded-opentype"),
        url("../fonts/roboto-v30-latin-900.woff2") format("woff2"),
        url("../fonts/roboto-v30-latin-900.woff") format("woff"),
        url("../fonts/roboto-v30-latin-900.ttf") format("truetype"),
        url("../fonts/roboto-v30-latin-900.svg#Roboto") format("svg");
}

body {
    background-color: #ffffff;
    color: #000000;
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.15px;
}

.heading-01 {
    font-size: 63px;
    line-height: 69px;
}

.heading-02 {
    font-size: 48px;
}

.heading-03 {
    font-size: 36px;
}

.heading-04 {
    font-size: 28px;
}

.heading-05 {
    font-size: 20px;
    line-height: 32px;
}

.heading-05 img {
    max-width: 100%;
}

.heading-06 {
    font-size: 18px;
}

/*******************
      4. layout
  *******************/
.hero-banner {
    min-height: 946px;
    position: relative;
    padding-top: 135px;
}

.hero-banner .hero-content {
    padding-top: 105px;
}

.hero-banner .hero-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: -1;
}

.hero-banner .hero-shape img {
    position: relative;
    max-height: 946px;
}

.hero-button {
    position: relative;
}

.hero-button .btn {
    position: relative;
    z-index: 1;
}

.hero-button::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 0;
    top: -10px;
    left: -23px;
    background-image: url("../images/shape08.png");
    background-repeat: no-repeat;
    background-position: center left;
    background-color: "";
    background-size: contain;
    height: 44px;
    width: 46px;
    z-index: 0;
}

.hero-banner .hero-image {
    position: relative;
}

.header a.outer-link {
  color: #000000;
  font-size: 36px;
  font-weight: 300;
  display: inline-block;
  transition: all 0.2s 0.1s ease-in;
}

.header a.outer-link{
  font-size: 18px;
  margin-right: 12px;
  color: #000000;
  background-color: transparent;
  padding: 8px 22px;
  border-radius: 24px;
}

.header a.outer-link:hover{
  color: #FFFFFF;
  background-color: #000000;
  border-radius: 24px;
}

.hero-benefit-shape01 {
    position: absolute;
    top: 20%;
    right: 7%;
}

.hero-benefit-shape02 {
    position: absolute;
    top: 47%;
    right: 49%;
}

.hero-feature-shape01 {
    position: absolute;
    top: 20%;
    right: 20.5%;
}

.hero-price-shape01 {
    position: absolute;
    top: 19.5%;
    left: 10%;
}

.hero-blog-shape01 {
    position: absolute;
    top: 19.5%;
    left: 10%;
}

.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    padding-top: 42px;
    padding-bottom: 8px;
}

.header .navbar-brand {
    padding: 0;
}

.header .navbar-toggler {
    margin-right: -6px;
    position: relative;
}

.header .navbar-toggler svg {
    transition: 0.2s ease-in-out;
    fill: #ffcc00;
}

.header .navbar-toggler svg:hover {
    /* fill: #ffffff; */
}

.header .navbar-collapse {
    width: 100%;
    background: var(--bs-primary);
    position: fixed;
    z-index: 9;
    display: block;
    visibility: hidden;
    opacity: 0;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.2s;
}

.header .navbar-collapse .navbar-nav {
    max-width: 1130px;
    margin: 240px auto 15px;
    width: 100%;
    padding: 0 15px;
}

.header .navbar-collapse .navbar-nav .nav-item {
    line-height: 49px;
    opacity: 0;
    padding: 0;
    transition: opacity 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
}

.header .navbar-collapse .navbar-nav .nav-item .nav-link {
    color: #000000;
    font-size: 36px;
    font-weight: 300;
    display: inline-block;
    transition: all 0.2s 0.1s ease-in;
}

.header .navbar-collapse .navbar-nav .nav-item .nav-link:hover,
.header .navbar-collapse .navbar-nav .nav-item .nav-link:focus,
.header .navbar-collapse .navbar-nav .nav-item .nav-link.active {
    color: #000000;
    font-weight: 700;
}

.header .navbar-collapse.show {
    visibility: visible;
    opacity: 1;
    overflow-y: auto;
}

.header .navbar-collapse.show .navbar-nav .nav-item {
    opacity: 1;
}

.header .navbar-collapse.show .navbar-nav .nav-item:nth-child(1) {
    transition-delay: 0.1s;
}

.header .navbar-collapse.show .navbar-nav .nav-item:nth-child(2) {
    transition-delay: 0.2s;
}

.header .navbar-collapse.show .navbar-nav .nav-item:nth-child(3) {
    transition-delay: 0.3s;
}

.header .navbar-collapse.show .navbar-nav .nav-item:nth-child(4) {
    transition-delay: 0.4s;
}

.header .navbar-collapse.show .navbar-nav .nav-item:nth-child(5) {
    transition-delay: 0.5s;
}

.header .navbar-collapse.show .navbar-nav .nav-item:nth-child(6) {
    transition-delay: 0.6s;
}

.header .navbar-collapse::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    bottom: 0;
    right: 11%;
    background-image: var(--bg-image);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-color: "";
    background-size: contain;
    height: 609px;
    width: 624px;
    z-index: -1;
    transition: all 0.2s ease-in;
    transition-delay: 0.2s;
    opacity: 0;
}

.header .navbar-collapse.show::after {
    opacity: 1;
}

.menu-icon {
    margin: 0 auto;
    width: 24px;
    height: 16px;
    cursor: pointer;
    position: absolute;
    top: 28px;
    left: 27px;
}

.menu-icon span {
    background-color: black;
    height: 3px;
    position: absolute;
    width: 100%;
    border-radius: 3px;
    left: 0;
    transition: all 0.3s ease;
}

.menu-icon span:first-child {
    top: 0;
}

.menu-icon span:nth-child(2) {
    top: 7px;
}

.menu-icon span:last-child {
    top: 14px;
}

.navbar-toggler[aria-expanded="true"] .menu-icon span:nth-child(2) {
    opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .menu-icon span:first-child,
.navbar-toggler[aria-expanded="true"] .menu-icon span:last-child {
    top: 6px;
}

.navbar-toggler[aria-expanded="true"] .menu-icon span:first-child {
    transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .menu-icon span:last-child {
    transform: rotate(-45deg);
}

.footer {
    padding: 0 0 80px;
    font-size: 16px;
    position: relative;
    min-height: 616px;
    display: flex;
    flex-direction: column;
}

.footer .container {
    margin-top: auto;
}

.footer .footer-shape {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: -1;
}

.footer-connect{
  margin-bottom: 8em;
}

.footer .footer-shape img {
  position: relative;
  max-height: 635px;
}

footer .social_nav i{
  font-size: 1.8em;
}

/*******************
      5. component
  *******************/
.lazyload {
    opacity: 0;
}

.loaded {
    animation-fill-mode: forwards;
    animation-delay: 0s;
    animation-timing-function: ease;
    animation-duration: 1s;
}

.delay-0 {
    animation-delay: 0s !important;
}

.delay-1 {
    animation-delay: 0.2s !important;
}

.delay-2 {
    animation-delay: 0.4s !important;
}

.delay-3 {
    animation-delay: 0.6s !important;
}

.delay-4 {
    animation-delay: 0.8s !important;
}

.delay-5 {
    animation-delay: 1s !important;
}

.delay-6 {
    animation-delay: 1.2s !important;
}

.delay-7 {
    animation-delay: 1.4s !important;
}

.delay-8 {
    animation-delay: 1.6s !important;
}

.delay-9 {
    animation-delay: 1.8s !important;
}

.delay-10 {
    animation-delay: 2s !important;
}

.delay-11 {
    animation-delay: 2.2s !important;
}

.delay-12 {
    animation-delay: 2.4s !important;
}

.delay-14 {
    animation-delay: 2.6s !important;
}

.delay-15 {
    animation-delay: 2.8s !important;
}

.loaded.grow {
    animation-name: slowgrow;
}

img.loaded.grow {
    animation-name: slowgrow-img;
}

.loaded.grow-slow {
    animation-name: slowgrow-img;
}

.loaded.shrink {
    animation-name: shrink;
}

.loaded.slideleft {
    animation-name: slideright;
}

.loaded.slideright {
    animation-name: slideleft;
}

.loaded.sliderightrotate45 {
    animation-name: sliderightrotate45;
}

.loaded.slideleftrotate45 {
    animation-name: slideleftrotate45;
}

.loaded.fadein {
    animation-name: fadein;
}

.loaded.fadeout {
    animation-name: fadeout;
    animation-duration: 5s;
}

.loaded.dropin {
    animation-name: dropin;
}

.loaded.dropup {
    animation-name: dropup;
}

.loaded.dropdown {
    animation-name: dropdown;
}

.loaded.dropright {
    animation-name: dropright;
}

.loaded.dropleft {
    animation-name: dropleft;
}

.loaded.introfade {
    animation-name: fadein;
    animation-duration: 1s;
}

@keyframes slideright {
    from {
        opacity: 0;
        transform: translateX(18px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes slideleft {
    from {
        opacity: 0;
        transform: translateX(-18px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes dropin {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes dropup {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes dropdown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes dropright {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes dropleft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes dropin-center {
    from {
        opacity: 0;
        transform: translate(-50%, -75%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes slowgrow {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slowgrow-img {
    0% {
        opacity: 0;
        transform: scale(0.97);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slowgrow-center {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.86);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes bounce {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(12px);
    }
}

@keyframes shrink {
    from {
        opacity: 0;
        transform: scale(3);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    from {
        opacity: 0.4;
        transform: scale(0.86);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes sliderightrotate45 {
    from {
        opacity: 0;
        transform: translateX(-40px) rotate(45deg);
    }

    to {
        opacity: 1;
        transform: translateX(0px) rotate(0);
    }
}

@keyframes slideleftrotate45 {
    from {
        opacity: 0;
        transform: translateX(40px) rotate(-45deg);
    }

    to {
        opacity: 1;
        transform: translateX(0px) rotate(0);
    }
}

.accordion .accordion-button {
    font-size: 28px;
    border-bottom: 1px solid transparent;
}

.accordion .accordion-button.collapsed {
    border-color: #bdbdbd;
}

.accordion .accordion-button.collapsed:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='54.354' height='52.76' viewBox='0 0 54.354 52.76'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rectangle_1772' data-name='Rectangle 1772' width='42.137' height='44.462' fill='%23ededed'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='icon-accordion-close' transform='translate(-3161 1246.76) rotate(-90)'%3E%3Cg id='Group_940' data-name='Group 940' transform='translate(1194 3172.615) rotate(-16)' clip-path='url(%23clip-path)'%3E%3Cpath id='Path_899' data-name='Path 899' d='M17.193,2.127c-2.1,1.388-4.117,2.91-6.164,4.373C9.062,7.9,7.047,9.262,5.195,10.816a15.975,15.975,0,0,0-4.2,4.969A9.868,9.868,0,0,0,.18,22.021,21.239,21.239,0,0,0,2.6,28.2c2.092,3.865,4.463,7.776,7.8,10.7a19.651,19.651,0,0,0,1.565,1.239,15.137,15.137,0,0,0,7.721,4.03A18.867,18.867,0,0,0,31.934,42.09c3.877-2.028,7.473-5.232,9.167-9.343,1.767-4.288,1.05-9.041-.482-13.283A44.264,44.264,0,0,0,33.912,7.4C31.3,4.037,27.747.078,23.134,0a10.648,10.648,0,0,0-5.941,2.126' transform='translate(0 0)' fill='%23fc0'/%3E%3C/g%3E%3Cpath id='Icon_ionic-ios-arrow-back' data-name='Icon ionic-ios-arrow-back' d='M14.353,15.191l6.811-6.805a1.286,1.286,0,1,0-1.822-1.817L11.625,14.28a1.284,1.284,0,0,0-.038,1.774l7.748,7.765A1.286,1.286,0,1,0,21.158,22Z' transform='translate(1205.806 3204.541) rotate(-90)'/%3E%3C/g%3E%3C/svg%3E");
}

.accordion .accordion-body {
    font-size: 20px;
    font-weight: 300;
    line-height: 32px;
    padding-right: 70px;
    border-bottom: 1px solid #bdbdbd;
    padding-top: 0;
}

.breadcrumb {
    font-weight: 400;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.1s ease-in-out all;
}

.btn:hover {
    transform: scale(1.05);
}

.section-price .btn:hover {
  transform: none;
  cursor: default;
}

.btn-sm,
.btn-group-sm > .btn {
    height: 48px;
    min-width: 328px;
}

.btn-lg,
.btn-group-lg > .btn {
    height: 76px;
}

.btn-outline-primary {
    color: #000000;
}

.btn-sky {
    border-color: #03dac5;
    background-color: rgba(3, 218, 197, 0.04);
    color: #bb86fc;
}

.btn-sky:hover,
.btn-sky:active {
    border-color: #03dac5;
    background-color: #03dac5;
}

.form-control {
    border: 0;
    border-bottom: 1px solid #bdbdbd;
    font-style: italic;
}

.swiper-pagination {
    position: initial;
}

.swiper-pagination .swiper-pagination-bullet {
    height: 6px;
    width: 6px;
    margin: 0 5px;
}

.swiper-button-next,
.swiper-button-prev {
    height: 24px;
    width: 24px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    content: none;
}

.swiper-button-prev {
    transition: 0.2s ease-in-out all;
    left: 0;
}

.swiper-button-prev:hover {
    left: -10px;
}

.swiper-button-next {
    transition: 0.2s ease-in-out all;
    right: 0;
}

.swiper-button-next:hover {
    right: -10px;
}

.customer-review-slider .swiper-button-prev {
    left: 5px;
}

.customer-review-slider .swiper-button-next {
    right: 5px;
}

.customer-review-slider .swiper-button-prev:hover {
    left: -5px;
}

.customer-review-slider .swiper-button-next:hover {
    right: -5px;
}

/*******************
      6. Helper
  *******************/
/*******************
      7. pages
  *******************/
.section-feature {
    position: relative;
    padding: 0 0 100px;
    overflow: hidden;
    margin-top: -180px;
}
    
.section-feature .mobile-view{
    display: none;
}

.section-feature .heading-01.font-secondary {
    margin-bottom: 50px;
}

.section-feature .card-feature {
    max-width: 485px;
    position: relative;
    margin-bottom: 80px;
    transition: 0.1s ease-in-out all;
}

.section-feature a:hover{
    color: inherit;
}

.card-feature-single {
    position: relative;
    padding-bottom: 110px;
}

.card-feature-single .shape {
    position: absolute;
    top: 50px;
    left: 0;
    right: -25px;
    background-image: url("../images/shape22.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-color: "";
    background-size: contain;
    height: 598px;
    width: 641px;
    z-index: -1;
}

.section-feature .card-feature:hover .card-feature-image img {
    transform: rotate(15deg);
}

.section-feature .card-feature:hover .heading-04 {
    color: #bb86fc;
}

.section-feature .card-feature .card-feature-image {
    height: 180px;
    margin-bottom: 15px;
    margin-left: -15px;
}

.section-feature .card-feature .card-feature-image img {
    transition: 0.2s ease-in-out;
}

.section-partner {
    margin-top: -280px;
    margin-bottom: 60px;
}

.section-customer-review {
    padding: 40px 0 80px;
}

.section-customer-review .customer-review-slider {
    max-width: 580px;
    margin: 0 auto;
}

.section-customer-review .customer-review-slider .swiper-action {
    max-width: 120px;
    margin: 2px auto 0;
    position: relative;
}

.section-inquery {
    padding: 205px 0 265px;
    overflow: hidden;
}

.section-inquery .inquery-form {
    position: relative;
}

.section-inquery .inquery-form .shape {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    top: -200px;
    left: -5px;
    background-image: url("../images/shape18.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-color: "";
    background-size: contain;
    height: 858px;
    width: 911px;
    z-index: -1;
}

.section-inquery .inquery-form .btn {
    min-width: 225px;
}

.hero-banner-feature {
    min-height: 923px;
}

.hero-banner-feature .hero-shape img {
    max-height: 923px;
}

.section-feature-alt {
    margin-top: -100px;
    padding-top: 0;
    padding-bottom: 0;
}

.section-feature-alt::after {
    content: none;
}

.section-join {
    padding: 10px 0 0;
    overflow: hidden;
    float: left;
    width: 100%;
}
  
.section-join .join-content {
    padding: 115px 0 240px;
    position: relative;
}
  
.section-join .join-content:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    top: 50px;
    left: 3px;
    right: 0;
    margin: 0 auto;
    background-image: url("../images/shape17.png");
    background-repeat: no-repeat;
    background-position: center left;
    background-color: "";
    background-size: contain;
    height: 105px;
    width: 251px;
    z-index: -1;
}
  
.section-join .join-content .shape {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    top: 0;
    left: 0;
    right: -150px;
    margin: 0 auto;
    background-image: url("../images/shape05.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-color: "";
    background-size: contain;
    height: 436px;
    width: 407px;
    z-index: -1;
}

.section-community {
    padding: 0 0 100px;
}

.section-community .community-image {
    position: relative;
}

.section-community .community-image .shape03 {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    bottom: 20px;
    right: 80px;
    background-image: url("../images/shape14.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-color: "";
    background-size: contain;
    height: 66px;
    width: 161px;
    z-index: -1;
}

.section-community .community-image .shape04 {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    top: -110px;
    left: -40px;
    background-image: url("../images/shape15.png");
    background-repeat: no-repeat;
    background-position: top left;
    background-color: "";
    background-size: contain;
    height: 376px;
    width: 337px;
    z-index: -1;
}

.hero-banner-price .hero-shape img {
    max-height: 990px;
}

.section-price .pricing-table {
    margin-top: 85px;
    margin-bottom: 85px;
}

.section-price .pricing-table .table th,
.section-price .pricing-table .table td {
    width: 33.33%;
    vertical-align: bottom;
}

.section-price .pricing-table .pricing-table-feature {
    text-align: center;
    position: relative;
}

.section-price .pricing-table .pricing-table-feature h6,
.section-price .pricing-table .pricing-table-feature .h6 {
    font-size: 48px;
    margin-bottom: 16px;
}

.section-price .pricing-table .pricing-table-feature a {
    position: relative;
    margin-bottom: 35px;
    white-space: nowrap;
}

.section-price .pricing-table .pricing-table-feature a::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    top: -10px;
    left: -23px;
    background-image: url("../images/shape08.png");
    background-repeat: no-repeat;
    background-position: center left;
    background-color: "";
    background-size: contain;
    height: 44px;
    width: 46px;
    z-index: -1;
}

.section-price .pricing-table .pricing-table-list {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
    position: relative;
    margin: 0 30px;
}

.section-price .pricing-table .pricing-table-list::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-bottom: 1px solid #bdbdbd;
}

.section-price .pricing-table tr:last-child .pricing-table-list::before {
    border-bottom: none;
}

.section-price .pricing-table .pricing-table-list p {
    font-size: 20px;
    text-align: center;
    line-height: 26px;
    font-weight: 500;
}

.section-price .price-offer {
    position: relative;
}

.section-price .price-offer .price-offer-content {
    position: absolute;
    font-size: 20px;
    max-width: 335px;
    text-align: left;
    left: 47%;
    top: 120px;
}

.section-price .pricing-table thead{
    background-color: #FFFFFF;
    position: sticky;
    top: 0;
    z-index: 2;
}

.hero-banner-about {
    min-height: 946px;
}

.hero-banner-about .hero-shape img {
    max-height: 946px;
}

.section-story {
    margin-top: -180px;
    position: relative;
    overflow: hidden;
}

.section-story .shape {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    bottom: 80px;
    right: 0;
    background-image: url("../images/shape01.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-color: "";
    background-size: contain;
    height: 984px;
    width: 919px;
    z-index: -1;
}

.section-story .font-secondary.heading-01 {
    margin-bottom: 160px;
}

.section-story .story-counter {
    margin-top: 60px;
}

.section-story .story-counter .card-counter .heading-02 {
    transition: 0.2s ease-in-out all;
}

.section-story .story-counter .card-counter:hover .heading-02 {
    transform: scale(1.05);
}

.section-story .story-care {
    position: relative;
}

.section-story .story-care .story-care-content {
    max-width: 490px;
    text-align: right;
    margin: 0 auto;
    position: absolute;
    top: 28%;
    left: 33%;
    z-index: 1;
}

.section-story .story-care .story-care-content p {
    font-size: 26px;
    line-height: 35px;
}

.section-story .story-care .story-care-content p:last-child {
    font-size: 34px;
    font-weight: 700;
    margin-top: 12px;
}

.section-story .story-care .story-care-image {
    margin-top: 70px;
    position: relative;
}

.section-story .story-care .story-care-image .shape01 {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 15px;
    right: 158px;
    background-image: url("../images/image16.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-color: "";
    background-size: contain;
    height: 212px;
    width: 414px;
    z-index: 0;
}

.section-story .story-care .story-care-image .shape02 {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    top: -20px;
    left: 0;
    background-image: url("../images/image17.png");
    background-repeat: no-repeat;
    background-position: top left;
    background-color: "";
    background-size: contain;
    height: 423px;
    width: 357px;
    z-index: 0;
}

.section-value {
    position: relative;
    padding: 205px 0 0;
    overflow: hidden;
    margin-top: -50px;
}

.section-value .shape {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    top: 0;
    left: 0;
    background-image: url("../images/shape09.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-color: "";
    background-size: contain;
    height: 915px;
    width: 903px;
    z-index: -1;
}

.section-value .card-value {
    max-width: 280px;
    position: relative;
    margin-bottom: 20px;
    transition: 0.1s ease-in-out all;
}

.section-value .card-value:hover .card-value-image img {
    transform: rotate(15deg);
}

.section-value .card-value .card-value-image {
    height: 180px;
    margin-bottom: 15px;
    margin-left: -15px;
}

.section-value .card-value .card-value-image img {
    transition: 0.2s ease-in-out;
}

.section-value .card-value:hover .heading-04 {
    color: #bb86fc;
}

.hero-banner-blog .hero-shape img {
    max-height: 990px;
}

.section-blog {
    margin-top: -100px;
    position: relative;
    overflow: hidden;
    padding-top: 100px;
}

.section-blog .heading-01.font-secondary {
    margin-bottom: 130px;
}

.section-blog.section-blog-home::after {
    content: none;
}

.section-blog.section-blog-home .shape01 {
    top: auto;
    bottom: 0;
}

.section-blog.section-single-blog::after {
    content: none;
}

.section-blog.section-single-blog::before {
    top: 580px;
}

.blog-list .blog-list-item {
    padding-bottom: 145px;
    position: relative;
}

.blog-list .blog-list-item:last-child {
    padding-bottom: 225px;
}

.blog-list .blog-list-item .heading-03,
.blog-list .blog-list-item .blog-list-image {
    transition: 0.2s ease-in-out all;
}

.blog-list .blog-list-item:hover .heading-03 {
    color: #bb86fc;
}

.blog-list .blog-list-item:hover .blog-list-image {
    transform: scale(1.05);
}

.blog-list .blog-list-item.blog-item-layout-01 .blog-list-image::after {
    top: -80px;
    left: 30px;
    background-image: url("../images/shape10.png");
    background-repeat: no-repeat;
    background-position: top left;
    background-color: "";
    background-size: contain;
    height: 144px;
    width: 135px;
    z-index: 0;
}

.blog-list .blog-list-item.blog-item-layout-01 .blog-list-image::before {
    bottom: -115px;
    right: -100px;
    background-image: url("../images/shape11.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-color: "";
    background-size: contain;
    height: 328px;
    width: 320px;
    z-index: -1;
}

.blog-list .blog-list-item.blog-item-layout-02 .blog-list-image::after {
    bottom: 20px;
    right: -87px;
    background-image: url("../images/shape12.png");
    background-repeat: no-repeat;
    background-position: top left;
    background-color: "";
    background-size: contain;
    height: 47px;
    width: 210px;
    z-index: 0;
}

.blog-list .blog-list-item.blog-item-layout-02 .blog-list-image::before {
    bottom: -145px;
    right: -80px;
    background-image: url("../images/shape13.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-color: "";
    background-size: contain;
    height: 280px;
    width: 312px;
    z-index: -1;
}

.blog-list .blog-list-item.blog-item-layout-03 .blog-list-image::after {
    top: -60px;
    right: -28px;
    background-image: url("../images/shape14.png");
    background-repeat: no-repeat;
    background-position: top right;
    background-color: "";
    background-size: contain;
    height: 96px;
    width: 161px;
    z-index: 0;
}

.blog-list .blog-list-item.blog-item-layout-03 .blog-list-image::before {
    top: -145px;
    left: -100px;
    background-image: url("../images/shape15.png");
    background-repeat: no-repeat;
    background-position: top left;
    background-color: "";
    background-size: contain;
    height: 328px;
    width: 320px;
    z-index: -1;
}

.blog-list .blog-list-image {
    position: relative;
}

.blog-list .blog-list-image::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
}

.blog-list .blog-list-image::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
}

.section-blog-more {
    padding-bottom: 60px;
    margin-top: -60px;
    overflow: hidden;
}

.section-blog-more .blog-more-content {
    padding: 115px 0 240px;
    position: relative;
}

.section-blog-more .blog-more-content::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    top: 50px;
    left: 3px;
    right: 0;
    margin: 0 auto;
    background-image: url("../images/shape23.png");
    background-repeat: no-repeat;
    background-position: center left;
    background-color: "";
    background-size: contain;
    height: 105px;
    width: 251px;
    z-index: -1;
}

.section-blog-more .blog-more-content .shape {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    top: 0;
    left: 0;
    right: -150px;
    margin: 0 auto;
    background-image: url("../images/shape05.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-color: "";
    background-size: contain;
    height: 436px;
    width: 407px;
    z-index: -1;
}

.section-blog-search .blog-search-box {
    position: relative;
}

.section-blog-search .blog-search-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 48px;
    gap: 20px;
}

.section-blog-search .blog-search-list a {
    height: 54px;
    min-width: 130px;
    text-align: center;
    font-size: 18px;
    background-color: #f5f5f5;
    color: #757575;
    display: inline-flex;
    border-radius: 54px;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
}

.section-blog-search .blog-search-list a:hover,
.section-blog-search .blog-search-list a.active {
    background-color: #ffcc00;
    color: #000000;
    font-weight: 500;
}

.section-blog-search button{
    background-color: #ffcc00;
    color: #000000;
    font-weight: 500;
    border-radius: 54px;
    padding: 16px 24px;
    border-color: transparent;
}

.section-blog-detail {
    padding: 170px 0 100px;
}

.section-app {
    position: relative;
    z-index: 3;
}

.section-app-download {
    padding: 140px 0 160px;
    position: relative;
}

.section-breadcrumb {
    padding: 85px 0 55px;
}

.section-blog-detail-video {
    position: relative;
}

.section-blog-detail-video .care-type-list {
    margin-top: 60px;
}

.section-blog-detail-video .care-type-list .care-type-item {
    text-align: center;
    margin-bottom: 50px;
    transition: 0.1s ease-in-out all;
}

.section-blog-detail-video
    .care-type-list
    .care-type-item:hover
    .care-type-icon
    img {
    transform: rotate(15deg);
}

.section-blog-detail-video .care-type-list .care-type-item .care-type-icon {
    height: 160px;
    width: 160px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-blog-detail-video .care-type-list .care-type-item .care-type-icon img {
    transition: 0.2s ease-in-out;
}

.section-blog-detail-video .care-type-list .care-type-item p {
    font-size: 24px;
    font-weight: 500;
    max-width: 160px;
    margin: 8px auto 0;
}

.section-blog-detail-video .care-type-list .care-type-item p:last-child {
    font-size: 16px;
    color: #757575;
    font-weight: 400;
}

.section-blog-detail-video .blog-video-shape {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    bottom: -210px;
    right: 0;
    background-image: url("../images/shape20.png");
    background-repeat: no-repeat;
    background-position: top right;
    background-color: "";
    background-size: contain;
    height: 324px;
    width: 248px;
    z-index: -1;
}

.scroll-to-top-arrow{
    position: fixed;
    bottom: 15%;
    right: 2%;
    border: 1px solid #000000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    background-color: #000000;
    z-index: 4;
}

.scroll-to-top-arrow a{
    font-size: 1.5em;
    color: #FFFFFF;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1130px;
    }
}

@media (min-width: 992px) {
    .hero-banner-about .hero-image img {
        margin-left: -70px;
    }

    .section-story .story-care .story-care-image {
        margin-left: 50px;
    }

    .section-blog .shape02 {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
        top: 0;
        right: 0;
        background-image: url("../images/shape01.png");
        background-repeat: no-repeat;
        background-position: bottom right;
        background-color: "";
        background-size: contain;
        height: 984px;
        width: 908px;
        z-index: -1;
    }

    .section-blog .shape01 {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
        top: 900px;
        left: 0;
        background-image: url("../images/shape02.png");
        background-repeat: no-repeat;
        background-position: center left;
        background-color: "";
        background-size: contain;
        height: 780px;
        width: 842px;
        z-index: -1;
    }

    .section-blog.section-blog-home {
        margin-bottom: -160px;
    }

    .section-blog-search {
        padding-bottom: 160px;
    }

    .section-app-download .shape {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
        bottom: -50px;
        left: 0;
        background-image: url("../images/shape19.png");
        background-repeat: no-repeat;
        background-position: bottom left;
        background-color: "";
        background-size: contain;
        height: 358px;
        width: 274px;
        z-index: -1;
    }

    .section-blog-detail-video .shape01 {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
        top: 5px;
        right: 0;
        background-image: url("../images/shape03.png");
        background-repeat: no-repeat;
        background-position: top right;
        background-color: "";
        background-size: contain;
        height: 908px;
        width: 691px;
        z-index: -1;
    }

    .section-blog-detail-video .shape02 {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
        bottom: 25%;
        left: 0;
        background-image: url("../images/shape21.png");
        background-repeat: no-repeat;
        background-position: bottom left;
        background-color: "";
        background-size: contain;
        height: 546px;
        width: 335px;
        z-index: -1;
    }

    .section-feature .col-lg-6:nth-child(even) .card-feature {
        margin-left: auto;
    }

    .section-feature .card-feature-shape .shape {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
        bottom: 20px;
        right: 0;
        background-image: url("../images/shape17.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-color: "";
        background-size: contain;
        height: 903px;
        width: 734px;
        z-index: -1;
    }

    .section-price .price-offer {
        margin-bottom: 100px;
    }
}

@media (max-width: 1199.98px) {
    .section-story .story-care .story-care-image .shape01 {
        right: 50px;
    }

    .section-story .story-care .story-care-image .shape02 {
        left: -60px;
    }

    .section-feature,
    .section-story {
        margin-top: 1em
    }

    .hero-banner .hero-image {
        max-width: 400px;
        margin: 30px auto;
    }
}

@media (max-width: 991.98px) {
    .mobile-view{
      display: block;
    }

    .hero-banner .hero-shape img {
      height: 600px;
    }
  
    .desktop-view{
      display: none;
    }
  
    .header a.outer-link{
      display: none;
    }

    .accordion .accordion-button {
        font-size: 20px;
    }

    .accordion .accordion-body {
        padding-right: 0;
    }

    .breadcrumb {
        font-size: 16px;
    }

    .btn-sm,
    .btn-group-sm > .btn {
        height: 40px;
    }

    .btn-lg,
    .btn-group-lg > .btn {
        height: 50px;
    }

    .heading-01 {
        font-size: 42px;
        line-height: 54px;
    }

    .heading-02 {
        font-size: 32px;
    }

    .heading-03 {
        font-size: 24px;
    }

    .heading-04 {
        font-size: 20px;
    }

    .heading-05 {
        font-size: 16px;
        line-height: 24px;
    }

    .heading-06 {
        font-size: 14px;
    }

    .hero-banner {
        padding-top: 100px;
        min-height: initial;
    }

    .hero-banner .hero-content {
        padding-top: 0;
    }

    .hero-banner .hero-image {
        max-width: 400px;
        margin: 30px auto;
    }

    .hero-banner .hero-image {
        max-width: 280px;
    }

    .hero-banner .hero-shape {
        opacity: 0.7;
    }

    .hero-benefit-shape01 {
        max-width: 30px;
    }

    .hero-benefit-shape02 {
        max-width: 20px;
    }

    .hero-feature-shape01 {
        max-width: 40px;
    }

    .hero-price-shape01 {
        max-width: 22px;
    }

    .hero-blog-shape01 {
        max-width: 22px;
    }

    .header {
        padding-top: 8px;
    }

    .header .navbar-brand {
        max-width: 120px;
    }

    .header .navbar-toggler svg {
        max-width: 56px;
        height: auto;
    }

    .menu-icon {
        top: 18px;
        left: 16px;
    }

    .header .navbar-collapse .navbar-nav {
        margin: 0;
        padding-top: 100px;
        padding-bottom: 10px;
        height: 100%;
    }

    .header .navbar-collapse .navbar-nav .nav-item {
        line-height: normal;
    }

    .header .navbar-collapse .navbar-nav .nav-item .nav-link {
        font-size: 24px;
    }

    .header .navbar-collapse::after {
        height: 208px;
        width: 224px;
        right: 0;
    }

    .footer {
        min-height: initial;
        padding: 30px 0;
    }

    .footer .btn {
        max-width: 320px;
        min-width: inherit;
        margin: 0 auto;
        width: 100%;
    }

    .section-feature {
        padding: 0;
        margin-top: 30px;
    }

    .section-feature .heading-01.font-secondary {
        margin-bottom: 40px;
    }

    .section-feature .card-feature {
        margin: 0 auto 40px;
        text-align: center;
    }

    .card-feature-single .shape {
        width: 450px;
        right: 0;
        left: 0;
        margin: 0 auto;
        top: 0;
    }

    .section-feature .card-feature .card-feature-image {
        height: 100px;
        margin-left: auto;
        margin-right: auto;
    }

    .section-feature .card-feature .card-feature-image img {
        width: 100%;
        height: 100%;
    }

    .section-partner {
        margin-top: 40px;
    }

    .section-inquery {
        padding: 100px 0 0;
    }

    .section-inquery .inquery-form .shape {
        top: -100px;
    }

    .hero-banner-feature {
        min-height: initial;
    }

    .section-feature-alt {
        margin-top: 30px;
    }

    .section-feature .mobile-view{
        display: inline-block;
    }

    .section-feature .mobile-hide{
        max-height: 0;
        overflow: hidden;
        transition: ease-in-out .3s
    }
    
    .section-feature .mobile-hide.active{
        max-height: 600px;
        transition: ease-in-out .3s
    }
    
    .section-feature .heading-04 i{
        transition: ease-in-out .3s
    }
    
    .section-feature .heading-04 i.active{
        transform: rotate(180deg);
        transition: ease-in-out .3s
    }

    .section-community .community-image {
        max-width: 320px;
        margin: 0 auto 40px;
    }

    .section-community .community-image .shape03 {
        right: 0;
        height: 50px;
        width: 84px;
    }

    .section-community .community-image .shape04 {
        top: -35px;
        height: 178px;
        width: 200px;
    }

    .section-price .pricing-table {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .section-price .pricing-table .table,
    .section-price .pricing-table .table thead,
    .section-price .pricing-table .table tbody {
        display: flex;
        flex-direction: column;
    }

    .section-price .pricing-table .table tr {
        display: flex;
        flex-wrap: wrap;
    }

    .section-price .pricing-table .table th:first-child,
    .section-price .pricing-table .table td:first-child {
        width: 100%;
    }

    .section-price .pricing-table .table th,
    .section-price .pricing-table .table td,
    .section-price .pricing-table .table tr:last-child td {
        width: 50%;
    }

    .section-price .pricing-table .table td:empty {
        display: none;
    }

    .section-price
        .pricing-table
        .table
        th:first-child
        .pricing-table-list::before,
    .section-price
        .pricing-table
        .table
        td:first-child
        .pricing-table-list::before {
        border-bottom: 0;
    }

    .section-price .pricing-table .pricing-table-feature h6,
    .section-price .pricing-table .pricing-table-feature .h6 {
        font-size: 32px;
    }

    .section-price .pricing-table .pricing-table-feature a,
    .section-price .pricing-table .btn-outline-primary,
    .section-price .pricing-table .btn-sky {
        font-size: 14px;
        width: 95%;
        height: 40px;
    }

    .section-price .pricing-table .pricing-table-feature a::after {
        height: 22px;
        width: 23px;
        top: 0;
        left: -10px;
    }

    .section-price .pricing-table .pricing-table-list {
        margin: 0;
        width: 100%;
        min-height: initial;
        padding: 12px 10px;
    }

    .section-price .pricing-table .pricing-table-list img {
        width: 18px;
    }

    .section-price .pricing-table .pricing-table-list p {
        font-size: 16px;
    }

    .hero-banner-about {
        min-height: initial;
    }

    .section-story {
        margin-top: 30px;
    }

    .section-story .shape {
        content: none;
        height: 100%;
        width: 100%;
        bottom: 180px;
        right: -50px;
    }

    .section-story .font-secondary.heading-01 {
        margin-bottom: 40px;
    }

    .section-story .story-counter {
        text-align: center;
        margin-top: 15px;
    }

    .section-story .story-counter .card-counter {
        margin-bottom: 30px;
    }

    .section-story .story-care .story-care-content {
        position: initial;
        margin: 30px auto;
        text-align: center;
    }

    .section-story .story-care .story-care-content p {
        font-size: 18px;
        line-height: 24px;
    }

    .section-story .story-care .story-care-content p:last-child {
        font-size: 24px;
    }

    .section-story .story-care .story-care-image .shape01 {
        width: 150px;
        height: 80px;
        bottom: 0;
        right: 10px;
    }

    .section-story .story-care .story-care-image .shape02 {
        height: 180px;
        width: 150px;
        left: -50px;
    }

    .section-story .story-care .story-care-image {
        max-width: 310px;
        margin: 60px auto 0;
    }

    .section-value {
        margin-top: 0;
        padding-top: 100px;
    }

    .section-value .shape {
        height: 100%;
        width: 100%;
        top: 70px;
        left: -80px;
        background-position: top left;
    }

    .section-value .card-value {
        margin: 0 auto 40px;
        text-align: center;
    }

    .section-value .card-value .card-value-image {
        height: 100px;
        margin-left: auto;
        margin-right: auto;
    }

    .section-value .card-value .card-value-image img {
        width: 100%;
        height: 100%;
    }

    .section-blog {
        margin-top: 50px;
        padding-top: 0;
    }

    .section-blog .heading-01.font-secondary {
        margin-bottom: 40px;
    }

    .blog-list .blog-list-item {
        padding-bottom: 60px;
    }

    .blog-list .blog-list-item:last-child {
        padding-bottom: 60px;
    }

    .blog-list .blog-list-item.blog-item-layout-01 {
        margin-top: 40px;
    }

    .blog-list .blog-list-item.blog-item-layout-01 .blog-list-image::after {
        top: -40px;
        left: 20px;
        height: 84px;
        width: 75px;
    }

    .blog-list .blog-list-item.blog-item-layout-01 .blog-list-image::before {
        bottom: -60px;
        height: 228px;
        width: 240px;
    }

    .blog-list .blog-list-item.blog-item-layout-02 .blog-list-image::after {
        right: -27px;
        height: 27px;
        width: 120px;
    }

    .blog-list .blog-list-item.blog-item-layout-02 .blog-list-image::before {
        bottom: -65px;
        height: 170px;
        width: 202px;
    }

    .blog-list .blog-list-item.blog-item-layout-03 .blog-list-image::after {
        top: -20px;
        right: -18px;
        height: 50px;
        width: 84px;
    }

    .blog-list .blog-list-item.blog-item-layout-03 .blog-list-image::before {
        top: -35px;
        left: -90px;
        height: 178px;
        width: 200px;
    }

    .section-blog-more {
        margin-top: 0;
        padding-bottom: 50px;
    }

    .section-blog-more .blog-more-content {
        padding: 95px 0 150px;
    }

    .section-blog-more .blog-more-content .shape {
        height: 336px;
        width: 307px;
        right: -100px;
    }

    .section-blog-search .row,
    .section-blog-search .blog-search-box {
        margin-bottom: 20px;
    }

    .section-blog-search .blog-search-list {
        margin-top: 20px;
        gap: 12px;
    }

    .section-blog-search button{
        max-width: 90%;
        margin: auto;
    }

    .section-blog-search .blog-search-list a {
        font-size: 16px;
        height: 42px;
        min-width: 100px;
    }

    .section-blog-detail {
        padding: 50px 0 0;
    }

    .section-app-download {
        padding-bottom: 20px;
    }

    .section-breadcrumb {
        padding: 40px 0;
    }

    .section-blog-detail-video .care-type-list {
        margin-top: 30px;
    }

    .section-blog-detail-video .blog-video-shape {
        bottom: -100px;
        height: 194px;
        width: 148px;
    }

    .footer .footer-shape img{
      height: 430px;
      object-fit: cover;
    }
  
    .footer-connect{
      margin-bottom: 3em;
    }
}

@media (max-width: 767.98px) {
    .section-price .price-offer .price-offer-content {
        position: initial;
        margin: 0 auto 30px;
        text-align: center;
    }
}