@import url("style.css");


.second-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}
h5.results {
    background: var(--eighth-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: bold;
    

}
.klinic{
    content: "";
    background: var(--sixth-color);
    padding: 20px;
    border: 1px solid var(--third-color);
    border-radius: 10px;
   
}

.klinic-title{
    font-size: 10px;
    display: flex;
    align-items: center;
    text-align: left;
    font-size: 25px;
}
.klinic-top{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    text-align: left;
    font-size: 20px;
    font-weight: 900;
    color: var(--second-color);
}
.klinic-functions{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    text-align: left;
    font-size: 20px;
    font-weight: 900;
    color: var(--second-color);
}
.klinic-function1{
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: sans-serif;
    font-weight: 400;
    color: var(--third-color);
    font-size: 15px;
}
.line{
    width: 100%;
    height: 1px;
    background-color: var(--third-color);
    margin: 10px 0;
    opacity: 0.5;
}
.klinic .connect svg{
    rotate: 45deg;
}
@media (max-width: 1200px) {
   .klinic{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
   }
}
.web-profile img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (min-width: 1200px) {
    .klinic{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 1000px;
    }
}
.projects-container{
    margin-top: 40px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.third-section-main {
    overflow: hidden; /* Hide overflow */
    white-space: nowrap; /* Prevent line breaks */
    width: 100vw; /* Full width */
    rotate: -1deg;
    background: var(--eighth-color);
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    padding: 10px 0; /* Padding for spacing */
    color: var(--main-color);
    box-shadow: 0 0 40px 20px rgba(0, 0, 0, 0.5);
}
.third-section-main:hover{

    background: var(--sixth-color); /* Change background on hover */
    color: var(--second-color); /* Change text color on hover */
    transition: background 0.5s ease, color 0.1s ease; /* Smooth transition */

}


/* Add a hover effect to the text */
.scrolling-text h5:hover {
    animation-play-state: paused;

}

.third-section {
   
    display: flex; /* Use flexbox for alignment */
    animation: scroll 10s linear infinite; /* Animation for scrolling */
}

.scrolling-text {
    display: flex; /* Use flexbox for inline elements */
}

@keyframes scroll {
    0% {
        transform: translateX(0); /* Start from the left */
    }
    100% {
        transform: translateX(-50%); /* Move left by the full width of the text */
    }
}

h5 {
    display: inline-block; /* Keep h5 elements inline */
    margin: 0 20px; /* Space between words */
}
.scrolling-text{
    display: flex;
    align-items: center;
}

.star {
    width:20px;
    height: 20px;
    background: var(--main-color);
    clip-path: polygon(
      50% 0%, 61% 35%, 98% 35%, 
      68% 57%, 79% 91%, 50% 70%, 
      21% 91%, 32% 57%, 2% 35%, 
      39% 35%
    );
    animation: rotateStar 5s linear infinite;

  }
    .star:hover {
        background: var(--eighth-color);
    } 

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