/*
 Theme Name:   Darna Child Theme
 Theme URI:    http://themes.g5plus.net/darna
 Description:  Darna Child Theme
 Author:       G5plus
 Author URI:   http://g5plus.net
 Template:     darna
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags: 				two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: 		g5plus-framework
*/


/************************************************************************************
Put your custom CSS below this block :)
*************************************************************************************/
/*---------------------------- base css ------------------------------*/
table {
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

table tr td {
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 0 10px;
}

.margin-bottom-70 {
    margin-bottom: 70px;
}

.margin-top-70 {
    margin-top: 70px;
}

.darna-heading h2,
.darna-icon-box.style3 h3 a ,
.wp-block-group__inner-container > h2, .widgettitle, h4.widget-title {
    line-height: 1.4;
}

.page-title-wrap-bg ul.breadcrumbs li a.home {
    color: #fff;
}

.page-title-inner h1 {
    font-size: 50px;
}

.language {
    opacity: 0;
    line-height: 3;
}

.language ul {
    list-style: none;
    margin: auto;
    display: flex;
}

.top-bar .top-bar-right {
    display: flex;
    justify-content: end;
}

/*------------------------------ banner heading --------------------*/
.page-title-wrap {
    margin-bottom: 70px;
}

/*------------------------ product ----------------------------------*/
.product-listing.woocommerce .product-item-wrap.active .added_to_cart.wc-forward, .product-listing.woocommerce .product-item-wrap:hover .added_to_cart.wc-forward, .product-listing.woocommerce .product-item-wrap.active .product_type_external, .product-listing.woocommerce .product-item-wrap:hover .product_type_external, .product-listing.woocommerce .product-item-wrap.active .product_type_grouped, .product-listing.woocommerce .product-item-wrap:hover .product_type_grouped, .product-listing.woocommerce .product-item-wrap.active .product_type_simple, .product-listing.woocommerce .product-item-wrap:hover .product_type_simple, .product-listing.woocommerce .product-item-wrap.active .product_type_variable, .product-listing.woocommerce .product-item-wrap:hover .product_type_variable {
    transform: translateY(-10px);
}

/* --------------------------- Blog ---------------------------------- */
.blog .site-content-archive-inner .blog-inner {
	 animation: fadeInUp 1.2s ease-out forwards;
} 

/*---------------------------- project ----------------------------*/
.portfolio .portfolio-tabs ul.cat-style-normal:before,
.portfolio .portfolio-tabs ul.cat-style-normal:after {
    color: #e6272a;
}

.portfolio-wrapper .portfolio-item .entry-thumbnail .entry-thumbnail-hover .entry-hover-wrapper .entry-hover-inner div.title:hover {
    color: #e6272a;
}

.portfolio.style_2 .portfolio-tabs ul li > a.active,
.portfolio.style_2 .portfolio-tabs ul li > a:hover {
    color: #e6272a;
}

.portfolio-related-wrap {
    padding-top: 70px;
    padding-bottom: 70px;
}
/*------------------------- Home ------------------------------*/
.darna-process.style1 h3,
.darna-process.style1 h3 i,
.darna-process.style1 p {
    color: #000;
}

.bg-process {
    background: url(https://khoiminh.123websitedev.com/wp-content/uploads/2015/07/blog-06.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.heading-service h2 {
    font-size: 35px;
    line-height: 1.4;
}

.footer-logo .sub-description {
    text-align: justify;
}

.darna-post .darna-post-content > a {
    line-height: 1.3;
}

/*-------------------------------- about ----------------------------*/
.about {
    display: flex;
    align-items: center;
}

.darna-counter span {
    color: #e6272a;
}

.darna-counter {
    padding: 70px 0 70px;
}

/*------------------------------- Single post --------------------------*/
.entry-comments {
    margin-bottom: 60px;
}

/*------------------------------ Portfolio -----------------------------*/
.home .portfolio-wrapper figure div.title {
    width: 230px;
}

.portfolio-wrapper figure .fig-title .ico-view-detail i, .portfolio-wrapper figure .fig-title .ico-view-gallery i {
    line-height: 3;
}

.single.single-portfolio .post-slideshow .item img {
    aspect-ratio: 19 / 6;
    object-fit: cover;
}

.portfolio-wrapper .portfolio-item .entry-thumbnail .entry-thumbnail-hover .entry-hover-wrapper .entry-hover-inner a.view-gallery {
    color: #fff;
}

/*---------------------------- Footer ---------------------------------*/
footer.main-footer-wrapper .footer-logo .sub-description {
    padding-top: 10px;
}

.site-content-archive {
    margin-bottom: 0px;
}

footer.main-footer-wrapper {
    padding-top: 18px;
}

#fluentform_3 .ff-el-input--content input {
    background-color: rgba(255, 255, 255, 0.1);
    border: 0;
    border-radius: 0;
}

#fluentform_3 .frm-fluent-form .ff-t-cell:first-of-type {
    flex-basis: 100% !important;
}

#fluentform_3 .frm-fluent-form .ff-t-cell:last-of-type {
   flex-grow: 0;
    position: absolute;
    background: transparent;
    bottom: 0;
    right: 0;
    width: 0;
    opacity: 1;
}

#fluentform_3 .fluentform.ff-default {
    position: relative;
}

#fluentform_3 .ff-btn.ff-btn-submit::before {
    position: absolute;
    content: "\f1d8";
    font-family: FontAwesome;
    bottom: 51px;
    right: -215px;
}

#fluentform_3 .frm-fluent-form  .ff-btn.ff-btn-submit:hover {
    background-color: transparent;
    border: 0;
}

#fluentform_3 .frm-fluent-form .ff-btn.ff-btn-submit:focus {
    border: 0;
}

#fluentform_3 .ff-el-input--content input:focus {
    background-color: rgba(255, 255, 255, 0.1);
}

#fluentform_3 .wpf_has_custom_css.ff-btn-submit:hover {
    background-color: transparent;
    border: none;
    outline: none;
}

/*------------------------------ Animation web ----------------------*/
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate__fadeInUp {
    animation: fadeInUp 1.2s ease-out forwards;
}

.delay-30s { animation-delay: 30s; }

.delay-60s { animation-delay: 60s; }

.delay-120s { animation-delay: 120s; }
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-40px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate__fadeInLeft {
    animation: fadeInLeft 1.2s ease-out forwards;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(40px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate__fadeInRight {
    animation: fadeInRight 1.2s ease-out forwards;
}
/*----------------------- Responsive Tablet -------------------------*/
@media (min-width: 820px) and (max-width: 900px) {
    .x-nav-menu li.x-menu-item > a.x-menu-a-text,
    .portfolio.style_2 .portfolio-tabs ul li > a.active,
    .portfolio.style_2 .portfolio-tabs ul li > a:hover {
        color: #e6272a;
    }
}
/*--------------------------- Responsive Laptop -----------------*/
@media (min-width: 1200px) and (max-width: 1440px) {
    .portfolio-wrapper figure .fig-title .ico-view-detail i, .portfolio-wrapper figure .fig-title .ico-view-gallery i {
        line-height: 4;
        vertical-align: middle;
    }

    .home .portfolio-wrapper figure div.title {
        width: 200px;
    }
}

/*-------------------- Responsive Mobile ----------*/
@media (max-width: 767px) {
    .page-title-inner h1 {
        font-size: 21px;
    }

    .about {
        flex-wrap: wrap;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        font-size: 12px;
    }

    .x-nav-menu li.x-menu-item > a.x-menu-a-text,
    .portfolio.style_2 .portfolio-tabs ul li > a.active,
    .portfolio.style_2 .portfolio-tabs ul li > a:hover {
        color: #e6272a;
    }

    .darna-icon-box.style4 .ibox-icon i {
        line-height: 80px;
    }

    .darna-icon-box.style4 .ibox-icon {
        width: 80px;
        height: 80px;
    }

    .darna-counter span,
    .related.products h4.widget-title {
        font-size: 35px;
    }

    #fluentform_3 .ff-el-input--content input {
        width: 75%;
    }

    .darna-icon-box.style4 p {
        white-space: nowrap;
    }

    .portfolio-related-wrap {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .darna-heading h2,
    .heading-wrap .heading {
        font-size: 30px;
        line-height: 1.4em;
    }

    .section {
        margin-bottom: 30px !important;
    }

    .section-02 {
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }

    .box-service .owl-carousel .owl-item {
        float: none;
        width: 50% !important;
    }
}