/*
Theme Name: Twenty Twenty One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires PHP: 5.6
Version: 1.0.0
Template: twentytwentyone
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog, portfolio.
*/

/* =========================
CONTENT AREA
========================= */

.content-area{
	max-width:1200px;
	margin:0 auto;
	padding:80px 20px;
}

/* =========================
PAGE TITLE
========================= */

.content-area .cmn-header{
	text-align:center;
	margin-bottom:60px;
}

.content-area .cmn-header h1{
	font-family:var(--serif);
	font-size:clamp(42px,5vw,72px);
	font-weight:400;
	line-height:1.05;
	letter-spacing:-.03em;
	color:var(--black);
	margin:0;
}

/* =========================
HEADINGS
========================= */

.content-area h2,
.content-area h3,
.content-area h4,
.content-area h5,
.content-area h6{
	font-family:var(--serif);
	font-weight:400;
	line-height:1.15;
	letter-spacing:-.02em;
	color:var(--black);
	margin:54px 0 18px;
}

.content-area h2{
	font-size:clamp(34px,3vw,48px);
}

.content-area h3{
	font-size:clamp(28px,2.4vw,38px);
}

.content-area h4{
	font-size:28px;
}

.content-area h5{
	font-size:22px;
}

.content-area h6{
	font-size:18px;
}

/* =========================
PARAGRAPH
========================= */

.content-area p{
	font-size:18px;
	font-weight:300;
	line-height:1.9;
	color:var(--sub);
	margin:0 0 24px;
}

/* =========================
UNORDERED LIST
========================= */

.content-area ul{
	margin:0 0 28px;
	padding:0;
	list-style:none;
}

.content-area ul li{
	position:relative;
	padding-left:26px;
	font-size:18px;
	font-weight:300;
	line-height:1.9;
	color:var(--sub);
	margin-bottom:10px;
}

.content-area ul li::before{
	content:"";
	width:7px;
	height:7px;
	border-radius:50%;
	background:var(--gold);
	position:absolute;
	left:0;
	top:14px;
}

/* =========================
ORDERED LIST
========================= */

.content-area ol{
	margin:0 0 28px;
	padding:0;
	list-style:none;
	counter-reset:item;
}

.content-area ol li{
	position:relative;
	padding-left:34px;
	font-size:18px;
	font-weight:300;
	line-height:1.9;
	color:var(--sub);
	margin-bottom:10px;
	counter-increment:item;
}

.content-area ol li::before{
	content:counter(item) ".";
	position:absolute;
	left:0;
	top:0;
	font-weight:600;
	color:var(--gold);
}

/* =========================
ANCHOR
========================= */

.content-area a{
	color:var(--gold);
	text-decoration:none;
	transition:all .3s ease;
	border-bottom:1px solid transparent;
}

.content-area a:hover{
	color:var(--gold2);
	border-color:var(--gold2);
}

/* =========================
STRONG + EMPHASIS
========================= */

.content-area strong{
	font-weight:600;
	color:var(--black);
}

.content-area em{
	font-style:italic;
}

/* =========================
SPACING FIXES
========================= */

.content-area > *:first-child{
	margin-top:0;
}

.content-area p:last-child,
.content-area ul:last-child,
.content-area ol:last-child{
	margin-bottom:0;
}

/* =========================
MOBILE
========================= */

@media(max-width:768px){

	.content-area{
		padding:60px 18px;
	}

	.content-area .cmn-header{
		margin-bottom:40px;
	}

	.content-area p,
	.content-area ul li,
	.content-area ol li{
		font-size:15px;
		line-height:1.8;
	}

	.content-area ul li{
		padding-left:22px;
	}

	.content-area ol li{
		padding-left:28px;
	}

	.content-area ul li::before{
		top:11px;
	}

}
/* Better mobile responsiveness */

.content-area img{
	max-width:100%;
	height:auto;
	display:block;
}

.content-area iframe{
	max-width:100%;
}

.content-area table{
	width:100%;
	display:block;
	overflow-x:auto;
}

.content-area{
	overflow-wrap:break-word;
	word-wrap:break-word;
}