/* @KEYFRAMES*/
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.tags-container {overflow: hidden;position: relative;max-width: 1400px;margin: 0 auto;white-space: nowrap;}
.tags-slide-content {display: flex;gap: 2rem;animation: slide 20s linear infinite;will-change: transform;}
.tags-slide-content li {flex: 0 0 auto;list-style: none;transition: transform 0.3s ease-in-out;}
.tags-slide-content li figure:hover {transform: scale(1.25);cursor:pointer;}
.tags-container:hover .tags-slide-content {animation-play-state: paused;}
.tags-slide-content li figure {
  width: 80px;
  height: 80px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  font-size: 1.2rem;}

.tags-container::before, .tags-container::after {content: "";position: absolute;height: 100%;width: 4rem;z-index: 2;} */
.tags-container::before {top:0;left: 0;background: linear-gradient(to left, transparent, #69d3df, #94ddba);background-size: 180% 180%;animation: gradient-animation 40s ease infinite;height: auto;width: auto;overflow: visible;position: relative;opacity:0.4;}
.tags-container::after {top:0;right: 0;background: linear-gradient(to right, transparent);}
.tags-slide-content li figure img {width: 100%;}


a{text-decoration: none;color: white;}
a:hover{color:black;}
button:hover{background-color: #d0c5c5;}
mark{background-color:transparent;}
body{font-family:"Poppins"}

/* ROOT */
:root{
  --bs-white: #f6f4effc;
  --bs-outline-white: #fff;
  --bs-primary-font-size:1rem;
  --bs-black: #000;
}

.container, .container-lg, .container-md, .container-sm {max-width: 1400px;position:relative;}
html {scroll-behavior: smooth;}
body{position:relative;}
.nav-link{color: #c1c1c1;}
.nav-link:hover{color: #000;}
.logo{position: absolute; float: left; left: 2vw; margin: auto; display: block; top: 70%;}

/* Login */
#login {height: 100vh;overflow: hidden;}
#login .container {max-width: 1000px; display:flex; justify-content:space-around;position: relative;width: 100%;}
#login .cover{position: relative;width: 100%;  max-width: 1400px;margin:auto;display:block;}
.login-logo figure {position: relative;top:5vh;}
.login-logo img {position: absolute;max-width: 225px;z-index: 100;left: 2vw;}

#login form { z-index: 50; height: 100vh; width: 100%; max-width: 300px; opacity: 0.8; background-color: #c0afaf61; padding: 25vh 1rem; }
#login form input { margin-bottom: 1rem; margin-top: .25rem; width: 90%; text-align: center; padding: 6px; border-radius: 8px; border: 1px solid #cccc; }
#login object {margin:auto;    background-color: #b0bd7a;}


/* Header */
header {max-width: 1400px !important;}
#header{position: sticky;top:0 ;z-index: 1000;background-color: rgba(255, 255, 255, 0.8); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}
.align-items-center h3{color:#0a66c2;}
#header ul li a{color:var(--bs-black);}
#header .btn-dark {background-color: #0a66c2;font-size: 1.725rem;padding: 0;margin: 0;border-color:transparent;}
header button{margin-left: 1.25rem;}
#header button:hover {background-color: #000;}
.gradient-background {background: linear-gradient(300deg, #69d3df, #94ddba, #0a66c2);background-size: 180% 180%;animation: gradient-animation 18s ease infinite;height: auto;width: auto;overflow: visible;position: relative;opacity:0.8;}


.pt-5 {padding-top: 5.125rem !important;}
.display-5 {font-size: calc(1.25rem + 2.1vw);}
.icon-square {width: 3rem;height: 3rem;border-radius: 0.75rem;}
.profile-img {height: 100px;border-radius: 50%;}
.btn.btn-outline-light.px-4 {background-color: #727D73;}

#textAnimation {border-color: transparent;background-color: transparent;height: auto;   min-height: 15vh;   width: 100%;   overflow: hidden;   max-width: 1000px;   text-align: center;   margin: auto;}
#introduction {height: auto;width: 100%;min-height: 25vh;margin: auto;}
/*#introduction object {object-fit: cover;object-position: 100% -5%; margin:auto;}*/
  .svg-avatar{flex: 0 0 auto;width: 100%; border-radius: 500px; overflow: hidden; background-color: #b7e8b84a; max-width: 400px; padding:0px; border: 2px solid #000; aspect-ratio: 2;}


/* Sidebar */
#sidebar{display:none;}

/* PROJECTS */
#projects{color:#fff;}
#projects img {width: 100%;max-width: 500px;height: auto; border-radius: 10px;}
#projects figure {display: flex;justify-content: space-evenly;gap: .5rem; position:relative;}
#projects figure .mobile img {width: 8%;bottom: 0px;position: absolute;height: 65%;}
.container h1.title {text-align: center;color: #272e27;}

.carousel-wrapper {position: relative;max-width: 1280px;margin: auto;overflow: hidden;}
.carousel-track {display: flex;gap: 3rem;transition: transform 0.5s ease;}
.carousel-card {flex: 0 0 30%;min-width: 30%;border-radius: 12px;overflow: hidden;box-shadow: 6px 11px 28px rgba(0, 0, 0, 0.5);}
.carousel-card img {width: 100%;height: 100%;object-fit: cover;display: block;}
.carousel-btn {position: absolute;top: 50%;transform: translateY(-50%);background: rgba(50,50,50,0.7);color: white;border: none;font-size: 2rem;padding: 0.5rem 1rem;cursor: pointer;border-radius: 50%;z-index: 2;transition: background 0.3s ease;}
.carousel-btn:hover {background: #0d6efd;}
.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }


.align-items-center {align-items: center !important;margin: 0 auto;max-width: 1400px;}
.feature-projects .btn-group img {width: 100%;max-width: 75px;display: inline-block;}
.socmed-icons.list-unstyled {display: flex;justify-content: center;gap:1rem;overflow:hidden;}
.socmed-icons.list-unstyled img {width: 100%;max-width: 55px;height: auto;margin: auto 0;height: auto;min-height: 50px;max-height:50px;border-radius: 25px;border: 1px solid var(--bs-black);}

/* FEATURES */
#features{display: block;margin:0 auto;/*background-color: #f2f2f2;*/}
#features h2 {padding-left: unset;}
#writeup .text {width: 100%;}
#writeup .text span{display:block; font-size:1rem;}
.col.d-flex.align-items-start p {font-size: .85rem !important;}
.col.d-flex.align-items-start svg {   padding: .355rem;   background-color: #d0c5c5;   border-radius: 20px; }

#features .card-body{aspect-ratio: 9 / 1;background-color: #b5bcc5;}
#features .card-body .btn-group{background-color: var(--bs-black);}
.feature-projects {display: flex;gap: 3rem;overflow: auto;}
.feature-projects img {width: 100%;height: auto;transform: scale(1);transform-origin: center center;}
.feature-projects .shadow-sm {display:flex; overflow: hidden;width: 100%;height: auto;min-height: unset;}
.feature-projects .shadow-sm mark a{color:#fc5069;}
.feature-projects .shadow-sm a{color: var(--bs-black);filter: invert(100%);}
.feature-projects > * {box-shadow: 8px 20px 25px rgba(0, 0, 0, 0.3);}
.card.shadow-sm figure {width: 100%;height: auto;max-height: 160px;overflow: hidden;}
.btn-group {position: absolute;bottom: 1rem;display:block;}
.feature-projects:nth-child(2){transition-delay:200ms;}
.feature-projects:nth-child(3){transition-delay:400ms;}
.feature-projects:nth-child(4){transition-delay:600ms;}

/* Experience */
.rounded-circle{border-radius: 50% !important;border-radius: 50% !important;width: 100%;max-width: 200px;height: auto;aspect-ratio: 1;}
#icon-grid2 .col:nth-child(1) figure img, #icon-grid2 .col:nth-child(2) figure img {width: 100%;height: auto;max-width: 75px;margin: 0 auto;}
#icon-grid2 {display: flex;gap: 2rem;justify-content: center;}
#experience figcaption span{display:block;}
#icon-grid2 figure img {width: 100%;max-width: 200px;height: auto;}
#icon-grid2 figure button img {width: 100%;max-width: 50px;}
#icon-grid2 figure button.btn-dark img {filter: invert(100%);}
.card-body{position:relative;}
.card-body .btn-group {position: absolute;   bottom: 0;   display: block;   z-index: 999;   float: right;   right: 0;}
.tags-slide-content.list-unstyled {display: flex;max-width: 1200px;margin:0 auto;;width: 100%;height: auto;}

/* Skills */
#skills .text{width:100%;}
#skills .row .col .card-body{width:100%; height:auto; min-height:260px;position:relative;}
#skills .row .col .card-body button{}

/* Footer */
#footer{display: block;margin: 0 auto;width: 100%;color: var(--bs-black); background-color: #e2dfd7fc;}
#footer h2 {font-size: 1rem; display: flex;   justify-content: space-between;   gap: 1rem;   line-height: 3; margin:auto 0;}
#footer h3 {text-align:left; font-weight:600;text-transform: uppercase;margin-bottom: 6px;position: relative;font-family: "Poppins";font-size: .909rem;color:var(--bs-black);}

.references figure {position: absolute;right: 10rem;float: right;bottom: 0;z-index:999;background-color: #24232363;display: flex;gap: 1rem;padding: 5px 10px;border-radius: 20px;}
#footer .references img {width: 100%;max-width: 100px;}
footer .col .phone ul li{pointer-events:none;}

#backToTop {position: fixed;bottom: 20px;right: 20px;display: block;background-color: #000;color: #fff;border: none;padding: 10px 20px;cursor: pointer;border-radius: 5px;z-index: 1000;}
#backToTop:hover {background-color: #555;}

.menu-footer-nav-services-container ul li,.menu-other-services-container ul li,.email ul li, .phone ul li{padding-left:10px;color:var(--bs-black);}
.email ul li a, .phone ul li mark a{color: var(--bs-black);}
.phone ul li mark{background-color:transparent;}


#header .btn-group figure img {width: 100%;display: block;max-width: 175px;}
#parallax {content: "";position: fixed;width: 100%;z-index: -1;}
#parallax .cover {width: 100%;height: 100vh;background: none;}