/*
* Main theme css file
*/
/* Rajdhani Font */
@font-face {
	font-display: swap;
	font-family: 'Rajdhani';
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/rajdhani-300.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Rajdhani';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/rajdhani-regular.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Rajdhani';
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/rajdhani-500.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Rajdhani';
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/rajdhani-600.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Rajdhani';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/rajdhani-700.woff2') format('woff2');
}

/* Defaults */
:root {

	--pri-font: 'Rajdhani';
	--sec-font: 'Arial';
	
	--base-color: #505353;
	--pri-color: #7b7a4f;
	--sec-color: #505353;
}


/*
* Base html styles
*/
html, body {
	font-family: var(--pri-font);
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	font-size: 1.1rem;
	color: var(--base-color);
}

/*
 * Link style
 */
a {
	transition: color ease-in-out .2s;
}

/*
 * Navbar
 */
ul.list-navbar {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
}
ul.list-navbar > li {
	margin-right: 6px;
	margin-left: 6px;
}
ul.list-navbar > li > a {}
ul.list-navbar > li > a:hover {
	text-decoration: none;
}

/* header */

ul.navbar-header {
	padding: 20px 40px;
	background-color: var(--pri-color);
	color: #fff;
	justify-content: end;
}
ul.navbar-header > li > a,
ul.navbar-header > li > a:visited {
	color: rgba(255,255,255,1);
}
ul.navbar-header > li > a:hover,
ul.navbar-header > li > a:active,
ul.navbar-header > li > a:focus {
	color: rgba(255,255,255,.6);
}
/* footer */
ul.navbar-footer {
	background-color: var(--pri-color);
	color: #fff;
}
@media(max-width: 767px){
	ul.navbar-footer {
		padding: 20px 25px;
	}
}
@media(min-width: 768px){
	ul.navbar-footer {
		padding: 20px 40px 20px 25%;
	}
}

ul.navbar-footer > li:not(:first-child) {
	padding-left: 11px;
	border-left: 1px solid #fff;
}
ul.navbar-footer > li > a,
ul.navbar-footer > li > a:visited {
	color: rgba(255,255,255,1);
}
ul.navbar-footer > li > a:hover,
ul.navbar-footer > li > a:active,
ul.navbar-footer > li > a:focus {
	color: rgba(255,255,255,.6);
}

/*
 * Branding
 */
.breanding {
	margin-top: 30px;
	margin-bottom: 60px;
}

.breanding img {
	max-width: 450px;
	height: auto;
}


/*
 * Portfolio
 */
.portfolio figure.images {}
.portfolio figure.images img {
	max-width: 100%;
	height: auto;
}

/*
 * Content
 */
.content {
	display: flex;
	align-items: end;
	gap: 30px;
}
@media(min-width: 768px){
	.contact-list {
		margin-left: calc(25% + 5px);
	}	
}

/* Contact */
ul.contact-list {
	color: var(--pri-color);
}
ul.contact-list > li {
	margin-top: 4px;
	margin-bottom: 4px;
	white-space: nowrap;
}

.contact-person {
	margin-top: -7%;
	text-align: right;
}
.contact-person img {
	max-width: 100%;
	height: auto;
}

.base-content {
	margin-top: 30px;
	margin-bottom: 30px;
}