:root {
  --color-primary-red: #850000;
  --color-primary-red-dark: #750000;
  --color-primary-red-light: #650000;

  --color-black: #000000;
  --color-dark-gray: #111111;
  --color-mid-gray: #333333;
  --color-light-gray: #cecece;
  --color-medium-gray: #aaaaaa;
  --color-white: #ffffff;

  --background-dark-20: rgba(0,0,0,0.2);
  --background-dark-40: rgba(0,0,0,0.4);
  --background-dark-50: rgba(0,0,0,0.5);
  --background-dark-60: rgba(0,0,0,0.6);
  --background-dark-70: rgba(0,0,0,0.7);
  --background-dark-80: rgba(0,0,0,0.8);

  --background-red-10: rgba(133,0,0,0.1);
  --background-red-20: rgba(133,0,0,0.2);
  --background-red-30: rgba(133,0,0,0.3);
  --background-red-40: rgba(133,0,0,0.4);
  --background-red-50: rgba(133,0,0,0.5);
  --background-red-90: rgba(133,0,0,0.9);
}

html * {
	
	cursor: url(https://topfm.lt/arrowheadsz.svg) 12 12, auto;
	
}

* {

 font-family: Arial, Helvetica, sans-serif;

  box-sizing: border-box;


}
*::selection {

  background-color: unset;

}


/* Style the body */

body {
	
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--color-black);
  margin: auto;
  max-width: 1920px;

}

img.kosmonautai {
	
	margin-left: -200px;
	margin-top: 40px;
	
	float: left;
	position: absolute;
	
}
img.dideles {
	
	margin-left: -200px;
	margin-top: 0px;
	
	float: left;
	position: absolute;
	
}
.header {
  text-align: center;
	margin-left: auto;
	margin-right: auto;
  background-color: rgba(133, 0, 0, 0.3);
  color: white;
  width: 100%;

}

.headerx {
	padding: 40px;
	
  text-align: center;
	margin-left: auto;
	margin-right: auto;
  background-color: rgba(0, 0, 0, 0.4);
	position: relative;
  color: white;

  width: 100%;

}

.headernaujienos {
	padding: 40px;
	margin-left: auto;
	margin-right: auto;
  background-color: rgba(0, 0, 0, 0.4);
	position: relative;
  color: white;
  width: 100%;
}

.ilgisa {
	
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
}

.headerx textarea {
  width: 100%;
  height: 240px;
  padding: 20px 25px;
  box-sizing: border-box;
  border: 0px solid #ccc;
  border-radius: 20px;
  background-color: var(--background-dark-40);
  color: var(--color-white);
 
  resize: none;
}
.headerx button {
margin-top: 10px;
  width: 77%;
  padding: 15px 25px;
  box-sizing: border-box;
  border: 0px solid #ccc;
  border-radius: 10px;
  background-color: var(--background-dark-60);
  color: var(--color-white);

}

.headerx button:hover {
margin-top: 10px;
  width: 77%;
  padding: 15px 25px;
  box-sizing: border-box;
  border: 0px solid #ccc;
  border-radius: 10px;
  background-color: var(--background-dark-80);
  color: var(--color-white);

}



/* Increase the font size of the heading */

.header h1 {

  font-size: 40px;

}



/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */




.ilgis {

	

	margin: auto;

	max-width: 1300px;

	

}



/* Column container */

.row {  

  display: -ms-flexbox; /* IE10 */

  display: flex;

  -ms-flex-wrap: wrap; /* IE10 */

  flex-wrap: wrap;

}



/* Create two unequal columns that sits next to each other */

/* Sidebar/left column */

.side {

  -ms-flex: 30%; /* IE10 */

  flex: 30%;

  padding-right: 30px;

}
.chato {
	
	max-width: 1200px;
	margin: auto;
	
	
}

.chatas {
	padding: 20px;
  -ms-flex: 60%; /* IE10 */
  background-color: var(--background-red-20);
  flex: 60%;
  max-width: 800px;
  max-height: 360px;
	margin-right: 40px;
	border-radius: 20px;
	overflow: scroll;
            /* Hides the scrollbar */
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

.rasyti {
	padding: 30px;
  -ms-flex: 30%; /* IE10 */
  background-color: var(--background-red-20);
  flex: 30%;
  max-width: 280px;
  	border-radius: 20px;
}


.zinute {
	
	text-align: left;
	height: 55px;
	margin-top: 9px;
	margin-bottom: 9px;
	width: 100%;
	display: inline-block;
	
}

.zinuter {
	
	text-align: right;
	height: 60px;
	margin-top: 7px;
	margin-bottom: 7px;
	width: 100%;
	display: inline-block;
	
}

.dainosn {

  -ms-flex:32%; /* IE10 */

  flex: 32%;


}

.kasgroja {

  -ms-flex: 50%; /* IE10 */
  flex: 50%;
	max-width: 350px;
	margin-right: -120px;
	margin-bottom: -5px;
	padding: 0px;

}

img.parasyk {
max-width: 180px;
float: right;
position: relative;
 right: 0; 
 margin-right: -75px;
 margin-top: 45px;
}
img.dj{
float: left;
position: absolute;
}
.kasplayeris {

  -ms-flex: 50%; /* IE10 */
  flex: 50%;
	padding-top: 63px;
	padding-bottom: 80px;

}

.dainosp {

  -ms-flex:32%; /* IE10 */
	margin-left: -70px;
  flex: 32%;
	

}

h3.sekite {
	
	padding-left: 28px;
	
}
.dainosi {

  -ms-flex: 42%; /* IE10 */
  flex: 42%;
	margin-left: -140px;
padding-left: 90px;
padding-right: 70px;
  margin-top: auto;
width: 800px;
  margin-bottom: auto;

  text-align: center;


  font-size: 18px;

}

.logo {

  text-align: center;
  
}

.navigacija{

  -ms-flex: 80%; /* IE10 */

  flex: 80%;

}

/* Main column */

.main {   

  -ms-flex: 70%; /* IE10 */

  flex: 70%;

}



/* Styling for each news item */
.naujienos {   
    background-color: var(--background-red-10);
    border-radius: 10px;
    flex: 0 0 calc(50% - 16px); /* Each item takes up 50% width minus margin */
    box-sizing: border-box; /* Ensures padding and margin are included in width calculation */
    padding: 20px;
    margin: 8px; 
    color: var(--color-white);
    font-size: 14px;
    transition: background-color 0.3s ease; /* Smooth transition on hover */
}

/* Hover effect for news items */
.naujienos:hover {   
    background-color: rgba(133,0,0,0.15);
}

/* Container for all news items */
.naujienosvisos {
    display: flex; /* Flexbox layout */
    flex-wrap: wrap; /* Allow items to wrap into new rows */
    justify-content: flex-start; /* Align items to the left */
    padding: 20px; /* Padding inside container */
    background-color: var(--background-dark-20);
}

/* News container for the list of items */
#news-container {
    display: flex; /* Use flex layout to arrange news items */
    flex-wrap: wrap; /* Allow news items to wrap */
    width: 100%; /* Ensure it takes full width */
    opacity: 0; /* Initially hidden for fade-in effect */
    transition: opacity 0.5s ease; /* Smooth fade-in effect */
}

/* Pagination container */
#pagination {
    display: flex; /* Align pagination links horizontally */
    justify-content: center; /* Center pagination items */
    align-items: center;
    gap: 10px; /* Add space between pagination items */
    width: 100%; /* Make sure pagination takes full width */
    margin-top: 20px; /* Optional spacing above pagination */
}

/* Pagination links */
#pagination a {
    color: var(--color-light-gray);
    text-decoration: none;
    font-size: 16px;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    background-color: var(--background-red-10);
}

#pagination a:hover {
    background-color: var(--background-red-20);
}

#pagination a.active {
    background-color: var(--background-red-30);
}

/* Responsiveness for smaller screens */


/* Responsiveness for smaller screens */


/* Fake image, just for this example */

.fakeimg {

  background-color: var(--color-medium-gray);

  width: 100%;

  padding: 20px;

}


.text {

  color: #f2f2f2;

  font-size: 14px;
	max-width:500px;
  text-align: center;
  position: relative;
	text-transform: uppercase;
	border-radius: 10px;
  padding: 20px;
  color: var(--color-light-gray);
  padding-bottom: 30px;
}

.text h2{
	color: var(--color-white);
	font-size: 35px;
	margin-top: 10px;
	margin-bottom: 5px;
	
}

.antraste {

	text-align: center;

	font-size: 20px;

	background-color: var(--background-red-20);

	color: var(--color-white);

	padding: 20px 20px;

	width: 100%;

	border-radius: 0px 10px 0px 0px;

	margin-top: 30px;

}


.tekstas {

	padding: 20px 30px;
	color: var(--color-mid-gray);
	background-color: var(--background-dark-20);
	border-radius: 0px 0px 0px 10px;

}



.active, .dot:hover {

  background-color: #717171;

}



/* Fading animation */

.fade {

  animation-name: fade;

  animation-duration: 1.5s;

}




/* Volume Control Overlay */
        .volume-control-overlay {
            display: none;
            position: fixed;
            justify-content: center;
            align-items: center;
            z-index: 10;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .volume-control-overlay.open {
            display: flex;
            opacity: 1;
        }

        .voverlay-content {
            background: var(--color-dark-gray);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            text-align: center;
            width: 280px;

            position: relative;
            color: var(--color-white);
        }

        .voverlay-content h3 {
            margin-bottom: 30px;
            color: var(--color-white);
            font-size: 22px;
            font-weight: 600;
        }

        /* Horizontal Slider */
        input[type="range"] {
            width: 200px;
            height: 10px; /* Increased height for better visibility */
            background: #ddd;
            border-radius: 5px;
            -webkit-appearance: none;
            appearance: none;
            outline: none;
            
            transition: background 0.3s ease;
            margin: 0;
            position: relative;
        }

        input[type="range"]:focus {
            background: #ff7e5f;
        }

        input[type="range"]::-webkit-slider-runnable-track {
            width: 100%;
            height: 10px;
            background: #ddd;
            border-radius: 5px;
            position: relative;
        }

        /* Thumb styling */
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 25px;
            height: 25px;
            background: var(--color-primary-red-dark);
            border-radius: 50%;
            
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            transition: background 0.3s ease;
            position: relative;
            top: -7px;  /* Center thumb vertically */
        }

        input[type="range"]::-webkit-slider-thumb:hover {
            background: #550000;
        }

        #volumeValue {
            color: var(--color-white);
            font-size: 16px;
            font-weight: bold;
            margin-top: 10px;
            display: block;
        }

        /* Close button */
        .close-btn {
            font-size: 25px;
            color: var(--color-white);
            position: absolute;
            top: 10px;
            right: 10px;
            font-weight: bold;
            transition: color 0.3s ease;
        }

        .close-btn:hover {
            color: var(--color-white);
        }


.player {

	max-width: 680px;
	margin: auto;
	padding-left: 20px;
	max-height: 200px;





  .cover {
	

    width: 140px;

    height: 140px;

    border-radius: 50%;

    overflow: hidden;

    box-shadow: 0 3px 10px 0 var(--color-black);



    img {

      width: 100%;

      height: 100%;

      object-fit: cover;

    }

  }



  .info {
	padding-left: 5px;
	margin-top: 20px;
    text-align: center;
	max-width: 235px;
	overflow: hidden;
	white-space: nowrap;
    .title {

		transition: left 5s ease-in-out;
	
      font-size: 14px;

      font-weight: 700;
position: relative;
      color: var(--color-white);
		left: 0;
      margin-bottom: 2px;

    }
	.title:hover {
      left: -100%;  /* Slide text to the left on hover */
    }


    .singer {
		transition: left 5s ease-in-out;
		position: relative;
		left: 0;
      font-size: 13px;

      color: #999;

    }
	
	.singer:hover {
      left: -100%;  /* Slide text to the left on hover */
    }

  }



  .btn-box {


	margin-top: 15px;
    display: flex;

    



    i:first-child {

      font-size: 38px;

      color: var(--color-primary-red);

      margin: 0 22px 0 20px;
		
	  cursor: url(https://topfm.lt/arrowheadsz.svg) 12 12, auto;

    }
	i {

      font-size: 38px;

      color: var(--color-primary-red);

      margin: 0 22px;
	
	cursor: url(https://topfm.lt/arrowheadsz.svg) 12 12, auto;

    }

    i.active {

      color: var(--color-dark-gray);

	  background-color: unset;

    }

  }

  

  .volume-box.active {

    display: block;

	background-color: unset;

  }

  .music-box {

	margin-left: 40px;

    .play,

    .pause {

      position: absolute;
 box-shadow: 0 3px 10px 0 var(--color-black);
     

      width: 140px;

      height: 140px;

      border-radius: 50%;

      background-color: var(--color-dark-gray);

	cursor: url(https://topfm.lt/arrowheadsz.svg) 12 12, auto;

      transition: all 0.4s;



      i {

        font-size: 66px;

        color: var(--color-primary-red);

        position: absolute;

        left: 50%;

        top: 50%;

        transform: translate(-48%, -50%);

      }

    }

    .pause {

      i {

        font-size: 66px;

        transform: translate(-50%, -50%);

      }

    }

  }

}



@keyframes fade {

  from {opacity: .4} 

  to {opacity: 1}

}



/* On smaller screens, decrease text size */



.visuallyhidden {
  position: absolute;
  z-index: -1;
  right: 0;
  opacity: 0;
  
}

h1 {
  color: white;
  text-align: center;
  margin-top: 1em;
}

.container {
  overflow: hidden;
  padding: 20px;
  margin-top: 2em;
  background: rgba(0,0,0,.1)
}

.card-carousel {
  --card-width: 80%;
  --card-max-width: 280px;
  --card-height: 350px;
  --carousel-min-width: 600px;
  z-index: 1;
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: var(--card-height);
  min-width: var(--carousel-min-width);
  transition: filter .3s ease;
}


.card-carousel.smooth-return {
  transition: all .2s ease;
}

.card-carousel .card {
  background-color: var(--color-dark-gray);
  width: var(--card-width);
  max-width: var(--card-max-width);
  text-align: center;
  padding: 1em;
  min-width: 400px;
  height: var(--card-height);
  position: absolute;
  margin: 0 auto;
  color: rgba(255,255,255,.8);
  transition: inherit;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
  border-radius: 1em;
  filter: brightness(.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card.highlight {
  filter: brightness(1)
}




.image-container {
  width: 12em;
  height: 12em;
  position: relative;
  background-size: cover;
  margin-bottom: 2em;
  border-radius: 100%;
  padding: 1em;
  -webkit-box-shadow: inset 0px 0px 17px 0px var(--background-dark-50);
-moz-box-shadow: inset 0px 0px 17px 0px var(--background-dark-50);
box-shadow: inset 0px 0px 17px 0px var(--background-dark-50);
  
}

.image-container::after {
  content: "";
  background-color: var(--color-white);
  z-index: -2;
  display: block;
  width: 110%;
  height: 110%;
  border: solid 3px var(--background-red-10);
  border-radius: 100%;
  position: absolute;
  top: calc(-5% - 3px);
  left: calc(-5% - 3px);
}

/* width */
::-webkit-scrollbar {
  width: 14px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--color-dark-gray);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--color-primary-red-light);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #85000;
}
.butonai{
	
	position: absolute;
	left: 0px;
	top: 20%;
}
.fa {
	display: initial;
  padding: 10px;
  font-size: 24px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  opacity: 0.7;
}

.fab {
	display: initial;
  padding: 10px;
  font-size: 24px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  opacity: 0.7;
}
.fab:hover {
    opacity: 1;
}
.fa:hover {
  opacity: 1
}

.fa-facebook {

  background-color: var(--background-dark-60);
  color: white;
}
.fa-youtube {

    background-color: var(--background-dark-60);
  color: white;
}
.fa-discord {
  background-color: var(--background-dark-60);
  color: white;
}

.nuotraukyte {

padding-right: 10px;	
	
}

.nuotraukyter {

padding-left: 10px;	
	
}

.parase {
	
	padding-top: 5px;
	
}

.foniukas {
	float: left;
display: flex;
	background-color: var(--background-dark-40);
	padding: 12px 20px 5px 10px;
	border-radius: 20px;
}

.foniukasz {
display: flex;
float: right;
background-color: var(--background-dark-40);
padding: 12px 10px 5px 20px;
	border-radius: 20px;
}

.naujienos img {
	
	border-radius: 20px;
	width: 100%;
	max-height: 200px;
	margin-bottom: 10px;
	border: 2px solid;
	border-color: var(--background-dark-20);
}

.headernaujienos h2 {
text-align: center;
margin: 0px 0px 0px 5px;
padding: 0px;
float: left;
font-size: 16px;
}

.headernaujienos h5 {
text-align: center;
margin: 5px 10px 8px 5px;
padding: 0px;
font-size: 12px;
font-weight: 100;
float: right;

}

.headernaujienos p {
	
margin: 10px 5px;
padding: 0px;

}

  .overlay {
  width: 90%;
  max-width: 700px;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 500;
  background-color: var(--color-dark-gray);
  text-align: center;
  border-radius: 20px;
}

  .overlaybig {
  width: 100%;
  max-width: 800px;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 500;
  background-color: var(--color-dark-gray);
  text-align: left;
  border-radius: 20px;
  padding: 50px;
}
.overlaybig a{
	
	text-decoration: none;
	
}
.overlay a{
	
	text-decoration: none;
	
}
.overlay-content {
  position: relative;
  text-align: center;
  
}
.overlay-content i{
  padding: 18px 0px 18px 18px;
  color: var(--color-primary-red);
  postion: absolute;
}

.input_field {
	
	background-color: rgba(255,255,255,1);
	margin: auto;
	display: flex;
	text-align: center;
	width: 90%;
	max-width: 300px;
	margin-top: 15px;
	margin-bottom: 15px;
	max-height: 65px;
	transition: max-height 0.5s;
	overflow: hidden;
	border-radius: 10px;
	
}
.input_field input {
	width: 100%;
	background-color: transparent;
	border: 0;
	outline: 0;
	padding: 18px 15px;
	color: var(--color-primary-red-dark);
}

.button_field {
	width: 90%;
	max-width: 300px;
	margin: auto;
	display: flex;
	
}

.button_field button {
	background-color:var(--background-red-50);
	color: var(--color-white);
	height: 45px;
	border: 0;
	outline: 0;
	cursor: url(https://topfm.lt/arrowheadsz.svg) 12 12, auto;
	transition: background 1s;
	width: 100%;
	margin: 20px 0px 30px 0px;
	border-radius: 10px;
}
.warning {
	
	margin-top: -20px;
	color: var(--color-white);
	
}

.overlay h1 {
	
	margin: 10px;
	padding-top: 40px;
	padding-bottom: 20px;
	
}
.sticky {
	
	position: sticky;
	top: 0;
	z-index: 500;
}
.topnav {
  overflow: hidden;
  background-color: var(--background-dark-80);
}

.topnav a {
  float: left;
  display: block;
  color: var(--color-white);
  text-align: center;
  padding: 18px 26px;
  text-decoration: none;
  font-size: 17px;
}

a.nieko {

  display: block;
  
}

.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
	
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
.dropdown .dropbta {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--background-dark-70);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px var(--background-dark-20);
  z-index: 1;
  }

.dropdown-content a {
	font-size: 16px; 
  float: none;
  color: var(--color-white);
  padding: 14px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: var(--background-red-50);
  color: white;
}

.dropdown-content a:hover {
 background-color: var(--background-red-50);
  color: var(--color-white);
}

.dropdown:hover .dropdown-content {
  display: block;
}


.dropbtn {
	
	padding: 7px 30px;
	display: flex;
	align-items: center;
	min-width: 160px;
	
}

.dropbta {
	
	padding: 1px 15px;
	align-items: center;
	min-width: 60px;
}

.dropbta:hover {

background: var(--background-red-50);

}
  .kontaktai {
            background: var(--background-red-20);
            display: flex;
            align-items: center;
            justify-content: center;
            max-height: 540px;
			padding-top: 20px;
			padding-bottom: 40px;
        }
 .slider-container {
            width: 1400px;
            overflow: hidden;
            position: relative;
        }

        .team-slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .slide {
            flex: 0 0 calc(25% - 20px); /* 4 slides visible at once, with space */
            position: relative;
            text-align: center;
            overflow: hidden;
            border-radius: 15px;
            margin-right: 20px; /* Adds space between slides */
        }

        .slide:last-child {
            margin-right: 0; /* Removes the space for the last slide */
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease-in-out;
        }

        .slide:hover img {
            transform: scale(1.1);
        }

        .sinfo {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 15px 10px;
            text-align: center;
            transition: 0.3s;
        }

        .slide:hover .sinfo {
            background: rgba(0, 0, 0, 0.9);
            color: white;
        }

        h2 {
            font-size: 18px;
            margin-bottom: 5px;
        }

        p {
            font-size: 14px;
            opacity: 0.8;
        }

        .social-icons {
            margin-top: 10px;
        }

        .social-icons i {
            margin: 0 10px;
            color: #fefefe;
            font-size: 20px;
            text-decoration: none;
            transition: color 0.3s;
			background-color: unset;
        }

        .social-icons i:hover {
            color: var(--color-primary-red); /* Change to your preferred hover color */
			background-color: unset;
        }
		
		.footer {
            background: var(--background-dark-50);
            color: var(--color-white);
            padding: 20px 20px;
            text-align: center;
        }

        .footer .footer-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 20px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .footer .footer-section {
            flex: 1 1 calc(25% - 40px);
            padding: 20px;
            box-sizing: border-box;
            text-align: left;
        }
		
        .footer .footer-section a {
            color: var(--color-light-gray);
			text-decoration: none;
        }
		
		.footer .footer-section img {
           width: 80%;
		   margin-top: 20px;
        }

        .footer .footer-section h3 {
            font-size: 20px;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .footer .footer-section p {
            margin: 8px 0;
            font-size: 14px;
        }

        .footer .footer-section .social-icons a {
            color: var(--color-white);
            margin: 10px;
            font-size: 20px;
            transition: color 0.3s;
        }

        .footer .footer-section .social-icons a:hover {
            color: #1e90ff;
        }

        .footer .footer-bottom {
            margin-top: 20px;
            font-size: 14px;
            color: var(--color-medium-gray);
			max-width: 380px;
			margin-left: auto;
			margin-right: auto;
        }

        .footer .footer-bottom a {
            color: #1e90ff;
            text-decoration: none;
        }


		
		.social-iconsz i {
            padding: 14px 8px;
            color: var(--color-dark-gray);
			background-color: var(--color-white);
            font-size: 20px;
            text-decoration: none;
            transition: color 0.3s;
			border-radius: 5px;
        }

        .social-iconsz i:hover {
            color: var(--color-primary-red); /* Change to your preferred hover color */
			background-color: var(--color-white);
        }
		
		.archyvas {	
			background: var(--background-dark-40);
            color: white;
            display: flex;
            justify-content: center;
            margin: 0;
            padding-top: 30px;
			padding-bottom: 40px;
			width: 100%;
			
		}
		.archyvasa {	
			background: var(--background-dark-50);
            color: white;
            justify-content: center;
            text-align: center;	
			padding-top: 20px;
			padding-bottom: 20px;
			font-size: 40px;
			font-weight: 600;
		}
        .containerz {
            width: 1200px;
            display: flex;
            background: var(--background-red-20);
            border-radius: 10px;
            overflow: hidden;
        }
		
		.containerz h2 {
			
			margin: 0px;
			padding-bottom: 20px;
			padding-top: 10px;
			font-size: 40px;
			
		}

        /* Left - Video Player */
        .video-player {
            width: 70%;
            padding: 20px;
            text-align: center;
        }

        iframe {
            width: 100%;
            height: 400px;
            border-radius: 10px;
            border: none;
        }

        /* Right - Video List */
        .video-list {
            width: 30%;
            background: var(--background-dark-20);
            padding: 20px;
			padding-bottom: 10px;
            max-height: 445px; /* Limit height */
            overflow: scroll;
            /* Hides the scrollbar */
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none;  /* Internet Explorer 10+ */
        }

        .video-item {
            display: flex;
            align-items: center;
            background: var(--background-red-10);
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            transition: background 0.3s;
        }

        .video-item:hover {
            background: var(--background-red-20);
        }

        .video-item img {
            width: 80px;
            height: 50px;
            border-radius: 5px;
            margin-right: 10px;
        }

        .video-item span {
            font-size: 14px;
            color: #ddd;
        }
		

		.programaa {	
			background: var(--background-red-30);
            color: white;
            justify-content: center;
            text-align: center;	
			padding-top: 20px;
			padding-bottom: 20px;
			font-size: 40px;
			font-weight: 600;
		}

.profile-container {
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 500;
    /* Optional: add a subtle light backdrop if you want */
    /* background: rgba(255, 255, 255, 0.8); */
}

.profile-card {
    width: 650px;
    background: #ffffff; /* white background */
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); /* lighter, softer shadow */
    display: flex;
    padding: 55px;
    transition: transform 0.3s ease;
    color: #333333; /* dark text */
}

.zinute-card {
    width: 460px;
    display: block;
    background: #ffffff; /* white background */
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    padding: 55px;
    transition: transform 0.3s ease;
    color: #333333;
}

.profile-card:hover {
    /* Optional subtle hover effect */
    transform: scale(1.03);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

        /* Kairė pusė: Nuotrauka ir socialinių tinklų nuorodos */
        .left-side {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 30px;
            justify-content: center;
            position: relative;
        }

        /* Profilio nuotrauka */
        .profile-img {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
			border: 5px solid var(--color-mid-gray);
            margin-bottom: 20px;
            position: relative;
        }

        .profile-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Pakeisti nuotrauką mygtukas */
        .change-photo-btn {
            position: absolute;
            bottom: 10px;
            right: 40%;
            background-color: var(--color-mid-gray);
            color: var(--color-white);
            border: none;
            border-radius: 50%;
            padding: 10px;
            transition: background-color 0.3s ease;
        }

        .change-photo-btn:hover {
            background-color: var(--background-red-90);
			color: var(--color-white);
        }

        .change-photo-btn i {
            font-size: 20px;
        }

        /* Socialinių tinklų nuorodos */
        .social-links {
            display: flex;
            gap: 15px;
            justify-content: center;
        }

        .social-links a {
            width: 40px;
            height: 40px;
            background-color: var(--color-mid-gray);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            transition: background-color 0.3s ease;
            text-decoration: none;
        }

        .social-links a:hover {
            background-color: var(--background-red-20);
        }

        .social-links a i {
            font-size: 18px;
			background-color: rgba(0,0,0,0.0);
        }

        /* Dešinė pusė: Profilio informacija */
        .profile-info {
            flex-grow: 1;
            text-align: left;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }


        .profile-name {
			text-align: center;
            font-size: 32px;
            font-weight: 600;
            color: var(--color-white); /* Balta spalva vardui */
			
        }

        .profile-title {
            font-size: 14px;
            color: var(--color-medium-gray); /* Šviesesnė spalva titului */
        }

        .profile-details {
            margin-bottom: 20px;
        }

        .profile-details p {
            margin: 5px 0;
            font-size: 14px;
            color: #ccc; /* Šviesus tekstas detalėms */
        }

        .profile-details strong {
            font-weight: 600;
            color: var(--color-white);
			/* Balta spalva svarbiems tekstams */
        }

        /* Mygtukai privačiam pranešimui ir nustatymams */
        .profile-buttons {
            margin-top: 0px;
            display: flex;
            gap: 15px;
            align-self: flex-start;
        }
		

        .profile-buttons button {
            font-size: 14px;
            color: #666;
            background-color: #f5f5f5;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            font-weight: 600;
            transition: background-color 0.3s ease;
        }
		
		        .profile-buttons input {
            font-size: 14px;
            color: #666;
            background-color: #f5f5f5;
            border: none;
			max-width: 50%;
            border-radius: 5px;
            padding: 10px 20px;
            font-weight: 600;
            transition: background-color 0.3s ease;
        }
		
        .profile-buttons button:hover {
            background-color: #eaeaea;
        }
		

        /* Atsakant į mažesnes įrenginių ekrano rezoliucijas */

		
		#notification-bar {
            background-color: var(--color-dark-gray);
            color: white;
            display: none;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
            font-size: 14px;
            transition: all 0.3s ease;
			z-index: 500;
        }
		.notification {
			display: flex;
			align-items: center;
			background-color: var(--color-dark-gray);
			padding: 14px 15px;
			font-size: 15px;
			transition: background-color 0.3s ease;
			width: 100%; /* Ensure it stretches within the parent */
		}
				.notification:hover {

			background-color: var(--background-red-50);

			transition: background-color 0.3s ease;
		}

        #notification-bar:hover {
            background-color: var(--color-dark-gray);
        }
		#notification-bar img {
            border-radius: 50%;
			padding-right: 10px;
        }

        /* Open Chat Button */
        .open-chat-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #ff5722;
            color: white;
            padding: 14px 18px;
            border-radius: 50%;
            font-size: 22px;
            box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }

        .open-chat-btn:hover {
            background-color: #e64a19;
            transform: scale(1.1);
        }

        /* Chat Box */
        #chat-box {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 340px;
            background: var(--color-white)fff;
            border-radius: 0px 0px 20px 20px;
            box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1);
            display: none;
            flex-direction: column;
            overflow: hidden;
            border: 0px solid var(--color-dark-gray);
			z-index: 500;
        }

        /* Chat Header */
		#chat-header {
			background-color: var(--color-dark-gray);
			color: white;
			padding: 14px 20px;
			display: flex;
			justify-content: space-between; /* Spacing avatar and button */
			align-items: center; /* Centering elements vertically */
			font-weight: 600;
			font-size: 16px;
			border-bottom: 1px solid #e0e0e0;
		}

		#chat-header .avatar {
			width: 30px;
			height: 30px;
			border-radius: 50%;
		}

		#chat-header .chat-nickname {
			flex-grow: 1; /* Allow nickname to take up the remaining space */
			text-align: center; /* Center the nickname */
		}

		#chat-header button {
			background-color: transparent;
			color: white;
			font-size: 18px;
			border: none;
			transition: color 0.3s ease;
}

		#chat-header button:hover {
			color: #f1f1f1;
		}

        /* Chat Messages */
        #chat-messages {
            height: 300px;
            overflow-y: auto;
            padding: 15px;
            font-size: 14px;
            line-height: 1.6;
            background-color: #f9f9f9;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        /* Message */
        .message {
            margin-bottom: 12px;
            padding: 0px 15px;
            border-radius: 10px;
            max-width: 80%;
            font-size: 14px;
            line-height: 1.5;
            display: flex;
            align-items: center;
            word-wrap: break-word; /* Ensures the word wraps to the next line */
            word-break: break-word; /* Breaks long words */
        }

        /* Sent Message */
        .message.sender {
            background-color: #ff5722;
            color: white;
            align-self: flex-end;
            justify-content: flex-end;
        }

        /* Received Message */
        .message.receiver {
            background-color: #e0e0e0;
            color: var(--color-mid-gray);
            align-self: flex-start;
            justify-content: flex-start;
        }

        /* Avatar */
        .message img {
            border-radius: 50%;
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }

        /* Chat Input */
        #chat-input {
            display: flex;
            padding: 12px;
            background-color: #f9f9f9;
            border-top: 1px solid #ddd;
        }

        #chat-input input {
            flex: 1;
            padding: 10px 15px;
            font-size: 14px;
            border-radius: 10px;
            border: 1px solid #ddd;
            outline: none;
            transition: border-color 0.3s ease;
        }

        #chat-input input:focus {
            border-color: #ff5722;
        }

        #chat-input button {
            background-color: var(--color-dark-gray);
            color: white;
            padding: 10px 15px;
            font-size: 14px;
            border: none;
            border-radius: 10px;
            margin-left: 8px;
            transition: background-color 0.3s ease;
        }

        #chat-input button:hover {
            background-color: var(--color-dark-gray);
        }
		
		        .chat-row {
            display: block;
            gap: 10px;
            width: 330px;
            margin: 20px auto;

        }


		 .chat-block p{
		margin: 0px;
		padding: 0px;
        }

		
		.chat-infos {
            display: flex;
            
        }
		

		
        p.nickname {
            font-weight: bold;
            color: var(--color-mid-gray);
            margin: 0;
            font-size: 14px;
        }

        p.last-message {
            color: #666;
            font-size: 12px;
            margin: 0;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
		
		.chat-block {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 8px 10px;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    transition: background 0.2s ease;
    margin-bottom: 10px;
}

.chat-block:hover {
    background-color: #eaeaea;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.chat-info {
    display: flex;
    flex-direction: column;
    margin-right: auto; /* Pushes everything else to the right */
}

.friend-actions {
    display: flex;
    gap: 10px;
}

.accept-friend, .decline-friend {
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    font-size: 12px;
}

.accept-friend {
    background-color: var(--color-mid-gray);
    color: white;
}

.decline-friend {
    background-color: red;
    color: white;
}


        /* Responsive design */
        .profile-update-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            visibility: hidden;
            opacity: 0;
            transition: all 0.3s ease-in-out;
        }
/* Show overlay */
.profile-update-overlay.active {
    visibility: visible;
    opacity: 1;
}

/* Profile Update Box */
.profile-update-box {
    background: var(--color-dark-gray);
    padding: 30px;
    width: 500px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    color: white;
    font-family: 'Arial', sans-serif;
    text-align: center;
    position: relative;
    animation: fadeIn 0.5s ease-in-out;
}

/* Close Button */
.profile-update-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: white;
    font-size: 20px;
}

/* Form Fields */
.profile-update-box input {
    width: 100%;
    padding: 12px;
    margin: 5px 0;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    box-sizing: border-box;
    height: 40px; /* Consistent height for inputs */
}
.profile-update-box select {
    width: 100%;
    padding: 12px;
    margin: 5px 0;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    box-sizing: border-box;
    height: 40px; /* Consistent height for inputs */
}
.profile-update-box textarea {
    width: 100%;
    padding: 12px;
	margin-top: 5px;
    margin-bottom: -12px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    box-sizing: border-box;
    height: 160px; /* Consistent height for inputs */
}

/* File Input (Hidden) */
.profile-update-file-input {
    display: none;
}

/* Profile Picture Upload */

/* Gender Selection */
.profile-update-gender-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 0px;
}

.profile-update-gender-btn {
    flex: 1;
    padding: 12px;
    background: #f5f5f5;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    color: var(--color-mid-gray);
    box-sizing: border-box;
    height: 40px; /* Match height of other inputs */
}

.profile-update-gender-btn.active {
    background: var(--color-light-gray);
}

/* Submit Button */
.profile-update-submit-btn {
    width: 100%;
    padding: 12px;
    background: #f5f5f5;
    color: var(--color-mid-gray);
    font-size: 16px;
    border: none;
    border-radius: 8px;
    margin-top: 10px;
}

.profile-update-submit-btn:hover {
    background: var(--color-light-gray);
}

/* Fade-in animation */
@keyframes fadeIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Two Column Layout */
.profile-update-form {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

/* Left Column */
.profile-update-left,
.profile-update-right {
    width: 48%;
}

.profile-update-left input,
.profile-update-right input {
    margin-bottom: 15px;
}

/* Gender section */
.profile-update-gender-container {
    margin-top: 5px;
}

/* Ensure Submit Button is full width */
.profile-update-submit-btn {
    margin-top: 20px;
    padding: 12px;
    background-color: #f5f5f5;
    color: #666;
    border: none;
}

.profile-update-submit-btn:hover {
    background-color: var(--color-light-gray);
}
/* Profile Picture Container */
.profile-update-file-label {
    position: relative;
    display: inline-block;
}

/* Profile Picture Upload */
.profile-update-pic {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 3px solid var(--color-mid-gray);
    object-fit: cover;
    margin-bottom: 0px;
}

/* Camera Icon over Profile Picture */
.profile-update-camera-icon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    font-size: 40px; /* Adjust the size of the icon */
    color: white;
    opacity: 0.8; /* Low opacity */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Prevent it from blocking clicks on the profile picture */
}

/* Adjust the profile picture to make room for the camera icon */
.profile-update-file-label:hover .profile-update-camera-icon {
    opacity: 0.9; /* Optionally increase opacity on hover */
}

.card {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    background-color: #f8f8f8;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.image-container {
    width: 220px;
    height: 220px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    margin-right: 15px;
}

.text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%; /* Ensure the text container takes up the full width */
}

.text-container p {
    margin: 0;
    font-size: 15px;
}

.vote-icon {
    font-size: 20px; /* Increase the font size of the heart icon */
    color: #f5f5f5; /* Red color for the heart icon */
    position: absolute;
    right: 20px;
    bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;/* Makes the icon a circle */ /* Light background color for contrast */ /* Slight shadow */
}

.vote-number {
    font-weight: bold;
    position: absolute;
    top: 5px;
    z-index: 20;
    font-size: 14px; /* Adjusted size for readability */
}

.vote-icon i {
	color: var(--background-red-40);
    position: absolute;
    bottom: 0px;
    right: 3px;
    font-size: 40px; /* Adjust icon size */
}

.vote-icon i.active {
	color: var(--color-mid-gray);
	background-color: rgba(0,0,0,0);
 /* Adjust icon size */
}

        .search-box { 
			background-color: var(--background-red-20);
			color: var(--color-white);
            padding: 8px; 
            width: 100%; /* Ensure the search box is 100% width of the container */
            border: 1px solid var(--background-red-20); 
            border-radius: 5px; 
            font-size: 14px; 
            outline: none;
            margin-bottom: 10px;
            box-sizing: border-box; /* Prevent overflow */
        }
        .search-box:focus {
            border-color: var(--background-red-30); 
        }
        .song-list { 
            display: flex; 
            flex-direction: column; 
            gap: 8px; 
            overflow-y: auto; /* Allow scrolling if necessary */
            flex-grow: 1; /* Let the song list take the available space */
            max-height: 300px; /* Reduced height to fit inside the 400px box */
        }
        .song { 
            display: flex; 
            align-items: center; 
            padding: 8px; 
            border-radius: 8px; 
            border: 1px solid var(--background-red-30); 
            background-color: var(--background-red-20); 
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            width: 100%; /* Make sure the song takes full width */
            text-align: left;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            font-size: 14px; /* Ensure text is not too large */
            box-sizing: border-box;
        }
        .song:hover {
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
        }
        .song img { 
            width: 35px; 
            height: 35px; 
            border-radius: 5px; 
            margin-right: 10px; 
            object-fit: cover;
        }
        .song div { 
            flex-grow: 1; 
            font-size: 12px;
        }
        .song p { 
            margin: 0; 
            padding: 0;
            color: var(--color-white);
        }
        .song p strong { 
            font-size: 14px; 
            color: var(--color-white);
        }
        .song p em {
            font-size:12px;
            color: var(--color-white);
        }
        .request-btn { 
            background-color: var(--color-dark-gray); 
            color: white; 
            border: none; 
            padding: 5px 10px; 
            
            font-size: 12px; 
            border-radius: 5px; 
            transition: background-color 0.3s ease;
        }
        .request-btn:hover {
            background-color: #222;
        }
        .request-btn:disabled { 
            background-color: var(--color-medium-gray); 
            cursor: not-allowed;
        }
        .pagination { 
            display: flex; 
            justify-content: space-between; 
            margin-top: 5px;
            font-size: 13px;
        }
        .pagination button { 
            padding: 8px 14px; 
            margin: 0; 
            
            background-color: var(--color-dark-gray); 
            color: white; 
            border: none; 
            border-radius: 5px; 
            transition: background-color 0.3s ease;
        }
        .pagination button:hover { 
            background-color: #222;
        }
        .pagination button:disabled { 
            background-color: var(--color-medium-gray); 
            cursor: not-allowed;
        }
		
		
		 .wrapperrr {
        width: 90%;
        max-width: 34.37em;
        max-height: 90vh;
        background-color: var(--color-dark-gray);
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        padding: 3em;
        border-radius: 1em;
        box-shadow: 0 4em 5em rgba(27, 8, 53, 0.2);
		font-family: "Poppins", sans-serif;
		display: none;
      }
      .containerrr {
        position: relative;
        width: 100%;
        height: 100%;
      }
      #wheel {
        max-height: inherit;
        width: inherit;
        top: 0;
        padding: 0;
      }
      @keyframes rotate {
        100% {
          transform: rotate(360deg);
        }
      }
      #spin-btn {
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        height: 26%;
        width: 26%;
        border-radius: 50%;
        
        border: 0;
        background: radial-gradient(var(--color-white) 50%, var(--color-white) 85%);
        color: var(--color-primary-red-light);
        text-transform: uppercase;
        font-size: 20px;
        letter-spacing: 0.1em;
        font-weight: 600;
      }
      .ratas {
        position: absolute;
        width: 2.5em;
        top: 45%;
        right: -4%;
      }
      #final-value {
        font-size: 1.5em;
        text-align: center;
        margin-top: 1.5em;
        color: #202020;
        font-weight: 500;
      }
      	  #close-btn {
  position: absolute;
  top: 1em;
  right: 1em;
  background-color: transparent;
  border: none;
  font-size: 2em;
  color: var(--color-white);
  z-index: 10;
}

.laimesratas {
	
	background-color: #450000;
	color: var(--color-white);
	text-align: center;
	font-size: 16px;
	padding: 12px 0;
	
}

    .shop-container {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
	  margin: auto;
    }
    .shop-item {
      background-color: rgba(133, 0, 0, 0.2);
      padding: 15px;
      border-radius: 12px;
      text-align: center;
      width: 24%;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
    }
    .shop-item img {
      width: 100%;
      height: auto;
      object-fit: contain;
      margin-bottom: 10px;
    }
    .price {
      font-size: 1.1em;
      font-weight: bold;
      color: var(--color-white);
      margin-bottom: 5px;
    }
    .desc {
      font-size: 1.0em;
      color: #ccc;
    }
	#show-more-container {
    text-align: center;
    margin: 5px 0;
}

#show-more-btn {
    padding: 5px 15px;
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#show-more-btn:hover {
    background-color: #e0e0e0;
}

.no-messages {
    text-align: center;
    color: #888;
    padding: 20px;
}

.perziureti-photo-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(0px);
    animation: perziureti-fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.perziureti-photo-modal.perziureti-show {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modal content */
.perziureti-photo-modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    animation: perziureti-slideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.0));
}

.perziureti-photo-modal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 16px;
    max-width: 500px;
    max-height: 500px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.00),
        0 20px 60px rgba(0, 0, 0, 0.0),
        0 0 100px rgba(255, 255, 255, 0.0);
}

/* Close button */
.perziureti-close-btn {
    position: absolute;
    top: 2px;
    right: 12px;
    color: #111;
    font-size: 35px;
    font-weight: bold;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    transition: color 0.3s ease;
}

.perziureti-close-btn:hover,
.perziureti-close-btn:focus {
    color: #222;
}

/* Profile image styling */
.perziureti-profile-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 3px solid #ddd;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.0),
        0 0 0 1px rgba(255, 255, 255, 0.0);
    position: relative;
}

.perziureti-profile-img::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.perziureti-profile-img:hover::before {
    opacity: 1;
    animation: perziureti-rotate 3s linear infinite;
}

.perziureti-profile-img:hover {
    transform: scale(1.1) translateY(-5px);
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.0),
        0 0 30px rgba(255, 255, 255, 0.0);
    border-color: #fff;
}

/* Animations */
@keyframes perziureti-fadeIn {
    from { 
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to { 
        opacity: 1;
        backdrop-filter: blur(10px);
    }
}

@keyframes perziureti-slideIn {
    from {
        transform: translateY(50px);
        opacity: 0;
        filter: blur(10px);
    }
    to {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes perziureti-slideOut {
    from {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0);
    }
    to {
        transform: translateY(50px);
        opacity: 0;
        filter: blur(10px);
    }
}

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

.perziureti-photo-modal-content.perziureti-closing {
    animation: perziureti-slideOut 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive design */
@media (max-width: 768px) {
    .perziureti-photo-modal-content {
        max-width: 95%;
        max-height: 85%;
    }
    
    .perziureti-close-btn {
        top: 0px;
        font-size: 40px;
    }
    
    .perziureti-profile-img {
        width: 80px;
        height: 80px;
    }
}

/* Add a subtle pulsing glow effect to the modal */


.perziureti-photo-modal.perziureti-show img {
    animation: perziureti-pulse-glow 4s ease-in-out infinite;
}
		.partner-link img {
    filter: grayscale(40%);
    transition: filter 0.3s ease;
}
.partner-link:hover img {
    filter: grayscale(0%);
}