/* GENERAL */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Poppins", sans-serif;
}

html {
  scroll-behavior: smooth;
}

p {
  color: rgb(85, 85, 85);
}

/* TRANSITION */


/* DESKTOP NAV */

nav,
.nav-links {
  display: flex;
}

nav {
  justify-content: space-around;
  align-items: center;
  height: 17vh;
}

.nav-links {
  gap: 2rem;
  list-style: none;
  font-size: 1.3rem;
  font-weight: 500;
}

a {
  color: black;
  text-decoration: none;
  text-decoration-color: white;
}

a:hover {
  color: grey;
  text-decoration: underline;
  text-underline-offset: 1rem;
  text-decoration-color: rgb(181, 181, 181);
}

.logo {
  font-size: 2rem;
}

.logo:hover {
  cursor: default;
}

/* HAMBURGER MENU */

#hamburger-nav {
  display: none;
}

.hamburger-menu {
  position: relative;
  display: inline-block;
}

.hamburger-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 24px;
  width: 30px;
  cursor: pointer;
}

.hamburger-icon span {
  width: 100%;
  height: 2px;
  background-color: black;
  transition: all 0.3 ease-in-out;
}

.menu-links {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  width: fit-content;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3 ease-in-out;
}

.menu-links a {
  display: block;
  padding: 10px;
  text-align: center;
  font-size: 1.5rem;
  color: black;
  text-decoration: none;
  transition: all 0.3 ease-in-out;
}

.menu-links li {
  list-style: none;
}

.menu-links.open {
  max-height: 300px;
}

.hamburger-icon.open span:first-child {
  transform: rotate(45deg) translate(10px, 5px);
}

.hamburger-icon.open span:nth-child(2) {
  opacity: 0;
}

.hamburger-icon.open span:last-child {
  transform: rotate(-45deg) translate(10px, -5px);
}

.hamburger-icon span:first-child {
  transform: none;
}

.hamburger-icon span:first-child {
  opacity: 1;
}

.hamburger-icon span:first-child {
  transform: none;
}

/* SECTIONS */

section {
  padding-top: 4vh;
  height: 100vh;
  margin: 0 10rem;
  box-sizing: border-box;
  min-height: fit-content;
}

.section-container {
  display: flex;
}

/* PROFILE SECTION */

#profile {
  display: flex;
  justify-content: center;
  gap: 5rem;
  height: 80vh;
}

.section__pic-container {
  display: flex;
  height: 400px;
  width: 400px;
  margin: auto 0;
}

.section__text {
  align-self: center;
  text-align: center;
}

.section__text p {
  font-weight: 600;
}

.section__text__p1 {
  text-align: center;
}

.section__text__p2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.title {
  font-size: 3rem;
  text-align: center;
}

#socials-container {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  gap: 1rem;
}

/* ICONS */

.icon {
  cursor: pointer;
  height: 2rem;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

.tag-list .icon {
  height: 1.2rem;
}


/* BUTTONS */

.btn-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.btn {
  font-weight: 600;
  transition: all 300ms ease;
  padding: 1rem;
  width: 8rem;
  border-radius: 2rem;
}

.btn-color-1,
.btn-color-2 {
  border: rgb(53, 53, 53) 0.1rem solid;
}

.btn-color-1:hover,
.btn-color-2:hover {
  cursor: pointer;
}

.btn-color-1,
.btn-color-2:hover {
  background: rgb(53, 53, 53);
  color: white;
}

.btn-color-1:hover {
  background: rgb(0, 0, 0);
}

.btn-color-2 {
  background: none;
}

.btn-color-2:hover {
  border: rgb(255, 255, 255) 0.1rem solid;
}

.btn-container {
  gap: 1rem;
}

/* ABOUT SECTION */

#about {
  position: relative;
}

.about-containers {
  gap: 2rem;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

.about-details-container {
  justify-content: center;
  flex-direction: column;
}

.about-containers,
.about-details-container {
  display: flex;
}

.about-pic {
  border-radius: 2rem;
}

.arrow {
  position: absolute;
  right: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  bottom: 2.5rem;
}

.details-container {
  padding: 1.5rem;
  flex: 1;
  background: white;
  border-radius: 2rem;
  border: rgb(53, 53, 53) 0.1rem solid;
  border-color: rgb(163, 163, 163);
  text-align: center;
}

.section-container {
  gap: 4rem;
  height: 80%;
}

.section__pic-container {
  height: 400px;
  width: 400px;
  margin: auto 0;
}

.text-container{
  text-align: center!important;
}

/* EXPERIENCE SECTION */

#skils {
  position: relative;
}

#experience {
  position: relative;
  height: unset;
  padding-bottom: 7rem;
}

.desc p {
  line-height: 1.5em;
  text-align: justify;
}


.skills-details-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  background-color: #f9f9f9;
}

.skils-details-container{
  margin:inherit;
}

.about-containers {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  max-width: 1200px;
  width: 100%;
}

.details-container {
  background: #fefefe;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  width: calc(50% - 1rem); /* Adjust for spacing between boxes */
  box-sizing: border-box;
}

.icon-text {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.icon-text i {
  font-size: 2rem;
  color: #007bff; /* Adjust color as needed */
  margin-right: 0.75rem;
}

.skills-sub-title {
  font-weight: 600;
  margin: 0;
  color: darkslategray;
}

.article-container p {
  font-size: 1rem;
  color: #666;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .details-container {
    width: calc(100% - 1rem); /* Full width with margin adjustment */
  }
}

@media (max-width: 480px) {
  .icon-text i {
    font-size: 1.3rem; /* Smaller icons on very small screens */
  }

  .skills-sub-title {
    font-size: 1.1rem; /* Adjust subtitle size */
  }

  .article-container p {
    font-size: 0.875rem; /* Smaller text for small screens */
  }
}


article {
  display: flex;
  
  justify-content: space-around;
  gap: 0.5rem;
}

article .icon {
  cursor: default;
}


@media screen and (max-width: 575px) {
  .details-container {
    padding: 0.8em;
  }

  article {
    font-size: 0.7rem;
  }

  article p{
    font-size: smaller;
  }

  article h3{
    font-size: medium;
  }

  .skils-sub-title{
    font-size: 1.2em;
  }

}


/* PROJECTS SECTION */

#projects {
  position: relative;
}

.color-container {
  border-color: rgb(163, 163, 163);
  background: rgb(250, 250, 250);
}

.project-img {
  border-radius: 2rem;
  width: 90%;
  height: 90%;
}

.project-title {
  margin: 1rem;
  color: black;
}

.project-btn {
  color: black;
  border-color: rgb(163, 163, 163);
}

#certificates {
  position: relative;
  margin: 0 auto;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  column-gap: 3rem;
  padding-block: min(20vh, 3rem);
}

.swiper {
  width: 100%;
  padding: 2.5rem 0;
}

.swiper-slide {
  height: 25rem;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: self-start;
  box-shadow: 0.063rem 0.5rem 1.25rem rgba(0, 0, 0, 0.1216);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.swiper-slide:hover{
  cursor: pointer;
}
.swiper-slide-img {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* transform: rotate(180deg); */
  line-height: 0;
  bottom: -0.063rem;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  background-color: #fff;
}
.swiper-slide-img img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit:contain;
  /* z-index: -1; */
  transition: 0.3s ease-in-out;
  /* transform: rotate(-180deg); */
}
.swiper-slide-img svg {
  position: relative;
  display: block;
  /* width: calc(300% + 1.3px); */
  height: 5rem;
  /* transform: rotateY(180deg); */
}
.swiper-slide-img .shape-fill {
  fill: #ffffff;
}
.swiper-slide-content {
  background: #fff;
  padding: 0 1.65rem;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  width: 90%;
}

.swiper-slide-content h2 {
  color: #000;
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  margin-top: 0.7rem;
  margin-bottom: 0.2rem;
  text-transform: capitalize;
  letter-spacing: 0.02rem;
}
.swiper-slide-content p {
  color: #000;
  font-size: 0.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.swiper-slide-content .show-more {
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: 50%;
  box-shadow: 0px 0.1rem 0.5rem #444;
  margin-bottom: 1em;
  height: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  margin-left: auto;
}
.swiper-slide-content .show-more:hover {
  background: #fff;
  color: #000!important;
}
.swiper-slide-content .show-more svg {
  width: 1.75rem;
  color: #fff;
}

.swiper-slide-content .show-more svg:hover {
  width: 1.75rem;
  color: #000;
}

.swiper-slide-active {
  width: 35rem!important;
  background-color: #fff;
}

.swiper-slide-active:hover .show-more {
  opacity: 1;
  height: 2.5rem;
}

.swiper-slide-active:hover p {
  display: block;
  overflow: visible;
}

.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right {
  background-image: none;
}

@media screen and (max-width: 575px) {
  .swiper {
    width: 95%;
  }

  .swiper-slide-active {
    width: 95%!important;
  }

}






/* CONTACT */

#contact {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 70vh;
}

.contact-info-upper-container {
  display: flex;
  justify-content: center;
  border-radius: 2rem;
  border: rgb(53, 53, 53) 0.1rem solid;
  border-color: rgb(163, 163, 163);
  background: (250, 250, 250);
  margin: 2rem auto;
  padding: 0.5rem;
}

.contact-info-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem;
}

.contact-info-container p {
  font-size: larger;
}

.contact-icon {
  cursor: default;
}

.email-icon {
  height: 2.5rem;
}

/* FOOTER SECTION */
.footer {
  background: #000; /* Black background */
  padding: 30px 0;
  font-family: 'Play', sans-serif;
  text-align: center;
  color: #808080; /* Gray text color */
}

.footer .row {
  width: 100%;
  margin: 1% 0;
  padding: 0.6% 0;
  font-size: 0.8em;
}

.footer .row a {
  text-decoration: none;
  color: #808080; /* Gray color for links */
  transition: 0.5s;
}

.footer .row a:hover {
  color: #fff; /* White color on hover */
}

.footer .row ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
  max-width: 1200px; /* Maximum width to prevent too wide layout */
  margin: 0 auto; /* Center the list within the footer */
}

.footer .row ul li {
  flex: 1 0 20%;
  max-width: 200px; /* Maximum width for each list item */
  margin: 10px 15px; /* Adjusted margin for better spacing */
  box-sizing: border-box;
  text-align: center; /* Center align text inside list items */
}

.footer .row a i {
  font-size: 2em;
  margin: 0 1%;
}

@media (max-width: 720px) {
  .footer {
    text-align: center;
    padding: 30px 5%;
  }

  .footer .row ul {
    flex-direction: column; /* Stack items vertically on small screens */
    align-items: center; /* Center align the list items */
  }

  .footer .row ul li {
    flex: 1 0 100%; /* Take full width on small screens */
    max-width: none; /* Remove max-width for small screens */
    margin: 10px 0;
    text-align: center; /* Center align text inside list items */
  }

  .footer .row a i {
    margin: 0 3%;
  }
}













.timeline {
  position: relative;
  width: 860px;
  margin: 0px auto;
  padding: 20px;
  list-style-type: none;
  @media(max-width: 860px) {
    width: 100%;
    padding: 4em 0 1em 0;
  }
  &:before {
    position: absolute;
    left: 50%;
    top: 0;
    content: ' ';
    display: block;
    width: 6px;
    height: 100%;
    margin-left: -3px;
    background: rgb(80,80,80);
    z-index: 5;
  }
  li {
    @media(max-width: 860px) {
      padding: 2em 0;
      margin-bottom: 0%;
    }
    &::after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
  }
}


.direction-l {
  position: relative;
  width: 400px;
  float: left;
  text-align: right;
  @media(max-width: 860px) {
    float: none;
    width: 100%;
    text-align: center;
  }
  .flag {
    box-shadow: -1px 1px 1px rgba(0,0,0,0.15);
    &:after {
      content: "";
      position: absolute;
      left: 100%;
      top: 50%;
      height: 0;
      width: 0;
      margin-top: -8px;
      border: solid transparent;
      border-left-color: rgb(233,233,233);
      border-width: 8px;
      pointer-events: none;
      @media(max-width: 860px) {
        content: "";
        position: absolute;
        left: 50%;
        top: -8px;
        height: 0;
        width: 0;
        margin-left: -8px;
        border: solid transparent;
        border-bottom-color: rgb(255,255,255);
        border-width: 8px;
        pointer-events: none;
      }
    }
  }
  .time-wrapper {
    float: left;
    @media(max-width: 860px) {
      float: none;
    }
  }
}


.direction-r {
  position: relative;
  width: 400px;
  float: right;
  @media(max-width: 860px) {
    float: none;
    width: 100%;
    text-align: center;
  }
  .flag {
    box-shadow: 1px 1px 1px rgba(0,0,0,0.15);
    &:after {
      content: "";
      position: absolute;
      right: 100%;
      top: 50%;
      height: 0;
      width: 0;
      margin-top: -8px;
      border: solid transparent;
      border-right-color: rgb(233,233,233);
      border-width: 8px;
      pointer-events: none;
      @media(max-width: 860px) {
        content: "";
        position: absolute;
        left: 50%;
        top: -8px;
        height: 0;
        width: 0;
        margin-left: -8px;
        border: solid transparent;
        border-bottom-color: rgb(255,255,255);
        border-width: 8px;
        pointer-events: none;
      }
    }
    &:before {
      left: -40px;
    }
  }
  .time-wrapper {
    float: right;
    @media(max-width: 860px) {
      float: none;
    }
  }
}

.flag-wrapper {
  position: relative;
  display: inline-block;
  text-align: center;
  @media(max-width: 860px) {
    text-align: center;
  }
  .flag {
    position: relative;
    display: inline;
    background: rgb(233,233,233);
    padding: 6px 10px;
    border-radius: 5px;
    font-weight: 600;
    text-align: left;
    @media(max-width: 860px) {
      background: rgb(233,233,233);
      z-index: 15;
    }
  }
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: 50%;
  right: -40px;
  content: ' ';
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -10px;
  background: #fff;
  border-radius: 10px;
  border: 4px solid black;
  z-index: 10;
  @media(max-width: 860px) {
    position: absolute;
    top: -30px;
    left: 50%;
    content: ' ';
    display: block;
    margin-left: -10px;
  }
}



.time-wrapper {
  display: inline;
  line-height: 1em;
  font-size: 0.66666em;
  color: white;
  vertical-align: middle;
  @media(max-width: 860px) {
    display: block;
    position: relative;
    margin: 4px 0 0 0;
    z-index: 14;
  }
  .time {
    display: inline-block;
    padding: 4px 6px;
    background: black;
  }
}

.desc {
  margin: 1em 0.5em 0 0;
  padding: 1em;
  font-size: 0.8em;
  font-style: italic;
  line-height: 1.3em;
  a {
    color: black;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
  @media(max-width: 860px) {
    position: relative;
    margin: 1em 1em 0 1em;
    background: rgb(245,245,245);
    box-shadow: 0 0 1px rgba(0,0,0,0.20);
    z-index: 15;
    
  }
}

.company-desc{
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: groove;
  text-align: left;
}


.company-logo{
  cursor: pointer;
  height: 2.5rem;
}



























.outerdiv
{
	width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.innerdiv
{
	transform: scale(0.9);
	margin: 1rem;
	display: grid;
	grid-gap: 1.5rem;
	grid-template-rows: repeat(2,22rem);
	grid-template-columns: repeat(4,17rem);
}
.eachdiv
{
	padding: 1rem 2rem;
    border-radius: 0.8rem;
    box-shadow: 5px 5px 20px #6d6b6b6b;
    color: white;
}
.div1
{
	background: #733FC8;
    grid-column: 1/3;
    grid-row: 1/2;
    background-image: url(https://raw.githubusercontent.com/RahulSahOfficial/testimonials_grid_section/5532c958b7d3c9b910a216b198fdd21c73112d84/images/bg-pattern-quotation.svg);
    background-repeat: no-repeat;
    background-position-x: 25rem;
}
.div2
{
	background:#49556B;
    grid-column: 3/4;
    grid-row: 1/2;
}
.div3
{
	background: white;
    grid-column: 4/5;
    color: black;
}
.div4
{
	background: white;
	grid-column: 1/2;
    grid-row: 2/3;
    color: black;
}
.div5
{
	background: #18202D;
	grid-column: 2/4;
    grid-row: 2/3;
}
.div6
{
	background: #733FC8;
    grid-column: 4/5;

}
.userdetails
{
	display: flex;
}
.imgbox
{
	margin-right: 1rem;
}
.imgbox img
{
	border-radius: 50%;
	width: 2rem;
	border: 2px solid #cec5c5;
}
.detbox
{
	display: flex;
    flex-direction: column;
    justify-content: center;
}
.detbox p
{
	margin: 0;
}
.detbox .name
{
	color: hsl(0, 0%, 81%);
    font-size: 0.9rem;
    margin-bottom: 0.1rem;
    font-weight: 600;
}
.detbox .name.dark
{
	color: #49505A;
}
.detbox .designation
{
	color: hsl(0, 0%, 81%);
    opacity: 50%;
    font-size: 0.8rem;
}
.detbox .designation.dark
{
	color: #49505A;
}
.review h4
{
	font-size: 1.4rem;
	color: #F3DEFF;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 0.8rem;
}
.review.dark h4{
	color:#4B5258;
}
.review p
{
	font-size: 0.95rem;
    color: #F3DEFF;
    font-weight: 500;
    opacity: 50%;
    line-height: 1.5;
}
.review.dark p{
	color: #0e0e0e;
}
.attribution
{
	font-size: 1rem;
    line-height: 1.5;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    text-align: right;
}
.attribution a
{
	text-decoration: none;
}

@media only screen and (max-width: 1000px)
{
	.innerdiv
	{
		transform: scale(0.7);
	}
}
@media only screen and (max-width: 800px)
{
	.innerdiv
	{
		transform: scale(0.6);
	}
}
@media only screen and (max-width: 600px)
{
	.div1 {
		background-position-x: 10rem;
	}
	.innerdiv
	{
		display: flex; 
		flex-direction: column;
		transform: scale(1);
		margin: 2rem;
		margin-bottom: 5rem;
	}
	.attribution
	{
		position: relative;
	}
}























.box {
  width: 20%;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid blue;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.button:hover {
  background: blue;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 99;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 75%;
  height: 80vh;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  margin-bottom: 25px;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}

.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

.popup .close:hover {
  color: orange;
}

.popup .content {
  overflow: auto;
}



#goalspopup .content, #startpopup .content{
  text-align: justify;
  padding-left: 10%;
  padding-right: 10%;
}

@media (max-width: 575px) {
  #goalspopup .content, #startpopup .content{
    font-size: 14px;
    line-height: 1.5;
    padding-left: 0;
    padding-right: 0;
  }
  #startpopup img{
    width: 100%;
  }
}

code{
  background-color: rgb(112, 168, 252);
  padding: 3px;
  font-size: 16px;
  border-radius: 5%;
  color: #000;
}

q{
  color: #000;
}






























/* Basic Form Functionality */
.form-header {
  position: relative;
}
.form-toggle {
  height: 215px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.form-toggle:hover {
  cursor: pointer;
}
.ins-wrap {
  display: inline-block;
  padding-right: 30px;
}

.ins {
  backface-visibility: hidden;
  perspective: 1000;
  display: block;
  text-shadow: 0 0 0 rgb(0 4 92 / 60%), -15px 0 0 rgb(164 164 164 / 60%), -10px 15px 0 rgb(0 0 0 / 60%);
  font-size: 80px;
  line-height:1;
  color: transparent;
  transform: rotate(0deg) translateZ(0);
  transition: .5s;
}
.ins-text {
  display: inline;
  font-size: 30px;
  font-weight: 600;
  animation-name:blink;
  animation-duration:1.5s;
  animation-timing-function:ease-in;
  animation-iteration-count:Infinite;
}
.cont:hover .ins {
  text-shadow: 
    0 0 0 rgba(0,0,0,.5), 
    0 0 0 rgba(0,0,0,.5), 
    0 0 0 rgba(0,0,0,.5);
  transition: .5s;
 
}

#more a:hover{
  text-decoration: none;
  cursor: pointer;
}

.ins:after {
  background: rgb(31,31,31);
  content: '';
  display: block;
  height: 5px;
  opacity: 0;
  transition: text-shadow .5s;
  width: 35px;
}
.cont:hover .ins:after {
  animation: blink .5s infinite;
  animation-delay: .3s;
}
.cont {
  display: block;
  margin: 80px auto;
  text-align: center;
  width: 80%;
  height: unset!important;
}

.cont nav{
  margin-top: 50px;
}


@keyframes blink {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
}


.cont nav ul {
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  margin-bottom: 0;
  list-style: none;
  padding-left: 0;
  border: solid 1px #000;
  border-radius: 4px;
  box-shadow: 3px 5px rgb(53, 53, 53);
}

.cont nav ul li {
    padding-left: 0;
    border-left: solid 1px #000;
  }

  .cont nav ul li:first-child {
      border-left: 0;
    }

    .cont nav ul li a {
      display: block;
      min-width: 7.5rem;
      height: 2.75rem;
      line-height: 2.75rem;
      padding: 0 1.25rem 0 1.45rem;
      text-transform: uppercase;
      letter-spacing: 0.2rem;
      font-size: 0.8rem;
      border-bottom: 0;
    }

    .cont nav ul li a:hover {
        background-color: #000;
        color: #fff;
      }

      .cont nav ul li a:active {
        background-color: #000;
        color: #fff;
      }

      .cont nav.use-middle:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
  width: 1px;
  height: 100%;
  background: #000;
}

.cont nav.use-middle ul li.is-middle {
  border-left: 0;
}


@media screen and (max-width: 575px) {
  .cont nav ul {
    flex-direction: column;
    border: none;
    box-shadow: none;
  }
  
  .cont nav ul li {
    border-left: none;
    border-top: solid 1px #000;
  }
}








#hobbiespopup {
  height: 100%;
  font-size: 18px;
  color: #000;
  font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
  overflow: hidden;
  display: flex;
  align-items: center;
  line-height: 1.5;
}


#hobbiespopup .wrapper {
  position: relative;
  flex-grow: 1;
  margin: 30px auto;
  width: 70%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 1vmin;
  justify-items: center;
  align-items: center;
}

#hobbiespopup IMG {
  z-index: 1;
  grid-column: span 2;
  max-width: 100%;
  
  
  transform: scale(1);
  transition: all .25s;
  
  &:nth-child(7n + 1) {
    grid-column: 2 / span 2;
  }
  

  &:hover {
    z-index: 2;
    clip-path: unset;
    transition: all .5s ;
  }
}

@media screen and (max-width: 575px) {
  .popup {
    width: 85%;
  }

  #hobbiespopup .wrapper {
    width: 100%;
  }

}







.content{
  display: grid;
  place-items: center;
}






.gallery {
  --size: 60px;
  
  grid-template-columns: repeat(6, var(--size));
  grid-auto-rows: var(--size);
  margin-bottom: 50px;
  place-items: start center;
  gap: 25px;
  flex-wrap: wrap;
  
  &:has(:hover) img:not(:hover),
  &:has(:focus) img:not(:focus){
    filter: brightness(0.5) contrast(0.5);
  }

  & img {
    object-fit: cover;
    width: calc(var(--size) * 2);
    height: calc(var(--size) * 2);
    clip-path: path("M90,10 C100,0 100,0 110,10 190,90 190,90 190,90 200,100 200,100 190,110 190,110 110,190 110,190 100,200 100,200 90,190 90,190 10,110 10,110 0,100 0,100 10,90Z");
    transition: clip-path 0.25s, filter 0.75s;
    grid-column: auto / span 2;
    border-radius: 5px;
    clip-path: path("M0,0 C0,0 200,0 200,0 200,0 200,100 200,100 200,100 200,200 200,200 200,200 100,200 100,200 100,200 100,200 0,200 0,200 0,100 0,100 0,100 0,100 0,100Z");
    z-index: 1;
    transition: clip-path 0.25s, filter 0.25s;

    &:nth-child(5n - 1) { 
      grid-column: 2 / span 2 
    }
    
    &:focus {
      outline: 1px dashed black;
      outline-offset: -5px;
    }
  }
}



@media (max-width: 575px) {
  .gallery {
    --size: 35px;
    gap: 5px;
  }
}

  












































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

.container {
  width: 50%;
  margin: 0 auto;
}



@media (max-width: 575px) {
  .container {
    width: 90%;
  }
}

.container button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 20px 5px;
  color: #3c376f;
  font-size: 2rem;
}

.container button span {
  position: relative;
  display: inline-block;
  transform: translateX(0);
  transition: transform 0.3s ease;
}

.container .previous:hover span {
  transform: translateX(-10px) scale(1.2);
}

.container .next:hover span {
  transform: translateX(10px) scale(1.2);
}

.container .slider {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.container .slider-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.container .slider-nav li {
  display: flex;
  flex: 2;
  text-align: center;
}

.container img {
  width: 100%;
  display: none;
  box-shadow: 10px 10px 20px 0 rgba(94, 47, 59, 0.2);
}

.container img.active {
  display: block;
  -webkit-animation: fadeImg 0.8s;
          animation: fadeImg 0.8s;
  height: 450px;
}

@media (max-width: 575px) {
  .container img.active {
    height: 300px;
  }
}

.container .slider-nav .arrow3 {
  flex: 0 0 15%;
}

.container .slider-nav a {
  flex-basis: 100%;
  display: flex;
  align-items: center;
}

.container .slider-nav span {
  display: block;
  width: 100%;
}

@-webkit-keyframes fadeImg {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeImg {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
































































































:root {
	--dark: black;
	--light: #F5F5F5;
	--background: var(--light);
	--text: black;
	--border: var(--dark);
}
@media (prefers-color-scheme: dark) {
	:root {
		--background: var(--dark);
		--text: var(--light);
		--border: var(--light);
	}
}


/*	BASIC STYLING FOR THE DEMO */
.infinte-scroll {
	display: grid;
  padding: 3%;
	place-content: center;
}

@media (max-width: 575px) {
  .infinte-scroll {
    
    padding: 8% 0%;
 
  }
}

/*	CURRENT MAX WIDTH IS JUST FOR DEMO PURPOSES */
.tag-scrollers {
	width: 100%;
	max-width: 1200px;
	overflow: hidden;
}

/*	POSSIBLY UPDATE COLORS IN THE GRADIENT
		TO MATCH THE PROJECTS DESIGN SYSTEM
*/
.tag-scroller {
	display: grid;
	gap: 1.5rem;
	mask: linear-gradient(90deg, #0000, var(--background) 15%, var(--background) 85%, #0000);
}

.tag-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	/*	IF THE GAP IS CHANGED, DON'T FORGET TO CHANGE 
			THE TRANSFORM VALUE IN THE SCROLL ANIMATION
			AT THE END OF THE STYLING
	*/
	gap: 1.5rem;
}

/*	IF THE USERS PREFERS REDUCED MOTION
		PRESENT THEM WITH A HOROZONTAL LIST
		OF ALL ELEMENTS AND GIVE THEM THE
		OPTION TO MANUALLY SCROLL BY SWIPING
*/
@media (prefers-reduced-motion) {
	.tag-list {
		flex-flow: row nowrap;
		overflow: auto;
		scrollbar-width: none;
		scrollbar-color: transparent transparent;
	}
	.tag-list::-webkit-scrollbar-track {
		background: transparent;
	}
	.tag-list::-webkit-scrollbar-thumb {
		background: transparent;
	}
	.tag-list::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}
}

/*	BASIC STYLING OF THE LIST ITEMS
		FOR DEMO PURPOSES. MOST PROPERTIES
		SHOULD BE KEPT AS IS BUT PROBABLY
		UPDATE THE VALUE FOR font-family
		AND border
*/
.tag-list li {
	font-family: system-ui;
	font-size: 1.125rem;
	line-height: 1;
	padding: 0.625rem 1.375rem;
	border: 2px solid var(--border);
	border-radius: 10ch;
	white-space: nowrap;
  color:black;
}

/*	THE DURATION IS SET FROM A CUSTOM PROPERTY
		CALCULATED IN THE SCRIPT AS IT'S ONLY NEEDED
		IF THE ANIMATION SHOULD RUN, WHICH IS ALSO
		CHECKED BY THE SCRIPT

		THE DIRECTION IS SET TO normal AS DEFULT
		AND THEN SET TO reverse	FOR EVERY OTHER SCROLLER
*/
.tag-scroller.scrolling .tag-list {
	width: max-content;
	flex-wrap: nowrap;
	animation: horizontal-scroll var(--duration) var(--direction, normal) linear infinite;
}

.tag-scroller.scrolling .tag-list:nth-child(even) {
	--direction: reverse;
}

/* PAUSING THE ANIMATION ON HOVER */
.tag-scroller:hover .tag-list {
	animation-play-state: paused;
}

@keyframes horizontal-scroll {
	to {
		/*	0.75rem FOR HALF THE GAP
				OF THE .tag-scroller
		*/
		transform: translateX(calc(-50% - .75rem));
	}
}
















































































































































.swipe-hint {
  margin: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swipe-hint.swipe-horizontal {
  position: relative;
  margin: 3% auto;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 768px) {
  .swipe-hint.swipe-horizontal i {
    position: absolute;
    display: inline-block;
    color: black;
    border-radius: 100%;
    font-family: FontAwesome;
    animation: hint-finger ease-in 2s;
    animation-iteration-count: infinite;
    z-index: 100;
    font-size: 20px;
  }

  .swipe-hint.swipe-horizontal:before {
    position: absolute;
    content: ' ';
    background: linear-gradient(to right, #1e5799 0%, rgba(44, 102, 165, 0.5) 15%, rgba(124, 184, 231, 0) 99%, rgba(125, 185, 232, 0) 100%);
    right: 8px;
    top: 0;
    width: 0;
    height: 20px;
    animation: hint-dot ease-in 2s;
    animation-iteration-count: infinite;
  }
}

@keyframes hint-finger {
  0% {
    right: 0;
    transform: scale(1);
  }
  20% {
    right: 0;
    transform: scale(0.7);
  }
  50% {
    right: 50px;
    transform: scale(0.7);
  }
  60% {
    transform: scale(1);
  }
  70% {
    right: 50px;
  }
  100% {
    right: 0;
    transform: scale(1);
  }
}

@keyframes hint-dot {
  20% {
    opacity: 0;
    width: 0;
  }
  50% {
    opacity: 0.7;
    width: 50px;
  }
  60% {
    opacity: 0;
    width: 50px;
  }
  100% {
    opacity: 0;
    width: 0;
  }
}