@import url("https://fonts.googleapis.com/css2?family=Changa:wght@200..800&display=swap");
@import url(https://fonts.googleapis.com/css?family=Allan);



body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: auto; 
}

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/back.jpg);
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.content {
    position: relative;
    z-index: 1;
    padding: 20px;
    color: #000000;
    text-align: center;
}



footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px 0;
}

/*navbar*/

nav ul li:nth-child(1) a {
    background: rgba(255, 255, 255, 0.7);
    color: rgb(0, 0, 0);
    text-shadow: 1px 1px 1px rgba(133, 224, 180, 0);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); /* Add glow border */
}

nav ul li:nth-child(1) a:hover {
    background: rgba(56, 56, 56, 0.052);
    color: rgb(0, 0, 0);
}

nav ul li:nth-child(2) a {
    background: rgba(255, 255, 255, 0.7);
    color: rgb(0, 0, 0);
    text-shadow: 1px 1px 1px rgba(133, 224, 198, 0);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); /* Add glow border */
}

nav ul li:nth-child(2) a:hover {
    background: rgba(56, 56, 56, 0.052);
    color: rgb(0, 0, 0);
}

nav ul li:nth-child(3) a {
    background: rgba(255, 255, 255, 0.7);
    color: rgb(0, 0, 0);
    text-shadow: 1px 1px 1px rgba(133, 224, 218, 0);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); /* Add glow border */
}

nav ul li:nth-child(3) a:hover {
    background: rgba(56, 56, 56, 0.052);
    color: rgb(0, 0, 0);
}

nav ul li:nth-child(4) a {
    background: rgba(255, 255, 255, 0.7);
    color: rgb(0, 0, 0);
    text-shadow: 1px 1px 1px rgba(133, 209, 224, 0);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); /* Add glow border */
}

nav ul li:nth-child(4) a:hover {
    background: rgba(56, 56, 56, 0.052);
    color: rgb(0, 0, 0);
}
nav ul li a {
  background: rgba(58, 58, 58, 0.7);
  color: rgb(0, 0, 0);
  text-shadow: 1px 1px 1px rgba(133, 224, 180, 0);
  box-shadow: 0 0 10px rgba(77, 79, 230, 0.7);
  transition: transform 0.5s ease; /* Add transition for smooth movement */
}

/* RESET */
* {
    margin: 0;
    padding: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
}
a {
    text-decoration: none;
    color: inherit;
}
/* MAIN */
nav {
    position: absolute;
    width: 70%;
    margin: 1em auto;
    background-color: #f5f5f500;
    -webkit-perspective: none;
    perspective: none;
    transform-style: preserve-3d;
    padding: 5em;
}
nav ul::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
nav li {
    display: block;
    width: 15%;
    padding: 1em;
    float: left;
    position: relative;
    -webkit-transition: 1.6s; /* Vendor-prefixed version */
    transition: 1.6s; /* Standard property */
}
nav a {
    display: block;
    padding-bottom: 100%;
    border-radius: 50%;
    font-family: "Orbitron", sans-serif;
    font-size: 2em;
    min-width: 2.5em;
    min-height: 2.5em;
    box-shadow: -6px -10px 14px rgb(0, 0, 0) inset;
    -webkit-transform-origin: center center; /* Vendor-prefixed version */
    transform-origin: center center; /* Standard property */
    -webkit-transform-origin: center center;
    transform-origin: center center; /* Standard property */
    -webkit-transform-style: preserve-3d; /* Vendor-prefixed version */
    transform-style: preserve-3d; /* Standard property */
    -webkit-transition: 0.4s;
    transition: 0.4s; /* Define standard transition property */
}
nav a .texte {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
}
nav a .texte::before {
    display: inline-block;
    vertical-align: middle;
    content: '';
    height: 100%;
}
nav a .texte span {
    display: inline-block;
    vertical-align: middle;
}
nav a:hover {
    -webkit-transform: translateY(2%); /* Vendor-prefixed version */
    transform: translateY(2%); /* Standard property */
}
/* For small screens */
@media only screen and (max-width: 600px) {
    nav {
        width: 90%; /* Adjust width for smaller screens */
    }

    nav li {
        width: 50%; /* Adjust width of list items for smaller screens */
    }
}

/* For medium screens */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
    nav {
        width: 80%; /* Adjust width for medium screens */
    }

    nav li {
        width: 20%; /* Adjust width of list items for medium screens */
    }
}

/* For large screens */
@media only screen and (min-width: 1025px) {
    nav {
        width: 70%; /* Adjust width for large screens */
    }

    nav li {
        width: 15%; /* Adjust width of list items for large screens */
    }
}
 /* slova */


 h1 {
    --initial-delay: 1s;
    --letter-delay: 0.2s;
    justify-content: center; /* Horizontally center the text */
    align-items: center; /* Vertically center the text */
    display: flex;
    text-align: center;
    color: #000000;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    font-size: 8vw;
    font-weight: 600;
    animation: hollywood 4s var(--initial-delay) both;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.871); 
  
    span {
      --start-delay: var(--initial-delay);
  
      display: block;
      text-align: center;
  
      opacity: 0;
      animation: zichtbaar 2s var(--start-delay) both;
  
      &:nth-child(2) {
        --start-delay: calc(var(--initial-delay) + (var(--letter-delay) * 1));
      }
      &:nth-child(3) {
        --start-delay: calc(var(--initial-delay) + (var(--letter-delay) * 2));
      }
      &:nth-child(4) {
        --start-delay: calc(var(--initial-delay) + (var(--letter-delay) * 3));
      }
      &:nth-child(5) {
        --start-delay: calc(var(--initial-delay) + (var(--letter-delay) * 4));
      }
      &:nth-child(6) {
        --start-delay: calc(var(--initial-delay) + (var(--letter-delay) * 5));
      }
      &:nth-child(7) {
        --start-delay: calc(var(--initial-delay) + (var(--letter-delay) * 6));
      }
    }
  }
  
  @keyframes hollywood {
    0% {
      gap: 0vw;
    }
    100% {
      gap: 8vw;
    }
  }
  
  @keyframes zichtbaar {
    0% {
      opacity: 0;
      filter: blur(1em);
      transform: translateY(-100px);
    }
    100% {
      opacity: 1;
      filter: blur(0em);
      transform: translateY(0);
    }
  }
  
  /* Boilerplate */
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
/* Media query for smaller screens */
@media screen and (max-width: 768px) {
    h1 span {
      font-size: 5vw; /* Adjust font size for smaller screens */
    }
  }
  
  /* Media query for even smaller screens */
  @media screen and (max-width: 480px) {
    h1 span {
      font-size: 3.5vw; /* Adjust font size for even smaller screens */
    }
  }
  /*--text bottom---*/

  #tagline {
    font-family: "Orbitron", sans-serif;
    font-size: 45px;
    color: #ffffff; 
    line-height: 30px;
    height: 80px;
    position: fixed;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    text-align: center;
    z-index: 0; /* Adjust the z-index value as needed */
    width: 100%; /* Set width to 100% initially */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.556); 
  }
  
  #tagline:before {
    content: '[';
    position: absolute;
    top: 0;
    left: -30px;
    line-height: 40px;
  }
  
  #tagline:after {
    content: ']';
    position: absolute;
    top: 0;
    right: -30px;
    line-height: 40px;
  }
  
  #tagline:after,
  #tagline:before {
    color: #3E359C;
    font-size: 42px;
    animation-name: opacity;
    animation-duration: 12s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
  }
  
  .visible {
    display: inline-block;
    font-weight: 600;
    overflow: hidden;
    height: 40px;
  }
  
  .visible ul {
    margin: 0;
    padding: 0;
    list-style: none;
    animation-name: change;
    animation-duration: 15s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
  }
  
  .visible ul li {
    line-height: 40px;
    margin: 0;
  }
  
  @-webkit-keyframes opacity {
	0%		{opacity: 1}
	18%		{opacity: 1}

	23%		{opacity: 0}
	25%		{opacity: 1}
	40%		{opacity: 1}
	42%		{opacity: 0}

	48%		{opacity: 0}
	50%		{opacity: 1}
	65%		{opacity: 1}
	67%		{opacity: 0}
	
	73%		{opacity: 0}
	75%		{opacity: 1}
	85%		{opacity: 1}
	87%		{opacity: 0}
	
	93%		{opacity: 0}
	95%		{opacity: 1}
	100%	{opacity: 1}
}
@keyframes opacity {
	0%		{opacity: 1}
	18%		{opacity: 1}

	23%		{opacity: 0}
	25%		{opacity: 1}
	40%		{opacity: 1}
	42%		{opacity: 0}

	48%		{opacity: 0}
	50%		{opacity: 1}
	65%		{opacity: 1}
	67%		{opacity: 0}
	
	73%		{opacity: 0}
	75%		{opacity: 1}
	85%		{opacity: 1}
	87%		{opacity: 0}
	
	93%		{opacity: 0}
	95%		{opacity: 1}
	100%	{opacity: 1}
}
@-webkit-keyframes change {
	0%		{margin-top: 0;}
	15%		{margin-top: 0;}
	25%		{margin-top: -40px;}
	40%		{margin-top: -40px;}
	50%		{margin-top: -80px;}
	65%		{margin-top: -80px;}
	75%		{margin-top: -40px;}
	85%		{margin-top: -40px;}
	100%	{margin-top: 0;}
}
@keyframes change {
    0% { margin-top: 0; }
    12.5% { margin-top: 0; }
    25% { margin-top: -40px; }
    37.5% { margin-top: -40px; }
    50% { margin-top: -80px; }
    62.5% { margin-top: -80px; }
    75% { margin-top: -120px; }
    87.5% { margin-top: -120px; }
    100% { margin-top: 0; }
}
  @media screen and (max-width: 600px) {
    #tagline {
      font-size: 40px; /* Decrease font size for smaller screens */
      line-height: 30px; /* Adjust line height accordingly */
      height: 60px; /* Decrease height for smaller screens */
    }
  }

  /*---logo---*/

  .bottom-left-image {
    position: fixed; /* Position the image relative to the viewport */
    bottom: 30px; /* Align the bottom of the image to the bottom of the viewport */
    left: 20px; /* Align the left edge of the image to the left edge of the viewport */
    width: 200px; /* Adjust the width of the image as needed */
    height: auto; /* Maintain the aspect ratio of the image */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0); /* Add shadow to the image */
}
.copyright {
    margin: 0;
        padding: 0;
        position: relative;
    position: absolute;
    bottom: 5px; /* Adjust the distance from the bottom */
    left: 30px; /* Adjust the distance from the left */
    font-size: 15px; /* Adjust the font size */
    color: #000000; /* Adjust the color */
    font-family: "Dosis", Arial, sans-serif;
    line-height: 1.6;
    text-align: center;
}

/* Styles for the modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  opacity: 0; /* Start with opacity set to 0 */
  animation: fadeIn 1s forwards; /* Apply fade-in animation */
  backdrop-filter: blur(5px); /* Add backdrop blur effect */
}

/* Fade in animation */
@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

/* Fade out animation */
@keyframes fadeOut {
  from {
      opacity: 1;
  }
  to {
      opacity: 0;
  }
}


.modal-content {
  background-color: #000000c7;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  position: relative; /* Add this line */
  font-family: 'Dosis', Arial, sans-serif; /* Change font family */
  font-size: 25px;
  color: #f0f4a3;
}

.close {
  color: #f0f4a3;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: absolute; /* Add this line */
  top: 10px; /* Adjust as needed */
  right: 10px; /* Adjust as needed */
  cursor: pointer;
  z-index: 50;
}

.close:hover,
.close:focus {
  color: rgb(245, 144, 214);
  text-decoration: none;
}
/** Tabs **/
.tabs {
  display: flex;
  flex-wrap: wrap;
  
}

.tabs label {
  order: 1;
  display: block;
  padding: 1rem 2rem;
  margin-right: 0.2rem;
  cursor: pointer;
  background: #72055900;
  font-family: 'Dosis', Arial, sans-serif; 
  font-weight: normal;
  transition: background ease 0.2s;
  color: #ffffff; /* Text color for tab labels */
  font-size: 16px; /* Font size for tab labels */
  text-transform: uppercase; /* Convert text to uppercase */
  text-align: center; /* Center-align text */
  border-radius: 30px; /* Adjust the value to control the roundness */
}

.tabs .tab {
  order: 99;
  flex-grow: 1;
  width: 100%;
  display: none;
  padding: 1rem;
  background: #000000e6; /* Background color for tab content */
  color: #ffffff; /* Text color for tab content */
  font-size: 14px; /* Font size for tab content */
  font-family: "Dosis", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #000000;
  text-align: center;
}


.tabs input[type="radio"] {
  display: none;
}

.tabs input[type="radio"]:checked + label {
  background: #92046fdb;
}
.tabs input[type="radio"]:checked + label:hover {
  background: #65a1e6db; /* Change background color on hover */
}
.tabs input[type="radio"]:checked + label + .tab {
  display: block;
}

@media (max-width: 45em) {
  .tabs .tab,
  .tabs label {
    order: initial;
  }

  .tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}

/*---testimonials---*/

#demo {
  background: linear-gradient(112deg, #ffffff00 50%, rgba(250, 235, 215, 0) 50%);
  max-width: 900px;
  margin: auto
}
.modal-content2 {
  background-color: #000000bb;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  
}
.carousel-caption {
  position: initial;
  z-index: 10;
  padding: 5rem 8rem;
  color: rgba(78, 77, 77, 0.856);
  text-align: center;
  font-size: 1.2rem;
  font-style: italic;
  font-weight: bold;
  line-height: 2rem
}

@media(max-width:767px) {
  .carousel-caption {
      position: initial;
      z-index: 10;
      padding: 3rem 2rem;
      color: rgba(78, 77, 77, 0.856);
      text-align: center;
      font-size: 0.7rem;
      font-style: italic;
      font-weight: bold;
      line-height: 1.5rem
  }
}

.carousel-caption img {
  width: 6rem;
  border-radius: 5rem;
  margin-top: 2rem
}

@media(max-width:767px) {
  .carousel-caption img {
      width: 4rem;
      border-radius: 4rem;
      margin-top: 1rem
  }
}

#image-caption {
  font-style: normal;
  font-size: 1rem;
  margin-top: 0.5rem
}

@media(max-width:767px) {
  #image-caption {
      font-style: normal;
      font-size: 0.6rem;
      margin-top: 0.5rem
  }
}

i {
  background-color: rgb(0, 0, 0);
  padding: 1.4rem
}

@media(max-width:767px) {
  i {
      padding: 0.8rem
  }
}

.carousel-control-prev {
  justify-content: flex-start
}

.carousel-control-next {
  justify-content: flex-end
}

.carousel-control-prev,
.carousel-control-next {
  transition: none;
  opacity: unset;
}

/* Contact Form Styles */
.container {
  display: flex;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
}

.form-container {
  flex-grow: 1;
}

.form-group {
  margin-bottom: 20px;
}

label {
  font-weight: normal;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}

textarea {
  height: 100px;
}

input[type="submit"] {
  background-color: #e1f694;
  color: rgb(0, 0, 0);
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}

input[type="submit"]:hover {
  background-color: #eba3cf;
}

.info-panel {
  width: 350px;
  background-color: #00000000;
  padding: 50px;
  margin-bottom: 0px;
}

.info-item {
  border: 5px solid #0000008c;
  padding: 20px;
  margin-bottom: 100px;
  box-shadow: 0 0 20px rgba(242, 242, 160, 0.499); /* Glow effect on hover */
  color: #ffffff;
  font-family: "Dosis", sans-serif;
  font-size: 15px;
  color: #ffffff; 
}

.info-logo{
  position: relative; /* Position the image relative to the viewport */
  bottom: 0; /* Align the bottom of the image to the bottom of the viewport */
  width: 150px; /* Adjust the width of the image as needed */
  height: auto; /* Maintain the aspect ratio of the image */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0); 
}


.social-icons img {
  width: 30px;
  margin-right: 10px;
}

/* Modal content */
.modal-content4 {
  background-color: #000000a5;
  margin: 5% auto; /* 5% from the top, centered */
  padding: 20px;
  border: 1px solid #888;
  width: 60%; /* Could be more or less, depending on screen size */
}



#wrapper {
  position: relative;
  height: 90vh;
  background: #00000000;
  font-family: 'Comfortaa', cursive;
}

#canvas_container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
}

canvas {
  display: block;
}

.text {
  width: 80%;
  height: 80px;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  cursor: pointer;
  color: rgb(255, 255, 255);
  background-color: rgba(0, 0, 0, 0.81);
  font-size: 1.3rem;
  line-height: 1.5;
  user-select: none;
  overflow: hidden;
  display: flex;
  align-items:center;
}

.text span {
  color: #e7aa27;
}

.text .quoteText {
  width: 100%;
  margin: 0 auto;
}

.text .quoteText span {
  font-weight: 700;
}

.clickInfo {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  top: -80px;
  z-index: 11;
  cursor: pointer;
  color: #F9B31C;
  background-color: rgba(23, 23, 23, 0.9);
  padding: 10px 0;
  font-size: 20px;
}

.btn {
  position: absolute;
  bottom: 5%;
  right: 0px;
  transform: translateX(-50%);
  border: 1px solid white;
  border-radius: 5px;
  font-size: 0.9rem;
  padding: 0.5rem 0.7em;
  background: transparent;
  color: #F9B31C;
  -webkit-font-smoothing: antialiased;
  font-weight: 700;
  cursor: pointer;
  transition: all .3s;
  z-index: 11;
}

.btn_works {
  left: 100px;
  right: unset;
  text-decoration: none;
}

.btn:hover {
  background: #ffffff;
  color: #2a2b2f;
}

@media only screen and (max-width:815px) {
  .text {
    font-size: 1.2rem;
  }

  .text span {
    font-size: 0.8rem !important;
  }

  .clickInfo {
    font-size: 1rem;
  }
}
/* Styles for the modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: absolute; /* Add this line */
  top: 10px; /* Adjust as needed */
  right: 10px; /* Adjust as needed */
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
}
/*---tab1---*/


.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* Allow flex items to wrap */
}

.bio-content {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 25px;
  height: 50%;
  flex: 1; /* Distribute remaining space equally */
  margin: 0 10px; /* Add margin between flex items */
  max-width: 50%; 
}
.bio-content p {
  font-family: "Dosis",Arial, sans-serif; /* Change font family */
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-size: 20px; /* Change font size */
  line-height: 1.5; /* Adjust line height for better readability */
  color: #ffffff; /* Change text color */
  margin-top: 0; /* Remove top margin for paragraphs */
  
}
.tab1slika {

  width: 200px;

}
/*---galerija---*/

#tabTwoContent {
  padding: 20px;
  box-sizing: content-box;
  font-weight: normal;
  color: #000000dc;
  background: #000000c6;
  text-align: center;
  font-family: 'Dosis';
  padding: 0;
}

#tabTwoContent img {
  max-width: 80%;
  height: auto;
}

#tabTwoContent h1 {
  color: rgb(0, 0, 0);
  font-size: 20px;
}

.flip {
  position: relative;
  display: inline-block;
  margin-right: 2px;
  margin-bottom: 1em;
  width: 100%; /* Adjusted width for responsiveness */
}

.flip > .front,
.flip > .back {
  display: block;
  color: white;
  width: inherit;
  background-size: cover !important;
  background-position: center !important;
  height: 220px;
  padding: 1em 2em;
  background: #040404bc;
  border-radius: 10px;
}

.flip > .back p {
  font-size: 0.9125rem;
  line-height: 160%;
  color: #ffffffc1;
}

.text-shadow {
  text-shadow: 1px 1px rgba(0, 0, 0, 0.04), 2px 2px rgba(0, 0, 0, 0.04), 3px 3px rgba(0, 0, 0, 0.04), 4px 4px rgba(0, 0, 0, 0.04), 0.125rem 0.125rem rgba(0, 0, 0, 0.04), 6px 6px rgba(0, 0, 0, 0.04), 7px 7px rgba(0, 0, 0, 0.04), 8px 8px rgba(0, 0, 0, 0.04), 9px 9px rgba(0, 0, 0, 0.04), 0.3125rem 0.3125rem rgba(0, 0, 0, 0.04), 11px 11px rgba(0, 0, 0, 0.04), 12px 12px rgba(0, 0, 0, 0.04), 13px 13px rgba(0, 0, 0, 0.04), 14px 14px rgba(0, 0, 0, 0.04), 0.625rem 0.625rem rgba(0, 0, 0, 0.04), 16px 16px rgba(0, 0, 0, 0.04), 17px 17px rgba(0, 0, 0, 0.04), 18px 18px rgba(0, 0, 0, 0.04), 19px 19px rgba(0, 0, 0, 0.04), 1.25rem 1.25rem rgba(0, 0, 0, 0.04);
}

/* Media Query for responsiveness */
@media only screen and (min-width: 600px) {
  .flip {
    width: 400px;
  }
}
/*---price---*/
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

.main {
  max-width: 75rem;
  padding: 3em 1.5em;
}

.main__heading {
  font-weight: 200;
  font-size: 2.00em;
  margin-bottom: 0.75em;
  text-align: center;
  color: #eceff1;
  font-family: "Dosis", Helvetica, sans-serif;
}

.cards {
  position: relative;
}

.cards__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5em;
}

.card {
  --flow-space: 0.5em;
  --hsl: var(--hue), var(--saturation), var(--lightness);
  flex: 1 1 14rem;
  padding: 1.5em 2em;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  align-items: start;
  gap: 1.25em;
  color: #eceff1;
  background-color: #47283b;
  border: 1px solid #eceff133;
  border-radius: 15px;
  font-weight: 200;
  font-size: 1.0em;
  margin-bottom: 0.75em;
  text-align: center;
  color: #eceff1;
  font-family: "Dosis", Helvetica, sans-serif;
}

.card:nth-child(1) {
  --hue: 165;
  --saturation: 82.26%;
  --lightness: 51.37%;
}

.card:nth-child(2) {
  --hue: 291.34;
  --saturation: 95.9%;
  --lightness: 61.76%;
}

.card:nth-child(3) {
  --hue: 338.69;
  --saturation: 100%;
  --lightness: 48.04%;
}

.card__bullets {
  line-height: 1.4;
}

.card__bullets li::before {
  display: inline-block;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='16' title='check' fill='%23dddddd'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z' /%3E%3C/svg%3E");
  transform: translatey(0.25ch);
  margin-right: 1ch;
}

.card__heading {
  font-size: 1.05em;
  font-weight: 600;
}

.card__price {
  font-size: 1.75em;
  font-weight: 700;
}

.flow > * + * {
  margin-top: var(--flow-space, 1.25em);
}

.cta {
  display: block;
  align-self: end;
  margin: 1em 0 0.5em 0;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #0d0d0d;
  padding: 0.7em;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
}

.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  opacity: var(--opacity, 0);
  -webkit-mask: radial-gradient(
    25rem 25rem at var(--x) var(--y),
    #000 1%,
    transparent 50%
  );
  mask: radial-gradient(
    25rem 25rem at var(--x) var(--y),
    #000 1%,
    transparent 50%
  );
  transition: 400ms mask ease;
  will-change: mask;
}

.overlay .card {
  background-color: hsla(var(--hsl), 0.15);
  border-color: hsla(var(--hsl), 1);
  box-shadow: 0 0 0 1px inset hsl(var(--hsl));
}

.overlay .cta {
  display: block;
  grid-row: -1;
  width: 100%;
  background-color: hsl(var(--hsl));
  box-shadow: 0 0 0 1px hsl(var(--hsl));
}

:not(.overlay) > .card {
  transition: 400ms background ease;
  will-change: background;
}

:not(.overlay) > .card:hover {
  --lightness: 95%;
  background: hsla(var(--hsl), 0.1);
}

/*---wraptexthome---*/

.fancy-wrap {
  width: 100%; /* Adjust width as needed */
  margin: 0 auto; /* Center the content horizontally */
  background-color: #000000e4;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  font-family: "Dosis", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-align: center; /* Justify text for a clean look */
}


.fancy-wrap p {
  font-family: "Dosis",Arial, sans-serif; /* Change font family */
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-size: 20px; /* Change font size */
  line-height: 1.5; /* Adjust line height for better readability */
  color: #ffffff; /* Change text color */
  margin-top: 0; /* Remove top margin for paragraphs */
  
}
.fancy-wrap img {
  width: 200px; /* Adjust the width as needed */
  height: auto;
  margin: 10px;
  transition: transform 0.3s ease; /* Transition effect for smooth hover */
}
.fancy-wrap img:hover {
  transform: scale(1.1); /* Increase size on hover */
}

.fancy-wrap h3 {
  font-size: 20px; /* Adjust heading size as needed */
  margin-bottom: 10px; /* Add bottom margin to headings for spacing */
}

    /* Define the hover style */
    a:hover {
        color: red; /* Change the color to red when hovered over */
    }
    h3 {
      font-size: 24px; /* Set the font size */
      font-weight: bold; /* Set the font weight to bold */
      color: #000000; /* Set the text color */
      margin-bottom: 10px; /* Add some bottom margin for spacing */
  }
  h2 {
    font-size: 20px; /* Set the font size */
    font-weight: normal; /* Set the font weight to bold */
    color: #ffffff; /* Set the text color */
    margin-bottom: 10px; /* Add some bottom margin for spacing */
  }
  
  /*custom button home---*/


  .custom-button {
    background-color: #8dccef; /* Blue */
    border: none;
    color: rgb(3, 3, 3);
    padding: 15px 32px;
    font-family: "Dosis", Arial, sans-serif; /* Change font family */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.512); /* Glow effect */
}

.custom-button:hover {
    background-color: #ec2da6; /* Darker Green */
}
.main-flow{
  font-family: "Dosis", Arial, sans-serif; /* Change font family */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;

}

#tabThreeContent {
  padding: 20px;
  box-sizing: content-box;
  font-weight: normal;
  color: #ffffffdc;
  background: #000000c6;
  text-align: center;
  font-family: 'Dosis';
  padding: 0;
}
/*resume*/

.resume {
  width: 100%; /* Change to full width */
  max-width: 870px; /* Set maximum width */
  margin: 20px auto;
  background: #00000081;
  border: 1px solid #bbb;
  box-shadow: 0 0 20px -3px #bbb;
  position: relative;
  display: flex;
}

.resume h3 {
  font-family: "Dosis", Arial, sans-serif;
  text-align: center;
  font-size: 16px;
  color: #ffffff;
}
.resume span{

  font-family: "Dosis", Arial, sans-serif;
  text-align: center;
  font-size: 16px;
  color: #ffffff;

}
  .resume::before {
    content: "";
    width: 100%;
    height: 6px;
    background: #98bde5;
    position: absolute;
    bottom: 0;
    left: 0; }
  .resume::after {
    content: "";
    display: block;
    clear: both; }
  .resume .base, .resume .func {
    box-sizing: border-box;
    float: left; }
    .resume .base > div, .resume .func > div {
      padding-bottom: 10px; }
      .resume .base > div:last-of-type, .resume .func > div:last-of-type {
        padding-bottom: 0; }
  .resume .base {
    width: 225px;
    padding: 30px 15px;
    background: rgba(177, 89, 149, 0.411); }
    .resume .base .profile {
      background: #bce6f680;
      padding: 30px 15px 5px 15px;
      margin: -30px -15px 45px -15px;
      position: relative;
      z-index: 2; }
      .resume .base .profile::after {
        content: "";
        position: absolute;
        background: #e7ff61af;
        width: 100%;
        height: 30px;
        bottom: -15px;
        left: 0;
        transform: skewY(-5deg);
        z-index: -1; }
      .resume .base .profile .photo img {
        width: 100%;
        border-radius: 50%; }
      .resume .base .profile .info {
        text-align: center;
        color: #ffffff; }
        .resume .base .profile .info .name {
          margin-top: 10px;
          margin-bottom: 0;
          font-size: 1.5em;
          font-weight: normal; }

  .resume .func {
    width: 645px;
    padding: 30px 25px; }
    .resume .func:hover > div {
      transition-duration: 0.3s; }
      .resume .func:hover > div:hover h3 {
        letter-spacing: 1.6px; }
        .resume .func:hover > div:hover h3 i {
          transform: scale(1.2); }
      .resume .func:hover > div:not(:hover) {
        opacity: 0.5; }
    .resume .func h3 {
      transition-duration: 0.3s;
      margin-top: 0; }
      .resume .func h3 i {
        color: #fcfcfc;
        background: #8d9e78;
        width: 42px;
        height: 42px;
        font-size: 20px;
        line-height: 42px;
        border-radius: 50%;
        text-align: center;
        vertical-align: middle;
        margin-right: 8px;
        transition-duration: 0.3s; }
    .resume .func .work, .resume .func .edu {
      float: left; }
      .resume .func .work small, .resume .func .edu small {
        display: block;
        opacity: 0.7; }
      .resume .func .work ul li, .resume .func .edu ul li {
        position: relative;
        margin-left: 15px;
        padding-left: 25px;
        padding-bottom: 15px; }
        .resume .func .work ul li:hover::before, .resume .func .edu ul li:hover::before {
          animation: circle 1.2s infinite; }
        .resume .func .work ul li:hover span, .resume .func .edu ul li:hover span {
          color: #a5e7ff; }
@keyframes circle {
  from {
    box-shadow: 0 0 0 0px #3d405b; }
  to {
    box-shadow: 0 0 0 6px rgba(235, 164, 222, 0); } }
        .resume .func .work ul li:first-of-type::before, .resume .func .edu ul li:first-of-type::before {
          width: 10px;
          height: 10px;
          left: -2px; }
        .resume .func .work ul li:last-of-type, .resume .func .edu ul li:last-of-type {
          padding-bottom: 3px; }
          .resume .func .work ul li:last-of-type::after, .resume .func .edu ul li:last-of-type::after {
            border-radius: 1.5px; }
        .resume .func .work ul li::before, .resume .func .work ul li::after, .resume .func .edu ul li::before, .resume .func .edu ul li::after {
          content: "";
          display: block;
          position: absolute; }
        .resume .func .work ul li::before, .resume .func .edu ul li::before {
          width: 7px;
          height: 7px;
          border: 3px solid #a6aacd;
          background: #fcfcfc;
          border-radius: 50%;
          left: 0;
          z-index: 1; }
        .resume .func .work ul li::after, .resume .func .edu ul li::after {
          width: 3px;
          height: 100%;
          background: #3d405b;
          left: 5px;
          top: 0; }
        .resume .func .work ul li span, .resume .func .edu ul li span {
          transition-duration: 0.3s; }
    .resume .func .work {
      width: 42%; }
    .resume .func .edu {
      width: 58%; }
    .resume .func .skills-prog {
      clear: both; }
      .resume .func .skills-prog ul {
        margin-left: 15px; }
        .resume .func .skills-prog ul li {
          margin-bottom: 8px;
          display: flex;
          align-items: center;
          transition-duration: 0.3s; }
          .resume .func .skills-prog ul li:hover {
            color: #e07a5f; }
            .resume .func .skills-prog ul li:hover .skills-bar .bar {
              background: #a02772;
              box-shadow: 0 0 0 1px #ffffff; }
          .resume .func .skills-prog ul li span {
            display: block;
            width: 120px; }
          .resume .func .skills-prog ul li .skills-bar {
            background: #0d063a;
            height: 2px;
            width: calc(100% - 120px);
            position: relative;
            border-radius: 2px; }
            .resume .func .skills-prog ul li .skills-bar .bar {
              position: absolute;
              top: -1px;
              height: 4px;
              background: #f6f7f5;
              box-shadow: 0 0 0 #b2dbe1;
              border-radius: 5px; }
    .resume .func .skills-soft ul {
      display: flex;
      justify-content: space-between;
      text-align: center; }
      .resume .func .skills-soft ul li {
        position: relative; }
        .resume .func .skills-soft ul li:hover svg .cbar {
          stroke: #fcfcfc;
          stroke-width: 4px; }
        .resume .func .skills-soft ul li:hover span, .resume .func .skills-soft ul li:hover small {
          transform: scale(1.2); }
        .resume .func .skills-soft ul li svg {
          width: 95%;
          fill: transparent;
          transform: rotate(-90deg); }
          .resume .func .skills-soft ul li svg circle {
            stroke-width: 1px;
            stroke: #cdcdcd; }
          .resume .func .skills-soft ul li svg .cbar {
            stroke-width: 3px;
            stroke: #6080a8;
            stroke-linecap: round; }
        .resume .func .skills-soft ul li span, .resume .func .skills-soft ul li small {
          position: absolute;
          display: block;
          width: 100%;
          top: 52%;
          transition-duration: 0.3s; }
        .resume .func .skills-soft ul li span {
          top: 40%; }
    /* Responsive styles */

@media only screen and (max-width: 992px) {
  .resume {
    flex-direction: column; /* Change to column layout */
  }

  .resume .base,
  .resume .func {
    width: 100%; /* Set full width for base and func sections */
    padding: 20px; /* Adjust padding */
  }

  .resume .func {
    padding-top: 0; /* Remove top padding for func section */
  }

  .resume .func .work,
  .resume .func .edu {
    width: 100%; /* Set full width for work and edu sections */
  }

  .resume .func .skills-prog ul li,
  .resume .func .skills-soft ul li {
    width: 100%; /* Set full width for skill items */
  }
}