/*
* ----------------------------------------------------------------------------------------
Author        : Rama Hardian Sidik
Template Name : Freeman - Multipurpose Personal One Page Html Template
Version       : 1.0
Filename      : main.css
* ----------------------------------------------------------------------------------------
  TABLE OF CONTENT
* ----------------------------------------------------------------------------------------
* 01.BASE CSS. 
    - loadder 
* 02.HEADER SECTION.
    - navigation 
* 03.HERO SECTION. 
* 04.ABOUT SECTION.
* 05.SERVICES SECTION.
* 06.PORTFOLIO SECTION.
* 07.CONTACT SECTION.
* 08.FOOTER SECTION. 
* ----------------------------------------------------------------------------------------
*/
    
@import url(./vendor/bootstrap/bootstrap.css);
@import url(./vendor/fontawesome/all.min.css);
@import url(./vendor/keen-slider.css);
@import url(./vendor/glightbox.css);
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    src: url("../font/Poppins-Bold.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    src: url("../font/Poppins-SemiBold.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    src: url("../font/Poppins-Regular.woff2") format("woff2");
    font-display: swap;
}
/*
* ----------------------------------------------------------------------------------------
* 01.BASE CSS. 
* ----------------------------------------------------------------------------------------
*/

* {
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: 'Poppins';
    font-size: 15px;
    font-weight: 400;
    background: #123631;
    color: #181715;
    text-rendering: optimizeLegibility;
}

 ::selection {
    background: #ddaa01;
    color: #ffffff;
}

a:hover {
    text-decoration: none;
}

.fixid {
    background: #133631;
    box-shadow: 0 0 10px 5px rgb(12 35 31 / 47%);
}

label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

input,
textarea {
    padding: 10px;
    font-size: 13px;
    width: 100%;
    color: #181715;
    background: transparent;
    border: 2px solid rgba(25, 26, 30, .5);
    border-radius: 3px;
}

textarea {
    height: 150px;
}

.goverlay {
    background: #FFDB67;
}

.linkbtn {
    background: #181715;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 50px;
}

.linkbtn:hover {
    color: #ffffff;
}

.navigation-wrapper {
    position: relative;
}

.dots {
    display: flex;
    padding: 5px 0;
    justify-content: center;
}

.dot {
    border: none;
    width: 20px;
    height: 2px;
    background: #ddaa01;
    border-radius: 3px;
    margin: 10px 5px;
    padding: 3px;
    cursor: pointer;
}

.dot:focus {
    outline: none;
}

.dot--active {
    background: #181715;
}
/*
* ----------------------------------------------------------------------------------------
* 01.BASE CSS. 
- preloader
* ----------------------------------------------------------------------------------------
*/

.button {
    display: inline-block;
    line-height: 1;
    font-size: 15px;
    padding: 12px 24px;
    color: #fff;
    fill: #fff;
    text-align: center;
    transition: all .3s;
}

.button {
    font-family: "Lexend", Sans-serif;
    font-size: 18px;
    font-weight: 200;
    fill: #FFFFFF;
    color: #FFFFFF;
    background-color: #324b47;
    border-radius: 8px 8px 8px 8px;
}

 .button:hover, .button:focus {
    color: #5E776F;
    background-color: #FFFFFF;
}

.button:hover svg, .button:focus svg {
    fill: #5E776F;
}
.footwrap{color: #fff;}
.sertao-color{ color: #21433b !important;}

.font-20 {
    font-size: 20px;
}
.img-round {

    border-radius: 8px 8px 8px 8px;
}

.preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999999999 !important;
    background-color: #133631;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.preloader .preloader__img {
    display: inline-block;
    position: absolute;
    width: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/*
* ----------------------------------------------------------------------------------------
* 02.HEADER SECTION. 
* ----------------------------------------------------------------------------------------
*/

#headermain {
    padding: 10px 0 10px;
    position: fixed;
    width: 100%;
    z-index: 3;
}
/*
* ----------------------------------------------------------------------------------------
* 02.HEADER SECTION. 
- navigation
* ----------------------------------------------------------------------------------------
*/

.navpage__wrap {
    padding: 10px 0 0;
    margin: 0;
}

.navpage__wrap li {
    list-style: none;
    display: inline-block;
    margin: 0 3px;
}

.navpage__wrap li a {
    font-size: 15px;
    font-weight: 500;
    position: relative;
    color: #ffffff;
    z-index: 1;
    padding: 5px 15px;
    border-radius: 50px;
}

.navpage__wrap li a:hover {
    text-decoration: none;
    color: #ffffff;
    background: #181715;
}

.navpage__wrap li a.activelink {
    color: #ffffff;
    background: #181715;
}

.navicon {
    position: absolute;
    right: 10px;
    top: 17px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 22;
    border-radius: 25px;
}

.navicon__bar {
    width: 18px;
    height: 1px;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgb(0 0 0 / 0%);
    transition: all .3s;
}

.navicon__bar:before,
.navicon__bar:after {
    content: '';
    position: absolute;
    width: 25px;
    height: 2px;
    background: #c99f6e;
}

.navicon:hover .navicon__bar:before,
.navicon:hover .navicon__bar:after {
    background: #181715;
}

.navicon__bar:before {
    transform: rotate(0deg) translate(0px, -4px);
}

.navicon__bar:after {
    transform: rotate(0deg) translate(0px, 4px);
}

.navicon.active .navicon__bar:before {
    transform: rotate(-45deg) translate(0px, 0px);
}

.navicon.active .navicon__bar:after {
    transform: rotate(45deg) translate(0px, 0px);
}

.navicon.active:hover .navicon__bar .navicon__bar:before {
    transform: rotate(0deg) translate(0px, 0px);
}

.navicon.active:hover .navicon__bar .navicon__bar:after {
    transform: rotate(0deg) translate(0px, 0px);
}

.overlay {
    position: fixed;
    width: 100%;
    height: auto;
    z-index: 2;
    top: -100%;
    display: none;
    background: #133531;
    padding: 80px 0 30px 0;
    border-bottom: 1px solid #081513;
}

.overlay__listnav {
    padding: 0 0 0 20px;
}

.overlay__listnav li {
    list-style: none;
    margin: 10px 0;
}

.overlay__listnav li a {
    font-size: 18px;
    font-weight: 500;
    position: relative;
    color: #c8975c;
    padding: 5px 10px;
    border-radius: 50px;
}

.overlay__listnav li a:hover {
    color: #ffffff;
    text-decoration: none;
    background: #181715;
}

.openmenu .overlay {
    display: block;
    top: -1px;
}
/*
* ----------------------------------------------------------------------------------------
* 03.HERO SECTION. 
* ----------------------------------------------------------------------------------------
*/

#sectionhero {
    padding: 100px 0 0;
}

.infohero__p {
    font-size: 20px;
    letter-spacing: 1px;
    padding: 5px 20px;
    color: #ffffff;
    display: inline-block;
    background: #181715;
}

.infohero__title {
    font-size: 80px;
    font-weight: 600;
    color: #fff;
    text-shadow: 5px 5px #112a25;
}

.infohero__title span {
    display: block;
}

.heroimg {
    height: 350px;
    width: 350px;
    margin: 0 auto;
}

.heroimg .heroimg__poto {
    border-radius: 100%;
    height: 350px;
    width: 350px;
    object-fit: cover;
    box-shadow: 20px 20px 1px 1px #122a26;
    border: 7px solid;
}

#typed-text {
    letter-spacing: 3px;
    font-size: 20px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
}

.herolink {
    display: inline-block;
}
/*
* ----------------------------------------------------------------------------------------
* 04.ABOUT SECTION. 
* ----------------------------------------------------------------------------------------
*/

#aboutsection {
    height: auto;
    background: #ca9f6e;
    padding: 50px 0 0;
}

.abouthero h3 {
    font-size: 50px;
    font-weight: 600;
}

.infoabout__list {
    padding: 0;
}

.infoabout__list li {
    list-style: none;
}

.infoabout__wrap .infoabout__title {
    color: #181715;
    letter-spacing: 1px;
    font-weight: 700;
}
/*
* ----------------------------------------------------------------------------------------
* 05.SERVICE SECTION. 
* ----------------------------------------------------------------------------------------
*/

#servicesection {
    background: #133531;
    height: auto;
    padding: 0 0 0;
}

.counterwrap {
    text-align: center;
}

.counterwrap__counternum {
    font-size: 30px;
    font-weight: 700;
}

.wrapservice {
    padding: 20px;
}

.wrapservice i {
    font-size: 30px;
    background: #ddaa01;
    padding: 20px 20px;
    border-radius: 100%;
}

.wrapservice__title {
    font-size: 20px;
    font-weight: 600;
}
/*
* ----------------------------------------------------------------------------------------
* 06.PORTFOLIO SECTION. 
* ----------------------------------------------------------------------------------------
*/
.m-t-100{margin-top: 100px;}

.heading-title {
    color: #FFFFFF;
    font-size: 24px;
}

iframe {
    height: 420px;
    width: 100%;
    border: none;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0 0 10px 5px rgb(12 35 31 / 7%);
}
.font-verso {
    /* font-family: "Montserrat", sans-serif; */
    font-family: "Lexend", Sans-serif;
    color: #fff;
    font-weight: 200;
    font-size: 17px;
    font-style: italic;
}
.font-verso-autor {
    /* font-family: "Montserrat", sans-serif; */
    font-family: "Lexend", Sans-serif;
    color: #fff;
    font-weight: 200;
    font-size: 17px;
    
}
heading-italic {
    color: #FFFFFF;
   
    font-size: 20px;
    font-weight: 200;
    font-style: italic;
}
.premium-image-scroll-container,.premium-image-scroll-section {
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.premium-image-scroll-section {
    position: relative;
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: -webkit-radial-gradient(white,#000)
}

.premium-image-scroll-container {
    width: 100%
}

.premium-image-scroll-container .premium-image-scroll-mask-media {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center
}

.premium-container-scroll {
    overflow: auto
}

.premium-image-scroll-container .premium-image-scroll-horizontal {
    position: relative;
    width: 100%;
    height: 100%
}

.premium-image-scroll-container .premium-image-scroll-horizontal img {
    max-width: none;
    height: 100%
}

.premium-image-scroll-container .premium-image-scroll-vertical img {
    width: 100%;
    max-width: 100%;
    height: auto
}

.premium-image-scroll-ver {
    position: relative
}

.premium-image-scroll-container .premium-image-scroll-overlay {
    background: rgba(2,2,2,.3)
}

.premium-image-scroll-container .premium-image-scroll-link,.premium-image-scroll-container .premium-image-scroll-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4
}

.premium-image-scroll-content {
    display: inline-block;
    position: absolute;
    height: auto;
    top: 50%;
    left: 50%;
    text-align: center;
    z-index: 5;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.premium-container-scroll-instant .premium-image-scroll-image {
    -webkit-transition: all 0s ease-in-out!important;
    transition: all 0s ease-in-out!important
}

.premium-image-scroll-container img {
    -webkit-transition: -webkit-transform 3s ease-in-out;
    transition: -webkit-transform 3s ease-in-out;
    transition: transform 3s ease-in-out;
    transition: transform 3s ease-in-out,-webkit-transform 3s ease-in-out
}

.premium-image-scroll-container .premium-image-scroll-content,.premium-image-scroll-container .premium-image-scroll-overlay {
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    opacity: 1
}

.premium-image-scroll-container:hover .premium-image-scroll-overlay {
    opacity: 0
}

.premium-image-scroll-container:hover .premium-image-scroll-content {
    opacity: 0;
    visibility: hidden
}

.premium-image-scroll-content .premium-image-scroll-icon {
    display: inline-block;
    font-family: pa-elements!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

.pa-horizontal-mouse-scroll:before {
    content: "\e901"
}

.pa-vertical-mouse-scroll:before {
    content: "\e93c"
}

.pa-horizontal-mouse-scroll {
    -webkit-animation-name: pa-scroll-horizontal;
    animation-name: pa-scroll-horizontal
}

.pa-vertical-mouse-scroll {
    -webkit-animation-name: pa-scroll-vertical;
    animation-name: pa-scroll-vertical
}

@-webkit-keyframes pa-scroll-vertical {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px)
    }
}

@keyframes pa-scroll-vertical {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px)
    }
}

@-webkit-keyframes pa-scroll-horizontal {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px)
    }
}

@keyframes pa-scroll-horizontal {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px)
    }
}
#portfoliosection {
    background: #ffffff;
    height: auto;
}

#porfoliowarp {
    padding-top: 50px;
    position: relative;
    padding-left: 0;
    padding-right: 0;
    z-index: 1;
}

.grid-gutter-md {
    margin-left: -8px;
    margin-right: -8px;
}

.porfoliowarp__item {
    cursor: pointer;
    margin: 0;
    position: relative;
    float: right;
    padding: 10px;
    width: 33.3333%;
    border-radius: 5px;
    overflow: hidden;
}

.porfoliowarp__content {
    border-radius: 5px;
    height: 350px;
    width: 100%;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.porfoliowarp__item:hover .porfoliowarp__content {
    background-color: #ddaa01;
    opacity: .5;
}

.porfoliowarp__portolink i {
    position: absolute;
    z-index: 1;
    color: #181715;
    opacity: 0;
    font-size: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all .3s;
}

.porfoliowarp__item:hover i {
    opacity: 1;
}

#filterwrap {
    padding: 0;
    margin: 30px 0;
}

#filterwrap li {
    display: inline-block;
    list-style: none;
    margin: 0 5px;
    padding: 5px 20px;
    cursor: pointer;
    border: 1px solid #181715;
}

#filterwrap li.active {
    background: #181715;
    color: #ffffff;
}
/*
* ----------------------------------------------------------------------------------------
* 07.CONTACT SECTION. 
* ----------------------------------------------------------------------------------------
*/

#contactsection {
    height: auto;
    background: #CA9F6E;
    padding: 0 0 50px;
}

.contactdetail__title {
    font-size: 30px;
    font-weight: 600;
}

.contactdetail__list {
    padding: 0;
}

.contactdetail__list li {
    list-style: none;
    position: relative;
    margin: 20px 0;
}

.contactdetail__span {
    font-weight: 600;
}

.contactdetail__sosmed {
    padding: 0;
}

.contactdetail__sosmed li:first-child {
    margin: 10px 10px 0 0;
}

.contactdetail__sosmed li {
    list-style: none;
    margin: 10px 10px 10px;
    display: inline-block;
}

.contactdetail__sosmed li a {
    color: #181715;
    font-size: 30px;
}
/*
* ----------------------------------------------------------------------------------------
* 08.FOOTER SECTION. 
* ----------------------------------------------------------------------------------------
*/

.footwrap p {
    font-size: 13px;
    letter-spacing: 1px;
}

.dropdown-menu {
    background-color: #c9975d;
}

@media (max-width: 767px) {
    .headerwrap__logo img{width: 119px;margin-top: 10px;}
    .premium-image-scroll-container {
        width: 100%;
        margin-top: 60px;
    }
    .heading-title {
        color: #FFFFFF;
        font-size: 20px;
        padding: 0 15px;
    }
    .font-verso {
        text-align: center;
        font-family: "Lexend", Sans-serif;
        color: #fff;
        font-weight: 200;
        font-size: 17px;
        font-style: italic;
    }
    .font-verso-autor {
        text-align: center;
        font-family: "Lexend", Sans-serif;
        color: #fff;
        font-weight: 200;
        font-size: 17px;
    }

    .contactdetail__title {
        margin-top: 60px;
    }
    
}