/*!
Theme Name: Mer Photography
Theme URI: http://underscores.me/
Author: Nguyen Pham
Author URI: https://nguyenpham.work
Description: Vietnam Wedding Photography Theme by Nguyen Pham
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: merphoto
Tags: wedding, photography, portfolio, merphotography

*/

:root {
	--title-font: 'Canela', serif;
	--label-font: 'Aktiv-Grotesk', sans-serif;
	--link-font: 'Raleway', sans-serif;
	--content-font: 'Raleway', sans-serif;
	--text-color: #464646;
	--back-color: #FAFAF8;
	--footer-color: #B0A69A;
	--pastel-color-01: #EEE5D5;
	--pastel-color-02: #BD9E7F;
	--gray-color-01: #D9D9D9;
	--gray-color-02: #ababab;
	--text-light-color: #bababa;
	--text-color-02: #6d6d6d;
}

/* =============== 01 - GLOBAL CSS =============== */
body {
	font-family: var(--content-font);
	font-size: 16px;
	color: var(--text-color);
	position: relative;
}

main {
	display: block;
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

p {
	line-height: 1.5;
	margin-bottom: 15px;
}

pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

a {
	text-decoration: none;
	color: var(--text-color);
}

b,
strong {
	font-weight: 600;
}

code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

.title-font {
	font-family: var(--title-font);
	font-weight: 300;
}

.light {
	font-weight: 300;
}

.bold {
	font-weight: 600;
}

img {
	max-width: 100%;
}

.container {
	max-width: 1170px;
	margin: 0 auto;
}

.mb-10 {
	margin-bottom: 10px;
}

.btn {
	display: inline-block;
	padding: 15px 40px;
	font-size: 12px;
	background: var(--pastel-color-01);
	font-family: var(--labell-font);
	cursor: pointer;
}

.flex {
	display: flex;
    justify-content: space-between;
    align-items: center;
	flex-wrap: wrap;
}

.flex-start {
	align-items: flex-start;
}

.upper {
	text-transform: uppercase;
}

.text-center {
	text-align: center;
}

.back {
	background-color: var(--back-color);
}

.lazyload,
.lazyloading {
	opacity: 0;
}
.lazyloaded {
	opacity: 1;
	transition: opacity 300ms;
}

.box-vertical, .box-wide, .box-square, .box-insta, .box {
    position: relative;
    height: 0;
	overflow: hidden;
}

.box-vertical {
	padding-bottom: 150%;
}

.box-insta {
	padding-bottom: 125%;
}

.box-wide {
    padding-bottom: 66.66%;
}

.box-square {
    padding-bottom: 100%;
}

.box-vertical > img, .box-wide > img, .box-square > img, .box > img, .box-insta > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
	transition: all 0.5s;
}

.grid-item {
    width: calc(33.33% - 10px);
    padding-bottom: 10px;
}

.mobile {
	display: none;
}

.desktop {
	display: block;
}

.page-title {
	font-size: 30px;
	font-family: var(--title-font);
	font-weight: 300;
}

.only-desktop {
	display: block;
}

.mw-770 {
	max-width: 770px;
}

.mw-570 {
	max-width: 570px;
}

.box-color {
	background: #EFEFEF;
}

.page404 {
	text-align: center;
	padding: 80px 30px;
}

.page404 h1 {
	font-size: 28px;
    text-transform: uppercase;
    padding-bottom: 10px;
}

.page404 p {
	font-size: 14px;
}

@media screen and (max-width: 1024px) {
	p {
		font-size: 15px;
	}

	.container {
		padding-left: 30px;
		padding-right: 30px;
	}

	.page-title {
		font-size: 24px;
	}

	.only-desktop {
		display: none;
	}
}

@media screen and (max-width: 767.98px) {
	.container, .layout-photo {
		padding-left: 20px;
		padding-right: 20px;
	}

	.page-title {
		line-height: 120%;
		font-size: 22px;
	}

	.mobile {
		display: block;
	}

	.desktop {
		display: none;
	}
    .grid-item {
        width: calc(50% - 5px);
        padding-bottom: 10px;
    }

	.btn {
		padding: 10px 28px;
		font-size: 10px;
	}
}


/* =============== 02 - HEADER CSS =============== */
header .container {
	height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.logo {
	height: 32px;
}

.header__toggle {
    position: absolute;
    right: 0;
    display: none;
}

.header__menu-item:first-child {
    display: none;
}

.header__menu-item {
    display: inline-block;
	font-family: var(--label-font);
	font-size: 12px;
	font-weight: 300;
	text-transform: uppercase;
	color: var(--text-color);
    padding: 20px 0 20px 0;
    margin-left: 30px;
	letter-spacing: 1.26px;
    cursor: pointer;
    position: relative;
}

.header__menu-item::after {
    content: '';
    width: 0;
    height: 2px;
    background-color: var(--gray-color-01);
    position: absolute;
    bottom: 17px;
    left: 0;
    transition: 0.3s all;
	opacity: 0;
}

.header__menu-item:hover::after {
	opacity: 1;
	width: 100%;
}

.header__menu-item.active {
	font-weight: 600;
}

@media screen and (max-width: 1024px) {
	.header__menu-item {
		font-size: 8px;
		margin-left: 20px;
		letter-spacing: 0.6px;
	}
}


@media screen and (max-width: 767.98px) {
	header .container {
		height: 80px;
	}

	.logo {
		height: 24px;
	}

	.header__menu {
		position: fixed;
		background: var(--back-color);
		width: 100%;
		height: calc(100% - 80px);
		margin-top: 80px;
		top: 0;
		left: 0;
		transform: translateX(100%);
		z-index: 45;
		visibility: hidden;
		opacity: 0;
		transition: all 0.3s ease;
	}

	.block-site {
		overflow: hidden;
	}

	.header__toggle {
		padding: 20px;
		cursor: pointer;
		z-index: 50;
	}

	.header__toggle {
		display: block;
	}

	.toggle-icon {
		width: 24px;
		height: 24px;
		position: relative;
	}

	.toggle-icon span {
		background: #ABABAB;
		width: 70%;
		height: 1.2px;
		display: block;
		position: absolute;
		top: 50%;
		right: 0;
		overflow: hidden;
		transform: translateY(-50%);
		transition: all 0.3s ease;
	}

	.toggle-icon span:first-child {
		transform: translateY(-7px);
		width: 100%;
	}

	.toggle-icon span:last-child {
		transform: translateY(6px);
		width: 100%;
	}

	.toggle-icon.active>span:first-child {
		transform: translateY(-50%) rotate(-45deg);
	}

	.toggle-icon.active>span:nth-child(2) {
		width: 0;
		opacity: 0;
	}

	.toggle-icon.active>span:last-child {
		transform: translateY(-50%) rotate(45deg);
	}

	.header__menu.active {
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
	}

	.header__menu-content {
		position: relative;
		text-align: center;
		padding-left: 20px;
    	padding-right: 20px;
	}

	.header__menu-item:first-child {
		display: block;
	}

	.header__menu-item::after {
		display: none;
	}

	.header__menu-item {
		display: block;
		margin-left: 0;
		font-size: 10px;
		padding: 30px 0;
		border-top: 1px solid var(--gray-color-01);
	}

	.menu__social {
		padding-top: 30px;
		border-top: 1px solid var(--gray-color-01);
	}

	.menu__social a {
		display: inline-block;
		padding: 5px;
	}

}

/* =============== 03 - FOOTER CSS =============== */
.back-footer {
	background: var(--footer-color);
	color: #FFFFFF;
}

.footer__social {
	padding-top: 80px;
}

.footer__social a {
	display: inline-block;
}

.footer__social a:nth-child(2) {
	margin-left: 15px;
	margin-right: 15px;
}

.footer__copyright {
	padding-top: 20px;
	padding-bottom: 80px;
	font-size: 14px;
}

.go-top {
	position: fixed;
	bottom: 60px;
	right: 30px;
	background: #F6F6F6;
	border-radius: 20px;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.5s;
	cursor: pointer;
	z-index: 10;
}

.go-top.show {
	opacity: 1;
}

.go-top span {
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.go-top span img {
	transition: all 0.5s;
}

@media screen and (max-width: 1024px) {

	.footer__social {
		padding-top: 50px;
	}

	.footer__social a:nth-child(2) {
		margin-left: 10px;
		margin-right: 10px;
	}
}

@media screen and (max-width: 767.98px) {
	.footer__social a img {
		width: 32px;
	}

	.footer__copyright {
		font-size: 14px;
	}

	.go-top {
		bottom: 50px;
		right: 20px;
	}
	
	.go-top.show {
		opacity: 1;
	}
	
	.go-top span {
		width: 36px;
		height: 36px;
	}
}


/* =============== 04 - HOMEPAGE CSS =============== */
.home__about .container {
	text-align: center;
	padding-top: 100px;
	padding-bottom: 80px;
}

.home__about-content {
    max-width: 530px;
    margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 40px;
}

.home__about-cta {
	font-family: var(--link-font);
	font-size: 14px;
	text-transform: uppercase;
	display: inline-block;
	position: relative;
}

.home__about-cta::after {
	content: '';
    width: 100%;
    height: 2px;
    background-color: var(--gray-color-01);
    position: absolute;
    bottom: -3px;
    left: 0;
    transition: 0.3s all;
}

.home__sv.back>.container {
    text-align: center;
    padding-top: 80px;
    padding-bottom: 100px;
}

.home__sv-content {
    width: 33%;
	text-transform: uppercase;
	position: relative;
	cursor: pointer;
	color: var(--text-color-02);
}

.sv__title {
    font-family: var(--title-font);
    font-size: 28px;
    margin-bottom: 5px;
	font-weight: 300;
	display: inline-block;
	letter-spacing: 0.6px;
}

.sv__cap {
	font-family: var(--link-font);
	font-size: 10px;
	color: var(--text-light-color);
	font-weight: 300;
	letter-spacing: 0.3px;
}

.sv__arrow {
	position: absolute;
	bottom: -45px;
    transform: translateX(-50%);
	opacity: 0;
	visibility: hidden;
	transition: 0.3s all;
}

.home__sv-content:hover img.sv__arrow {
	opacity: 1;
	visibility: visible;
	bottom: -40px;
}

.home__sv-content:nth-child(2) {
	border-left: 1px solid var(--gray-color-01);
	border-right: 1px solid var(--gray-color-01);
}

.home__featured {
	padding-top: 100px;
	padding-bottom: 100px;
}
.featured__content {
	margin-top: 40px;
	margin-bottom: 80px;
}

.home__sv-content:hover {
	color: var(--text-color);
}

.home__post {
	width: calc(33.33% - 30px);
	text-align: center;
}

.home__post-thumb {
	display: block;
    margin-bottom: 30px;
}

.home__post-thumb>.box-wide:hover img {
	transform: scale(1.05);
}

.home__post-cat {
	text-transform: uppercase;
	display: block;
	font-family: var(--link-font);
	font-size: 12px;
	color: var(--gray-color-02);
	margin-bottom: 10px;
	font-weight: 300;
}

.home__post-title {
	font-size: 18px;
	font-family: var(--title-font);
	font-weight: 300;
}

@media screen and (max-width: 1024px) {
	.home__about .container {
		padding-top: 60px;
		padding-bottom: 80px;
	}

	.home__about-content {
		padding-top: 30px;
	}

	.sv__title {
		font-size: 22px;
	}

	.sv__cap {
		font-size: 8px;
	}

	.home__sv.back>.container {
		padding-bottom: 90px;
	}

	.home__featured {
		padding-top: 80px;
	}

	.home__post-thumb {
		margin-bottom: 20px;
	}

	.home__post-cat {
		font-size: 8px;
		margin-bottom: 8px;
	}

	.home__post-title {
		font-size: 15px;
		line-height: 1.2;
	}
}

@media screen and (max-width: 767.98px) {
	.home__sv.back>.container {
		padding-bottom: 10px;
		padding-top: 10px;
	}

	.sv__title {
		font-size: 12px;
		font-family: var(--label-font);
		font-weight: 600;
	}

	.home__sv-content {
		width: 100%;
		padding: 25px 0;
	}

	.home__sv-content:nth-child(2) {
		border-left: 0;
		border-right: 0;
		position: relative;
	}

	.home__sv-content:nth-child(2)::before {
		content: '';
		position: absolute;
		width: 20px;
		height: 1px;
		background: var(--gray-color-01);
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.home__sv-content:nth-child(2)::after {
		content: '';
		position: absolute;
		width: 20px;
		height: 1px;
		background: var(--gray-color-01);
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.sv__arrow, .sv__cap {
		display: none;
	}

	.home__featured {
		padding-top: 60px;
		padding-bottom: 80px;
	}

	.featured__content {
		margin-top: 30px;
		margin-bottom: 10px;
	}

	.home__post {
		width: 100%;
		padding-bottom: 40px;
		padding-top: 50px;
		border-bottom: 1px solid var(--gray-color-01);
	}

	.home__post:first-child {
		padding-top: 0px;
	}

	.home__post:last-child {
		border-bottom: 0;
	}

	.home__post-thumb>.box-wide {
		padding-bottom: 60%;
	}

	.home__post-thumb {
		margin-bottom: 20px;
	}

	.home__post-cat {
    	margin-bottom: 6px;
	}

}

/* =============== 05 - ABOUT US CSS =============== */
.about {
    padding-top: 120px;
	padding-bottom: 140px;
}

.mw-about {
    max-width: 970px;
    margin: 0 auto;
}

.about__img {
    width: 300px;
}

.about__info {
	width: calc(100% - 360px);
}

.about__label {
	font-family: var(--label-font);
    font-size: 8.5px;
    color: var(--gray-color-02);
    margin-bottom: 10px;
	letter-spacing: 0.6px;
}

.about__label a {
	color: var(--gray-color-02);
}

.about__info > h1 {
	margin-bottom: 30px;
}

h1.page-title.upper span {
	display: block;
    margin-top: 5px;
}

.about__link {
	padding: 60px 0;
}

.about__link-item {
	width: 33%;
	font-family: var(--title-font);
	font-size: 22px;
	font-weight: 300;
	cursor: pointer;
}

.about__link-item:nth-child(2) {
	border-left: 2px solid var(--gray-color-01);
    border-right: 2px solid var(--gray-color-01);
}

.mer {
	padding-top: 100px;
    padding-bottom: 100px;
}

.mer__content {
	width: 470px;
}

.mer__grid {
	width: 370px;
}

.grid__left, .grid__right {
    width: calc(50% - 10px);
}

.grid__left .box-square:first-child, .grid__right .box-square:first-child  {
	margin-bottom: 20px;
}

.grid__right .box-square:first-child {
	margin-top: 50%;
}

.mer__content-item h3 {
	font-size: 32px;
	padding-top: 10px;
}

.open-icon {
	width: 12px;
	height: 12px;
	display: inline-block;
	position: relative;
}

.open-icon span {
	width: 100%;
	height: 2px;
	background: var(--text-color);
	display: block;
	position: absolute;
	transition: all 0.3s ease;
}

.open-icon span:last-child {
	transform: rotate(90deg);
}

.mer__content-item.open h3 > .open-icon span {
	background: var(--text-light-color);
}

.mer__content-item.open h3 > .open-icon span:first-child {
	opacity: 0;
	transform: scale(0);
}

.mer__content-item.open h3 > .open-icon span:last-child {
	transform: rotate(0);
}

.mer__desc {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.mer__desc p {
	margin-bottom: 20px;
	margin-top: 5px;
}

.mer__content-item.open > .mer__desc {
	max-height: 300px;
}



@media screen and (max-width: 1024px) {
	.about {
		padding-top: 80px;
		padding-bottom: 100px;
	}

	.mw-about {
		padding-left: 30px;
		padding-right: 30px;
	}

	.about__img {
		width: calc(40% - 20px);
	}
	.about__info {
		width: calc(60% - 20px);
	}

	.mer__content {
		width: calc(50% - 30px);
	}

	.mer__grid {
		width: calc(45% - 30px);
	}

}

@media screen and (max-width: 767.98px) {
	.about {
		padding-bottom: 60px;
	}

	.mw-about {
		padding-left: 20px;
		padding-right: 20px;
	}

	.about__info {
		width: 100%;
	}

	.about__info > h1 {
		margin-bottom: 20px;
		font-size: 20px;
	}

	.about__link {
		padding: 50px 0;
	}

	.about__link-item {
		width: 32.5%;
		font-size: 15px;
		font-weight: 400;
	}

	.about__content > p:first-child {
		margin-bottom: 30px;
	}

	.mer {
		text-align: center;
		padding-top: 60px;
		padding-bottom: 80px;
	}

	.mer__content, .mer__grid {
		width: 100%;
	}

	.mer__grid {
		margin-bottom: 60px;
		order: 1;
	}

	.mer__content {
		order: 2;
	}

	.mer__label {
		border-bottom: 1px solid var(--gray-color-01);
		padding-bottom: 20px;
		margin-bottom: 0;
	}

	.mer__content-item {
		border-bottom: 1px solid var(--gray-color-01);
	}

	.mer__content-item h3 {
		font-size: 20px;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.mer__desc {
		position: relative;
	}

	.mer__desc::before {
		content: '';
		position: absolute;
		width: 20px;
		height: 1px;
		background: var(--gray-color-01);
		transform: translateX(-50%);
	}

	.mer__desc p {
		margin-bottom: 35px;
		margin-top: 15px;
	}

	.open-icon {
		width: 10px;
		height: 10px;
		top: 2px;
	}

	.grid__left, .grid__right {
		width: calc(50% - 5px);
	}

	.grid__right .box-square:first-child {
		margin-top: 0;
	}

	.grid__left .box-square:first-child, .grid__right .box-square:first-child {
		margin-bottom: 10px;
	}
}

/* =============== PORTFOLIO CSS =============== */
.album {
	padding-top: 60px;
	padding-bottom: 10px;
}

.album__cat {
	padding: 30px 0;
	border-bottom: 1px solid var(--gray-color-01);
	margin-bottom: 60px;
	font-size: 14px;
}

.album__category {
	margin-top: 30px;
	margin-bottom: 10px;
}

.grid-post {
	margin-bottom: 60px;
}

.album__cat span {
	margin: 0 15px;
	display: inline-block;
}

.post-item {
	margin-bottom: 60px;
	width: 47%;
}

.grid-sizer {
	width: 47%;
}

.grid-gutter {
	width: 4%;
}

.post-item > a:hover >.box-insta img, .post-item > a:hover >.box-wide img {
	transform: scale(1.03);
}

.post__item-link {
	position: relative;
}

.post__item-icon {
	position: absolute;
	bottom: 8px;
	right: 8px;
	opacity: 0;
	transition: all 0.3s;
}

.post__item-link:hover > .post__item-icon {
	opacity: 1;
}

.post-item > h3 {
	font-size: 20px;
}

.album__page {
	border-top: 1px solid var(--gray-color-01);
}

.album__page span {
	font-size: 18px;
	margin: 25px 10px;
	display: inline-block;
}

.page-active {
	font-weight: 600;
	position: relative;
}

.page-active::before {
	content: '';
	position: absolute;
	height: 2px;
	width: 100%;
	background: var(--gray-color-01);
	bottom: -5px;
}


@media screen and (max-width: 1024px) {
	.album {
		padding-top: 50px;
	}

	.album__cat {
		margin-bottom: 40px;
	}

	.post-item > h3 {
		font-size: 16px;
		line-height: 1.2;
	}
}


@media screen and (max-width: 767.98px) {
	.album {
		padding-top: 5px;
	}

	.grid-post {
		margin-bottom: 20px;
	}

	.post-item {
		width: 100%;
		margin-bottom: 0;	
		padding-bottom: 40px;
    	padding-top: 40px;
		border-bottom: 1px solid var(--gray-color-01);
	}

	.post__item-icon {
		opacity: 1;
	}

	.post-item:last-child {
		border-bottom: 0;
	}
	
	.grid-sizer {
		width: 100%;
	}
	
	.grid-gutter {
		width: 0;
	}

	.album__cat {
		margin-bottom: 0;
	}

	.album__cat span {
		margin: 0 8px;
		display: inline-block;
		font-size: 12px;
		font-weight: 400;
	}

	.album__category {
		margin-top: 20px;
		font-size: 8px;
		margin-bottom: 6px;
	}

	.post-item > h3 {
		font-size: 16px;
	}

	.post-item > a > .box-wide {
		padding-bottom: 60%;
	}
}


/* =============== CATEGORY CSS =============== */
.child__cat {
	margin-bottom: 20px;
}

.category {
	margin-bottom: 40px;
}

.category__post {
	width: calc(33.33% - 30px);
	padding: 40px 0;
	text-align: center;
}

.category__post > h3 {
	line-height: 1.2;
}

.category__post-thumb {
	display: block;
	margin-bottom: 20px;
}

.category__post-thumb:hover > .box-wide img {
	transform: scale(1.05);
}

.category__post-link {
	margin-bottom: 8px;
}

.category__post-title {
	font-size: 18px;
	font-weight: 300;
}

@media screen and (max-width: 1024px) {
	.child__cat {
		margin-bottom: 0;
	}

	.category__post {
		width: calc(50% - 20px);
	}
}

@media screen and (max-width: 767.98px) {
	.category__post {
		width: 100%;
		border-bottom: 1px solid var(--gray-color-01);
	}

	.category__post:last-child {
		border-bottom: 0;
	}

	.category__post-thumb {
		display: block;
		margin-bottom: 20px;
	}

	.category__post-thumb .box-wide {
		padding-bottom: 60%;
	}

	.category__post-link {
		margin-bottom: 6px;
	}

	.category__post-link  > .about__label {
		font-size: 8px;
	}

	.category__post-title {
		font-size: 16px;
	}
}


/* =============== GALLERY SINGLE POST CSS =============== */
.gallery__caption {
	padding-top: 80px;
}

.gallery__caption-cat {
	margin-bottom: 20px;
}

.gallery__caption-title {
	margin-bottom: 40px;
}

.gallery__content {
	font-family: 'Cormorant Garamond', serif;
	font-size: 20px;
	padding-bottom: 100px;
}

.grid__link {
	position: relative;
}

.grid__icon {
	position: absolute;
	top: 10px;
	right: 10px;
	opacity: 0;
	transition: all 0.3s;
}

.grid__link:hover > .grid__icon {
	opacity: 1;
}

.gallery__thumbnail .box {
	padding-bottom: 550px;
}

.gallery__photo {
	padding-bottom: 120px;
}

.gallery__more {
	padding-top: 100px;
    padding-bottom: 80px;
}

.gallery__more_title {
	font-size: 28px;
}

@media screen and (max-width: 1024px) {
	.gallery__thumbnail .box {
		padding-bottom: 56.25%;
	}

	.gallery__caption {
		padding-top: 60px;
	}

	.gallery__caption-title {
		margin-bottom: 10px;
	}

	.gallery__content {
		padding-bottom: 60px;
	}

	.gallery__photo {
		padding-bottom: 80px;
	}

	.gallery__more {
		padding-top: 80px;
	}

	.gallery__more-item {
		width: calc(33.33% - 30px);
	}
}

@media screen and (max-width: 767.98px) {
	.gallery__caption {
		padding-top: 30px;
	}

	.gallery__caption-cat {
		margin-bottom: 10px;
	}

	.gallery__caption-title {
		line-height: 1.2;
	}

	.gallery__content {
		padding-bottom: 40px;
	}

	.gallery__more {
		padding-bottom: 40px;
	}

	.gallery__more_title {
		font-size: 24px;
	}

	.gallery__more-item {
		width: 100%;
	}
}

/* =============== KIND WORDS PAGE CSS =============== */
.feedback {
	padding-top: 100px;
	padding-bottom: 60px;
}

.feedback__title {
	padding-bottom: 60px;
	border-bottom: 1px solid var(--gray-color-01);
}

.feedback__title h1 {
	margin-bottom: 10px;
}

.feedback__client {
	padding: 60px 0;
	border-bottom: 1px solid var(--gray-color-01);
}

.feedback__client:last-child {
	border-bottom: 0;
}

.feedback__client.swap > .flex > .feedback__img {
	order: 2;
}

.feedback__img, .feedback__content {
	width: calc(50% - 30px);
}

.feeback__content-name {
	font-size: 22px;
	margin-bottom: 10px;
}

.feedback__content-local {
	font-size: 12px;
	color: var(--gray-color-02);
}

.feedback__content-text {
	margin-top: 30px;
	font-size: 14px;
}

@media screen and (max-width: 1024px) {
	.feedback {
		padding-top: 80px;
	}

	.feedback__title {
		padding-bottom: 40px;
	}

	.feedback__client {
		padding: 40px 0;
	}

	.feedback__img, .feedback__content {
		width: calc(50% - 20px);
	}
}

@media screen and (max-width: 767.98px) {
	.feedback__desc {
		font-size: 15px;
		line-height: 1.5;
		padding: 0px 10px;
	}

	.feedback__img {
		width: 100%;
	}

	.feedback__content {
		width: 100%;	
		text-align: center;
		margin-top: 40px;
		padding: 0 20px;
	}

	.feedback__content-text {
		text-align: justify;
		margin-top: 20px;
	}

	.feedback__client.swap > .flex > .feedback__img {
		order: 1;
	}

	.feedback__client.swap > .flex > .feedback__content {
		order: 2;
	}
}

/* =============== FAQS PAGE CSS =============== */
.faq {
	padding-top: 100px;
	padding-bottom: 100px;
}

.faq .container {
	max-width: 970px;
}

.faq__left {
	width: calc(33.33% - 22.5px);
	line-height: 1.2;
}

.faq__right{
	width: calc(66.66% - 22.5px);
}

.faq__left > h2 > span {
	display: block;
}

.faq__answer {
	max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    font-size: 14px;
	padding-left: 41px;
}

.faq__question {
    padding: 20px 0;
    border-bottom: 1px solid var(--gray-color-01);
	cursor: pointer;
}

.faq__question > h3 {
	font-weight: 600;
	line-height: 1.3;
}

.faq_question-num {
    margin-right: 20px;
    color: var(--gray-color-02);
}


.faq__question:first-child {
	border-top: 1px solid var(--gray-color-01);
}

.faq__question.open > .faq__answer {
	max-height: 1000px;
	padding-top: 20px;
}

@media screen and (max-width: 1024px) {
	.faq {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.faq__left {
		width: calc(33.33% - 15px);
	}

	.faq__right {
		width: calc(66.66% - 15px);
	}
	.faq__left > .page-title {
		font-size: 22px;
	}
}

@media screen and (max-width: 767.98px) {
	.faq__left, .faq__right {
		width: 100%;
	}

	.faq__left {
		text-align: center;
		padding-bottom: 40px;
		font-size: 24px;
	}

	.faq__question > h3 {
		font-size: 15px;
	}

	.faq__answer {
		padding-left: 31px;
		font-size: 13px;
	}

	.faq_question-num {
		margin-right: 10px;
	}

	span.faq__question-mobile {
		display: block;
		padding-left: 31px;
	}

}


/* =============== CONTACT PAGE CSS =============== */
.contact {
	padding-top: 100px;
	padding-bottom: 100px;
}

@media screen and (max-width: 1024px) {
	.contact {
		padding-top: 80px;
		padding-bottom: 60px;
	}
}