/* 
Theme Name: Portfolio
Theme URI: https://josedone.com
Description: Twenty Twenty One Child Theme for Portfolio
Author: Jose Done 
Author url: https://josedone.com
Template: twentytwentyone
Version: 2.0
*/ 

/* Layout */
html {
	overflow-x: hidden;
	font-size: clamp(6px, calc(100vw / 192), 10px) !important;
	/*font-size: 62.5%;  = 10px */
}

body .elementor-widget-shortcode {
  width: 100% !important;
}

.uk-container {
    width: 150.4rem;
    max-width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
	line-height: inherit;
}

html,
body,
div,
p,
span,
a {
  font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	line-height: inherit;
}

strong, b {
    font-weight: 500 !important;
}

.pageHeader.uk-section {
    background-image: url('/wp-content/uploads/2025/09/home-bg.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    padding: 20rem 0 15rem 0;
}

.pageTitle {
	font-size: 6rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: #000000;
	margin-bottom: 2rem !important;
}

.pageTitle + .pageContent {
    color: var(--e-global-color-text);
	justify-content: center;
}

.pageTitle + .pageContent p {
	font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.05em !important;
	text-align: center !important;
}

.pageTitle + p {
    font-size: 1.8rem;
    line-height: 1.5em;
    font-weight: 400;
    color: var(--e-global-color-text);
}

.elementor-element h1.elementor-heading-title span {
    background: linear-gradient(15deg, var(--e-global-color-d65d7e0) 0%,  var(--e-global-color-primary) 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* button */
.elementor-button {
	fill: var(--e-global-color-f79b015) !important;
}

.elementor-button:hover {
	fill: var(--e-global-color-primary) !important;
}

/* Scroll Down */

div#scrollDown svg g {
    fill: var(--e-global-color-primary) !important;
}

/* Dark Mode Selector*/

input.darkModeSwitch[type=checkbox] {
height: 0;
width: 0;
visibility: hidden;
display: none;
margin: 0px;
}

input.darkModeSwitch[type=checkbox] + label {
cursor: pointer;
width: 65px;
height: 36px;
background: transparent;
border: 1px solid var(--e-global-color-primary);
display: block;
border-radius: 100px;
position: relative;
margin: 0px;
}

input.darkModeSwitch[type=checkbox] + label:after {
  content: "\f186";
  font-family: "Font Awesome 5 Free";
  color: var(--e-global-color-f79b015);
  font-size: 15px;
  line-height: 30px;
  position: absolute;
  top: 2px;
  left: 2px;
  width: 30px;
  height: 30px;
  background: var(--e-global-color-primary);
  border-radius: 90px;
  transition: 0.3s;
  text-align: center;
  vertical-align: middle;
}

input.darkModeSwitch[type=checkbox]:checked + label {
  background: transparent;
}

input.darkModeSwitch[type=checkbox]:checked + label:after {
  content: "\f185";
  font-family: "Font Awesome 5 Free";
  left: calc(100% - 3px);
  transform: translateX(-100%);
}

input.darkModeSwitch[type=checkbox] + label:active:after {
  width: 59px;
}

/* Header */
header,
header .header {
    transition: all 0.3s ease-in-out 0s;
    z-index: 99 !important;
}

header div:not(.elementor-sticky.elementor-sticky--active) .header {
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0) !important;
    border-color: rgba(0,0,0,0) !important;
    background-color: transparent !important;
}

header div.elementor-sticky.elementor-sticky--active .header {
    margin-top: 1rem !important;
    padding: 1rem;
    z-index: 99 !important;
    border-color: #AAAAAA1A !important;
}

body:not(.is-dark-theme) header div.elementor-sticky.elementor-sticky--active .header {
    box-shadow: 0px 0px 20px 0px rgba(53,147,217,0.3) !important;
    background-color: #FFFFFF80 !important;
}

body.is-dark-theme header div.elementor-sticky.elementor-sticky--active .header {
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3) !important;
}


.logo img {
	transition: all 0.3s ease-in-out 0s;
}

header div.elementor-sticky.elementor-sticky--active .header .logo img {
	width: 6rem !important;
}

/* Home */

.programming-box .programming-box-bg img {
  animation: rotate 15s infinite linear 0s !important;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg) ;
  }
}


.programming-box > div[class*="-icon"]{
  animation: levitate 3s ease-in-out infinite alternate 0s;
}

.programming-box .php-icon {
  animation-delay: 1s !important;
}
.programming-box .js-icon {
  animation-delay: 1.5s !important;
}
.programming-box .node-icon {
  animation-delay: 2s !important;
}
.programming-box .angular-icon {
  animation-delay: 2.5s !important;
}
.programming-box .react-icon {
  animation-delay: 3s !important;
}
.programming-box .dotnet-icon {
  animation-delay: 3.5s !important;
}


@keyframes levitate {
  0% {
    transform: translateY(0) rotateZ(0deg) rotateY(0deg);
  }
  100% {
    transform: translateY(-60px) rotateZ(15deg) rotateY(-15deg);
  }
}

/* Projects */

.uk-card {
    border-radius: 2rem;
    background: transparent;
    border: 1px solid var(--e-global-color-f79b015);
    transition: all 0.3s ease-in-out 0s;
}

body.is-dark-theme .uk-card {
     border-color: var(--e-global-color-acb3d44);
}

.uk-card .uk-card-body,
.uk-card .uk-card-footer {
    padding: 2rem;
}

.uk-card-default .uk-card-footer {
    border-color: var(--e-global-color-acb3d44);
}

.uk-card:hover {
    border-color: var(--e-global-color-primary) !important;
    --border-color: var(--e-global-color-primary);
    box-shadow: 0px 0px 10px 0px color-mix(in srgb, var(--e-global-color-primary), transparent 50%);
}

.uk-card:hover .uk-card-footer {
    border-color: var(--e-global-color-primary);
}

.uk-text-meta
 {
    font-size: 1.4rem;
    line-height: 1.5em;
    color: #999;
}

body .uk-card .uk-card-title {
    color: var(--e-global-color-ad29073);
    font-size: 2.2rem;
    line-height: 1.5em;
    font-weight: 600;
    margin: 1rem 0 !important;
}

.uk-card-media-top {
	border-radius: 2rem;
}
.project .uk-card-media-top {
    padding: 2rem;
    background: linear-gradient(15deg, var(--e-global-color-d65d7e0) 0%, var(--e-global-color-primary) 75%);
    height: 26rem;
}

.project .uk-card-media-top img {
    border-radius: 1rem;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.project.uk-card .uk-card-media-top img {
    transition: all 0.3s ease-in-out 0s;
}
.project.uk-card:hover .uk-card-media-top img {
    transform: translateY(-1rem) scale(1.2);
    box-shadow: 0px 0px 20px 0px color-mix(in srgb, var(--e-global-color-primary), transparent 50%);
} 

.certificate .uk-card-media-top {
	overflow: hidden;
}

.certificate .uk-card-media-top img {
	width: 100%;
	max-width: 100%;
	height: 29rem;
	object-fit: cover;
}

.uk-label {
    padding: 0.25rem 1rem;
    background: var(--e-global-color-primary) !important;
    font-size: 1.2rem;
    color: var(--e-global-color-f79b015) !important;
    border-radius: 0.5rem;
}

.uk-button {
    text-transform: uppercase;
    color: var(--e-global-color-f79b015) !important;
    font-weight: 600;
    font-size: 1.4rem;
	border-radius: 5rem;
}

.uk-button.uk-button-primary, body .elementor-element .elementor-button {
    background-color: var(--e-global-color-primary);
    box-shadow: 0px 5px 10px 0px color-mix(in srgb, var(--e-global-color-primary), transparent 50%);
    border: 1px solid var(--e-global-color-primary);
}

.uk-button.uk-button-primary:hover, body .elementor-element .elementor-button:hover {
    background-color: transparent;
	box-shadow: 0px 0px 10px 0px color-mix(in srgb, var(--e-global-color-primary), transparent 50%);
    color: var(--e-global-color-primary) !important;
}


/* Pagination */

.page-numbers.current {
    color: var(--e-global-color-primary) !important;
}

.page-numbers {
    font-size: 2rem;
    padding: 1rem;
}

/* Dark mode */

button#dark-mode-toggler {
    display: none;
}

body {
    transition: all 0.3s ease-in-out 0s;
}

body.is-dark-theme {
    background-color: var(--e-global-color-ad29073) !important;
    color: var(--e-global-color-acb3d44);
}

body.is-dark-theme div,
body.is-dark-theme p {
    color: var(--e-global-color-acb3d44);
}

body.is-dark-theme .elementor-element:not(.ignore) > div > .elementor-heading-title,
body.is-dark-theme .uk-card .uk-card-title {
    color: var(--e-global-color-f79b015);
}

body.is-dark-theme .elementor-element:not(.ignore) .elementor-kit-6 button, 
body.is-dark-theme .elementor-element:not(.ignore) .elementor-kit-6 input[type="button"], 
body.is-dark-theme .elementor-element:not(.ignore) .elementor-kit-6 input[type="submit"], 
body.is-dark-theme .elementor-element:not(.ignore) .elementor-kit-6 .elementor-button {
    box-shadow: 0px 0px 10px 0px rgb(98 228 182 / 40%) !important;
}

body.is-dark-theme section.elementor-element.e-parent:not(.gradient):not(.ignore) {
    background: var(--e-global-color-ad29073) !important;
}

body.is-dark-theme section.elementor-element.e-parent.gradient:not(.ignore) {
    background-color: transparent !important;
    background-image: linear-gradient(180deg, #FFFFFF00 0%, var(--e-global-color-ad29073) 20%); !important;
}


body.is-dark-theme header .elementor-widget-nav-menu .elementor-nav-menu--main li:not(.current-menu-item):not(:hover):not(:focus) .elementor-item {
	color: var(--e-global-color-acb3d44);
}

body.is-dark-theme  .elementor-element-75d0d84 img.swiper-slide-image {
    filter: grayscale(1) brightness(1.5);
}