body {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    color: #122826;
    overflow: scroll !important;
    overflow-x: hidden !important;
}

.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
    padding: 0 10px
}

section.our-banner:before {
    background: #00000000;
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    height: 100%;
    top: 0
}

.row {
    margin: 0 -10px
}

a:hover,
button:hover {
    outline: 0
}

section {
    padding: 30px 0;
    clear: both;
    position: relative;
    margin: 0 auto
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Poppins, sans-serif
}

p {
    color: #122826;
    FONT-VARIANT: JIS83;
    FONT-VARIANT: JIS83;
    font-family: Poppins, sans-serif
}

img {
    max-width: 100%;
    /* intrinsic width/height attributes are now on every <img>; without
       this they would fight max-width and distort the aspect ratio */
    height: auto;
}

header {
    padding: 20px 0;
    position: relative;
    z-index: 1;
    background-color: #fff
}

header .row {
    align-items: center
}

header ul li {
    display: inline-block;
    padding: 0;
    position: relative;
    z-index: 1;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s;
    margin-right: 20px
}

.nav-link {
    padding: 0
}

header ul li a {
    color: #000 !important;
    font-weight: 500;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s;
    font-size: 15px
}

.btn {
    padding: 10px 30px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s;
    border-radius: 50px
}

.dropdown:hover>.dropdown-menu {
    display: block
}

.dropdown-item {
    color: #000 !important;
    padding: 6px 15px 4px 15px;
    font-weight: 500;
    border-bottom: 1px solid #ffc41230;
    margin-bottom: 0;
    letter-spacing: .5px;
    font-size: 12px;
    font-weight: 600;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s
}

.dropdown-menu {
    background-color: #fff;
    padding: 0;
    margin: 0
}

.dropdown-item.active,
.dropdown-item:active {
    background: #3b3843
}

.dropdown-item:focus,
.dropdown-item:hover {
    background: #4c56c0;
    color: #fff !important
}

a {
    text-decoration: none !important
}

input.required.error,
select.required.error,
textarea.required.error {
    border-bottom: red 2px solid !important
}

a#back-top.show {
    display: inline-block;
    background-color: #cedffb;
    width: 46px;
    height: 46px;
    line-height: 45px;
    font-size: 22px;
    text-align: center;
    color: #000;
    border-radius: 4px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    border-radius: 50%
}

a#back-top.show {
    cursor: pointer;
    background-color: #f8c600
}

a#back-top.show {
    background-color: #1d1d1d
}

a#back-top.show {
    opacity: 1;
    visibility: visible
}

a#back-top.show i {
    position: relative;
    top: 0;
    color: #fff
}

footer {
    padding: 60px 0;
    position: relative
}

.copy p {
    margin-bottom: 0;
    color: #fff;
    font-size: 12px
}

.sub-heading {
    margin-top: 15px;
    margin-bottom: 15px
}

.copy {
    background: #221d2d;
    padding: 10px 0
}

.copy ul {
    text-align: right
}

.copy .row {
    align-items: center
}

.copy ul li {
    display: inline-block;
    position: relative;
    padding: 0 3px;
    font-size: 12px
}

.copy ul li::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    right: -3px;
    top: 0;
    background: #6f6f6f
}

.copy ul li:last-child::before {
    display: none
}

.copy ul li a {
    color: #000 !important
}

header ul {
    text-align: right;
    position: relative
}

header ul.btn-ul {
    text-align: right
}

header ul.btn-ul li.me-btn a.btn {
    background: #00838c;
    color: #fff !important
}

.our-banner {
    background: url("../images/banner.webp") no-repeat;
    background-size: cover;
    width: 100%;
    padding-top: 245px;
    padding-bottom: 120px;
    background-position: top;
    position: relative
}

header .top-head ul {
    text-align: right
}

header .top-head ul li {
    padding: 0
}

header .top-head ul li a span,
header .top-head ul li button span{
    color: #fff
}

.btn.btn-yellow {
    color: #fff !important;
    background-color: #00838c;
    background: linear-gradient(133deg, #00838c 27%, #00838c 45%, #00838c 59%, #00838c 83%)
}

.btn.btn-yellow:hover {
    color: #fff;
    background-color: #fff;
    background-position: 100% 0
}

.btn {
    font-size: 15px;
    padding: 11px 30px;
    border: 2px solid;
    font-weight: 600;
    position: relative;
    z-index: 1;
    overflow: hidden
}

.btn::before {
    background: #fff;
    background: linear-gradient(0deg, #fff 0, #fff 100%);
    width: 15px;
    height: 110%;
    position: absolute;
    content: "";
    left: -20px;
    top: -5%;
    transform: skewX(-30deg);
    opacity: .4;
    transition: left .6s, opacity .6s;
    z-index: -1
}

.btn:hover::before {
    left: 105%
}

.btn-transparent chat:before {
    background: #51307c
}

header .top-head ul li a,
header .top-head ul li button{
    color: #fff;
    font-size: 15px
}

header ul li:last-child {
    margin-right: 0
}

.our-banner h1 {
    color: #111;
    font-size: 46px;
    font-weight: 700;
    margin: 0 0 20px
}

.our-banner h3 {
    font-size: 22px;
    color: #111;
    font-weight: 600;
    margin: 0 0 20px
}

.btn-black {
    color: #fff;
    transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out;
    background: linear-gradient(133deg, #00838c 27%, #00838c 45%, #00838c 59%, #00838c 83%)
}

.btn-home {
    color: #fff;
    transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out;
    background-color: #01838c
}

.btn-black:hover {
    color: #fff;
    background-color: #fff;
    border: 1px solid;
    background-position: 100%
}

.btn-black-2 {
    background: #000;
    color: #fff;
    border-color: #000
}

.btn-transparent chat {
    color: #4f435f;
    border-color: #4f435f
}

.our-banner img.star {
    display: block;
    margin: 18px 0 26px
}

.our-banner p {
    color: #111;
    font-weight: 600;
    margin: 0;
    font-style: italic;
    position: relative;
    top: 35px;
    font-size: 17px
}

footer {
    background: url("../images/footer-bg.webp") no-repeat;
    width: 100%;
    background-size: cover;
    padding: 60px 0
}

footer h4 {
    font-size: 18px;
    color: #fff;
    margin-bottom: 30px;
    border-bottom: 1px solid #0197a1;
    padding-bottom: 15px
}

footer ul li {
    color: #fff;
    margin-bottom: 10px;
    position: relative
}

footer ul.email li a span {
    color: #0197a1
}

footer ul li a {
    font-size: 14px;
    color: #fff
}

footer .form-group {
    position: relative
}

footer .form-group i {
    color: #0197a1;
    position: absolute;
    top: 12px;
    left: 8px;
    font-size: 16px
}

footer p {
    color: #fff
}

footer .form-control {
    font-size: 14px;
    padding-left: 32px;
    height: 41px
}

footer ul.privacy li a {
    font-weight: 500;
    text-decoration: none !important
}

footer h6 {
    font-size: 15px;
    color: #0197a1;
    margin-top: 28px;
    font-weight: 600
}

footer ul.social li {
    display: inline-block
}

footer ul.social li a {
    height: 40px;
    width: 40px;
    display: inline-block;
    border: 2px solid #fff;
    text-align: center;
    line-height: 35px;
    font-size: 18px;
    border-radius: 50%;
    margin-right: 10px;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s;
    background: white !important;
}

footer ul.social li a i {
    font-size: 16px;
    color: #050505 !important;
    margin: 0;
    line-height: 33px;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s
}

.copy span {
    color: #0197a1 !important
}

footer ul.social li:hover a {
    background: #0197a1
}

footer ul.social li:hover a i {
    transform: rotate(360deg)
}

footer ul li i {
    font-size: 11px;
    color: #0197a1;
    position: relative;
    top: 0;
    margin-right: 4px
}

.ftr-logo img {
    filter: invert(1)
}

.ftr-logo {
    margin-bottom: 3px;
    padding: 40px 0;
    text-align: center
}

footer textarea.form-control {
    height: 80px
}

.book-cta {
    background: url("../images/cta.webp") no-repeat;
    width: 100%;
    background-size: cover;
    text-align: center
}

h2.heading {
    font-size: 44px;
    font-weight: 700;
    line-height: 51px;
    margin: 0 0 20px
}

h2.heading+h3 {
    font-size: 18px;
    font-weight: 500;
    color: #122826;
    line-height: 28px;
    margin-bottom: 30px
}

.home-menu {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0
}

.our-banner .chat {
    color: #111;
    border-color: #111
}

.our-idea h4 br {
    display: none
}

.chat {
    color: #111;
    border-color: #111
}

.btn-block a,
.btn-block button{
    margin-right: 10px
}

.our-faqs h2 {
    font-size: 200px;
    color: #307d82;
    opacity: 50%;
    letter-spacing: -16px
}

.our-faqs h3 {
    font-size: 50px;
    font-weight: 700
}

.our-faqs .heading {
    border-bottom: 2px dashed #d8d8d8;
    margin-bottom: 40px
}

.our-faqs .heading .row {
    align-items: center
}

#faq .card {
    border: 0;
    text-align: center
}

#faq .card .card-header {
    border: 0;
    padding: 20px 0;
    border-bottom: 0px !important;
    background-color: #fff;
    text-align: center;
}

#faq .card .card-header .btn-header-link {    
    display: block;
    color: #e7e7e7;
    padding: 0;
    border: none !important;
    background: #307d82 ;
    padding: 13px;
    border-radius: 0;
    font-size: 19px;
    text-align: center;
}

#faq .card .card-header .btn-header-link:after {
    content: "\f067";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    float: right;
    background: #307d82;
    color: #fff;
    height: 25px;
    width: 25px;
    line-height: 25px;
    font-size: 14px;
    text-align: center
}

#faq .card .card-header .btn-header-link.collapsed:after {
    content: "\f068"
}

#faq .card .collapsing {
    line-height: 30px
}

#faq .card .collapse {
    border: 0
}

.card-body p {
    margin: 0;
    font-size: 16px;
    text-align: left;
    width: 55%;
    margin: auto;
    text-align: center
}

#faq .card .card-body {
    padding: 0 0 20px
}

.btn.focus,
.btn:focus {
    box-shadow: none !important
}

.our-testimonial {
    background: url("../images/tes-bg.webp") no-repeat;
    width: 100%;
    background-size: cover;
    text-align: center;
    padding: 80px 0 50px
}

h2.heading span {
    color: #0197a1
}

.our-testimonial .quote {
    margin-top: 20px;
    margin-bottom: 30px
}

.our-testimonial .owl-carousel {
    width: 80%;
    margin: auto;
    text-align: center
}

.our-testimonial .owl-carousel p {
    font-size: 20px;
    font-style: italic;
    line-height: 32px;
    padding: 0 100px
}

.our-testimonial .owl-carousel h4 {
    position: relative;
    font-size: 22px;
    font-weight: 700;
    display: inline-block;
    padding: 0 50px;
    margin-bottom: 50px
}

.our-testimonial .owl-carousel h4:before {
    content: '';
    background: url("../images/tes-h4-before.webp") no-repeat;
    height: 7px;
    width: 29px;
    position: absolute;
    left: 0;
    bottom: 8px
}

.our-testimonial .owl-carousel h4:after {
    content: '';
    background: url("../images/tes-h4-after.webp") no-repeat;
    height: 7px;
    width: 29px;
    position: absolute;
    right: 0;
    bottom: 8px
}

/* The crest is portrait (295:380), not the old horizontal wordmark, so it is
   sized by height and left to work out its own width. It is deliberately
   taller than the slot it sits in: the negative margins hold its margin box at
   the 82px the row already reserved, while the artwork spans the header's full
   height. The header's height is therefore unchanged. The overflow rises
   alongside the top bar, whose items are all right-aligned, so nothing
   collides -- and it stays on the anchor rather than the image so the whole
   crest remains clickable. */
header a.logo {
    display: inline-block;
    line-height: 0;
    margin-top: -50px;
    margin-bottom: -8px
}

header a.logo img {
    height: 140px;
    width: auto;
    margin: 0
}

header .top-head ul li a.btn,
header .top-head ul li button.btn{
    font-size: 13px;
    padding: 8px 30px;
    position: relative;
    top: -4px
}

.best-selling img {
    margin-left: -30px
}

.best-selling .row {
    align-items: center
}

.becoming .box {
    border: 1px solid #f2f2f2;
    border-radius: 10px;
    padding: 20px 10px
}

.becoming .box img {
    margin: 0 0 10px
}

.becoming .box h6 {
    font-weight: 600;
    margin: 0 0 5px
}

.becoming .box p {
    margin: 0
}

.best-selling h5 {
    font-size: 28px;
    font-weight: 700
}

.best-selling h5+p {
    font-weight: 600;
    position: relative;
    margin: 0 0 0
}

.best-selling h5+p:after {
    content: '';
    background: #307d82;
    height: 3px;
    width: 50px;
    position: absolute;
    right: 80px;
    bottom: 0
}

.specialized {
    background: url("../images/specialized.webp") no-repeat;
    width: 100%;
    background-size: cover;
    position: relative;
    padding: 80px 0;
    overflow: hidden
}

.specialized .text {
    padding: 20px 20px;
    position: absolute;
    bottom: 10px;
    left: -1px;
    background: #000000a8
}

.specialized .text h6 {
    color: #fff;
    font-weight: 700
}

.specialized .text p {
    margin: 0;
    color: #fff
}

.specialized figure img {
    width: 100%;
    transition: .5s
}

.specialized figure {
    position: relative;
    transition: .5s
}

.specialized figure figcaption {
    border: 2px solid #307d82;
    position: absolute;
    top: 0;
    height: 100%;
    padding: 30px 30px;
    text-align: center;
    opacity: 1;
    transition: .5s
}

.specialized figure figcaption h5 {
    font-size: 27px;
    font-weight: 700;
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
    margin-top: 43px
}

.specialized figure figcaption p {
    font-size: 17px;
    font-weight: 500;
    position: relative;
    z-index: 1
}

.specialized figure figcaption:before {
    content: '';
    background: #0197a1;
    position: absolute;
    top: -7px;
    height: 100%;
    width: 100%;
    left: -4px;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s
}

.specialized figure figcaption .text2 {
    transition: .5s linear;
    position: relative;
    opacity: 1;
    transform: translateY(-30px)
}

.specialized figure:hover figcaption .text2 {
    opacity: 1;
    transition: .5s linear;
    transition-delay: .5s
}

.specialized .container:before {
    content: '';
    background: url("../images/specialized-container-before.webp") no-repeat;
    height: 193px;
    width: 193px;
    position: absolute;
    bottom: 30px;
    left: 85px
}

.specialized .heading {
    color: #111;
    font-size: 40px;
    line-height: 38px;
    margin: 0 0 50px;
    text-align: center
}

.specialized .heading span {
    color: #111;
    display: block;
    font-size: 20px;
    font-weight: 400
}

.specialized:before {
    content: '';
    background: #4decf6;
    width: 260px;
    height: 80px;
    position: absolute;
    top: 151px;
    left: -120px;
    border-radius: 50px
}

.specialized:after {
    content: '';
    border: 2px solid #4decf6;
    width: 260px;
    height: 80px;
    position: absolute;
    top: 60px;
    right: -75px;
    border-radius: 50px
}

.our-idea h2 {
    font-size: 46px;
    font-weight: 700;
    line-height: 42px;
    margin: 0 0 18px
}

.our-idea h2 span {
    font-size: 20px;
    color: #307d82;
    display: block
}

.our-idea p {
    line-height: 23px
}

.our-idea h4 {
    font-size: 20px;
    font-weight: 600
}

.our-idea img {
    margin-left: -20px
}

.our-idea .row {
    align-items: center
}

.our-idea ul {
    margin-bottom: 20px
}

.our-idea ul li {
    font-size: 15px;
    margin: 0 0 5px;
    font-weight: 500
}

.our-idea ul li i {
    color: #307d82;
    margin-right: 5px
}

.element-item {
    color: #262524;
    margin-bottom: 0;
    width: calc(100% / 4 - 6px) !important;
    padding: 6px;
    height: 320px;
    overflow: hidden
}

.element-item>* {
    margin: 0;
    padding: 0
}

.element-item img {
    width: 100%;
    -webkit-transition: transform .5s linear, opacity .5s linear;
    -moz-transition: transform .5s linear, opacity .5s linear;
    -ms-transition: transform .5s linear, opacity .5s linear;
    -o-transition: transform .5s linear, opacity .5s linear;
    transition: transform .5s linear, opacity .5s linear;
    height: 100%
}

.element-item:hover img {
    transform: scale(1.09);
    -ms-transform: scale(1.09);
    -webkit-transform: scale(1.09);
    background: #fff;
    border: none !important;
    color: #fff;
    z-index: 1;
    padding: 8px;
    position: relative
}

.new-pf div#filters button {
    display: block;
    width: auto;
    border: none;
    position: relative;
    background: 0 0;
    text-transform: uppercase;
    font-weight: 500;
    color: #000;
    -webkit-transition: color .2s ease-in, background-color .2s ease-in;
    -moz-transition: color .2s ease-in, background-color .2s ease-in;
    -o-transition: color .2s ease-in, background-color .2s ease-in;
    -ms-transition: color .2s ease-in, background-color .2s ease-in;
    transition: color .2s ease-in, background-color .2s ease-in;
    position: relative;
    cursor: pointer;
    z-index: 1;
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 42px;
    width: 100%;
    text-align: left;
    padding: 0 10px;
    border-radius: 50px
}

.new-pf div#filters {
    text-align: center;
    margin-bottom: 24px
}

.hidden {
    visibility: hidden;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important
}

button#showMore {
    transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out;
    background: linear-gradient(133deg, #00838c 27%, #00838c 45%, #00838c 59%, #00838c 83%);
    padding: 12px 35px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: 0 3px 5px #0000004f;
    margin: auto;
    margin-top: 20px;
    display: table;
    color: #fff;
    border: 0;
    border-radius: 33px
}

.new-pf {
    background: url("../images/new-pf.webp") no-repeat;
    background-size: cover;
    width: 100%
}

.new-pf .heading {
    margin: 0 0 50px
}

.new-pf .heading span {
    display: block;
    font-size: 22px;
    color: #70727d;
    font-weight: 500;
    line-height: 30px;
    margin-bottom: 11px
}

.new-pf div#filters button:before {
    content: '';
    position: absolute;
    height: 8px;
    width: 8px;
    background: #307d82;
    left: -13px;
    top: 17px;
    border-radius: 50%
}

.gh-banner {
    background: url("../images/gh-banner.webp") no-repeat;
    width: 100%;
    background-size: cover
}

.inner-banner {
    display: flex;
    align-items: center;
    height: 100vh !important
}

.inner-banner h1 {
    color: #111;
    font-size: 44px;
    font-weight: 700;
    line-height: 44px;
    margin: 0 0 20px
}

.inner-banner h1 span {
    color: #0197a1
}

.inner-banner h4 {
    color: #111;
    font-size: 18px;
    line-height: 28px;
    margin: 0 0 20px
}

.inner-banner .btn-transparent chat {
    color: #fff;
    border-color: #fff
}

.inner-banner .btn-transparent chat::before {
    background: #307d82
}

.inner-banner .btn-block {
    margin-bottom: 30px
}

.inner-banner .row {
    align-items: center
}

.gh-banner .ban-img {
    max-width: 90%;
    float: right
}

.our-shelf {
    background: url("../images/our-shelf.webp") no-repeat;
    width: 100%;
    background-size: cover
}

.our-shelf h5 {
    position: relative;
    color: #0197a1;
    font-size: 55px;
    font-weight: 600
}

.our-shelf h5:before {
    content: '';
    background: url("../images/shelf-h5-before.webp") no-repeat;
    height: 55px;
    width: 95px;
    position: absolute
}

.our-shelf * {
    color: #111111
}

.our-shelf h3 {
    color: #111111 !important
}

.our-shelf .col-md-6 {
    margin-bottom: 30px
}

.our-shelf .row:first-child {
    align-items: center
}

.owl-site-logo2 .item img {
    height: 68px !important
}

.site-logos {
    padding: 20px 0;
    background: #fff9e5
}

.site-logos h3 {
    color: #122826;
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    margin-bottom: 0;
    text-align: left;
    padding-left: 40px
}

.site-logos .row {
    align-items: center
}

.info-book figure::before {
    content: "";
    background: #fff;
    opacity: .7;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s
}

.info-book figure {
    position: relative;
    margin-bottom: 0
}

.info-book figure img {
    width: 100%
}

.info-book {
    position: relative;
    margin-bottom: 20px
}

.text-book {
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 38px
}

.info-book:hover .text-book h4 {
    color: #fff
}

.text-book span {
    width: 50px;
    height: 50px;
    background: #307d82;
    border-radius: 50%;
    line-height: 48px;
    margin-bottom: 10px;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s
}

.text-book span i {
    color: #fff;
    font-size: 18px;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s
}

.text-book h4 {
    font-size: 22px;
    font-weight: 700;
    color: #2c2346;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s
}

.text-book h4+p {
    color: #2c2346;
    font-size: 16px;
    font-weight: 500;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s;
    margin-bottom: 0
}

.info-book:hover .text-book h4+p {
    color: #fff
}

.info-book:hover .text-book span {
    background: #fff
}

.info-book:hover .text-book span i {
    color: #307d82
}

.info-book:hover figure::before {
    background: #307d82;
    opacity: .8
}

.info-market figure {
    position: relative;
    width: 100%;
    margin: auto;
    margin-bottom: 0;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s;
    overflow: hidden
}

.info-market figure img {
    width: 100%;
    height: 245px;
    object-fit: cover;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s;
    transform: scale(1)
}

.text-mark {
    padding: 50px 40px;
    text-align: center;
    background: #f2f2f2;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s
}

.text-mark h4 {
    font-size: 22px;
    font-weight: 700;
    color: #2c2346;
    margin-bottom: 8px;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s
}

.text-mark h4+p {
    font-size: 16px;
    color: #2c2346;
    font-weight: 500;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s;
    padding: 0 19px
}

.info-market {
    position: relative;
    border: 1px solid #fff;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s;
    margin-bottom: 20px
}

.info-market:hover {
    border-color: #4decf6
}

.info-market:hover figure {
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s
}

.info-market:hover .text-mark {
    background: #4decf6
}

.info-market:hover .text-mark h4 {
    color: #fff
}

.info-market:hover .text-mark h4+p {
    color: #fff
}

.info-market:hover figure img {
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s;
    transform: scale(1.1)
}

.info-rev {
    padding: 30px 18px;
    background: #fff;
    min-height: 245px;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s;
    border: 1px solid #c5c5c5;
    border-radius: 3px
}

.info-rev img {
    margin-bottom: 8px;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s
}

.info-rev h4 {
    font-size: 20px;
    color: #2c2346;
    font-weight: 700;
    margin-bottom: 10px;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s
}

.info-rev h4+p {
    color: #2c2346;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 0;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s
}

.info-rev h4:hover {
    color: #fff
}

.info-rev p:hover {
    color: #fff
}

.info-rev:hover {
    background: #0197a1;
    border-color: #000
}

.info-rev:hover img {
    filter: brightness(0)
}

.our-expert h5 {
    position: absolute;
    transform: rotate(-90deg);
    top: 45%;
    left: -140px
}

.our-expert h5::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    bottom: 0
}

.info-expert {
    padding: 40px 34px;
    background: #fff;
    border: 1px solid #c5c5c5;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px #00000017;
    min-height: 253px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.info-expert>span {
    width: 50px;
    height: 50px;
    line-height: 50px;
    background: #307d82;
    border-radius: 50%;
    display: block;
    text-align: center;
    margin-bottom: 12px;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s;
    margin-right: auto
}

.info-expert>span i {
    color: #fff;
    font-size: 16px;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s
}

.info-expert h4 {
    font-size: 20px;
    font-weight: 600;
    color: #122826
}

.info-expert:hover {
    background: #0197a1
}

.info-expert:hover span {
    background: #000
}

.text-net {
    background: red;
    padding: 0 60px;
    margin-left: 210px;
    min-height: 270px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.info-net>img {
    position: absolute;
    left: 0;
    top: 20px;
    border-radius: 3px
}

.info-net {
    position: relative;
    margin-bottom: 30px;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s
}

.text-net img {
    position: absolute;
    top: 20px;
    right: 20px
}

.text-net h4 {
    font-size: 22px;
    color: #122826;
    font-weight: 700;
    margin-bottom: 10px
}

.text-net h4+p {
    color: #122826;
    margin-bottom: 0
}

.our-network [class*=col]:first-child .text-net {
    background: #bef7e7
}

.our-network [class*=col]:last-child .text-net {
    background: #f2d1d6
}

.our-network [class*=col]:nth-child(2) .text-net {
    background: #dff1ff
}

.our-network [class*=col]:nth-child(3) .text-net {
    background: #e1ebf5
}

.info-net:hover {
    transform: scale(1.02)
}

.our-network {
    background: url("../images/bg-net.webp");
    max-width: 100%;
    width: 100%;
    background-size: 100%;
    height: 100%
}

.our-global {
    background: url("../images/bg-global.html");
    max-width: 100%;
    width: 100%;
    background-size: cover;
    height: 100%
}

.our-global .row {
    align-items: center
}

.info-global h4 {
    font-size: 34px;
    font-weight: 700;
    color: #122826
}

.info-global h4+p {
    color: #122826;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 30px
}

.our-global .nav-tabs {
    border: none;
    margin: 50px 0;
    justify-content: center
}

.our-global .nav-tabs .nav-item {
    border: none;
    margin-bottom: 0;
    padding: 0 15px
}

.our-global .nav-tabs .nav-item .nav-link {
    background: 0 0;
    border: none;
    color: #787672;
    font-weight: 600;
    position: relative;
    width: 100%;
    padding: 0;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s
}

.our-global .nav-tabs .nav-item .nav-link.active,
.our-global .nav-tabs .nav-item .nav-link:hover {
    color: #000
}

.our-global .nav-tabs .nav-item .nav-link::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 3px;
    background: #307d82;
    bottom: -3px;
    left: 0;
    z-index: -1
}

.our-global .info-text h3 {
    font-size: 44px;
    color: #122826;
    font-weight: 700;
    margin-bottom: 12px
}

.our-global .info-text h3+p {
    color: #122826;
    font-size: 16px;
    font-weight: 600;
    max-width: 85%;
    margin: auto;
    margin-bottom: 0
}

.editing-banner,
.genre-banner,
.mark-banner,
.pricing-banner,
.pub-banner {
    background: url("../images/marketing-bg.webp") no-repeat;
    height: 599px;
    width: 100%;
    background-size: cover;
    position: relative;
    overflow: hidden
}

.mark-banner:after {
    content: '';
    background: url("../images/marketing-bg-after.webp") no-repeat;
    height: 657px;
    width: 914px;
    position: absolute;
    right: -130px;
    top: 0;
    z-index: -1
}

.our-market {
    padding-bottom: 30px
}

.pub-banner:after {
    content: '';
    background: url(../images/pub-banner-after.webp) no-repeat;
    height: 491px;
    width: 725px;
    position: absolute;
    right: -61px;
    top: 115px
}

.our-global .nav-tabs .nav-item .nav-link.active:before {
    z-index: 1
}

.book-banner {
    background: url("../images/book-banner.webp") no-repeat;
    height: 599px;
    width: 100%;
    background-size: cover;
    position: relative
}

.our-network [class*=col]:nth-last-child(2) .text-net {
    background: #e1ebf5
}

.text-net {
    background: #f5ede1
}

.info-binding .text-net h4>span {
    font-size: 16px;
    display: block;
    font-weight: 600;
    line-height: 22px
}

.info-binding .text-net {
    padding: 0 20px 0 52px
}

.info-text h2 {
    font-size: 36px;
    line-height: 40px;
    font-weight: 700;
    color: #122826;
    margin-bottom: 20px;
    letter-spacing: 0
}

.info-text h2+p {
    font-size: 17px;
    color: #122826;
    font-weight: 600;
    line-height: 23px
}

.info-text.text-center h2+p {
    max-width: 75%;
    margin: auto
}

.info-text {
    margin-bottom: 50px
}

.info-size {
    display: flex;
    align-items: center;
    background: #ffebd9;
    padding: 10px;
    border: 1px solid #fff;
    min-height: 125px
}

.book-size [class*=col-] {
    padding: 0
}

.book-size [class*=col-]:nth-child(even) .info-size {
    background: #ffe2d9
}

.info-size .text-size {
    margin-left: 15px
}

.info-size .text-size h4 {
    margin-bottom: 3px;
    font-size: 20px;
    font-weight: 600
}

.info-size .text-size h4+p {
    font-size: 16px;
    color: #000;
    margin-bottom: 0
}

.book-size {
    background: #fff6e7
}

.book-size::before {
    background: url("../images/line2.webp");
    max-width: 100%;
    width: 100%;
    height: 100%;
    background-size: 100%;
    content: "";
    left: 0;
    top: 0;
    position: absolute;
    z-index: -1
}

.info-type p {
    margin-bottom: 0;
    font-size: 16px;
    color: #122826;
    line-height: 20px
}

.info-type {
    margin: 30px 0;
    padding: 0 35px
}

.info-type h4 {
    font-size: 26px;
    color: #122826;
    font-weight: 700
}

.info-type img {
    margin-bottom: 16px
}

.cover-book {
    background: url("../images/bg-cover.html") no-repeat;
    max-width: 100%;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 100%
}

.info-cover img {
    margin-bottom: 20px
}

.info-cover h4 {
    font-size: 26px;
    color: #122826;
    font-weight: 700;
    margin-bottom: 15px
}

.info-cover h4+p {
    color: #122826;
    font-size: 16px;
    margin-bottom: 0
}

.info-cover {
    padding: 0 35px
}

.our-editor {
    background: url("../images/bg-editor.webp") no-repeat;
    max-width: 100%;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 100%
}

.info-edit img {
    margin-bottom: 25px
}

.info-edit h4 {
    font-size: 20px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 12px
}

.info-edit h4+p {
    color: #fff;
    font-size: 13px;
    margin-bottom: 0
}

.our-editor h2 {
    color: #fff
}

.info-content img {
    margin-bottom: 25px
}

.info-content h4 {
    font-size: 22px;
    color: #122826;
    font-weight: 700;
    margin-bottom: 12px
}

.info-content p {
    color: #122826;
    font-size: 17px;
    margin-bottom: 20px;
    line-height: 22px
}

.our-content h5 {
    margin-bottom: 0;
    color: #122826;
    font-weight: 700;
    font-size: 26px;
    position: relative;
    z-index: 1
}

.our-content h2 {
    font-size: 40px;
    margin-bottom: 16px
}

.our-content h5::before {
    position: absolute;
    content: "";
    background: url("../images/rec1.webp") no-repeat;
    max-width: 322px;
    height: 52px;
    width: 100%;
    background-size: 100%;
    top: -6px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1
}

.best-selling .rewriting {
    margin-top: 60px;
    margin-left: -15px
}

.best-selling .rewriting li {
    display: inline-block;
    width: 31%;
    background: #fff;
    padding: 20px 40px;
    margin-bottom: 18px;
    margin-left: 15px
}

.best-selling .rewriting li p {
    display: inline-block;
    margin: 0;
    width: 87%;
    margin-left: 10px;
    font-size: 15px;
    font-weight: 500
}

.best-selling .rewriting li p span {
    color: #694293;
    font-weight: 600
}

.edt-selling {
    background: #f4f5f7
}

.about-banner {
    background: url("../images/about-banner.webp") no-repeat;
    height: 599px;
    width: 100%;
    background-size: cover
}

header ul.menu {
    margin-top: 15px;
}

.our-journey img.jr-img {
    margin-top: 40px
}

.about-expert {
    background: url("../images/about-expert.webp") no-repeat;
    background-size: cover;
    width: 100%;
    background-position: 100% 100%;
    padding: 80px 0 50px
}

.about-expert h2.heading+p {
    font-size: 17px;
    font-weight: 500;
    line-height: 26px;
    margin-bottom: 25px
}

.about-expert h2.heading {
    margin: 0 0 15px
}

.about-expert .info-expert h4 strong {
    display: block;
    font-weight: 700;
    font-size: 40px
}

.about-expert .info-expert h4 {
    font-size: 19px
}

.our-journey.text-center {
    padding-bottom: 0
}

.author-banner {
    background: url("../images/author-bg.webp") no-repeat;
    height: 599px;
    width: 100%;
    background-position: 60% 100%;
    background-size: cover
}

.our-author figure {
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s;
    position: relative;
    border: 1px solid #f2f2f2;
    float: left;
    width: 100%
}

.our-author figure img {
    width: 100%;
    margin-bottom: 10px;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s
}

.our-author figure h5 {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    display: inline-block;
    margin-top: 15px
}

.our-author figure .btn-black {
    padding: 10px 20px;
    float: right
}

.our-author figure figcaption {
    position: absolute;
    bottom: 0;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s;
    padding: 25px;
    opacity: 0
}

.our-author figure figcaption h4 {
    font-size: 20px;
    color: #0197a1;
    text-transform: uppercase
}

.our-author figure figcaption p {
    color: #fff;
    font-size: 15px
}

.our-author figure figcaption ul li {
    color: #fff;
    font-size: 15px;
    margin: 0 0 10px
}

.our-author figure figcaption ul li span {
    color: #0197a1;
    font-weight: 600
}

.our-author figure:before {
    content: '';
    background: #493a53;
    position: absolute;
    left: 0;
    height: 0;
    width: 100%;
    opacity: .8;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s;
    top: 0
}

.our-author figure:hover:before {
    height: 100%
}

.our-author figure:hover figcaption {
    opacity: 1;
    transition-delay: .4s;
    bottom: 60px
}

.our-author figure:hover .btm {
    height: 0;
    opacity: 0
}

.our-author figure .btm {
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s;
    transition-delay: .3s;
    float: left;
    width: 100%;
    padding: 0 15px 15px 15px
}

.our-author figure:hover img {
    margin: 0
}

.our-author .row {
    margin-top: 80px
}

.our-author .row .col-md-4 {
    margin-bottom: 30px
}

.our-author .row .col-md-4:nth-child(2) {
    margin-top: -50px
}

.our-author .row .col-md-4:nth-child(5) {
    margin-top: -50px
}

.our-author .row .col-md-4:nth-child(8) {
    margin-top: -50px
}

.contact-pt {
    margin-top: 50px
}

.contact-banner {
    background: url("../images/contact-banner.webp") no-repeat;
    height: 599px;
    width: 100%;
    background-size: cover;
    height: 90vh !important;
    background-position: 0 110px;
    background-repeat: no-repeat
}

.our-contact h2.heading {
    font-size: 40px;
    line-height: 40px;
    margin: 0 0 15px
}

.our-contact h2.heading+p {
    font-size: 19px;
    font-weight: 500;
    margin: 0 0 20px
}

.our-contact h3 {
    position: relative;
    font-size: 18px;
    font-weight: 600;
    padding-top: 30px
}

.our-contact h3 a {
    display: block;
    font-size: 38px;
    color: #307d82;
    font-weight: 700;
    margin-top: 10px
}

.our-contact h3:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    width: 80px;
    background: #307d82
}

.our-contact .form-control {
    margin-bottom: 15px;
    height: 48px;
    border-color: #eee;
    font-size: 14px;
    color: #122826
}

.our-contact .btn {
    float: right
}

.our-contact textarea.form-control {
    resize: none;
    height: 100px
}

.our-contact .row {
    align-items: center
}

.genre-bg {
    position: relative
}

.genre-banner:after {
    content: '';
    background: url("../images/genre-bg-after.webp") no-repeat;
    height: 655px;
    width: 890px;
    position: absolute;
    right: -200px;
    bottom: -85px;
    background-size: 80%
}

.our-journey h2.heading {
    line-height: 47px;
    margin: 0 0 35px
}

.our-journey p {
    font-size: 16px;
    margin-bottom: 32px
}

.our-journey p strong {
    display: block;
    font-size: 22px;
    margin-bottom: 5px
}

.pb {
    padding-bottom: 30px !important
}

.our-rate {
    padding: 0;
    float: left;
    width: 100%;
    clear: both
}

.our-rate ul li {
    background: #0197a1;
    width: 33%;
    float: left;
    padding: 13px 13px;
    display: flex;
    align-items: center
}

.our-rate ul li img {
    margin-right: 14px
}

.our-rate ul li p {
    margin: 0;
    width: auto;
    float: right;
    color: #fff
}

.our-rate ul li p strong {
    font-size: 19px;
    display: block
}

.our-rate ul li:nth-child(2) {
    background: #0197a1
}

.our-rate ul li:nth-child(3) {
    background: #0197a1
}

.pricing-banner:after {
    content: '';
    background: url("../images/pricing-bg-after.webp") no-repeat;
    height: 718px;
    width: 914px;
    position: absolute;
    right: -260px;
    background-size: 70%;
    top: 195px
}

.pricing-tabing .bdr {
    position: relative;
    margin-bottom: 40px
}

.pricing-tabing .bdr h3 {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    display: inline-block
}

.pricing-tabing .bdr h4 {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    display: inline-block;
    float: right;
}

.pricing-tabing .bdr:after {
    border-bottom: 2px solid #4decf6;
    content: '';
    position: absolute;
    left: 0;
    bottom: -12px;
    width: 100%
}

.pricing-tabing .nav-item {
    margin: 0;
    width: 46%;
    height: 160px;
    margin-bottom: 20px;
    margin-left: 15px
}

.pricing-tabing .nav-tabs {
    border-bottom: 0
}

.pricing-tabing .nav-item .nav-link {
    background: #fff;
    font-size: 17px;
    color: #122826;
    font-weight: 600;
    padding: 30px 20px;
    border: 0;
    border: 1px solid #f3f3f3;
    height: 100%
}

.pricing-tabing .nav-item .nav-link i {
    font-size: 18px;
    display: block;
    background: #307d82;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 100%;
    color: #fff;
    margin-bottom: 16px
}

.pricing-tabing .nav-item .nav-link.active {
    background: #0197a1 !important
}

.pricing-tabing .nav-item .nav-link.active i {
    background: #000
}

.pricing-tabing .tab-content h5 {
    font-size: 26px;
    font-weight: 600;
    color: #122726
}

.pricing-tabing .tab-content p {
    line-height: 25px;
    font-weight: 500;
    font-size: 15px
}

.pricing-tabing .tab-content ul li {
    margin-bottom: 20px;
    font-size: 15px;
    display: flex;
    align-items: baseline;
    font-weight: 500
}

.pricing-tabing .tab-content ul li i {
    color: #0197a1;
    margin-right: 8px
}

.pricing-tabing .tab-content .btn {
    margin-bottom: 20px;
    padding: 10px 50px;
    background: #307d82;
    color: #fff;
    border-color: #307d82
}

.pricing-tabing {
    background: url("../images/pricing-tab-bg.webp") no-repeat;
    width: 100%;
    background-size: cover
}

.popupform {
    /* background: url("../images/popop-bg.webp") no-repeat !important; */
    background: url("../images/new_sec/popop-bg.webp") no-repeat !important;
    height: 463px;
    width: 747px;
    background-position: 100% 100%;
    padding: 20px;
    border-radius: 20px;
}

.popupform h2 {
    font-size: 35px;
    line-height: 39px;
    font-weight: 600;
    margin-bottom: 4%;
    color: white !important;
}

.popupform .form-control {
    height: 42px;
    border: 1px solid #ceccd6;
    margin-bottom: 15px !important;
    font-size: 13px;
    color: #414141;
    font-weight: 500
}

.popupform .fancybox-close-small {
    background: #a44099;
    color: #fff;
    padding: 1px;
    height: 30px;
    width: 30px;
    border-radius: 4px;
    top: 10px;
    right: 10px
}

.popupform textarea.form-control {
    resize: none;
    height: 70px
}

.home-menu header ul li a {
    color: #000 !important;
    position: relative;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s
}

.book-banner img {
    max-width: 70%;
    float: right
}

.our-shelf p span {
    display: block;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 5px
}

.text {
    position: absolute;
    left: 150px
}

.text h4 {
    font-size: 22px;
    color: #fff;
    font-weight: 700;
    position: relative;
    z-index: 1
}

.text h4::before {
    position: absolute;
    content: "";
    right: 0;
    bottom: 5px;
    background: #483b57;
    width: 48%;
    height: 5px;
    display: none
}

.new-pf div#filters button.is-checked {
    background: linear-gradient(133deg, #00838c 27%, #00838c 45%, #00838c 59%, #00838c 83%);
    color: #fff;
    margin-left: -15px;
    padding-left: 28px
}

.new-pf div#filters button.is-checked:before {
    background: #fff;
    position: absolute;
    left: 7px
}

.specialized figure:hover figcaption .btn-black {
    background: #000
}

.our-expert h2+h4 {
    font-size: 19px;
    font-weight: 600
}

.book-banner .btn-block+img {
    max-width: 100%;
    float: left
}

.mark-selling h4 {
    position: relative;
    font-size: 23px;
    font-weight: 700;
    display: inline-block
}

.mark-selling h4:before {
    content: '';
    background: #f6b72a;
    height: 2px;
    width: 100%;
    bottom: 0;
    left: 0;
    position: absolute
}

.home-menu header ul li a:after {
    content: '';
    background: #00838c;
    height: 2px;
    width: 0;
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    margin: auto;
    transition: color .5s, background-color .5s, border-color .5s, box-shadow .5s
}

.home-menu header ul li a:hover:after {
    width: 100%
}

.home-menu header ul li a:hover {
    color: #fff;
    color: #fff
}

.specialized figure figcaption h5 span {
    font-weight: 800;
    font-size: 47px;
    line-height: 41px;
    color: #fff
}

figure.yel-cta figcaption .text2 {
    transform: translateY(20px)
}

figure.yel-cta img {
    opacity: 0
}

::-webkit-scrollbar {
    width: 15px
}

::-webkit-scrollbar-track {
    border-radius: none
}

::-webkit-scrollbar-thumb {
    background: #307d82;
    border-radius: 0
}

::-webkit-scrollbar-thumb:hover {
    background: #307d82
}

/* ==========================================================================
   Accessibility, motion and touch layer
   Added during the interface audit. Keep this block last so it wins.
   ========================================================================== */

:root {
    color-scheme: light;
    --focus-ring: #0b5f66;
    --focus-ring-contrast: #ffffff;
}

/* --- Skip link ---------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2147483647;
    padding: 12px 20px;
    background: #122826;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 6px 0;
}

.skip-link:focus {
    left: 0;
    outline: 3px solid var(--focus-ring-contrast);
    outline-offset: -3px;
}

/* --- Visible focus ------------------------------------------------------ */
/* Mouse users see nothing new; keyboard users always get a 2px ring with a
   light halo so it stays visible on both dark and light backgrounds. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .85);
    border-radius: 3px;
}

/* Dark sections need the inverse halo. */
footer a:focus-visible,
.footer a:focus-visible,
header a:focus-visible,
.dark-bg a:focus-visible,
.dark-bg button:focus-visible {
    outline-color: #4decf6;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, .6);
}

/* Compound controls (icon + input) light up together. */
.form-group:focus-within,
.input-group:focus-within {
    border-radius: 4px;
    box-shadow: 0 0 0 3px rgba(11, 95, 102, .35);
}

/* Fixed header must never sit on top of the element being focused. */
html {
    scroll-padding-top: 110px;
}

h1[id], h2[id], h3[id], h4[id], h5[id], h6[id],
section[id], [id]:target {
    scroll-margin-top: 110px;
}

/* --- Screen-reader-only text -------------------------------------------- */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Touch & interaction ------------------------------------------------ */
a,
button,
input[type="submit"],
input[type="button"],
[role="button"],
.menu-bottom,
label {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(1, 151, 161, .25);
}

/* WCAG target size: no interactive control smaller than 24px, and social /
   icon-only controls get a comfortable 44px thumb target. */
.social-icons a,
.footer-social a,
ul.social li a,
.menu-bottom {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.modal,
.fancybox-slide,
.popupform,
.mobile-nav,
[role="dialog"] {
    overscroll-behavior: contain;
}

/* --- Buttons that used to be javascript: anchors ------------------------ */
/* These carry the site's own .btn/.chat/.default_btn classes, so only the
   UA button defaults need neutralising. */
/* Only the UA defaults a <button> brings that an <a> did not -- font and
   cursor. Background, border and colour stay with the site's own .btn rules,
   which these elements already carry. */
button.btn,
button.chat,
button.chat2,
button.default_btn,
button.open_popup,
button.various,
button.link-button {
    font: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    cursor: pointer;
}

/* These two had no styling class of their own, so they do need a full reset. */
button.menu-bottom,
button.hex-cell {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    margin: 0;
    text-align: inherit;
    cursor: pointer;
}

button.menu-bottom {
    padding: 5px;
}

button.hex-cell {
    width: 100%;
    display: block;
}

.link-button {
    padding: 0;
    text-decoration: underline;
}

/* --- Form status + inline validation ------------------------------------ */
.form-status:empty {
    display: none;
}

.form-status {
    margin: 10px 0 0;
    padding: 10px 14px;
    border-radius: 4px;
    background: #fff4f4;
    border-left: 4px solid #b3261e;
    color: #5f1a15;
    font-size: 15px;
    line-height: 1.45;
}

span.field-error {
    display: block;
    margin: 4px 0 10px;
    color: #b3261e;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
}

/* 3:1 non-text contrast on the invalid state, not colour alone. */
.has-error,
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border: 2px solid #b3261e !important;
    background-image: none;
}

/* --- Typography --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.main-heading,
.heading {
    text-wrap: balance;
}

p, li, dd, blockquote {
    text-wrap: pretty;
}

.price,
.counter,
.stat-number,
table td,
table th {
    font-variant-numeric: tabular-nums;
}

/* --- Long / user-generated content -------------------------------------- */
p, li, h1, h2, h3, h4, h5, h6, td, th, dd, dt, figcaption, .card, .box {
    overflow-wrap: break-word;
}

.d-flex > *,
.row > [class*="col-"] {
    min-width: 0;
}

/* --- Safe areas --------------------------------------------------------- */
body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

footer,
.footer {
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
}

.fixed-bottom,
#back-top,
.whatsapp-fix {
    bottom: calc(20px + env(safe-area-inset-bottom));
}

/* --- Native select needs explicit colours ------------------------------- */
select,
select.form-control,
select.sameStyle {
    background-color: #fff;
    color: #111;
}

/* --- Hover states ------------------------------------------------------- */
/* Interactive states must INCREASE contrast, never wash out. */
a:hover,
a:focus-visible {
    text-decoration: underline;
}

button:hover,
.btn:hover,
input[type="submit"]:hover {
    filter: brightness(.92);
}

button:disabled,
.btn:disabled,
input[type="submit"]:disabled {
    cursor: progress;
    opacity: .7;
}

/* --- Reduced motion ----------------------------------------------------- */
/* Covers AOS, WOW, Owl Carousel and the hero typewriter, which the previous
   .animated-only rule missed entirely. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    [data-aos],
    .wow,
    .animated,
    .aos-init,
    .aos-animate {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .owl-carousel .owl-stage {
        transition: none !important;
    }

    html {
        scroll-behavior: auto !important;
    }
}


/* ---------------------------------------------------------------------------
   Anchors that became <button> during the accessibility pass.
   A <button> carries a UA background and colour that an <a> does not, so any
   control converted from a link renders as a grey pill unless the page styles
   it explicitly. :where() keeps this at zero specificity, so every authored
   rule still wins -- it only fills the gap where nothing else applies.
   --------------------------------------------------------------------------- */
:where(button.btn,
       button.chat,
       button.chat2,
       button.various,
       button.default_btn,
       button.open_popup,
       button.menu-bottom,
       button.hex-cell,
       button.nos-btn) {
    background-color: transparent;
    background-image: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    border-color: currentColor;
    cursor: pointer;
}