/*
* ----------------------------------------------------------------------------------------
Author        : Rama Hardian Sidik
Template Name : Dusti - multipurpose onepage html
Version       : 1.1
* ----------------------------------------------------------------------------------------
  TABLE OF CONTENT
* ----------------------------------------------------------------------------------------
* 00.VARIABLE
    - color root
    - animation keyframe
* 01.BASE CSS 
    - preload
* 02.HEADDER
* 03.HERO SECTION
* 04.ABOUT SECTION
* 05.PROJECT SECTION
* 06.RESUME SECTION
* 07.TESTIMONIAL SECTION
* 08.CONTACT SECTION
* 09.FOOTER SECTION
/*
* ----------------------------------------------------------------------------------------
* 00.VARIABLE
    - color root
* ----------------------------------------------------------------------------------------
*/
 
 :root {
     --color1: #2beb05;
     --color2: #e7e7e7;
     --color3: #181818;
     --color4: #202020;
     --color5: rgba(231, 231, 231, .4);
     --color6: rgba(231, 231, 231, .02);
     --color7: rgba(76, 76, 76, .2);
 }
 /*
* ----------------------------------------------------------------------------------------
* 00.VARIABLE
    - animation keyframe
* ----------------------------------------------------------------------------------------
*/
 
 @keyframes scroll-icon {
     0% {
         opacity: 0;
     }
     10% {
         transform: translateY(0);
         opacity: 1;
     }
     100% {
         transform: translateY(15px);
         opacity: 0;
     }
 }
 /*
* ----------------------------------------------------------------------------------------
* 01.BASE CSS
* ----------------------------------------------------------------------------------------
*/
 
 *,
 ::after,
 ::before {
     box-sizing: border-box;
 }
 
 html,
 body {
     padding: 0;
     margin: 0;
     font-family: 'PT Sans', sans-serif;
     color: #e7e7e7;
     color: var(--color2);
     background-color: #181818;
     background-color: var(--color3);
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     -moz-font-smoothing: antialiased;
     font-smoothing: antialiased;
 }
 
 .no-pad {
     padding-right: 0;
     padding-left: 0;
 }
 
 .title-section {
     margin-bottom: 100px;
     text-align: center;
 }
 
 .title-section h3 {
     font-size: 35px;
     line-height: 30px;
     font-family: 'Oswald', sans-serif;
     font-weight: 400;
     text-transform: uppercase;
     letter-spacing: 15px;
 }
 
 .title-section h3 .light {
     color: #c5a47e;
     color: var(--color1);
 }
 
 .slide-wrap {
     height: auto;
     overflow: hidden;
     margin-bottom: 15px;
 }
 
 label {
     font-weight: 400;
     letter-spacing: 1px;
     font-size: 13px;
     font-family: 'Oswald', sans-serif;
     text-transform: uppercase;
     letter-spacing: 5px;
     color: #2beb05;
     color: var(--color1);
 }
 
 label.error {
     font-family: inherit;
     padding-top: 10px;
     color: #ff0d00;
     letter-spacing: 1px;
     text-transform: inherit;
 }
 
 .flashinfo span {
     position: absolute;
     left: 20px;
     font-size: 30px;
     color: #202020;
     top: 18px;
 }
 
 .flashinfo {
     position: relative;
     padding: 20px;
     margin-top: 33px;
     background: #85d69f;
     letter-spacing: 1px;
     padding-left: 60px;
     font-size: 15px;
     display: none;
     color: #202020;
     color: var(--color4);
 }
 
 .go-top:hover {
     color: #202020;
     color: var(--color4);
 }
 
 .go-top {
     line-height: 40px;
     color: #202020;
     color: var(--color4);
     background-color: #2beb05;
     background-color: var(--color1);
     display: block;
     position: fixed;
     bottom: 15px;
     width: 45px;
     z-index: 3;
     height: 45px;
     text-align: center;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     -webkit-perspective: 1000;
     -ms-perspective: 1000;
     perspective: 1000;
     -webkit-transform: translateZ(0);
     -ms-transform: translateZ(0);
     transform: translateZ(0);
     right: -60px;
     opacity: 0;
     transition: all .2s ease-in-out;
 }
 
 .is-active {
     right: 20px;
     opacity: 1;
 }
 
 ::-webkit-scrollbar {
     width: 5px;
 }
 
 ::-webkit-scrollbar-thumb {
     background-color: #2beb05;
     background-color: var(--color1);
 }
 
 #particles-js {
     top: 0;
     width: 100%;
     height: 100%;
     position: absolute;
 }
 /* - preload
* ----------------------------------------------------------------------------------------
*/
 
 .preload {
     background-color: #202020;
     background-color: var(--color4);
     width: 100%;
     height: 100%;
     position: fixed;
     z-index: 99;
     top: 0;
     left: 0;
 }
 
 .spinner {
     position: absolute;
     top: 50%;
     left: 50%;
     z-index: 1;
     transform: translate(-50%, -50%);
 }
 
 .spinner>div {
     width: 10px;
     margin: 5px;
     height: 10px;
     background-color: #2beb05;
     background-color: var(--color1);
     border-radius: 100%;
     display: inline-block;
     -webkit-animation: bounce 1.4s infinite ease-in-out both;
     animation: bounce 1.4s infinite ease-in-out both;
 }
 
 .spinner .bounce1 {
     -webkit-animation-delay: -0.32s;
     animation-delay: -0.32s;
 }
 
 .spinner .bounce2 {
     -webkit-animation-delay: -0.16s;
     animation-delay: -0.16s;
 }
 /*
* ----------------------------------------------------------------------------------------
* 02.HEADDER
* ----------------------------------------------------------------------------------------
*/
 
 #header-main .container {
     position: relative;
 }
 
 #header-main {
     padding-top: 20px;
     padding-bottom: 20px;
     top: 0;
     transition: all 0.3s ease;
     position: fixed;
     z-index: 3;
     width: 100%;
 }
 
 #header-main.hide {
     top: -200px;
 }
 
 .wrap-logo {
     width: 50%;
     padding: 20px;
 }
 
 .wrap-logo img {
     width: 100%;
 }
 
 #main-navigation {
     text-align: center;
     padding-top: 0;
 }
 
 button.menu {
     background: none;
     border: none;
     outline: none;
     color: #2beb05;
     color: var(--color1);
     font-size: 13px;
     font-weight: 800;
     letter-spacing: 2px;
     position: relative;
 }
 
 button.menu:after {
     position: absolute;
     width: 10px;
     left: -20px;
     content: "";
     display: block;
     height: 2px;
     background: #2beb05;
     background: var(--color1);
     top: 10px;
 }
 
 .navigation-list {
     padding-left: 0;
     padding-top: 0;
     margin-bottom: 0;
 }
 
 .navigation-list li {
     list-style: none;
     display: inline-block;
     letter-spacing: 5px;
     font-family: 'Oswald', sans-serif;
     font-size: 15px;
     font-weight: 400;
     text-transform: uppercase;
     margin: 20px;
 }
 
 .sosmed-list {
     padding-left: 0;
     margin-bottom: 0;
     text-align: right;
     padding-top: 20px;
     padding-right: 20px;
 }
 
 .sosmed-list li {
     display: inline-block;
     list-style: none;
 }
 
 .sosmed-list li a i {
     background-color: rgba(154, 152, 150, .3);
     border-radius: 50%;
     color: #e7e7e7;
     color: var(--color2);
     display: inline-block;
     height: 28px;
     width: 28px;
     line-height: 28px;
     margin: auto 10px;
     font-size: 13px;
     text-align: center;
     transition: all .3s;
 }
 
 .sosmed-list li a:hover i {
     background-color: #2beb05;
     background-color: var(--color1);
 }
 
 .fixi {
     background: rgba(24, 24, 24, .9);
     padding-top: 10px !important;
     padding-bottom: 10px !important;
 }
 
 .link-nav {
     color: #e7e7e7;
     color: var(--color2);
     transition: all .3s;
 }
 
 .link-nav:hover {
     color: #2beb05;
     color: var(--color1);
     text-decoration: none;
 }
 
 .aktif .link-nav {
     color: #2beb05;
     color: var(--color1);
     text-decoration: none;
 }
 
 .wrap-mobiltoggle {
     display: none;
     position: absolute;
     z-index: 2;
     right: 0;
     top: 20px;
 }
 
 .wrap-mobiltoggle i {
     font-size: 30px;
     color: #e7e7e7;
     color: var(--color2);
 }
 
 .mobile-navwrap {
     width: 100%;
     height: 0%;
     position: fixed;
     display: block;
     visibility: hidden;
     overflow: auto;
     z-index: 3;
     padding-top: 50px;
     background: rgba(32, 32, 32, .9);
     transition: all .3s;
 }
 
 .openmenu.mobile-navwrap {
     height: 100% !important;
     display: none;
 }
 
 #navmobile {
     position: relative;
     top: 30%;
     padding-bottom: 30px;
 }
 
 .navigation-listmobile {
     padding-left: 30px;
 }
 
 .navigation-listmobile li {
     list-style: none;
     display: block;
     letter-spacing: 5px;
     font-family: 'Oswald', sans-serif;
     font-size: 20px;
     font-weight: 400;
     text-transform: uppercase;
     margin: 10px;
 }
 
 #navmobile .sosmed-list {
     text-align: left;
     padding-top: 20px;
     padding-left: 30px;
 }
 /*
* ----------------------------------------------------------------------------------------
* 03.HERO SECTION
* ----------------------------------------------------------------------------------------
*/
 
 #wrap-hero {
     height: auto;
 }
 
 .wrap-herocontent {
     width: 100%;
     height: 750px;
 }
 
 .overlayed {
     z-index: 0;
     width: 100%;
     height: 750px;
     display: block;
     position: absolute;
     left: 0;
     background: linear-gradient(to right, rgba(32, 32, 32, 1) 0%, rgba(32, 32, 32, .3) 100%), linear-gradient(to top, rgba(32, 32, 32, 1) 0%, rgba(255, 255, 255, 0) 100%);
 }
 
 .content-info {
     display: table;
     height: 750px;
     padding-left: 20px;
     position: relative;
 }
 
 .content-innerinfo {
     display: table-cell;
     vertical-align: middle;
 }
 
 .content-innerinfo h3 {
     font-family: 'Oswald', sans-serif;
     font-size: 50px;
     color: #2beb05;
     color: var(--color1);
     text-transform: uppercase;
     font-weight: 400;
     letter-spacing: 15px;
 }
 
 .content-innerinfo h2 {
     letter-spacing: 2px;
     line-height: 1;
     font-size: 16px;
     position: relative;
     left: 100px;
     text-transform: uppercase;
 }
 
 .content-innerinfo h2:before {
     position: absolute;
     width: 60px;
     left: -100px;
     content: "";
     display: block;
     height: 2px;
     background: #e7e7e7;
     background: var(--color2);
     top: 10px;
 }
 
 .arrow {
     position: absolute;
     z-index: 0;
     width: 0;
     height: 0;
     border-bottom: none;
     animation-name: scroll-icon;
     animation-duration: 1.5s;
     animation-timing-function: cubic-bezier(.15, .41, .69, .94);
     animation-iteration-count: infinite;
 }
 
 .icons {
     position: absolute;
     left: -20px;
     top: -200px;
     font-size: 40px;
     color: #2beb05;
     color: var(--color1);
 }
 /*
* ----------------------------------------------------------------------------------------
* 04.ABOUT SECTION
* ----------------------------------------------------------------------------------------
*/
 
 #wrap-about {
     height: auto;
     position: relative;
     padding-top: 200px;
     padding-bottom: 100px;
     background: #202020;
     background: var(--color4);
 }
 
 .arrow-title {
     position: absolute;
     background: #2beb05;
     background: var(--color1);
     left: 50%;
     width: 1px;
     top: 0;
     height: 100px;
     border-bottom: none;
 }
 
 .wrap-pic {
     text-align: center;
     position: relative;
     z-index: 2;
 }
 
 .wrap-pic img {
     width: 400px;
     border-radius: 5px;
 }
 
 .what-ido,
 .about-me {
     padding-left: 20px;
     padding-right: 20px;
 }
 
 .about-me p,
 .what-ido p {
     font-family: 'Oswald', sans-serif;
     text-transform: uppercase;
     letter-spacing: 5px;
     color: #2beb05;
     color: var(--color1);
 }
 
 .what-ido h3,
 .about-me h3 {
     font-weight: 800;
     margin-bottom: 30px;
 }
 
 .about-me>p.mini-detail {
     font-family: unset;
     font-size: 15px;
     letter-spacing: .2px;
     text-transform: unset;
     color: rgba(231, 231, 231, 0.03);
     color: var(--color5);
     line-height: 1.65;
 }
 
 .title-wrap {
     padding-left: 50px;
     position: relative;
 }
 
 .title-wrap .icons-detail {
     position: absolute;
     left: 0;
     z-index: 1;
 }
 
 .title-name {
     position: absolute;
     z-index: 2;
     font-weight: 800;
     font-size: 150px;
     line-height: 1;
     color: rgba(231, 231, 231, .1);
     color: var(--color6);
     top: 300px;
 }
 
 .what-ido>p.mini-detail {
     font-family: unset;
     font-size: 15px;
     letter-spacing: .2px;
     text-transform: unset;
     color: rgba(231, 231, 231, .4);
     color: var(--color5);
     line-height: 1.65;
 }
 
 .title-wrap>p.main-detail {
     font-family: unset;
     font-size: 15px;
     letter-spacing: 2px;
     font-weight: 800;
     color: #e7e7e7;
     color: var(--color2);
 }
 
 #skills {
     padding-top: 100px;
     position: relative;
 }
 
 #skills .title-name {
     top: -50px;
     right: 0;
     z-index: 0;
 }
 
 .wrap-laguagelist {
     padding-left: 0;
 }
 
 .wrap-laguagelist li {
     list-style: none;
     display: inline-block;
     margin-left: 50px;
     margin-right: 50px;
     margin-top: 30px;
     margin-bottom: 30px;
 }
 
 .pie_progress {
     width: 130px;
     margin: 20px auto;
 }
 
 .pie_progress__svg svg ellipse {
     stroke: rgba(76, 76, 76, .2);
     stroke: var(--color7);
 }
 
 .pie_progress__number {
     font-size: 15px;
     letter-spacing: 1px;
     color: #2beb05;
     color: var(--color1);
 }
 
 .wrap-language {
     text-align: center;
 }
 
 .label-name {
     text-transform: uppercase;
     letter-spacing: 2px;
     font-size: 15px;
     font-weight: 400;
     color: #e7e7e7;
     color: var(--color2);
 }
 
 .more-skill {
     padding-left: 50px;
     padding-right: 50px;
 }
 
 .more-skill-name {
     letter-spacing: 2px;
     padding-top: 50px;
     padding-bottom: 10px;
     position: relative;
     color: #e7e7e7;
     color: var(--color2);
     font-size: 15px;
     font-weight: 400;
 }
 
 .more-skill-bar {
     height: 3px;
     background: rgba(76, 76, 76, .2);
     background: var(--color7);
     border-radius: 8px;
     letter-spacing: 1px;
     position: relative;
     color: #2beb05;
     color: var(--color1);
     font-size: 13px;
     line-height: 50px;
     text-align: right;
 }
 
 .more-skill-per {
     height: 3px;
     background-color: #2beb05;
     background-color: var(--color1);
     border-radius: 8px;
     width: 0;
     transition: all .3s linear;
     position: relative;
 }
 
 .download-button span {
     position: absolute;
     right: -30px;
 }
 
 .download-button {
     margin-top: 20px;
     display: inline-block;
     padding: 10px 30px;
     width: auto;
     letter-spacing: 5px;
     position: relative;
     background: transparent;
     border: 1px solid;
     color: #2beb05;
     color: var(--color1);
     transition: all .3s;
     font-weight: 800;
     cursor: pointer;
 }
 
 .download-button:hover {
     text-decoration: none;
     color: #e7e7e7;
     color: var(--color2);
 }
 /*
* ----------------------------------------------------------------------------------------
* 05.PROJECT SECTION
* ----------------------------------------------------------------------------------------
*/
 
 #wrap-work {
     height: auto;
     position: relative;
     padding-top: 200px;
     padding-bottom: 200px;
     background: #181818;
     background: var(--color3);
 }
 
 #wrap-work .download-button {
     margin-top: 50px;
     border: 1px solid;
     padding: 10px 30px;
     display: inline-block;
 }
 
 #wrap-work .title-name {
     width: 100%;
     top: -60px;
     z-index: 0;
 }
 
 #project-wraps {
     padding-top: 50px;
     position: relative;
     padding-left: 0;
     padding-right: 0;
     z-index: 0;
 }
 
 .masonry-item {
     cursor: pointer;
     margin: 0;
     position: relative;
     float: right;
     width: 33.3333%;
     overflow: hidden;
 }
 
 .masonry-item img {
     width: 100%;
     transform-origin: 50% 65%;
     transition: transform 10s ease-in-out;
 }
 
 .masonry-item a:hover img {
     transform: scale(1.5);
 }
 
 .overlay-porto {
     position: absolute;
     z-index: 1;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
     padding: 30px
 }
 
 .overlay-porto:after {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: #181818;
     background-color: var(--color3);
     opacity: .7;
     -webkit-transition: all .5s;
     -o-transition: all .5s;
     transition: all .5s;
 }
 
 .project-title {
     position: relative;
     top: 0;
     left: 0;
     margin: 0;
     font-family: 'Oswald', sans-serif;
     font-weight: 400;
     font-size: 20px;
     line-height: 1.45;
     letter-spacing: 1px;
     z-index: 1;
     color: #e7e7e7;
     color: var(--color2);
     text-transform: uppercase;
     -webkit-transition: all .5s;
     -o-transition: all .5s;
     transition: all .5s;
 }
 
 .project-category {
     position: absolute;
     color: #e7e7e7;
     color: var(--color2);
     bottom: 30px;
     font-size: 15px;
     letter-spacing: 2px;
     text-transform: uppercase;
     font-weight: 400;
     font-family: 'Oswald', sans-serif;
     z-index: 1;
     -webkit-transition: all .5s;
     -o-transition: all .5s;
     transition: all .5s;
 }
 
 .zoomico {
     position: absolute;
     left: 50%;
     top: 50%;
     width: 9em;
     height: 9em;
     margin: -4.5em;
     border-radius: 50%;
     background-color: rgba(24, 24, 24, .9);
     overflow: hidden;
     opacity: 0;
     -webkit-transform: scale(.5);
     -ms-transform: scale(.5);
     -o-transform: scale(.5);
     transform: scale(.5);
     -webkit-transition: all .7s;
     -o-transition: all .7s;
     transition: all .7s;
 }
 
 .masonry-item a:hover .project-title {
     top: 30px;
     opacity: 0;
 }
 
 .masonry-item a:hover .project-category {
     bottom: 30px;
     opacity: 0;
 }
 
 .masonry-item a:hover .overlay-porto:after {
     opacity: 0;
 }
 
 .masonry-item a:hover .zoomico {
     opacity: 1;
     -webkit-transform: scale(1);
     -ms-transform: scale(1);
     -o-transform: scale(1);
     transform: scale(1);
 }
 
 .zoomico .icon-proto {
     color: #e7e7e7;
     color: var(--color2);
     font-size: 50px;
     position: absolute;
     left: 50%;
     top: 50%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     -o-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
 }
 
 .filter-portowrap {
     padding: 50px;
     padding-left: 0;
     position: relative;
     z-index: 1;
 }
 
 .wraplistfilter {
     position: relative;
     z-index: 1;
 }
 
 .wraplistfilter ul {
     padding-left: 0;
     display: inline-block;
     margin: 0 auto;
     text-align: center;
 }
 
 .wraplistfilter ul li {
     list-style: none;
     float: left;
 }
 
 .wraplistfilter ul li a:nth-last-child(1) {
     margin-left: 0;
     padding-left: 0;
 }
 
 .wraplistfilter ul li a.aktip {
     color: #2beb05;
     color: var(--color1);
 }
 
 .wraplistfilter ul li a:hover {
     text-decoration: none;
     color: #2beb05;
     color: var(--color1);
 }
 
 .wraplistfilter ul li a {
     font-family: 'Oswald', sans-serif;
     font-weight: 400;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-size: 13px;
     display: inline-block;
     color: rgba(231, 231, 231, .4);
     color: var(--color5);
     padding: 0 10px;
     margin: 0 14px;
     -webkit-transition: all .2s ease-in-out .2s;
     transition: all .2s ease-in-out .2s;
 }
 /*
* ----------------------------------------------------------------------------------------
* 06.RESUME SECTION
* ----------------------------------------------------------------------------------------
*/
 
 #resume-wrap {
     position: relative;
     padding-top: 200px;
     padding-bottom: 100px;
     background: #202020;
     background: var(--color4);
     height: auto;
 }
 
 #resume-wrap .title-name {
     position: absolute;
     z-index: 0;
     font-weight: 800;
     font-size: 150px;
     line-height: 1;
     right: 0;
     color: rgba(231, 231, 231, .1);
     color: var(--color6);
     top: -100px;
 }
 
 .filter-resumewrap {
     padding: 50px;
     padding-left: 0;
     position: relative;
     z-index: 1;
 }
 
 .wraplistresume ul {
     padding-left: 0;
     display: inline-block;
     margin: 0 auto;
     text-align: center;
 }
 
 .wraplistresume ul li {
     list-style: none;
     float: left;
 }
 
 .wraplistresume ul li a.aktip {
     color: #2beb05;
     color: var(--color1);
 }
 
 .wraplistresume ul li a:hover {
     text-decoration: none;
     color: #2beb05;
     color: var(--color1);
 }
 
 .wraplistresume ul li a {
     font-family: 'Oswald', sans-serif;
     font-weight: 400;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-size: 13px;
     display: inline-block;
     color: rgba(231, 231, 231, .4);
     color: var(--color5);
     padding: 0 10px;
     margin: 0 14px;
     -webkit-transition: all .2s ease-in-out .2s;
     transition: all .2s ease-in-out .2s;
 }
 
 .wraplistresume ul li a:nth-last-child(1) {
     margin-left: 0;
     padding-left: 0;
 }
 
 .wrap-resumedetail {
     margin-top: 50px;
     display: none;
     width: 100%;
 }
 
 .inner-detail {
     display: inline-block;
     width: 100%;
     padding-left: 100px;
     padding-bottom: 50px;
 }
 
 .leftside {
     padding: 30px 10px;
     background: rgba(76, 76, 76, .2);
     background: var(--color7);
     border: 1px solid rgba(76, 76, 76, .2);
     position: relative;
     width: 100%;
     display: inline-block;
     margin-bottom: 30px;
 }
 
 .leftside .number {
     text-align: center;
     position: absolute;
     z-index: 1;
     left: -60px;
     top: 25%;
 }
 
 .leftside .number:after {
     content: "";
     position: absolute;
     width: 70px;
     height: 1px;
     top: 45px;
     background-color: #2beb05;
     background-color: var(--color1);
 }
 
 .leftside .number:before {
     content: "";
     position: absolute;
     left: -27px;
     top: 30px;
     width: 30px;
     height: 30px;
     background-color: #2beb05;
     background-color: var(--color1);
     border: 10px solid #2f2f2f;
     -webkit-transition: all .3s ease;
     transition: all .3s ease;
     z-index: -1;
     border-radius: 50%;
 }
 
 .leftside .date {
     padding-left: 0;
     color: rgba(231, 231, 231, .4);
     color: var(--color5);
 }
 
 .leftside .date li {
     list-style: none;
     display: inline-block;
     margin-left: 20px;
     font-size: 13px;
     width: auto;
     margin-right: 20px;
     letter-spacing: 1px;
 }
 
 .inner-content-l {
     width: 30%;
     float: left;
     position: relative;
 }
 
 .inner-content-l:after {
     content: '';
     position: absolute;
     height: 100px;
     right: 0;
     width: 1px;
     top: 0;
     background: rgba(231, 231, 231, .4);
     background: var(--color5);
 }
 
 .inner-content-r {
     float: right;
     width: 65%;
     padding-right: 20px;
 }
 
 .inner-content-r h3 {
     font-size: 15px;
     letter-spacing: 2px;
     font-weight: 800;
     color: #e7e7e7;
     color: var(--color2);
 }
 
 .inner-content-r p {
     font-size: 15px;
     letter-spacing: .2px;
     text-transform: unset;
     color: rgba(231, 231, 231, .4);
     color: var(--color5);
     line-height: 1.65;
 }
 
 .wrap-detaildata {
     padding-left: 20px;
     color: rgba(231, 231, 231, .4);
     color: var(--color5);
 }
 
 .date li p {
     font-size: 13px;
     font-weight: 600;
     color: #e7e7e7;
     color: var(--color2);
 }
 
 .active-tab {
     display: block;
 }
 
 .wrap-detaildata span {
     position: absolute;
     left: 20px;
 }
 
 .inside-inner {
     padding-left: 50px;
 }
 
 .wrap-detaildata h4 {
     font-size: 15px;
     letter-spacing: 1px;
     font-weight: 600;
     color: #e7e7e7;
     color: var(--color2);
 }
 
 .wrap-detaildata p {
     font-size: 13px;
     margin-bottom: 0;
 }
 /*
* ----------------------------------------------------------------------------------------
* 07.TESTIMONIAL SECTION
* ----------------------------------------------------------------------------------------
*/
 
 .left_wrap {
     width: calc(50% - 595px);
 }
 
 .right_wrap {
     width: calc(50% + 595px);
     overflow: hidden;
 }
 
 #wrap-testimonial {
     position: relative;
     padding-top: 0;
     padding-bottom: 100px;
     display: flex;
     flex-wrap: wrap;
     padding: 50px 0px;
     height: auto;
     background: #202020;
     background: var(--color4);
 }
 
 #wrap-testimonial .title-name {
     position: absolute;
     z-index: 3;
     font-weight: 800;
     font-size: 150px;
     line-height: 1;
     color: rgba(231, 231, 231, .1);
     color: var(--color6);
     top: -100px;
 }
 
 .slick-slide:focus {
     outline: none;
 }
 
 .testimonial_slider {
     margin-bottom: 0px !important;
 }
 
 .testimonial_slider .slick-list {
     padding-left: 35px !important;
     margin-left: -20px;
 }
 
 .testimonial_slider .item {
     padding: 70px 35px 90px 0px;
     width: 50%;
 }
 
 .testimonial_slider .item .testimonial_content {
     border-radius: 2px;
     background-color: #181818;
     background-color: var(--color3);
     opacity: 0.3;
     padding: 25px 100px 70px;
     transition: opacity 0.3s linear;
 }
 
 .quote_icon {
     border-radius: 50%;
     background: #2beb05;
     background: var(--color1);
     text-align: center;
     color: #e7e7e7;
     color: var(--color2);
     line-height: 100px;
     display: inline-block;
     position: relative;
     top: -50px;
 }
 
 .testimonial_slider .item.slick-center .testimonial_content {
     opacity: 1;
 }
 
 .slick-slide img {
     width: 100%;
     height: 100%;
 }
 
 .slick-dots li {
     display: inline-flex;
     justify-content: center;
     align-items: center;
 }
 
 .slick-dots li button {
     width: 8px;
     height: 8px;
     padding: 0px;
     border-radius: 50%;
     background: #ecdcbd;
     transition: all 0.2s linear;
 }
 
 .slick-dots li button:before {
     content: "";
     width: 14px;
     height: 14px;
     top: 50%;
     left: 50%;
     border-radius: 50%;
     opacity: 1;
     border: 1px solid #2beb05;
     margin-top: -7px;
     margin-left: -7px;
     transform: scale(0);
     transition: all 0.3s linear;
 }
 
 .slick-dots li.slick-active button,
 .slick-dots li:hover button {
     background: #2beb05;
     background: var(--color1);
 }
 
 .slick-dots li.slick-active button:before,
 .slick-dots li:hover button:before {
     transform: scale(1);
 }
 
 .testimonail_text strong {
     font-weight: 600;
 }
 
 .user-wrap {
     display: flex;
     align-items: center;
     font-size: 18px;
     font-family: 'Oswald', sans-serif;
     font-weight: 400;
     text-transform: uppercase;
     letter-spacing: 2px;
     color: #2beb05;
     color: var(--color1);
     margin-top: 50px;
 }
 
 .user-wrap .img {
     width: 70px;
     height: 70px;
     border-radius: 50%;
     overflow: hidden;
     margin-right: 30px;
 }
 /*
* ----------------------------------------------------------------------------------------
* 08.CONTACT SECTION
* ----------------------------------------------------------------------------------------
*/
 
 #contact-wrap {
     position: relative;
     padding-top: 200px;
     padding-bottom: 50px;
     background-image: url(../image/asset/subtle.png);
     height: auto;
     background: #181818;
     background: var(--color3);
     z-index: 1;
 }
 
 .wrap-contact {
     background: #202020;
     background: var(--color4);
     padding-top: 50px;
     padding-bottom: 50px;
 }
 
 .contact-place {
     padding: 30px;
     padding-top: 50px;
     position: relative;
 }
 
 .contact-place p {
     font-family: 'Oswald', sans-serif;
     text-transform: uppercase;
     letter-spacing: 5px;
     color: #c5a47e;
     color: var(--color1);
 }
 
 .contact-place h3 {
     font-weight: 800;
     margin-bottom: 30px;
 }
 
 .contact-place>p.mini-detail {
     font-family: unset;
     letter-spacing: .2px;
     text-transform: unset;
     color: rgba(231, 231, 231, 0.03);
     color: var(--color5);
     line-height: 1.65;
 }
 
 .form-contact {
     padding: 20px;
     padding-left: 0;
     padding-top: 50px;
     display: inline-block;
 }
 
 .half-sidel {
     width: 45%;
     float: left;
     margin-bottom: 50px;
     display: inline-block;
 }
 
 .half-sider {
     width: 45%;
     float: right;
     margin-bottom: 50px;
     display: inline-block;
 }
 
 .textarea {
     height: 200px;
 }
 
 .input-text,
 .textarea {
     width: 100%;
     padding: 10px;
     padding-left: 0;
     background: transparent;
     border: none;
     color: #e7e7e7;
     border-bottom: 2px solid rgba(231, 231, 231, 0.03);
     transition: all .3s;
 }
 
 .input-text:focus,
 .textarea:focus {
     outline: none;
     border-bottom: 2px solid #e7e7e7;
 }
 
 .input-text.error {
     color: #ff0d00;
     border-bottom: 2px solid #ff0d00;
 }
 
 .textarea.error {
     color: #ff0d00;
     border-bottom: 2px solid #ff0d00;
 }
 
 .half-sidel p {
     margin-bottom: 0;
     font-size: 13px;
 }
 
 .half-sider p {
     margin-bottom: 0;
     font-size: 13px;
 }
 
 .gap-label {
     width: 100%;
 }
 
 .button-l {
     margin-top: 20px;
     padding: 10px 30px;
     width: auto;
     letter-spacing: 5px;
     position: relative;
     background: transparent;
     border: 1px solid;
     color: #2beb05;
     color: var(--color1);
     transition: all .3s;
     font-weight: 800;
     cursor: pointer;
 }
 
 .button-l:hover {
     color: #e7e7e7;
     color: var(--color2);
 }
 
 .button-l:focus {
     outline: none;
 }
 
 .button-l span {
     position: absolute;
     right: -30px;
     top: 10px;
 }
 
 .list-detailcontact {
     padding-left: 0;
     padding-top: 20px;
 }
 
 .list-detailcontact li {
     list-style: none;
     margin-bottom: 10px;
 }
 
 .list-detailcontact h2 {
     font-family: 'Oswald', sans-serif;
     text-transform: uppercase;
     font-size: 15px;
     letter-spacing: 2px;
     color: #2beb05;
     color: var(--color1);
 }
 
 .list-detailcontact p {
     font-family: unset;
     letter-spacing: initial;
     text-transform: inherit;
     font-size: 13px;
 }
 
 .wrap-placedetail p {
     margin-bottom: 0;
 }
 /*
* ----------------------------------------------------------------------------------------
* 09.FOOTER SECTION
* ----------------------------------------------------------------------------------------
*/
 
 #wrap-footer {
     background-image: url(../image/asset/subtle.png);
     background: #181818;
     background: var(--color3);
 }
 
 .text-footer {
     padding-bottom: 20px;
     text-align: center;
 }
 
 .text-footer h3 {
     font-size: 12px;
     letter-spacing: 3px;
     text-transform: uppercase;
 }
 
 .text-footer img {
     width: 80px;
     margin-bottom: 5px;
     opacity: .3;
 }
 
 .text-footer p {
     font-size: 12px;
     color: rgba(231, 231, 231, 0.03);
     color: var(--color5);
 }
 
 .text-footer .sosmed-list-foot {
     padding-left: 0;
     margin-bottom: 60px;
     text-align: center;
     padding-top: 20px;
     padding-right: 0;
 }
 
 .text-footer .sosmed-list-foot li {
     display: inline-block;
     list-style: none;
 }
 
 .text-footer .sosmed-list-foot li a i {
     background-color: rgba(154, 152, 150, .3);
     border-radius: 50%;
     color: #e7e7e7;
     color: var(--color2);
     display: inline-block;
     height: 28px;
     width: 28px;
     line-height: 28px;
     margin: auto 10px;
     font-size: 13px;
     text-align: center;
     transition: all .3s;
 }
 
 .text-footer .sosmed-list-foot li a:hover i {
     background-color: #2beb05;
     background-color: var(--color1);
 }