:root {
    --gutter        : 15px;

    --text-color    : #181F2B;

    --color-01      : #181F2B;
    --color-02      : #9B7F62;
    --color-03      : #F5EEE1;
    --color-04      : #FDF9F2;
    --color-05      : #05798E;
}

body {background-color: white; font-size: 22px;}
body * {font-family: Poppins; color: var(--text-color); font-weight: 200; line-height: 1.5;}
body svg {fill: var(--text-color);}
body strong {font-weight: 400;}

body svg,
body img,
body figure,
body picture,
body .btn {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
body hr {width: 100%; border-top: 1px solid rgba(0,0,0,0.1);}

body figure * {float: left;}

h1, h2, h3, h4, h5, h6 {margin: 0; font-weight: 600; font-size: 1.8em; line-height: 1.2; letter-spacing: -1px;}

.logo {position: relative; z-index: 1;}

.content-text .title,
.content-text h1,
.content-text h2,
.content-text h3,
.content-text h4,
.content-text h5,
.content-text h6,
.content-text p {margin-bottom: 2rem; display: block;}
.content-text p:last-child {margin-bottom: 0;}

.content-text h1,
.content-text h2,
.content-text h3,
.content-text h4,
.content-text h5,
.content-text h6 {font-size: 28px;}

.btn {padding: 14px 40px; border-radius: 60px; display: inline-block; cursor: pointer;}
.btn * {float: left; display: inline-block;}
.btn:active {opacity: 0.9;}

.btn.btn-small {padding: 10px 30px;}
.btn.btn-small * {font-size: 18px;}

.btn.btn-01 {background-color: var(--color-01);}
.btn.btn-01 * {color: white;}

.btn.btn-02 {background-color: var(--color-02);}
.btn.btn-02 * {color: white;}

.btn.btn-03 {background-color: var(--color-05);}
.btn.btn-03 * {color: white;}

.btn.btn-line {background-color: transparent; box-shadow: inset 2px 0 0, inset -2px 0 0, inset 0 -2px 0, inset 0 2px 0;}

.btn.btn-line.btn-02,
.btn.btn-line.btn-02 * {color: var(--color-02);}

.btn-language {display: inline-block; float: left; padding: 9px 30px; background-color: var(--color-02); border-radius: 60px;}
.btn-language svg {width: 30px; height: 29px; fill: white; float: left;}

.link {display: flex; align-items: center; float: left;}
.link * {float: left; letter-spacing: -1px; font-size: 20px;}
.link svg {width: 15px; height: 15px; margin-left: 20px;}

.link.link-01 * {color: var(--color-02); fill: var(--color-02);}
.link.link-02 * {color: var(--color-05); fill: var(--color-05);}

a.title,
h1.title,
h2.title,
h3.title,
h4.title,
h5.title,
h6.title {font-size: 56px; font-weight: 800; line-height: 1.2;}

.header {position: fixed; top: 0; z-index: 2; transition: all 0.1s ease; padding: 20px 0;}
.header.header-active {background-color: white; box-shadow: 0 0 100px rgba(0,0,0,0.1); z-index: 99999;}

.menu-active .header {background-color: white; box-shadow: 0 0 100px rgba(0,0,0,0.1);}

.mobilemenu {float: right; width: 20px;}
.menu-active .mobilemenu span:nth-child(1) {transform: rotate(45deg); margin-bottom: 0; margin-top: -2px;}
.menu-active .mobilemenu span:nth-child(2) {transform: rotate(-45deg); margin-top: -2px;}

.mainmenu {float: right; display: flex; align-items: center;}
.mainmenu .mainmenu-list {float: left;}
.mainmenu .mainmenu-list li {float: left;}
.mainmenu .mainmenu-list li a {float: left; padding: 10px 25px;}
.mainmenu .mainmenu-list li:last-child a {padding-right: 0;}
.mainmenu .mainmenu-list li a span {float: left; font-weight: 500; font-size: 18px;}
.mainmenu .mainmenu-list li:hover a span {color: var(--color-02);}

.mobilemenu {float: right; width: 20px;}
.mobilemenu span {width: 100%; height: 2px; margin-bottom: 5px; background-color: var(--color-01); display: inline-block; float: left; transition: all 0.1s ease;}
.mobilemenu span:last-child {margin-bottom: 0;}

.section-01 {background-color: var(--color-04); overflow: hidden; position: relative; z-index: 1;}
.section-01 .row {height: 1000px;}

.section-01 .section-01_image {width: 100%; float: left; position: relative;display: flex;justify-content: end;
    /* margin-bottom: 30px; */
}
.section-01 .section-01_image:after {background-color: var(--color-03); width: 1600px; height: 1600px; border-radius: 50%; content: ''; position: absolute; top: -800px; right: -850px; z-index: -1;}


.section-02 {position: relative; z-index: 1;}
.section-03 {background-color: var(--color-04);}
.section-04 {background-color: var(--color-03);}
.section-07 {background-color: var(--color-04);}


.ceo-image img {width: 100%; height: 100%; max-height: 600px; border-radius: 20px; object-fit: cover;}
.ceo-image { display: flex; justify-content: center;}
.ceo-message { background-color: #f5eee0; border-radius: 15px; padding: 40px!important; margin-bottom: 50px; position: relative;}
.ceo-message::before{content: url("../images/quoteleft.svg");position: absolute;width: 80px;height: 80px;z-index: 99;  top:-35px;left:0; opacity: 0.4;}
.ceo-message::after{content: url("../images/quoteright.svg");position: absolute;width: 80px;height: 80px;z-index: 99;   bottom: -35px; right:0; opacity: 0.4;}
.ceo-message .signature{display: flex; justify-content: flex-end; margin-top: 30px;}
.ceo-message .signature p { display: inline-block; font-style: italic;}

.curved {position: relative; overflow: hidden;}
.curved:after {border-radius: 50%; width: 4000px; height: 200px; position: absolute; bottom: -100px; left: 50%; margin-left: -2000px; content: ''; z-index: -1;}

.curved.curved-white:after {background-color: white;}
.curved.curved-brown:after {background-color: var(--color-04);}

.accordion h6 {font-size: 22px!important; padding: 10px 0; cursor: pointer; position: relative;}
.accordion h6 svg {width: 14px; height: 14px; position: absolute; top: 20px; right: 0; transition: all 0.1s ease;}
.accordion h6.ui-state-active {color: var(--color-02);}
.accordion h6.ui-state-active svg {fill: var(--color-02); transform: rotate(45deg);}
.accordion div {padding: 10px 0;}
.accordion div p {font-size: 18px; margin-bottom: 20px;}

.services-list {text-align: center; margin-top: -170px;}
.services-list *,
.services-list *:after {transition: all 0.1s ease;}
.services-list li a {width: 100%; padding: 30px 0; float: left; position: relative; height: 100%;}
.services-list li a:after {background-color: var(--color-02); border-radius: 1rem; position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ''; z-index: -1;}
.services-list li a:hover:after {background-color: white; top: -10px; bottom: -10px; box-shadow: 0 50px 100px rgba(155,127,98,0.2);}
.services-list li a * {color: white; display: block;}
.services-list li a:hover * {color: var(--color-02);}
.services-list li a .icon {padding: 20px; margin-bottom: 10px; display: inline-block; position: relative; z-index: 1;}
.services-list li a .icon:after {background-color: rgba(0,0,0,0.2); border-radius: 50%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ''; z-index: -1;}
.services-list li a:hover .icon:after {background-color: var(--color-02); transform: scale(1.2);}
.services-list li a .icon svg {width: 50px; height: 50px; float: left;}
.services-list li a span {font-size: 16px;}

.services-page img{	height:100%;width:100%;border-radius: 20px;}

.content-list {background-color: white; padding: 50px; border-radius: 0 0 0 2rem; position: relative; float: left;}
.content-list li {display: inline-block; width: 100%; display: flex;}
.content-list li .content-list_icon {margin-right: 50px; position: relative; z-index: 1;}
.content-list li .content-list_icon:after {width: 50px; height: 50px; border-radius: 50%; background-color: var(--color-03); position: absolute; top: -20px; left: -10px; content: ''; z-index: -1;}
.content-list li .content-list_detail {margin-bottom: 50px;}
.content-list li .content-list_detail h3 {color: var(--color-02); margin-bottom: 2rem; font-size: 24px;}
.content-list_image {position: absolute; right: -100px; margin-top: -80px;}

.reviews {width: 100%; float: left; background-color: var(--color-03); padding: 2rem; border-radius: 2rem;}
.reviews:hover {background-color: white; box-shadow: 0 50px 100px rgba(155,127,98,0.2);}
.reviews .reviews-detail {margin-bottom: 20px; display: flex; align-items: center;}
.reviews .reviews-detail .reviews-profile {width: 80px; height: 80px; background-size: cover; border-radius: 50%; margin-right: 20px;}
.reviews .reviews-detail .reviews-profile_detail * {display: block;}
.reviews .reviews-detail .reviews-profile_detail span {font-size: 16px;}
.reviews .reviews-detail .reviews-profile_detail strong {font-size: 18px; font-weight: 600;}

.post {background-color: white; float: left; border-radius: 2rem; overflow: hidden;}
.post .post-title {padding: 20px; margin-bottom: 10px; font-size: 20px; line-height: 1.4;}
.post .post-thumbs {width: 100%; height: 180px; background-size: cover;}

.blog-post h6 {font-size: 24px; margin-bottom: 20px;}

.post-cover img {border-radius: 20px; width: 100%; height: 200px; object-fit: cover; float: left;}
.post-cover_first img {border-radius: 2rem; height: 400px;}

.figure-01 {border-radius: 2rem; overflow: hidden; position: absolute;}
.figure-02 * {width: 100%; height: auto; margin-bottom: -100px;}

.logo-list {width: 100%; background-color: white; border-radius: 0 100px 100px 0; float: left; position: relative; z-index: 1;}
.logo-list:after {background-color: white; position: absolute; top: 0; right: 50%; bottom: 0; left: -26%; content: ''; z-index: -1;}
.logo-list * {float: left;}
.logo-list .logo {max-width:80px;object-fit:contain;}


.boxed {position: relative; z-index: 1;}
.boxed:after {border-radius: 2rem; z-index: -1; position: absolute; top: 1rem; right: 1rem; bottom: 1rem; left: 1rem; content: '';}

.boxed-01:after {background-color: var(--color-04);}
.boxed-02:after {background-color: var(--color-05); border-radius: 20px;}

.content-video {background-color: var(--color-01); width: 100%; height: auto; min-height: 250px; float: left; border-radius: 2rem; overflow: hidden; position: relative; cursor: pointer;}
.content-video * {float: left;}
.content-video .content-video_cover {opacity: 0.3;}
.content-video .content-video_cover img {min-height: 250px; object-fit: cover;}
.content-video:hover .content-video_cover {opacity: 0.4;}
.content-video .content-video_cover,
.content-video .content-video_cover * {width: 100%; height: auto;}
.value-list{align-items:center;justify-content: space-evenly;}
.value-list .value {display: flex;justify-content: center;align-items: center;background-color: #F5EEE1;padding: 10px 15px;border-radius: 10px;margin-bottom: 10px;}
.content-text{text-align:center;}
.company p{text-align: justify;}
.company img {width: 100%;height: 100%;border-radius: 20px;}



.content-video .content-video_detail {position: absolute; right: 0; bottom: 0; left: 0; padding: 50px;}
.content-video .content-video_detail * { color: white; fill: white;}
.content-video .content-video_detail strong {display: block; width: 100%;}

.content-counter {padding: 50px 65px!important;}
.content-counter * {color: white; display: block; line-height: 1.1;}
.content-counter span {font-size: 18px;}
.content-counter strong {font-size: 48px; font-weight: 600; letter-spacing: -2px;}

.contact-list {display: flex; align-items: center;}
.contact-list li {float: left; padding-right: 30px;}
.contact-list li * {font-size: 18px;}
.contact-list li a {display: flex; align-items: center; float: left; padding: 0 5px;}
.contact-list li a:not(.social) * {color: white; fill: white;}
.contact-list li:last-child,
.contact-list li:last-child a {padding-right: 0;}
.contact-list li a span {font-size: 16px;}
.contact-list li a svg {width: 20px; height: 20px;}
.contact-list li a:not(.social) {background-color: #131922; padding: 10px 20px; border-radius: 30px; width: 250px;}
.contact-list li a:not(.social) svg {margin-right: 15px;}

.contact-form {background-color: var(--color-01); border-radius: 20px; padding: 1rem;}
.contact-form h3 {color: white; font-size: 28px;}
.contact-form hr {border-color: white; opacity: 0.1;}
.contact-form label strong {color: white; font-size: 16px; margin-bottom: 10px; display: block;}
.contact-form label > div {width: 100%;}
.contact-form label > div * {font-size: 18px;}
.contact-form label input,
.contact-form label textarea {background-color: white; width: 100%; padding: 15px 20px; border-radius: 10px; font-size: 18px;}
.contact-form label textarea {height: 120px; resize: none;}

.footer {background-color: var(--color-01);}
.footer * {color: white; fill: white;}
.footer .copyright,
.footer .copyright * {font-size: 18px;}
.footer .contact-list li a:not(.social) { width: auto;}

.popup-content {background-color: rgba(0,0,0,0.9); backdrop-filter: blur(30px); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; opacity: 0; visibility: hidden;}
.popup-content.active {opacity: 1; visibility: visible; z-index: 99999;}
.popup-content .row {height: 100vh;}
.popup-content video {width: 100%; max-width: 800px; height: auto; border-radius: 20px;}
.popup-content .btn-close {width: 15px; height: 15px; position: absolute; top: 20px; right: 20px;}
.popup-content .btn-close svg {fill:white;}


@media (max-width: 1399px) {
    :root {
        --gutter        : 10px;
    }

    body {font-size: 18px;}

    body img,
    body figure,
    body picture {width: 100%; height: auto;}

    .logo svg {width: 100%; height: auto;}

    .mainmenu .mainmenu-list li a {padding-right: 20px; padding-left: 20px;}

    .figure-01 {width: 100%;}
    .figure-01 img {height: 350px; object-fit:cover; object-position:center;}

    .value-list svg{width: 40px;}
    .value{justify-content: space-between;}
}

@media (max-width: 1199px) {
    a.title,
    h1.title,
    h2.title,
    h3.title,
    h4.title,
    h5.title,
    h6.title {font-size: 36px;}
    
    .header {padding: 0;}
    
    .mainmenu {background-color: white; display: block; padding: 30px 0; position: fixed; top: 50px; right: 0; bottom: 0; left: 0; opacity: 0; visibility: hidden; transition: all 0.1s ease;}
    .mainmenu .mainmenu-list {width: 100%; margin-bottom: 20px;}
    .mainmenu .mainmenu-list li {width: 100%;}
    .mainmenu .mainmenu-list li a {padding: 20px;}
    .mainmenu .mainmenu-list li a span {font-size: 24px;}
    .menu-active .mainmenu {opacity: 1; visibility: visible;}
    
    .section-01 .row {height: 950px;}
    
    .services-list li a {padding: 16px 0;}
    
    .figure-01 {position: relative; border-radius: 1rem; height: auto;}
    
    .content-list {background-color: transparent; padding: 50px 0; border-radius: 0 0 0 2rem; position: relative; float: left;}
    .content-list li .content-list_icon {margin-right: 20px;}
    .content-list li .content-list_detail {margin-bottom: 3rem;}
    .content-list li .content-list_detail h3 {margin-bottom: 1rem;}
    .content-list_image {position: absolute; right: 0; margin-top: -50px;}
    
    .boxed:after {border-radius: 1rem;}
    
    .logo-list svg {width: 90%; height: auto;}
    
    .figure-02 * {margin-bottom: 0;}
    
    .content-video {border-radius: 1rem;}
    .content-video .content-video_detail {padding: 3rem;}
    
    .content-counter {padding: 25px 35px!important;}
    .content-counter span {font-size: 14px;}
    .content-counter strong {font-size: 38px;}
    
    .contact-list.social-list {display: inline-block;}
    .contact-list.social-list li {width: auto; padding-right: 20px;}
    .contact-list.social-list li:first-child {width: 100%;}
    .contact-list li {margin-bottom: 20px; width: 100%; padding-right: 10px;}

}

@media (max-width: 991px) {
    .section-01 .row {height: 500px; padding-top:50px}

}
@media (min-width:991px){
    .services-page .content{
       padding: 20px 0 ;
    }
    .btn.btn-01{
        margin-right: 0;
    }
}
@media (max-width: 767px) {
    .contact-list {display: inline-block; width: 100%;}
    .contact-list li {margin-bottom: 20px; width: 100%; padding: 0;}
    .contact-list li a:not(.social) {width: 100%;}
}

@media (max-width: 575px) {
    .section-01 .row { padding: 100px 0;}
    .figure-01 {position: relative; border-radius: 1rem;}
    .post-cover img {border-radius: 1rem!important; height: 200px!important;}
    .content-container{padding-bottom: 0px !important; height:100%; min-height: 300px; }
    .section-01 .row {height: 100%!important;padding-top:80px}
    .logo-list .logo {max-width: 50px; }
}

@media (max-width: 991px) {
   .reverse {flex-direction: column-reverse;}

}