/* styles.css */

.carbon{
background-color: #000000;
background: linear-gradient(135deg, #1795e8 25%, transparent 25%) -10px 0/ 20px 20px, linear-gradient(225deg, #146499 25%, transparent 25%) -10px 0/ 20px 20px, linear-gradient(315deg, #1795e8 25%, transparent 25%) 0px 0/ 20px 20px, linear-gradient(45deg, #146499 25%, #384454 25%) 0px 0/ 20px 20px;
}
.poppins{
font-family: "Poppins", sans-serif;
}
.montserrat{
font-family: "Montserrat", sans-serif;
}
.focim{
font-family: "Poppins", sans-serif;
color: #146499;
text-align:left;
font-size:30px;
margin-left:24px;

}
.szov{
font-family: "Montserrat", sans-serif;
text-align:left;
font-size:18px;
margin-left:8px;
font-weight: 460;
color:rgb(15,15,45);

}
.alsobar{
background:rgb(245,245,245);
margin:0px;
text-align:center;
}
.faviconalsobar{
max-width:160px; display: block; margin-left: auto; margin-right: auto; transition: .2s ease; padding-top:8px;
}
.faviconalsobar:hover{
transform: rotate(30deg);
}

.porto{
 text-align:center;
 margin:auto;
 border: 2px solid black;
 border-radius:8px;
 max-width:70%;
}

.scroll-to-button{
text-decoration: none;
  color: #192d42;
  font-family: "Poppins", sans-serif;
  background:rgb(245,245,245);
	 border: 0px;
  font-size:17px;
  margin:8px;
}
.scroll-to-button:hover{
opacity:0.6;
}

.telbut{
  font-family: "Poppins", sans-serif;
  background:rgb(245,245,245);
	 border: 0px;
  font-size:16px;
position: relative;
background: linear-gradient(40deg, rgb(53,50,220), rgb(3,0,10));
      background-size: 200%; /* Makes the gradient twice as wide for smooth animation */
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent; /* The text itself should be transparent so the background shows through */
      animation: animate-gradient 2s infinite linear; /* Apply the animation */
}

@keyframes animate-gradient {
      0% {
        background-position: 0% 0%;
      }
	  33% {
        background-position: 0% 50%;
      }
      66% {
        background-position: 100% 100%;
      }
	  100% {
        background-position: 50% 50%;
      }
    }
	
.vertical-line{
 width: 100%;
 height: 1px;
 background-color: white;
 z-index: 1000;
}
.sticky-header {
  background:rgb(245,245,245);
  color: black;
  box-shadow:0px 0px 12px 1px black;
  margin:0px;
  position: sticky; /* Apply the sticky positioning */
  top: 0; /* Stick the element to the top of the viewport */
  z-index: 100; /* Ensure the navbar is above other content */
  border-bottom-right-radius:0px;
  border-bottom-left-radius:0px;

}

.sticky-header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.sticky-header ul {
  list-style: none;
  margin-left: 20%;
  padding: 0;
  display: flex;
}

.sticky-header li {
  margin-right: 20px;
}


.container {
  display: flex;               /* Use flexbox for layout */
  justify-content: space-between; /* Space between the boxes */
  gap: 24px;                   /* Gap between the boxes */
  text-align:center;
  padding: 2px;
}

.box {
  flex: 1;                     /* Make both boxes the same size */
  padding: 4px;
  text-align: center;
}
.sett2{
max-width:99%;
margin:auto;
box-shadow:0px 0px 16px 2px black;
border-radius:20px; border:1px solid gray;
background-image: linear-gradient(235deg, rgb(179,183,200), rgb(245,245,245));
text-align:center;
box-sizing: border-box;
}

.menubar{
	padding-top:26px; padding-bottom:8px; margin:auto; text-align:center;box-shadow:0px 0px 16px 2px black; border-radius:0px 0px 16px 16px; border:1px solid gray; background:rgb(245,245,245); margin-bottom: 16px;
}

.sett{
 max-height: 60px;
}
.probajo{
margin:auto;
text-align:center;
}
.profil{
max-width: 50%;             /* Make images responsive */
  height: auto;
  display: block;
  margin: 0 auto 10px; 
 }
 
 /* Linear Slideshow */
.slider-container {
  width: 100vw;
  height: 40vh;
  overflow: hidden;
  border-top: 3px solid #333;
  border-bottom: 3px solid #333;
  margin-top: 0px;
}

.slider-track {
  display: flex;
  transition: transform 1s ease-in-out;
}

.slider-track img {
  width: 100vw;
  height: 40vh;
  object-fit: cover;
  flex-shrink: 0;
}
 
 
 
 
@media (max-width: 768px) {    /* Responsive rules for smaller screens */
  .container {
    flex-direction: column;    /* Stack the boxes vertically */
    gap: 10px;                 /* Reduce gap for smaller screens */
  }
  
  
   /* Linear Slideshow */
.slider-container {
  height: 35vh;
}

.slider-track img {
  height: 35vh;
}
  
  
  
  
  
  
  
  
}





 @media screen and (min-width: 768px) {     /* Responsive rules for bigger screens */
.probajo{
max-width:680px;
margin:auto;
text-align:center;
}

.sett2{
max-width:1280px;
}
.profil{
max-width: 30%; 
}

}









.social-image{
height:32px;
padding:8px;
text-decoration:none;
display: block;
transition: .3s ease;
}
.social-image:hover{
transform: rotate(15deg);

}
.icocont{
 display: flex;
 justify-content: center; /* Centers the images horizontally */
 gap: 10px; /* Adds space between images */
}

.porto{
text-align:center;
 margin:auto;
 border: 2px solid black;
 border-radius:8px;
 max-width:45%;
}



body {
  margin: 0;
  padding: 0;

}

.two-part-section {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  gap: 20px;
  align-items: center;
}

.fade-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3; /* cleaner solution */
  overflow: hidden;
  border-radius: 12px;
}


.text, .image {
  flex: 1;
  min-width: 300px;
  position: relative;
  box-sizing: border-box;
}

.image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Fade Slideshow Styling */
.fade-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  border-radius: 12px;
  z-index: 0;
}

.fade-slide.active {
  opacity: 1;
  z-index: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .two-part-section,
  .two-part-section.reverse {
    flex-direction: column;
    text-align: center;
  }

  
  
}





}