/*******************************************************************************
  ____                                  _____ _
 / ___|___  ___ _ __ ___   ___  ___    |_   _| |__   ___ _ __ ___   ___  ___
| |   / _ \/ __| '_ ` _ \ / _ \/ __|_____| | | '_ \ / _ \ '_ ` _ \ / _ \/ __|
| |__| (_) \__ \ | | | | | (_) \__ \_____| | | | | |  __/ | | | | |  __/\__ \
 \____\___/|___/_| |_| |_|\___/|___/     |_| |_| |_|\___|_| |_| |_|\___||___/

******************************************************************************/


/************ CSS Styles **************************************

    Template Name: Clarks - Vcard Template
    Author: cosmos-themes
    Envato Profile: https://themeforest.net/user/cosmos-themes
    version: 1.0
    Copyright: 2019

****************************************************************/


/*************************************

        Table of Content

        1. Body and Core Css
        2. Helper
        3. Layout
        4. Home Section
        5. About Section
        6. Resume Section
        7. Portfolio Section
        8. Blogs Section
        9. Contact Section
        10. Blog Page Css
        11. Mobile Responsive Css

**************************************/


/*======== 1. Body and Core Css ========*/

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
@import url("https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,600,700");
* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	list-style: none !important;
	outline: none !important;
}

*:after,
*:before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
}

i,
em {
	font-style: normal;
}

a:hover {
	text-decoration: underline;
}

html,
body {
	height: 100vh;
	overflow-x: hidden;
	max-width: 100%;
}

/* Skip to main content link for keyboard accessibility */
.skip-to-main {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 1em;
	background-color: #17a2b8;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
}

.skip-to-main:focus {
	left: 50%;
	transform: translateX(-50%);
	top: 10px;
}

body {
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	line-height: 1.65;
	color: #e1e1e1;
	background-color: #1d1e21;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Source Serif Pro", serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

span {
	display: inline-block;
}

p {
	line-height: 1.65;
}

img {
	width: 100%;
	height: auto;
}

a,
a:hover,
a:focus {
	color: inherit;
}

a {
	text-decoration: none;
	color: #e1e1e1;
	outline: none;
}

a:hover {
	color: #fff;
}

.mt-0 {
	margin-top: 0 !important;
}

.mt-5 {
	margin-top: 5px !important;
}

.mt-10 {
	margin-top: 10px !important;
}

.mt-15 {
	margin-top: 15px !important;
}

.mt-20 {
	margin-top: 20px !important;
}

.mt-25 {
	margin-top: 25px !important;
}

.mt-30 {
	margin-top: 30px !important;
}

.mt-35 {
	margin-top: 35px !important;
}

.mt-40 {
	margin-top: 40px !important;
}

.mt-45 {
	margin-top: 45px !important;
}

.mt-50 {
	margin-top: 50px !important;
}

.mt-55 {
	margin-top: 55px !important;
}

.mt-60 {
	margin-top: 60px !important;
}

.mt-62 {
	margin-top: 62px !important;
}

.mt-65 {
	margin-top: 65px !important;
}

.mt-70 {
	margin-top: 70px !important;
}

.mt-75 {
	margin-top: 75px !important;
}

.mt-80 {
	margin-top: 80px !important;
}

.mt-85 {
	margin-top: 85px !important;
}

.mt-90 {
	margin-top: 90px !important;
}

.mt-95 {
	margin-top: 95px !important;
}

.mt-100 {
	margin-top: 100px !important;
}


/* Custom Margin Bottom */

.mb-0 {
	margin-bottom: 0 !important;
}

.mb-5 {
	margin-bottom: 5px !important;
}

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

.mb-15 {
	margin-bottom: 15px !important;
}

.mb-20 {
	margin-bottom: 20px !important;
}

.mb-25 {
	margin-bottom: 25px !important;
}

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

.mb-35 {
	margin-bottom: 35px !important;
}

.mb-40 {
	margin-bottom: 40px !important;
}

.mb-45 {
	margin-bottom: 45px !important;
}

.mb-50 {
	margin-bottom: 50px !important;
}

.mb-55 {
	margin-bottom: 55px !important;
}

.mb-60 {
	margin-bottom: 60px !important;
}

.mb-62 {
	margin-bottom: 62px !important;
}

.mb-65 {
	margin-bottom: 65px !important;
}

.mb-70 {
	margin-bottom: 70px !important;
}

.mb-75 {
	margin-bottom: 75px !important;
}

.mb-80 {
	margin-bottom: 80px !important;
}

.mb-85 {
	margin-bottom: 85px !important;
}

.mb-90 {
	margin-bottom: 90px !important;
}

.mb-95 {
	margin-bottom: 95px !important;
}

.mb-100 {
	margin-bottom: 100px !important;
}

.m-0 {
	margin: 0px !important;
}


/* Custom Padding top */

.pt-0 {
	padding-top: 0 !important;
}

.pt-5 {
	padding-top: 5px !important;
}

.pt-10 {
	padding-top: 10px !important;
}

.pt-15 {
	padding-top: 15px !important;
}

.pt-20 {
	padding-top: 20px !important;
}

.pt-25 {
	padding-top: 25px !important;
}

.pt-30 {
	padding-top: 30px !important;
}

.pt-35 {
	padding-top: 35px !important;
}

.pt-40 {
	padding-top: 40px !important;
}

.pt-45 {
	padding-top: 45px !important;
}

.pt-50 {
	padding-top: 50px !important;
}

.pt-55 {
	padding-top: 55px !important;
}

.pt-60 {
	padding-top: 60px !important;
}

.pt-65 {
	padding-top: 65px !important;
}

.pt-70 {
	padding-top: 70px !important;
}

.pt-75 {
	padding-top: 75px !important;
}

.pt-80 {
	padding-top: 80px !important;
}

.pt-85 {
	padding-top: 85px !important;
}

.pt-90 {
	padding-top: 90px !important;
}

.pt-95 {
	padding-top: 95px !important;
}

.pt-100 {
	padding-top: 100px !important;
}


/* Custom Padding top */

.pb-0 {
	padding-bottom: 0 !important;
}

.pb-5 {
	padding-bottom: 5px !important;
}

.pb-10 {
	padding-bottom: 10px !important;
}

.pb-15 {
	padding-bottom: 15px !important;
}

.pb-20 {
	padding-bottom: 20px !important;
}

.pb-25 {
	padding-bottom: 25px !important;
}

.pb-30 {
	padding-bottom: 30px !important;
}

.pb-35 {
	padding-bottom: 35px !important;
}

.pb-40 {
	padding-bottom: 40px !important;
}

.pb-45 {
	padding-bottom: 45px !important;
}

.pb-50 {
	padding-bottom: 50px !important;
}

.pb-55 {
	padding-bottom: 55px !important;
}

.pb-60 {
	padding-bottom: 60px !important;
}

.pb-65 {
	padding-bottom: 65px !important;
}

.pb-70 {
	padding-bottom: 70px !important;
}

.pb-75 {
	padding-bottom: 75px !important;
}

.pb-80 {
	padding-bottom: 80px !important;
}

.pb-85 {
	padding-bottom: 85px !important;
}

.pb-90 {
	padding-bottom: 90px !important;
}

.pb-95 {
	padding-bottom: 95px !important;
}

.pb-100 {
	padding-bottom: 100px !important;
}

.p-0 {
	padding: 0 !important;
}


/*======== 2. Helper ========*/


/*Preloader*/

.preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #1d1e21;
	z-index: 9999;
}

.loading-text {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	width: 100%;
	height: 100px;
	line-height: 100px;
}

.loading-text span {
	display: inline-block;
	position: relative;
	overflow: hidden;
	color: #000;
	font-size: 22px;
}

.loading-text span:before {
	content: attr(data-preloader);
	position: absolute;
	top: 0;
	left: 0;
	color: #e1e1e1;
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-fill-mode: backwards;
	animation-fill-mode: backwards;
	-webkit-animation-name: preload-animation;
	animation-name: preload-animation;
}

.loading-text span:nth-child(2):before {
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

.loading-text span:nth-child(3):before {
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

.loading-text span:nth-child(4):before {
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}

.loading-text span:nth-child(5):before {
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
}

.loading-text span:nth-child(6):before {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}

.loading-text span:nth-child(7):before {
	-webkit-animation-delay: 1.2s;
	animation-delay: 1.2s;
}

@-webkit-keyframes preload-animation {
	0%,
	100% {
		-webkit-transform: rotateY(-90deg) scale(1);
		transform: rotateY(-90deg) scale(1);
		opacity: 0;
	}
	20%,
	50% {
		-webkit-transform: rotateY(0) scale(1);
		transform: rotateY(0) scale(1);
		opacity: 1;
	}
	75% {
		-webkit-transform: rotateY(0) scale(1.2);
		transform: rotateY(0) scale(1.2);
		opacity: 0;
	}
}

@keyframes preload-animation {
	0%,
	100% {
		-webkit-transform: rotateY(-90deg) scale(1);
		transform: rotateY(-90deg) scale(1);
		opacity: 0;
	}
	20%,
	50% {
		-webkit-transform: rotateY(0) scale(1);
		transform: rotateY(0) scale(1);
		opacity: 1;
	}
	75% {
		-webkit-transform: rotateY(0) scale(1.2);
		transform: rotateY(0) scale(1.2);
		opacity: 0;
	}
}

.page-heading {
	text-align: center;
	margin-top: 0;
	padding-top: 60px;
	margin-bottom: 50px;
}

.page-heading h2 {
	position: relative;
	font-size: 32px;
	letter-spacing: 1px;
	text-transform: capitalize;
	font-family: "Source Serif Pro", serif;
	color: #e1e1e1;
	font-weight: 700;
	line-height: 100%;
	text-transform: uppercase;
}

.page-heading h2:before {
	position: absolute;
	content: attr(data-shadow);
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-size: 62px;
	text-transform: capitalize;
	z-index: -1;
	color: #e1e1e1;
	font-weight: 700;
	opacity: 0.10;
	text-transform: uppercase;
}

.sub-heading {
	margin-bottom: 40px;
	text-align: center;
	overflow: hidden;
}

.sub-heading h3 {
	color: #e1e1e1;
	font-weight: 600;
	font-size: 32px;
	display: inline-block;
	position: relative;
	padding-bottom: 5px;
	text-transform: uppercase;
}

.skill-subsection .sub-heading h3 {
	font-size: 22px;
}

.online-link {
	text-decoration: none;
	transition: text-shadow 0.3s ease;
}

.online-link:hover {
	text-shadow: 0 0 10px #9B30FF, 0 0 20px #9B30FF, 0 0 30px #9B30FF;
}

/* Grid Backgrounds */
.grid-background {
	width: 100%;
	height: 300px;
	background-size: cover;
	background-position: center;
	position: relative;
}

.grid-bottom {
	background-position: center bottom;
}

.horizon-glow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Page Footer */
.page-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	padding: 40px 20px;
	z-index: 10;
}

.page-footer .footer-nav {
	margin-bottom: 15px;
}

.page-footer .footer-nav-link {
	font-family: "Inter", sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	transition: all 0.3s ease;
}

.page-footer .footer-nav-link:hover {
	text-decoration: underline;
}

.page-footer .footer-nav-separator {
	font-family: "Inter", sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.4);
	margin: 0 8px;
}

.page-footer p {
	font-family: "Inter", sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
}

@media (max-width: 768px) {
	.grid-background {
		height: 200px;
	}

	/* Show mobile line breaks on mobile */
	.mobile-break {
		display: block !important;
	}

	/* Show mobile-only elements, hide desktop-only elements */
	.mobile-show {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		line-height: 1.2 !important;
	}

	.mobile-hide {
		display: none !important;
	}

	/* Ensure mobile multiline text slides stack properly */
	.text-slide-mobile-multiline {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
	}

	/* Fix layout shift - ensure all text slides have consistent height */
	.text-slideshow .text-slide {
		min-height: 150px !important;
		justify-content: center !important;
	}

	.text-slideshow {
		min-height: 150px !important;
	}
}

.sub-heading h3:before {
	content: " ";
	background: cyan;
	height: 4px;
	position: absolute;
	bottom: 0%;
	left: 50%;
	width: 50px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

.main-btn {
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 600;
	display: inline-block;
	position: relative;
	text-align: center;
	color: #e1e1e1;
	border: 2px solid #e1e1e1;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: transparent;
	cursor: pointer;
	line-height: 40px;
	padding-left: 20px;
	padding-right: 20px;
	-webkit-transition: all .2s ease-in;
	-o-transition: all .2s ease-in;
	transition: all .2s ease-in;
}

.main-btn:hover {
	color: #1d1e21;
}

blockquote {
	font-size: 18px;
	border-left: 4px solid #e1e1e1;
	font-style: italic;
	padding-left: 20px;
	margin: 40px 0;
	font-weight: 500;
}


/*Forms*/

form {
	-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 38px;
}

form .input-field {
	width: 100%;
	background-color: transparent;
	border: none;
	border-bottom: 2px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 20px;
	padding-bottom: 10px;
	color: #e1e1e1;
	resize: none;
}

form .input-field.cf-error {
	border-color: #aa0000;
}

form .input-field:focus {
	border-color: #fff;
}

form .input-field.input--filled {
	border-color: #fff;
}

#contact-form .alert-container {
	text-align: center;
}

#contact-form .alert-container .alert {
	-webkit-border-radius: 0;
	border-radius: 0;
}


/*======== 3. Layout ========*/


/*Pages Navigation*/

header .nav-menu {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 47vh;
    padding: 5vh;
    pointer-events: none;
    opacity: 0;
    background: transparent;
    z-index: 1000;
    -webkit-transition: opacity 1.2s, -webkit-transform 1.2s;
    transition: opacity 1.2s, -webkit-transform 1.2s;
    -o-transition: transform 1.2s, opacity 1.2s;
    transition: transform 1.2s, opacity 1.2s;
    transition: transform 1.2s, opacity 1.2s, -webkit-transform 1.2s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    -o-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    -webkit-transform: translate3d(0, 150px, 0);
    transform: translate3d(0, 150px, 0);
}

header .nav-menu.nav-menu--open {
    pointer-events: auto;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

header .nav-menu.nav-menu--open .social-links {
    opacity: 1;
    -webkit-transition-delay: 0.35s;
    -o-transition-delay: 0.35s;
    transition-delay: 0.35s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

header .nav-menu.nav-menu--open .copy {
    opacity: 1;
    -webkit-transition-delay: 0.65s;
    -o-transition-delay: 0.65s;
    transition-delay: 0.65s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

header .nav-menu .social-links {
    opacity: 0;
    -webkit-transition: opacity 1.2s, -webkit-transform 1.2s;
    transition: opacity 1.2s, -webkit-transform 1.2s;
    -o-transition: transform 1.2s, opacity 1.2s;
    transition: transform 1.2s, opacity 1.2s;
    transition: transform 1.2s, opacity 1.2s, -webkit-transform 1.2s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    -o-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
}

header .nav-menu .copy {
    opacity: 0;
    -webkit-transition: opacity 1.2s, -webkit-transform 1.2s;
    transition: opacity 1.2s, -webkit-transform 1.2s;
    -o-transition: transform 1.2s, opacity 1.2s;
    transition: transform 1.2s, opacity 1.2s;
    transition: transform 1.2s, opacity 1.2s, -webkit-transform 1.2s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    -o-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
}

header .nav-menu {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: space-around;
	-ms-flex-pack: distribute;
	justify-content: space-around;
}

header .nav-menu {
	text-align: center;
}

header .nav-menu .nav-menu--link {
	display: inline-block;
	padding: 0 0.2em;
	margin: 0px 15px;
	text-align: center;
	font-size: 1.2em;
	color: #888;
	position: relative;
}

header .nav-menu .nav-menu--link:hover {
	color: #17a2b8;
}

header .nav-menu .nav-menu--link.link--active {
	color: #17a2b8;
}

header .nav-menu .nav-menu--link i {
	text-align: center;
}

header .nav-menu .nav-menu--link span {
	display: block;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 12px;
	font-weight: 700;
	padding-top: 2px;
	line-height: 100%;
	text-align: center;
}

header .nav-menu .social-links .social-link {
	font-size: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	margin-left: 10px;
	margin-right: 10px;
	color: #17a2b8;
	border: 1px solid rgba(23, 162, 184, 0.6);
	background: rgba(23, 162, 184, 0.08);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	text-decoration: none;
}

header .nav-menu .social-links .social-link:hover {
	background-color: #17a2b8;
	border-color: #17a2b8;
	color: #0d0e10;
	text-decoration: none;
}

header .nav-menu .copy {
	color: #888;
	font-size: 15px;
	margin-bottom: 0;
}

header .nav-menu .nav-copyright {
	opacity: 0;
	-webkit-transition: opacity 1.2s, -webkit-transform 1.2s;
	transition: opacity 1.2s, -webkit-transform 1.2s;
	-o-transition: transform 1.2s, opacity 1.2s;
	transition: transform 1.2s, opacity 1.2s;
	transition: transform 1.2s, opacity 1.2s, -webkit-transform 1.2s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	-o-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	-webkit-transform: translate3d(0, 20px, 0);
	transform: translate3d(0, 20px, 0);
	margin-top: 10px;
}

header .nav-menu .nav-copyright p {
	color: #17a2b8;
	font-size: 13px;
	margin: 0;
	font-weight: 400;
}

header .nav-menu .nav-copyright p .mobile-break {
	display: none;
}

/* Hide mobile line breaks by default */
.mobile-break {
	display: none;
}

/* Mobile show/hide classes */
.mobile-show {
	display: none;
}

.mobile-hide {
	display: block;
}

header .nav-menu.nav-menu--open .nav-copyright {
	opacity: 1;
	-webkit-transition-delay: 0.4s;
	-o-transition-delay: 0.4s;
	transition-delay: 0.4s;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

header .logo {
	position: absolute;
	display: block;
	z-index: 1000;
	top: 15px;
	left: 40px;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1em;
	text-transform: uppercase;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0px 0px 8px rgba(0, 0, 0, 0.6);
	color: #fff;
	height: 50px;
	width: auto;
	min-width: 100px;
	padding: 0 30px 0 0;
	overflow: visible;
	display: flex;
	align-items: center;
	justify-content: center;
}

header .logo-img {
	height: 100px;
	width: auto;
	display: block;
	filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 1)) 
	        drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.9));
}

header .logo:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: transparent;
	opacity: 0;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	z-index: -1;
}

header .logo span {
	position: relative;
	white-space: nowrap;
}

header .menu-button {
	position: absolute;
	display: inline-block;
	top: 20px;
	right: 40px;
	height: 50px;
	width: 50px;
	z-index: 1001;
	cursor: pointer;
	padding: 10px 8px;
}

header .menu-button:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #17a2b8;
	opacity: 1;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	z-index: -1;
}

header .menu-button span {
	display: block;
	position: absolute;
	height: 3px;
	width: 35px;
	background-color: #fff;
	left: 7.5px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6), 0px 0px 4px rgba(0, 0, 0, 0.4);
	-webkit-transition: -webkit-transform 300ms cubic-bezier(0.8, 0.5, 0.2, 1.4);
	transition: -webkit-transform 300ms cubic-bezier(0.8, 0.5, 0.2, 1.4);
	-o-transition: transform 300ms cubic-bezier(0.8, 0.5, 0.2, 1.4);
	transition: transform 300ms cubic-bezier(0.8, 0.5, 0.2, 1.4);
	transition: transform 300ms cubic-bezier(0.8, 0.5, 0.2, 1.4), -webkit-transform 300ms cubic-bezier(0.8, 0.5, 0.2, 1.4);
}

header .menu-button span:nth-child(1) {
	top: 12px;
	-webkit-transform-origin: 0px 0px;
	-ms-transform-origin: 0px 0px;
	transform-origin: 0px 0px;
}

header .menu-button span:nth-child(2) {
	top: 24px;
	right: 7.5px;
	width: 30px;
}

header .menu-button span:nth-child(3) {
	top: 36px;
	-webkit-transform-origin: 0% 100%;
	-ms-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
}

header .menu-button.menu-button--open span:nth-child(1) {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	left: 14px;
}

header .menu-button.menu-button--open span:nth-child(2) {
	opacity: 0;
}

header .menu-button.menu-button--open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	left: 14px;
}


/* Pages stack */

.pages-stack {
	position: relative;
	z-index: 100;
	pointer-events: none;
	-webkit-perspective: 1200px;
	perspective: 1200px;
	-webkit-perspective-origin: 50% -50%;
	perspective-origin: 50% -50%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
	transition: opacity 0.45s, transform 0.45s;
	-webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
	transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}

.pages-stack--open .page {
	cursor: pointer;
	-webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
	transition: opacity 0.45s, -webkit-transform 0.45s;
	-o-transition: transform 0.45s, opacity 0.45s;
	transition: transform 0.45s, opacity 0.45s;
	transition: transform 0.45s, opacity 0.45s, -webkit-transform 0.45s;
	-webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
	-o-transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
	transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
	-webkit-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
	box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
	opacity: 1 !important;
	display: block !important;
	visibility: visible !important;
}

.page {
	position: relative;
	z-index: 5;
	width: 100%;
	min-height: 100vh;
	pointer-events: auto;
	background: #000000;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
	transition: opacity 0.45s, transform 0.45s;
	-webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
	transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}

/* Navigation menu minimize effect */
.pages-stack {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	-webkit-transform: translate3d(0, 0, 0) scale(1);
	transition: opacity 0.45s, transform 0.45s;
	-webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
	transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
	-webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
	pointer-events: auto;
}

.pages-stack.pages-stack--open {
	opacity: 0.3;
	-webkit-transform: translate3d(0, 360px, -300px) scale(0.75);
	transform: translate3d(0, 360px, -300px) scale(0.75);
	-webkit-transform-origin: center top;
	transform-origin: center top;
	pointer-events: none;
}

.pages-stack.pages-stack--open .page {
	opacity: 0.3;
	-webkit-transform: translate3d(0, 360px, -300px) scale(0.75);
	transform: translate3d(0, 360px, -300px) scale(0.75);
	-webkit-transform-origin: center top;
	transform-origin: center top;
}

.pages-stack .page {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	-webkit-transform: translate3d(0, 0, 0) scale(1);
}

/* When the nav is open, the page-stack minimizes each .page with
   scale(0.75) from transform-origin top. The blog pages set their own
   min-height:100vh + overflow-y:auto, so the ELEMENT grows to the full
   (very tall) content height; scaled down it still overflows and overlays
   the nav copyright. Clamp them to one viewport while minimized so the
   shrunken card matches every other page and clears the copyright. */
.pages-stack--open #blog-index,
.pages-stack--open #blog-detail {
	height: 100vh !important;
	min-height: 100vh !important;
	max-height: 100vh !important;
	overflow: hidden !important;
}

/* Responsive adjustments for mobile */
@media screen and (max-width: 768px) {
	/* The nav menu is locked to height:47vh, which on mobile clips the
	   social icons + copyright out of view and crowds the links. Give
	   it the full screen height so links, social icons and copyright
	   all fit and space out properly. */
	header .nav-menu {
		height: 100vh !important;
		min-height: 100vh !important;
		padding: 90px 16px 28px !important;
		overflow-y: auto;
	}
	header .nav-menu.nav-menu--open {
		padding-top: 90px;
	}
	/* Keep the social icons visible on mobile */
	header .nav-menu .social-links {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center;
	}

	/* When the menu is OPEN the button becomes the X; move it to the
	   top-right corner so it never overlaps the centered nav links
	   (the closed hamburger stays centered under the logo, above). */
	header .menu-button.menu-button--open {
		top: 18px !important;
		right: 18px !important;
		left: auto !important;
		-webkit-transform: none !important;
		transform: none !important;
	}

	/* Slider headline: shrink + allow wrapping so long phrases don't
	   overflow / get cut off on the right or overlap on mobile. */
	.page.section-home .banner-text .animate-title {
		font-size: 20px !important;
		letter-spacing: 0 !important;
		line-height: 1.2 !important;
		white-space: normal !important;
		-webkit-flex-wrap: wrap !important;
		-ms-flex-wrap: wrap !important;
		flex-wrap: wrap !important;
		max-width: 88vw;
		word-break: break-word;
	}
	.text-slideshow .text-slide {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Make menu button background solid on mobile */
	header .logo:before {
		opacity: 0 !important;
		background-color: transparent !important;
	}

	/* Mobile: stack the header — logo centered at top, hamburger
	   centered directly beneath it. Desktop (>768px) is unaffected. */
	header .logo {
		left: 50% !important;
		right: auto !important;
		-webkit-transform: translateX(-50%) !important;
		transform: translateX(-50%) !important;
		text-align: center;
	}

	header .menu-button {
		top: 68px !important;
		left: 50% !important;
		right: auto !important;
		-webkit-transform: translateX(-50%) !important;
		transform: translateX(-50%) !important;
	}

	header .menu-button:before {
		opacity: 1 !important;
		background-color: #17a2b8 !important;
	}

	/* Push page content down on mobile so it clears the now taller
	   stacked header (centered logo + hamburger beneath it). */
	.page {
		padding-top: 130px;
	}

	/* Blog page has its own margin-top, so remove padding and reduce margin */
	#blog-index {
		padding-top: 0 !important;
	}

	#blog-index .blog-index-content {
		margin-top: 0 !important;
	}

	#blog-index .category-badge {
		padding: 120px 50px 40px !important;
	}

	/* Constrain resume images on mobile */
	.company-logo-inline,
	.company-logo-moon-whale,
	.company-logo-wide,
	.company-logo-team-normandy {
		width: 100% !important;
		max-width: 350px !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.company-logo-inline img,
	.company-logo-moon-whale img,
	.company-logo-wide img,
	.company-logo-team-normandy img {
		width: 100% !important;
		height: auto !important;
		max-height: 220px !important;
	}

	/* Make copyright text display on separate lines on mobile */
	header .nav-copyright p .mobile-break {
		display: block !important;
	}

	/* Show all mobile line breaks on mobile */
	.mobile-break {
		display: block !important;
	}

	/* Show mobile-only elements, hide desktop-only elements */
	.mobile-show {
		display: block !important;
	}

	.mobile-hide {
		display: none !important;
	}

	.pages-stack--open {
		-webkit-transform: translate3d(0, 250px, -300px) scale(0.7) !important;
		transform: translate3d(0, 250px, -300px) scale(0.7) !important;
	}

	/* Adjust stacked layers for tablet */
	.stacked-layer-1 {
		top: 280px !important;
		left: 12% !important;
		width: 76% !important;
		height: 50px !important;
	}

	.stacked-layer-2 {
		top: 235px !important;
		left: 14% !important;
		width: 72% !important;
		height: 50px !important;
	}
}

@media screen and (max-width: 480px) {
	.pages-stack--open {
		-webkit-transform: translate3d(0, 200px, -300px) scale(0.65) !important;
		transform: translate3d(0, 200px, -300px) scale(0.65) !important;
	}

	/* Adjust stacked layers for mobile */
	.stacked-layer-1 {
		top: 240px !important;
		left: 10% !important;
		width: 80% !important;
		height: 40px !important;
	}

	.stacked-layer-2 {
		top: 205px !important;
		left: 12% !important;
		width: 76% !important;
		height: 40px !important;
	}
}

.pages-stack--open a,
.pages-stack--open .portfolio-filter,
.pages-stack--open button {
	pointer-events: none;
	cursor: default;
}


/*======== 4. Home Section ========*/

[class*="letter"] {
	display: block;
	position: relative;
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	white-space: pre;
}


/* Text Slideshow */

.text-slideshow,
.text-slideshow .text-slide {
	position: relative;
	width: 100%;
	height: 100%;
}

.text-slideshow .text-slide {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.text-slideshow .text-slide:not(.text-slide--current) {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	opacity: 0;
}

/* Reserve a constant height (tall enough for the two-line stacked slides)
   so the container never collapses when a single-line slide is current. */
.text-slideshow,
.text-slideshow .text-slide {
	min-height: 150px;
}

.text-slideshow .text-slide {
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}

/* Stacked slide: anchor the FIRST line at the vertical center — the exact
   spot single-line slides occupy — so the plugin's cross-fade overlaps
   *aligned* text (a clean letter-swap, the look already accepted for
   single->single) instead of an offset collision. The second line flows
   directly below into otherwise-empty space. Transform percentages are
   relative to each line's own height, so this stays correct at every
   breakpoint/font-size. */
/* DESKTOP ONLY (>=769px). On mobile (<=768px) the slideshow uses the
   .text-slide-mobile-multiline column layout for ALL slides; applying
   this absolute positioning there fought that layout and reintroduced
   the single-line vs multi-line transition overlap. Scoping to desktop
   leaves desktop exactly as-is and lets mobile use the normal centered
   column flow consistently. */
@media screen and (min-width: 769px) {
	.text-slideshow .text-slide.text-slide-stacked {
		display: block;
	}

	.text-slideshow .text-slide.text-slide-stacked .animate-title {
		position: absolute;
		left: 0;
		right: 0;
		margin: 0;
		text-align: center;
		/* fx12 adds .letter-effect (display:flex) and this element is
		   full-width (left:0;right:0), so the letter spans must be
		   flex-centered or they pack to the left. */
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.text-slideshow .text-slide.text-slide-stacked .animate-title:first-child {
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.text-slideshow .text-slide.text-slide-stacked .animate-title:last-child {
		top: 50%;
		-webkit-transform: translateY(50%);
		-ms-transform: translateY(50%);
		transform: translateY(50%);
		-webkit-transition: opacity 0.4s ease;
		transition: opacity 0.4s ease;
	}
}

.letter-effect {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.page.section-home {
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	overflow: hidden;
}

.page.section-home:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #181818;
	opacity: .4;
	z-index: 0;
}

.page.section-home .banner-text {
	position: absolute;
	top: 50%;
	width: 100%;
	text-align: center;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.page.section-home .banner-text .profile-img {
    display: inline-block;
    margin-bottom: 30px;
}
.page.section-home .banner-text .profile-img img {
    width: 150px;
    height: 150px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 3px solid #dfdfdf;
}

.page.section-home .banner-text .animate-title {
	margin: auto;
	font-size: 62px;
	text-transform: uppercase;
	line-height: 100%;
	color: #fff;
	font-weight: 700;
	letter-spacing: 2px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0px 0px 8px rgba(0, 0, 0, 0.6);
}

.page.section-home .banner-text h4 {
	font-size: 42px;
	letter-spacing: 1px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 20px;
	font-family: "Open Sans", sans-serif;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0px 0px 8px rgba(0, 0, 0, 0.6);
}

.page.section-home #video-container {
	position: absolute !important;
	height: 100%;
	width: 100%;
	z-index: -1;
}

.page.section-home #particles-js {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.page.section-home .banner-slider {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}


/*======== 5. About Section ========*/

.section-about .about-img img {
	border: 10px solid rgba(255, 255, 255, 0.03);
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}

.section-about .about-info h3 {
	font-size: 26px;
	letter-spacing: 1px;
	font-weight: 600;
}

.section-about .about-info p {
	margin-bottom: 25px;
	line-height: 27px;
}

.section-about .about-info p strong {
	color: #e1e1e1;
}

.section-about .about-info .about-list li {
	margin-bottom: 10px;
}

.section-about .about-info .about-list li .title {
	position: relative;
	margin-right: 10px;
	padding-bottom: 1px;
	color: #a1a1a1;
	font-weight: 700;
}

.section-about .about-info .about-list li .title:before {
	content: "";
	position: absolute;
	height: 2px;
	width: 100%;
	bottom: 0;
	left: 0;
	background: #e1e1e1;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

.section-about .about-info .about-list li .title:after {
	position: absolute;
	content: ':';
	right: -8px;
}

.section-about .about-info .about-list li .value {
	position: relative;
}

.section-about .about-info .about-list li .value:before {
	content: "";
	position: absolute;
	height: 2px;
	width: 100%;
	bottom: 0;
	left: 0;
}

.section-about .services .service-item {
	text-align: center;
	padding: 0 10px;
	margin-bottom: 40px;
}

.section-about .services .service-item i {
	font-size: 40px;
	margin-bottom: 15px;
	color: #e1e1e1;
}

.section-about .services .service-item .title {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 15px;
}

.section-about .services .service-item p {
	font-size: 14px;
	margin-bottom: 0px;
}

.testimonials {
	margin-bottom: 100px;
}

.testimonials .testimonial-item {
	padding: 0px 15px 0px;
}

.testimonials .testimonial-item .description {
	background: #323338;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-size: 14px;
	font-style: italic;
	padding: 45px 35px;
	position: relative;
	-webkit-filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.2));
	filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.2));
}

.testimonials .testimonial-item .description p {
	margin-bottom: 0;
}

.testimonials .testimonial-item .description:before {
	content: "\f10d";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	top: 0;
	font-size: 30px;
	color: #e1e1e1;
}

.testimonials .testimonial-item .description:after {
	content: "";
	width: 27px;
	position: absolute;
	bottom: -13px;
	border-top: 13px solid #353539;
	border-left: 13px solid transparent;
	border-right: 13px solid transparent;
}

.testimonials .testimonial-item .testimonial-review {
	padding-top: 24px;
}

.testimonials .testimonial-item .testimonial-review img {
	-webkit-border-radius: 50%;
	border-radius: 50%;
	float: left;
	width: 60px;
	height: 60px;
	margin-left: 20px;
	margin-right: 20px;
}

.testimonials .testimonial-item .testimonial-review .testimonial-title {
	font-size: 18px;
	font-weight: 600;
	margin-top: 7px;
	float: left;
	text-transform: capitalize;
}

.testimonials .testimonial-item .testimonial-review .testimonial-title small {
	display: block;
	font-size: 16px;
	margin-top: 3px;
}

.testimonials .testimonial-item .testimonial-review .rating {
	padding: 0;
	list-style: none;
	text-align: right;
}

.testimonials .testimonial-item .testimonial-review .rating li {
	display: inline-block;
	color: #e1e1e1;
}

.clients .client-logo {
	border: 2px solid rgba(255, 255, 255, 0.03);
	padding: 10px;
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
}

.clients .client-logo:hover {
	border-color: rgba(255, 255, 255, 0.7);
}

.clients .client-logo:hover img {
	opacity: 1;
}

.clients .client-logo img {
	width: 100px;
	height: 100px;
	margin: auto;
	opacity: .5;
	-webkit-transition: opacity .4s ease;
	-o-transition: opacity .4s ease;
	transition: opacity .4s ease;
}


/*======== 6. Resume Section ========*/

.page.section-resume {
	min-height: auto;
	padding-bottom: 30px;
	padding-left: 70px;
}

.section-resume .container {
	max-width: 785px;
	margin-left: auto;
	margin-right: auto;
}

.section-resume .experience,
.section-resume .education,
.section-resume .skills,
.section-resume .online {
	border-left: 4px solid #e1e1e1;
	-webkit-border-bottom-right-radius: 4px;
	border-bottom-right-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	border-top-right-radius: 4px;
	background: rgba(255, 255, 255, 0.08);
	color: #e1e1e1;
	position: relative;
	padding: 50px;
	list-style: none;
	text-align: left;
	font-weight: 100;
	max-width: 100%;
	margin: 0 0 50px 0;
	-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}


.company-location {
	margin-top: 5px;
	margin-bottom: 15px;
}

.company-logo-inline {
	margin: 15px 0;
	width: 650px !important;
	height: 265px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

.company-logo-inline img {
	width: 100% !important;
	height: 100% !important;
	display: block;
	border-radius: 15px;
	border: 3px solid rgba(255, 255, 255, 0.1);
	object-fit: cover !important;
}

.company-logo-moon-whale {
	width: 650px !important;
	height: 265px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

.company-logo-moon-whale img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.company-logo-wide {
	width: 650px !important;
	height: 400px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

.company-logo-wide img {
	width: 100% !important;
	height: 100% !important;
	border-radius: 15px;
	object-fit: cover !important;
}

.company-logo-team-normandy {
	width: 650px !important;
	height: 265px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

.company-logo-team-normandy img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.company-logo-white-bg {
	background: #ffffff;
	padding: 15px;
	border-radius: 15px;
	display: inline-block;
}

.timeline-links {
	margin-top: 15px;
}

.timeline-links a {
	color: #17a2b8;
	transition: all 0.3s ease;
}

.timeline-links a:hover {
	color: #FFFFFF;
	text-shadow:
		0 0 20px rgba(23, 162, 184, 0.8),
		0 0 40px rgba(23, 162, 184, 0.6);
	text-decoration: underline;
}

.timeline-links p {
	margin-bottom: 5px;
}

.timeline-links p:last-child {
	margin-bottom: 0;
}

.timeline-links i {
	margin-right: 8px;
	color: #17a2b8;
}

/* Utility Classes */
.text-center {
	text-align: center;
}

.mb-0 {
	margin-bottom: 0;
}

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

.mt-15 {
	margin-top: 15px;
}

.mt-50 {
	margin-top: 50px;
}

.mr-8 {
	margin-right: 8px;
}

.mr-15 {
	margin-right: 15px;
}

.d-inline-block {
	display: inline-block;
}

.flex-1 {
	flex: 1;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.flex-wrap {
	display: flex;
	flex-wrap: wrap;
}

.color-cyan {
	color: #17a2b8;
}

.font-size-28 {
	font-size: 28px;
}

/* Online Section Styles */
.online-link {
	color: #9B30FF;
}

.online .event h4,
.online .event p {
	display: inline-block;
	margin-bottom: 0;
}

.online .event h4 {
	margin-right: 15px;
}

.online .event h4 i {
	font-size: 28px;
}

/* Ad Slot Styles */
.ad-slot {
	margin-bottom: 30px;
	padding: 0;
}

.ad-medium-rectangle {
	width: 300px;
	height: 250px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ad-half-page {
	width: 300px;
	height: 600px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ad-content {
	text-align: center;
	margin: 0;
	padding: 0;
}

.ad-content h3 {
	margin: 0 0 10px 0;
}

.ad-content p {
	margin: 5px 0;
}

.ad-content p.ad-size {
	font-size: 14px;
}

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

.p-0 {
	padding: 0;
}

.m-0 {
	margin: 0;
}

.mt-10 {
	margin-top: 10px;
}

.m-5 {
	margin: 5px 0;
}

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

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

/* Admin-specific utility classes */
.d-none {
	display: none;
}

.d-block {
	display: block;
}

.max-height-150 {
	max-height: 150px;
}

.max-height-200 {
	max-height: 200px;
}

.height-150 {
	height: 150px;
}

.height-40 {
	height: 40px;
}

.object-fit-cover {
	object-fit: cover;
}

.border-radius-4 {
	border-radius: 4px;
}

.border-1-ddd {
	border: 1px solid #ddd;
}

.font-size-12 {
	font-size: 12px;
}

.img-preview {
	max-height: 150px;
}

.img-preview-large {
	max-height: 200px;
}

.theme-preview {
	height: 40px;
	border-radius: 4px;
	border: 1px solid #ddd;
}

.gallery-image {
	height: 150px;
	object-fit: cover;
}

.main-checkbox-label {
	font-size: 12px;
}

/* Blog index table styles */
.table-img-thumb {
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: 4px;
}

.table-img-placeholder {
	width: 50px;
	height: 50px;
	background: #e9ecef;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.width-60 {
	width: 60px;
}

.width-200 {
	width: 200px;
}

.width-150 {
	width: 150px;
}

.width-60-max {
	max-width: 60px;
}

/* Theme color preview styles */
.theme-color-swatch {
	width: 30px;
	height: 30px;
	border: 1px solid #ddd;
	border-radius: 4px;
	margin-right: 8px;
}

.theme-preview-large {
	width: 100%;
	height: 100px;
	border: 1px solid #ddd;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	text-shadow: 0 0 10px rgba(0,0,0,0.5);
	font-weight: bold;
}

/* Icon color utility */
.icon-primary-color {
	color: var(--primary-color);
}

.section-resume .experience h4,
.section-resume .education h4,
.section-resume .skills h4,
.section-resume .online h4 {
	font-weight: 600;
	letter-spacing: .5px;
	font-size: 20px;
	text-transform: uppercase;
}

.section-resume .experience h5,
.section-resume .education h5,
.section-resume .skills h5,
.section-resume .online h5 {
	font-size: 14px;
	font-weight: 600;
	margin-top: 10px;
	margin-bottom: 10px;
	text-transform: uppercase;
	color: #e1e1e1;
}

.section-resume .experience h5 .date,
.section-resume .education h5 .date,
.section-resume .skills h5 .date,
.section-resume .online h5 .date {
	margin-right: 5px;
	padding-right: 10px;
}

.section-resume .experience p,
.section-resume .education p,
.section-resume .skills p,
.section-resume .online p,
.section-resume .experience li,
.section-resume .education li {
	margin-bottom: 0;
	font-size: 16px;
	text-align: justify;
}

.section-resume .experience .event,
.section-resume .education .event,
.section-resume .skills .event,
.section-resume .online .event {
	border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
	padding-bottom: 25px;
	margin-bottom: 25px;
	position: relative;
}

.section-resume .experience .event:last-of-type,
.section-resume .education .event:last-of-type,
.section-resume .skills .event:last-of-type,
.section-resume .online .event:last-of-type {
	padding-bottom: 0;
	margin-bottom: 0;
	border: none;
}

.section-resume .experience .event:after,
.section-resume .education .event:after,
.section-resume .skills .event:after,
.section-resume .online .event:after {
	position: absolute;
	display: block;
	top: 0;
}

.section-resume .experience .event:after,
.section-resume .education .event:after,
.section-resume .skills .event:after,
.section-resume .online .event:after {
	-webkit-box-shadow: 0 0 0 4px #e1e1e1;
	box-shadow: 0 0 0 4px #e1e1e1;
	left: -57.85px;
	background: #313534;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	height: 11px;
	width: 11px;
	content: "";
	top: 5px;
}

.section-resume .skills {
	margin-bottom: 20px;
}

.section-resume .row.flex-wrap {
	margin-bottom: 50px;
}

.section-resume .impact-line {
	color: #39ff14;
	font-weight: bold;
}

.section-resume .impact-line .impact-label {
	text-transform: uppercase;
}

.section-resume .experience .event ul,
.section-resume .education .event ul {
	list-style: disc !important;
	padding-left: 30px;
	margin: 10px 0;
}

.section-resume .experience .event ul li,
.section-resume .education .event ul li {
	list-style: disc !important;
	margin-bottom: 6px;
}

.section-resume .skills .skill-item {
	padding: 0 20px;
	margin-bottom: 30px;
}

.section-resume .skills .skill-item .progress-title {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.section-resume .skills .skill-item .progress {
	height: 5px;
	background-color: rgba(255, 255, 255, 0.03);
	overflow: visible;
}

.section-resume .skills .skill-item .progress .progress-bar {
	background-color: #e1e1e1;
	height: 100%;
	position: relative;
}

.section-resume .skills .skill-item .progress .progress-bar:after {
	position: absolute;
	content: "";
	padding: 5px;
	border: 4px solid #e1e1e1;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	right: 0;
	top: -7px;
	background-color: #2a2b30;
}

.section-resume .skills .skill-item .progress .progress-bar .progress-value {
	position: absolute;
	right: -8px;
	font-size: 14px;
	top: -30px;
	font-weight: 600;
}


/*======== 7. Portfolio Section ========*/

.page.section-portfolio {
	min-height: auto;
}

.section-portfolio .portfolio-filter {
	margin-bottom: 40px;
}

.section-portfolio .portfolio-filter ul {
	text-align: center;
	margin-bottom: 0px;
}

.section-portfolio .portfolio-filter ul li {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	cursor: pointer;
	position: relative;
	padding: 10px 25px;
	text-transform: uppercase;
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}

.section-portfolio .portfolio-filter ul li.active {
	background-color: #e1e1e1;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	-webkit-box-shadow: 0px 10px 30px -4px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 10px 30px -4px rgba(0, 0, 0, 0.2);
	color: #000;
}

.section-portfolio .portfolio-items .item figure {
	position: relative;
	text-align: center;
	cursor: pointer;
	background: #e1e1e1;
	margin-bottom: 20px;
	overflow: hidden;
}

.section-portfolio .portfolio-items .item figure img {
	opacity: 1;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, -webkit-transform 0.35s;
	-o-transition: opacity 0.35s, transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	width: 100%;
	height: 100%;
}

.section-portfolio .portfolio-items .item figure figcaption {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 24px;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.section-portfolio .portfolio-items .item figure figcaption a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.section-portfolio .portfolio-items .item figure figcaption:before {
	position: absolute;
	top: -10%;
	left: -10%;
	width: 120%;
	height: 120%;
	content: '';
	-webkit-transition: -webkit-transform 0.6s;
	transition: -webkit-transform 0.6s;
	-o-transition: transform 0.6s;
	transition: transform 0.6s;
	transition: transform 0.6s, -webkit-transform 0.6s;
	-webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0);
	transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0);
	background-color: rgba(255, 255, 255, 0.5);
}

.section-portfolio .portfolio-items .item figure figcaption h3 {
	text-align: left;
	opacity: 0;
	-webkit-transition: opacity 0.35s;
	-o-transition: opacity 0.35s;
	transition: opacity 0.35s;
	font-size: 20px;
	font-weight: 700;
}

.section-portfolio .portfolio-items .item figure figcaption p {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 18px;
	font-size: 14px;
	padding: 0 10px;
	-webkit-transform: translateX(200%);
	-ms-transform: translateX(200%);
	transform: translateX(200%);
	border-right: 4px solid #fff;
	text-align: right;
	opacity: 0;
	-webkit-transition: all 0.35s;
	-o-transition: all 0.35s;
	transition: all 0.35s;
}

.section-portfolio .portfolio-items .item figure figcaption i {
	position: absolute;
	left: 0px;
	-webkit-transform: translateX(-200%);
	-ms-transform: translateX(-200%);
	transform: translateX(-200%);
	margin: 18px;
	font-size: 24px;
	opacity: 0;
	bottom: 0;
	-webkit-transition: all 0.35s;
	-o-transition: all 0.35s;
	transition: all 0.35s;
}

.section-portfolio .portfolio-items .item figure:hover img {
	opacity: 0.25;
	-webkit-transform: scale3d(1.05, 1.05, 1);
	transform: scale3d(1.05, 1.05, 1);
}

.section-portfolio .portfolio-items .item figure:hover figcaption:before {
	-webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 130%, 0);
	transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 130%, 0);
}

.section-portfolio .portfolio-items .item figure:hover h3 {
	opacity: 1;
	-webkit-transition-delay: 0.1s;
	-o-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.section-portfolio .portfolio-items .item figure:hover p {
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
}

.section-portfolio .portfolio-items .item figure:hover i {
	opacity: 1;
	-webkit-transform: translateX(0%);
	-ms-transform: translateX(0%);
	transform: translateX(0%);
}


/*======== 8. Blogs Section ========*/

.section-blog .blog-item {
	display: block;
	margin-bottom: 50px;
	margin-top: 30px;
	background-color: rgba(255, 255, 255, 0.03);
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
	text-align: center;
	color: #e1e1e1;
}

.section-blog .blog-item:hover .title {
	text-decoration: underline !important;
}

.section-blog .blog-item .post-img {
	width: 80%;
	margin: 0 auto;
	position: relative;
	top: -30px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	overflow: hidden;
	-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}

.section-blog .blog-item .post-content {
	position: relative;
	top: -20px;
	padding: 0 20px;
}

.section-blog .blog-item .post-content .cat {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	color: #e1e1e1;
}

.section-blog .blog-item .post-content .title {
	font-size: 24px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.section-blog .blog-item .post-content .meta .date {
	font-size: 14px;
	color: #7b7b7b;
}


/*======== 9. Contact Section ========*/

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

.section-contact .contact-detail h3 {
	font-size: 32px;
	font-weight: 500;
}

.section-contact .contact-detail p {
	margin-bottom: 10px;
}

.section-contact .contact-detail .contact-info li {
	margin-bottom: 10px;
}

.section-contact .contact-detail .contact-info li .title {
	display: block;
	font-size: 18px;
	font-weight: 800;
	display: inline-block;
	position: relative;
}

.section-contact .contact-detail .contact-info li .title:before {
	content: "";
	position: absolute;
	height: 2px;
	width: 100%;
	bottom: 0;
	left: 0%;
	background: #e1e1e1;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

.section-contact .contact-detail .contact-info li .value {
	display: block;
	font-size: 14px;
}

.section-contact .contact-detail .social-media h4 {
	font-size: 18px;
	font-weight: 800;
	position: relative;
	font-family: "Open Sans", sans-serif;
	line-height: 1.5em;
	display: inline-block;
}

.section-contact .contact-detail .social-media h4:before {
	content: "";
	position: absolute;
	height: 2px;
	width: 100%;
	bottom: 0;
	left: 0;
	background: #e1e1e1;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

.section-contact .contact-detail .social-media .social-media-icons {
	margin-top: 5px;
}

.section-contact .contact-detail .social-media .social-media-icons a {
	display: inline-block;
	margin: 0 10px;
	font-size: 24px;
	color: #a1a1a1;
}

.section-contact .contact-detail .social-media .social-media-icons a:hover {
	color: #e1e1e1;
}

.section-contact .google-map {
	margin-top: 50px;
	margin-bottom: 50px;
}

.section-contact .google-map #map {
	height: 400px;
}

.section-contact .social-links {
	margin-top: 12px;
}

.section-contact .social-links .social-link {
	text-decoration: none;
}

.section-contact .social-links .social-link {
	font-size: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	margin-left: 6px;
	margin-right: 6px;
	color: #17a2b8;
	border: 1px solid rgba(23, 162, 184, 0.6);
	background: rgba(23, 162, 184, 0.08);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.section-contact .social-links .social-link:hover {
	background-color: #17a2b8;
	border-color: #17a2b8;
	color: #0d0e10;
	text-decoration: none;
}

.section-contact .contact-form .btn-primary {
	background-color: #17a2b8;
	border-color: #17a2b8;
}

.section-contact .contact-form .btn-primary:hover,
.section-contact .contact-form .btn-primary:focus {
	background-color: #138496;
	border-color: #138496;
}

.sound-toggle-btn {
	position: fixed;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	color: #000;
	padding: 15px 25px;
	border: 2px solid #17a2b8;
	border-radius: 50px;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0 0 20px rgba(23, 162, 184, 0.5), 2px 2px 8px rgba(0, 0, 0, 0.6);
	transition: all 0.3s ease;
	background-color: #17a2b8;
	border-color: #17a2b8;
}

.sound-toggle-btn:hover,
.sound-toggle-btn:focus {
	background-color: #138496;
	border-color: #138496;
}

body.nav-open .grid-background {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}


/*======== 10. Blog Page Css ========*/

header .back-button {
	position: absolute;
	display: inline-block;
	top: 20px;
	right: 20px;
	height: 50px;
	width: 50px;
	z-index: 1000;
	cursor: pointer;
	padding: 10px 8px;
	color: #fff;
}

header .back-button:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #e1e1e1;
	opacity: .6;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	z-index: -1;
}

header .back-button i {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-size: 30px;
}

.single-blog {
	background-color: #2a2b30;
	position: relative;
	overflow-y: scroll;
	height: 100%;
}

.single-blog .blog-category {
	text-align: center;
}

.single-blog .blog-category li {
	display: inline-block;
	position: relative;
	border-right: 2px solid #e1e1e1;
	padding-right: 10px;
	padding-left: 5px;
}

.single-blog .blog-category li:last-child {
	border: none;
	padding-right: 0px;
}

.single-blog .blog-category li a {
	display: inline-block;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
	font-size: 14px;
	color: #e1e1e1;
}

.single-blog .blog-meta {
	font-size: 14px;
	color: #a1a1a1;
	font-weight: 600;
}


/*======== 11. Mobile Responsive Css ========*/

@media screen and (max-width: 991px) {
	.section-home .banner-text .text-slideshow .animate-title {
		font-size: 58px;
	}
	.section-about .about-img {
		margin-bottom: 40px;
	}
	.section-contact .contact-detail {
		margin-bottom: 40px;
	}
}

@media screen and (max-width: 700px) {
	header .nav-menu .nav-menu--link {
		margin-left: 8px;
		margin-right: 8px;
	}
	header .social-links,
	header .copy {
		display: none;
	}
	.section-home .banner-text h4 {
		font-size: 36px !important;
	}
	.section-home .banner-text .text-slideshow .animate-title {
		font-size: 50px;
	}
}

@media screen and (max-width: 620px) {
	header .nav-menu .nav-menu--link {
		display: block;
		margin-bottom: 15px;
	}
	header .nav-menu .nav-menu--link span {
		font-size: 14px;
	}
	header .nav-menu .nav-menu--link i {
		display: none;
	}
	header .nav-menu .social-links,
	header .nav-menu .copy {
		display: none;
	}
}

@media screen and (max-width: 600px) {
	.section-home .banner-text .text-slideshow .animate-title {
		font-size: 46px;
	}
}

@media screen and (max-width: 550px) {
	.section-home .banner-text h4 {
		font-size: 28px !important;
	}
	.section-home .banner-text .text-slideshow .animate-title {
		font-size: 36px;
	}
	.section-about .client-logo {
		margin: 0 10px;
	}
}

@media screen and (max-width: 480px) {
	.page-heading h2:before {
		font-size: 52px;
	}
	.sub-heading h3:before,
	.sub-heading h3:after {
		width: 60px;
	}
	.section-resume .education,
	.section-resume .experience {
		padding-left: 25px;
		padding-right: 25px;
	}
	.section-resume .education .event:after,
	.section-resume .experience .event:after {
		left: -32.85px;
	}
}

@media screen and (max-height: 350px) {
	header .copy {
		display: none;
	}
}

@media screen and (min-width: 701px) and (max-height: 400px) {
	header .copy,
	header .social-links {
		display: none;
	}
}

@media screen and (max-width: 700px) and (max-height: 400px) {
	header .nav-menu {
		display: block;
		min-height: 30vh;
		overflow-y: scroll;
	}
}

/* Short viewports (phone landscape / short windows): the home banner is
   vertically centered and ~420px+ tall (150px photo + 42px name + 150px
   slideshow @62px). On a ~390px landscape height it overflowed and
   overlapped the header and the Audio button. Scale it down to fit.
   Scoped to max-height so it can never affect desktop or normal portrait. */
@media screen and (max-height: 500px) {
	.page.section-home .banner-text {
		top: 50%;
		padding: 8px 0;
	}
	.page.section-home .banner-text .profile-img {
		margin-bottom: 8px;
	}
	.page.section-home .banner-text .profile-img img {
		width: 64px;
		height: 64px;
		border-width: 2px;
	}
	.page.section-home .banner-text h4 {
		font-size: 18px;
		margin-bottom: 4px;
	}
	.page.section-home .banner-text .animate-title {
		font-size: 20px;
		letter-spacing: 1px;
	}
	.text-slideshow,
	.text-slideshow .text-slide {
		min-height: 48px !important;
	}
	.section-home .sound-toggle-btn {
		bottom: 8px;
	}
}

/* Hide the YouTube background video on mobile (phone widths) and on
   short/landscape viewports. !important overrides the inline styles the
   YTPlayer plugin sets on #video-container. The .page black background
   shows instead. */
@media (max-width: 768px), screen and (max-height: 500px) {
	.page.section-home #video-container {
		display: none !important;
	}
}

/* ── Amazon Affiliate Card ───────────────────────────────────────────────── */
.amazon-affiliate-card {
    margin-top: 20px;
    padding: 18px 16px;
    background: rgba(255, 153, 0, 0.06);
    border: 1px solid rgba(255, 153, 0, 0.25);
    border-radius: 8px;
}

.amazon-affiliate-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.amazon-affiliate-card__header span {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #a0aab8;
}

.amazon-affiliate-card p {
    font-size: 13px;
    color: #8a95a3;
    margin: 0 0 14px;
    line-height: 1.5;
    text-align: left;
}

.amazon-affiliate-card__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.amazon-btn {
    display: block;
    padding: 9px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: filter 150ms ease, transform 150ms ease;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

.amazon-btn--primary {
    background: #FF9900;
    border-color: #FF9900;
    color: #111;
    font-weight: 700;
}

.amazon-btn:hover,
.amazon-btn:focus-visible {
    filter: brightness(1.15);
    transform: translateY(-1px);
    color: #fff;
}

.amazon-btn--primary:hover,
.amazon-btn--primary:focus-visible {
    color: #111;
}

/* ── Affiliate Banner (top of blog pages) ───────────────────────────────── */
.affiliate-banner-wrap {
    padding: 0 40px;
    margin-bottom: 24px;
}

#blog-detail .affiliate-banner-wrap {
    margin-top: 240px;
}

#blog-index .affiliate-banner-wrap {
    padding-top: 70px;
}

.affiliate-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 20px;
    background: rgba(255, 153, 0, 0.06);
    border: 1px solid rgba(255, 153, 0, 0.25);
    border-radius: 8px;
    flex-wrap: wrap;
}

.affiliate-banner__logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.amazon-mark {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.amazon-mark__word {
    font-family: "Arial", "Helvetica Neue", Helvetica, sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.amazon-mark__swoosh {
    display: block;
    width: 78px;
    height: auto;
    margin-top: 4px;
}

.affiliate-banner__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
}

.affiliate-banner__headline {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #e0e0e0;
}

.affiliate-banner__sub {
    font-size: 12px;
    color: #8a95a3;
}

.affiliate-banner__links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.affiliate-banner__btn {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e0e0e0;
    transition: filter 150ms ease, transform 150ms ease;
    white-space: nowrap;
}

.affiliate-banner__btn--primary {
    background: #FF9900;
    border-color: #FF9900;
    color: #111;
    font-weight: 700;
}

.affiliate-banner__btn:hover,
.affiliate-banner__btn:focus-visible {
    filter: brightness(1.2);
    transform: translateY(-1px);
    color: #fff;
}

.affiliate-banner__btn--primary:hover,
.affiliate-banner__btn--primary:focus-visible {
    color: #111;
}

@media (max-width: 768px) {
    .affiliate-banner-wrap {
        padding: 0 20px;
    }
    .affiliate-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}