/*
 Theme Name:     youfydotco
 Theme URI:      https://youfy.co/
 Description:    Creative Digital Entreprenuer
 Author:         Youfy Rizqy fawzy
 Author URI:     https://www.youfy.co/
 Template:       Divi
 Version:        1.0
*/

/* Theme customization starts here
------------------------------------------------------- */
/* Hide footer */

#main-footer {
  height: 0 !important;
  overflow: hidden;
  display: none!important;
}

/* wooCTA sticky */
@media only screen and (min-width: 980px) {
  #page-container {
    overflow-y:visible !important; }
/* wooCTA sticky */
  .sticky-cta {
    position: sticky !important;
    top: calc(1vh - 1px) !important;
    z-index: 999;
    max-width: 450px;
  }
}
  /* wooCTA sticky ends */

/* Show/hide the popup overlay wrapper when "is-visible" class changes, apply the CSS to frontend only */
body:not(.et-fb) .dl-popup-wrapper {
  position:fixed;
  z-index:990;
  top:0;
  right:0;
  bottom:0;
  left:0;
  transition: all .5s cubic-bezier(.14,.06,.41,1.39);
  opacity:0;
  visibility:hidden;
}
body:not(.et-fb) .dl-popup-wrapper.popup-is-visible {
  opacity:1;
  visibility:visible;
}


/* Allow the content inside the popup wrapper to scroll */
.dl-popup-inside {
  height:100%;
  overflow-y: scroll;
}


/* Prevent Body from Scrolling when Popup is visible */
body.dl-noscroll {
  overflow: hidden;
}

/* Center Align Popup Content inside the Section */
.dl-popup-content {
  display:flex;
  flex-direction:column;
  justify-content: center;
}
.dl-popup-content .et_pb_row {
  margin-top:0;
  margin-bottom:0;
}


/* Adjust the position of the popup overlay for admin bar */
@media (min-width:600px) and (max-width:782px) {
  body:not(.et-fb).admin-bar .dl-popup-wrapper {
    top:46px;
  }
}
@media (min-width:783px) {
  body:not(.et-fb).admin-bar .dl-popup-wrapper {
    top:32px;
  }
}

/* Mave the popup on top of other elements */
.et_builder_inner_content.popup-is-visible {
  z-index:99999;
}

/* Add a hand cursor to the close trigger element */
.dl-popup-close {
  cursor:pointer;
}

/* Add Row animation when popup is triggered */
.dl-popup-wrapper.popup-is-visible .et_pb_row:not(.dl-popup-close) {animation:scale-in .5s cubic-bezier(.14,.06,.41,1.39) both; animation-delay: .5s; }
@keyframes scale-in{0%{transform:scale(0.3);opacity:0}100%{transform:scale(1);opacity:1}}


ul.flex-direction-nav {
    position: absolute;
    top: 30%;
    z-index: 99999;
    width: 100%;
    left: 0;
    margin: 0;
    padding: 0px;
    list-style: none;}

@media all and (max-width: 767px) {
    ul.flex-direction-nav {
        top: 50%;
    }
}

li.flex-nav-prev {float: left;}
li.flex-nav-next {float: right;}
a.flex-next {visibility:hidden;}
a.flex-prev {visibility:hidden;}

a.flex-next::after {
	visibility:visible;content: '\f054';
	font-family: 'Font Awesome 5 Free';
	margin-right: 10px;
	font-size: 50px;
	font-weight: bold;
}

a.flex-prev::before {
    visibility:visible;
    content: '\f053';
	font-family: 'Font Awesome 5 Free';
	margin-left: 10px;
	font-size: 50px;
	font-weight: bold;
}

ul.flex-direction-nav li a {
	color: #ccc;
}

ul.flex-direction-nav li a:hover {
	text-decoration: none;
}

ul.flex-direction-nav li a {
	color: #ccc;
}

ul.flex-direction-nav li a:hover {
	text-decoration: none;
}


/*place button modules next to each other in the same column*/
.pa-inline-buttons .et_pb_button_module_wrapper {
    display: inline-block;
}

.learnmore-modal {
  border: none;
  background: none;
  text-decoration: underline;
  text-align: left;
  color: black;
}

.learnmore-modal:hover {
  background-color: black;
  text-decoration: underline;
  text-align: left;
  color:white;
}

.joinchat__woo-btn__wrapper {
    clear: both;
    display: inline-flex;
    margin-left: 5px;
}

.bukachat{
    margin: 0px!important;
}

/*show desktop menu on phone*/

@media (max-width: 980px) {
	.no-hamburger-mobile .et_pb_menu__menu {
		display: flex!important;
	}
	.no-hamburger-mobile .et_mobile_nav_menu {
		display: none!important;
	}
}

/* Running white on section*/

ul#menu-product-nav .mPS2id-highlight {
  border-bottom: 3px solid #ffffff;
  padding: 5px 5px;
  font-weight: 700;
}

/* Pnav sticky */
    @media all and (max-width: 767px) {
        .pnavsticky {
        position: sticky!important;
        top: calc(0vh - 1px) !important;
        z-index: 999
        }
    }
        /* PNav sticky ends */



/*place button modules next to each other in the same column*/
.pa-inline-buttons .et_pb_button_module_wrapper {
    display: inline-block;
}

.tanya_openjc {
    margin-left: 0.5em!important;
    box-shadow: none;
    height: auto!important;
    padding: 1em;
    background-color: #25D366;
    color: #ffffff;
    font-weight: 700;
    border: none;
    border-radius: 25px;
}

.tanya_openjc:hover {
    background-color: #000;
}

.tanya_openjc:before {
  font-family: 'Font Awesome 5 brands';
  content: "\f232";
  font-size: 19px;
  color: white;
  padding: 5px;
}

.row95 {
    width: 95%;
}

/* 2 Columns Mobile */
@media all and (max-width: 767px) {
    html .two-col-mob .et_pb_column {
        width:47.25% !important;
    }

html .two-col-mob .et_pb_column:nth-last-child(-n+2) {
        margin-bottom:0;
    }
    html .two-col-mob .et_pb_column:not(:nth-child(2n)) {
            margin-right:5.5% !important;
    }
}
/* 3 Columns Mobile */
@media all and (max-width: 767px) {
    html .three-col-mob .et_pb_column {
        width:29.6667% !important;
    }
    html .three-col-mob .et_pb_column:nth-last-child(-n+3) {
        margin-bottom:0;
    }
    html .three-col-mob .et_pb_column:not(:nth-child(3n)) {
        margin-right:5.5% !important;
    }
}
/* 4 Columns Mobile */
@media all and (max-width: 767px) {
    html .four-col-mob .et_pb_column {
        width:20.875% !important;
    }
html .four-col-mob .et_pb_column:nth-last-child(-n+4) {
        margin-bottom:0;
    }
    html .four-col-mob .et_pb_column:not(:nth-child(4n)) {
        margin-right:5.5% !important;
    }
}
/* 5 Columns Mobile */
@media all and (max-width: 767px) {
    html .five-col-mob .et_pb_column {
        width:15.6% !important;
    }
    html .five-col-mob .et_pb_column:nth-last-child(-n+5) {
        margin-bottom:0;
    }
    html .five-col-mob .et_pb_column:not(:nth-child(5n)) {
        margin-right:5.5% !important;
    }
}
/* 6 Columns Mobile */
@media all and (max-width: 767px) {
    html .six-col-mob .et_pb_column {
        width:12.083% !important;
    }
    html .six-col-mob .et_pb_column:nth-last-child(-n+6) {
        margin-bottom:0;
    }
    html .six-col-mob .et_pb_column:not(:nth-child(6n)) {
        margin-right:5.5% !important;
    }
}
/*** Change Tablet Columns By DiviMundo.com ***/
/* 1 Column Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
    html .one-col-tab .et_pb_column {
        margin-right:0 !important;
        width:100% !important;
    }

        html .one-col-tab .et_pb_column:not(:last-child) {
        margin-bottom:30px !important;
    }
}
/* 2 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
    html .two-col-tab .et_pb_column {
        width:47.25% !important;
    }
.two-col-tab .et_pb_column:nth-last-child(-n+2) {
        margin-bottom:0;
    }
    html .two-col-tab .et_pb_column:not(:nth-child(2n)) {
        margin-right:5.5% !important;
    }
}
/* 3 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
    html .three-col-tab .et_pb_column {
        width:29.6667% !important;
    }
html .three-col-tab .et_pb_column:nth-last-child(-n+3) {
        margin-bottom:0;
    }
    html .three-col-tab .et_pb_column:not(:nth-child(3n)) {
        margin-right:5.5% !important;
    }
}
/* 4 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
    html .four-col-tab .et_pb_column {
        width:20.875% !important;
    }
html .four-col-tab .et_pb_column:nth-last-child(-n+4) {
        margin-bottom:0;
    }
    html .four-col-tab .et_pb_column:not(:nth-child(4n)) {
        margin-right:5.5% !important;
    }
}
/* 5 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
    html .five-col-tab .et_pb_column {
        width:15.6% !important;
    }
.five-col-mob .et_pb_column:nth-last-child(-n+5) {
        margin-bottom:0;
    }

    html .five-col-tab .et_pb_column:not(:nth-child(5n)) {
        margin-right:5.5% !important;
    }
}
/* 6 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
    html .six-col-tab .et_pb_column {
        width:12.083% !important;
    }
    html .six-col-tab .et_pb_column:nth-last-child(-n+6) {
        margin-bottom:0;
    }
    html .six-col-tab .et_pb_column:not(:nth-child(6n)) {
        margin-right:5.5% !important;
    }
}


/*  Verified Secure Payment */
.PG-Verified {
  display: flex;
  flex-wrap: wrap;
}

.img-verified {
  flex: 1;
  padding: 0.5em;
  margin: 0.5em;
}

.inc-img {
  width: 100%;
}

/*------menu-cta----*/
.wa-konsultasi {
    border: 2px solid #F7DBF0;
    background-color: #F7DBF0;
    border-radius: 25px;
    text-align: center;
    margin: 50px!important;
    box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.3);
    height: 50px;
}

.wa-konsultasi a {
    color: #333366;
    padding: 10px!important;
}

.wa-konsultasi a:before {
	font-family: 'Font Awesome 5 Brands';
	content: "\f3e8";
    font-size: 19px;
    color: #333366;
	float:left;
	padding-right:10px;
}

.wa-konsultasi:hover {
	background-color: #CDF0EA;
	border: 2px solid #CDF0EA;
}

@media all and (max-width: 767px) {
    .wa-konsultasi {
	height: 50px!important;
	width: 150px!important;
	margin: 0px!important;
  }
    }


.et_header_style_left #et-top-navigation {
    padding-top: 17px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
    padding-top: 7px;
}

#top-menu li a {
    color: #666 !important;
}

.et-cart-info { display:none !important; }

/*  Midnight Setting */

.midnightHeader.white .square {
	fill: #ffffff;
}

.midnightHeader.white .yletter {
	fill: #000000;
}

.midnightHeader.white .design-web {
	fill: #000000;
}

  .midnightHeader.white {
  background: rgba(0, 0, 0, 0.3);
}

/* enable class below once you're done editing the menu */
 

.fullwidth-menu {
opacity: 0;
top: 0vh;
visibility: hidden;
}
 
.line{
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
 
.fullwidth-open.open .line{
background: white; 
}
 
.line-1 {
top: 15px;    
}
   
.line-2 {
top: 25px;
width: 80%;
}
  
.line-3 {
top: 35px;
width: 50%;
}
  
.fullwidth-open.open .line-1 {
top: 25px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
  
.fullwidth-open.open .line-2 {
display: none;
}
  
.fullwidth-open.open .line-3 {
top: 25px;
width: 100%;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
  
.fullwidth-menu-open {
opacity: 1 !important;
top: 0 !important;
visibility: visible !important;
z-index: 99;
}
  
.fullwidth-menu {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}
   
.main-menu-item ul {
display: none; 
padding: 0;
margin-top: 50px;
}
   
.toggle-sub-menu {
cursor: pointer;
}