/*
Theme Name: Porto Child
Template: porto
Version: 1.0
Must do: 1. comment h1-h6 in theme.css
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/


/* variable */


/*Bootstrap compatiable */

.text-left {text-align: left;}
.text-right {text-align: right;}
.text-tertiary {color: var(--porto-tertiary-color);}
.text-quaternary {color: var(--porto-quaternary-color);}
.bg-tertiary {background-color: var(--porto-tertiary-color);}
.bg-quaternary {background-color: var(--porto-quaternary-color);}

@media (min-width: 1600px) {
	.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
		max-width: 70%;
	}
}

@media (min-width: 1200px) {
	.display-1 {
		font-size: 10rem;
		text-shadow: 0 0 2px var(--bs-gray);
	}
}

@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 4.0rem;
  }
  h2, .h2 {
    font-size: 3.0rem;
  }	
  h3, .h3 {
    font-size: 2.0rem;
  }
  h4, .h4 {
    font-size: 1.55rem;
  }	
}

.top-5 {
    top: 5% !important
}
.top-10 {
    top: 10% !important
}
.top-20 {
    top: 20% !important
}
.top-30 {
    top: 30% !important
}
.top-40 {
    top: 40% !important
}
.bottom-10 {
    bottom: 10% !important
}
.bottom-20 {
    bottom: 20% !important
}
.bottom-30 {
    bottom: 30% !important
}
.bottom-40 {
    bottom: 40% !important
}
.start-5 {
    left: 5% !important
}
.start-10 {
    left: 10% !important
}
.start-20 {
    left: 20% !important
}
.start-30 {
    left: 30% !important
}
.start-40 {
    left: 40% !important
}
.end-5 {
    right: 5% !important
}
.end-10 {
    right: 10% !important
}
.end-20 {
    right: 20% !important
}
.end-30 {
    right: 30% !important
}
.end-40 {
    right: 40% !important
}
.end-60 {
    right: 60% !important
}

@media (min-width: 992px) {
    .top-md-5 {
    	top: 5% !important
    }
    .top-md-10 {
        top: 10% !important
    }
    .top-md-20 {
        top: 20% !important
    }
    .top-md-30 {
        top: 30% !important
    }
    .top-md-40 {
        top: 40% !important
    }
	    .top-md-50 {
        top: 50% !important
    }
    .bottom-md-10 {
        bottom: 10% !important
    }
    .bottom-md-20 {
        bottom: 20% !important
    }
    .bottom-md-30 {
        bottom: 30% !important
    }
    .bottom-md-40 {
        bottom: 40% !important
    }
	.bottom-md-50 {
        bottom: 50% !important
    }
    .start-md-5 {
        left: 5% !important
    }
    .start-md-10 {
        left: 10% !important
    }
    .start-md-20 {
        left: 20% !important
    }
    .start-md-30 {
        left: 30% !important
    }
    .start-md-40 {
        left: 40% !important
    }
    .start-md-50 {
        left: 50% !important
    }	
    .end-md-5 {
        right: 5% !important
    }
    .end-md-10 {
        right: 10% !important
    }
    .end-md-20 {
        right: 20% !important
    }
    .end-md-30 {
        right: 30% !important
    }
    .end-md-40 {
        right: 40% !important
    }
    .end-md-50 {
        right: 50% !important
    }	
    .end-md-60 {
        right: 60% !important
    }
	.text-md-white {
		color: white !important;
	}
	.text-md-dark {
		color: black !important;
	}
}
.op-0 img {
	object-position: 0;
}
.op-15 img {
	object-position: 15%;
}
.op-25 img {
	object-position: 25%;
}
.op-35 img {
	object-position: 35%;
}
.op-45 img {
	object-position: 45%;
}
.op-55 img {
	object-position: 55%;
}
.op-65 img {
	object-position: 65%;
}
.op-75 img {
	object-position: 75%;
}
.bg-op4 {
	background-color: rgba(0,0,0,.4)
}
.bg-op6 {
	background-color: rgba(0,0,0,.6)
}
.bg-op8 {
	background-color: rgba(0,0,0,.8)
}

.bs-gutter-x025 {
	--bs-gutter-x: 0.25rem;
}

/* aos animation */
[data-aos] {
  visibility: hidden;
}
[data-aos].animated {
  visibility: visible;
}

/* header */
#header .header-main .header-center {padding: 0 15px !important;flex: 2;justify-content: flex-start;}
.fixed-header #header .header-top {background-color: rgba(0,0,0,1);}

@media screen and (max-width: 991px) {
	#header .header-main .header-center {justify-content: flex-end;}
	
	.footer-main .container .row > div:nth-child(2), .footer-main .container .row > div:nth-child(3)  {width: 50%;}
}

/* footer */
.footer .widget > div > ul, .footer .widget > ul, .footer .widget > div > ul li, .footer .widget > ul li, .footer .post-item-small {
	border-color: transparent !important;
}
#footer .footer-main>.container {padding-bottom: 0 !important;}
#footer .footer-bottom .logo {display: none;}
@media (max-width: 991px) {
	.footer-main .row > div:nth-child(1) {
		flex-basis: 100%;
	}
}
.widget_block .branding {display: flex; align-items: center;}
.branding .b-logo, .branding .caption {flex:0 0 auto;}
aside#block-21 {width: 100% !important;}
.footer-main .row > div:last-child {display: flex; flex-flow: column; align-items: center;}


/* mega menu */
#menu-skey {
	position: static;
}
.mega-menu li.menu-item>a>.thumb-info-preview, .sidebar-menu li.menu-item>a>.thumb-info-preview {
	padding-left: 0;
}

.mega-menu li.menu-item>a>.thumb-info-preview .thumb-info-image, .sidebar-menu li.menu-item>a>.thumb-info-preview .thumb-info-image {
	width: 300px;
	height: 200px;
}
.wpmm-vertical-tabs {justify-content: center;}
.wpmm-vertical-tabs-content {width: 60% !important;}
.wpmm-vertical-tabs-nav .wpmm-tab-btns li > a {padding-left: 0px !important;}
.wpmm-grid-post-img {height: auto !important; aspect-ratio: 1/1;}
.wpmm-grid-post-content .grid-post-title {margin: 0px;}
.wpmm-tab-pane .wpmm-grid-post {padding: 1px;}
#wp-megamenu-main_menu {flex: 1;}
.wpmm_mobile_menu_btn, .wpmm_mobile_menu_btn:hover {
		background-color: var(--bs-white);
	}
	.wp-megamenu-wrap.wpmm-mobile-menu .wpmm-nav-wrap .wp-megamenu {padding: 10px 0;}
@media (min-width: 992px) {
	.wpmm-nav-wrap.wpmm-main-wrap-main_menu {display: flex; justify-content: space-between;}	
}
@media(min-width: 1921px) {
	.header-row.container {max-width: 80%;}
	#wp-megamenu-main_menu>.wpmm-nav-wrap ul.wp-megamenu>li>a {padding-left: 2.5rem;padding-right: 2.5rem;}
}

/* custom tab */
#products-products .nav-tabs {justify-content: space-around;padding-top: 3rem;padding-bottom: 3rem; flex-wrap: nowrap; border-bottom: none;}
#products-products .nav-tabs li.nav-item.active {border: 3px solid var(--bs-gray);}
#products-products .nav-tabs li.nav-item {border: 1px solid var(--bs-gray);border-radius: 500px;flex: 0 20%;}
#products-products .nav-tabs .nav-link {border: none; color: var(--bs-gray);background-color: unset;}
#products-products .nav-item.active .nav-link {background-color: unset;  color: black;}
#products-products .tab-content {border: none;}
#products-products div.product-image {background-color: var(--porto-gray-5);}
#products-products div.product-image img { transition: transform 0.5s linear;}
#products-products div.product-image:hover img {transform: scale(1.15, 1.15);}

/* home masonry */
.masonry {align-items: flex-end;justify-content: center;flex-wrap: wrap;}
.masonry-left {flex: 2 2 60%;flex-direction: column;}
.masonry-right {flex: 1 1 30%;}
.masonry-expo,.masonry-renews {flex: 0 0 100%;}
.masonry-renews {flex-direction: row;}
.masonry-review, .masonry-news {flex: 0 0 50%;}

.col .card-row {flex-flow: row wrap; border-radius: 2rem;}
.card-img img, .card-img .thumb-info-wrapper {border-radius: 2rem 2rem 0 0;}
.upper .card > .card-body {flex: 1 1 40%;}
.upper .card > .card-img {flex: 1 1 60%;}

.lower .card-body {flex: 0 0 auto;}
.footer-top {border-bottom: 1px solid var(--bs-gray);}

.card-detail {display:flex; align-items:center;}
.card-detail .card-img, .card-detail .card-body {flex: 0 0 50%;}
.card-detail .card-img img {border-radius: 0;}

.porto-sicon-header a {color: var(--bs-dark);}


/* chat window */
.xhl-launch-button, #xhl-container {z-index: 1001 !important;}

/* modificaton to theme */
.wpb_content_element {margin-bottom: 0 !important;}
.owl-carousel {margin-bottom: 0;}
.wpb_single_image .vc_single_image-wrapper, .wpb_single_image img.attachment-full {
    width: 100%;
}
.porto-ibanner {margin-bottom: 0 !important;}
.product-image img {transition: transform 0.3s ease-in-out; }
.product-image img:hover {transform: scale(1.2) !important;}
li.product:nth-child(even) .product-image .inner:after {display: none;}

.flex-inner-row .vc_column-inner {
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	align-content: space-between;
	justify-content: space-evenly;
	height: 100%;
}
.flex-inner-row .vc_column-inner::after, .flex-inner-row .vc_column-inner::before {
	display: none;
} 
.porto-ibanner .porto-ibanner-title, .porto-ibanner p {
	letter-spacing: var(--porto-body-ls);
}
.gradient-text {
    background: linear-gradient(to right, green, pink, yellow, purple, cyan);
    background-clip: text;
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}
.stats-block .stats-number, div.stats-desc > div.counter_prefix, div.stats-desc > div.counter_suffix {
	font-size: 3rem;
}
.stats-block .stats-text {
	font-size: 1.2rem;
}
.stats-number, .counter_suffix {
    background: linear-gradient(to right, green, cyan);
    background-clip: text;
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}

@media (max-width: 991px) {
  .porto-ibanner-layer {
    font-size: 1rem;
  }
}
@media (max-width: 767px) {
  .porto-ibanner-layer {
    font-size: 1rem;
  }
}
@media (max-width: 575px) {
  .porto-ibanner-layer {
    font-size: 1rem;
  }
}

/* root */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
		color: var(--porto-heading-color);
		--porto-heading-color: var(--porto-body-color);
		--porto-h1-lh: var(--porto-body-lh);
		--porto-h2-lh: var(--porto-body-lh);
		--porto-h3-lh: var(--porto-body-lh);
		--porto-h4-lh: var(--porto-body-lh);
		--porto-h5-lh: var(--porto-body-lh);
		--porto-h6-lh: var(--porto-body-lh);
		
		--porto-h1-ls: var(--porto-body-ls);
		--porto-h2-ls: var(--porto-body-ls);
		--porto-h3-ls: var(--porto-body-ls);
		--porto-h4-ls: var(--porto-body-ls);
		--porto-h5-ls: var(--porto-body-ls);
		--porto-h6-ls: var(--porto-body-ls);
	    --porto-body-lh: 1.2;
	}