body{
    margin:0;
    font-family:Trebuchet MS;
    background:linear-gradient(135deg,#000,#1a1a1a);
    color:white;
}

header{
    padding:20px 0;
}

.menu-grid{
    display:none;
    grid-template-columns: repeat(3, 6px);
    grid-template-rows: repeat(3, 6px);
    gap:6px;
    cursor:pointer;
    position:absolute;
    right:20px;
    top:40px;
    z-index:2000;
}

.menu-grid span{
    width:6px;
    height:6px;
    background:white;
    border-radius:50%;
    transition:0.3s;
    box-shadow:
        0 0 4px rgba(255,255,255,0.6),
        0 0 8px rgba(255,255,255,0.4);
}

.hero{
    min-height:100vh;
    background-image:
        linear-gradient(to bottom,
            rgba(0,0,0,0.85) 0%,
            rgba(0,0,0,0.70) 25%,
            rgba(0,0,0,0.60) 50%,
            rgba(0,0,0,0.9) 100%
        ),
        url("img/stage2024.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.hero-content{
    position:absolute;
    top:60%;
    left:5%; 
    transform:translateY(-50%);
    color:white;
    text-align:left;
    z-index:2;
    max-width:90%; 
}

.hero-content h1{
    font-size:5vw;     
    margin:0 0 0.4em 0;
    letter-spacing:1px;
}

.hero-content p{
    font-size:1.5vw;
    margin:0;
    line-height:1.2;
}

h1 .highlight{
	color: #109ae6;
	text-shadow:
        0 0 5px rgba(12,144,218,0.4),
        0 0 10px rgba(12,144,218,0.35),
        0 0 20px rgba(10,95,146,0.3),
        0 0 40px rgba(10,95,146,0.25);
}

.read-more-btn{
    display:inline-block;
    margin-top:20px;
    padding:10px 26px;

    font-size:1rem;
    font-weight:600;
    text-decoration:none;

    color:white;
    border:2px solid rgba(255,255,255,0.6);
    border-radius:30px;

    background:rgba(255,255,255,0.05);
    transition: all 0.3s ease;
}

.read-more-btn:hover{
    color:black;
    background:#f5c518;
    border-color:#f5c518;

    box-shadow:
        0 0 10px rgba(245,197,24,0.6),
        0 0 20px rgba(245,197,24,0.4);
}

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    transition: top 0.3s ease-in-out;
}


.header-container{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
}

/* LOGO */

.logo img{
    height:130px;
}

/* OVAL NAVIGATION */

.nav-container{
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    padding:12px 30px;
    border-radius:50px;
    box-shadow: 0 0 20px rgba(245,197,24,0.15);
}

/* MENU */

.menu{
    list-style:none;
    display:flex;
    gap:30px;
    margin:0;
    padding:0;
}

.menu a{
    text-decoration:none;
    color:white;
    font-weight:bold;
    transition:0.3s;
}

.menu a:hover{
    color:#f5c518;
}

/* DROPDOWN */

.dropdown{
    position:relative;
}

.dropdown-menu{
    display:none;
    position:absolute;
    top:35px;
    left:0;
    background:white;
    color:black;
    list-style:none;
    padding:10px 0;
    border-radius:10px;
    min-width:150px;
}

.dropdown-menu a{
    color:black;
}

.dropdown-menu li{
    padding:8px 15px;
}

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

.image-section{
    width:100%;
    height:100vh;
    background-image:url("img/poster.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.cartoon-section{
    width:100%;
    height:100vh;
    background-image:url("img/previous_winner.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
	position: relative;
}

.cartoon-section-content{
    position:absolute;
    top:60%;
    left:5%; 
    transform:translateY(-50%);
    color:white;
    text-align:left;
    z-index:2;
    max-width:90%; 
}

.cartoon-section-content h1{
    font-size:5vw;     
    margin:0 0 0.4em 0;
    letter-spacing:1px;
}

.latest-news{
	padding: 40px 50px 60px 120px;
    background: linear-gradient(to bottom, #0a0722, #130c35);
    color: white;
    text-align: left;
}

.latest-news h2 {
    font-size: 2.5rem;
    margin-bottom: 30px;
}

.latest-news-row{
	display: flex;          
    overflow-x: auto;       
    gap: 20px;             
    padding: 20px 0;
}

.latest-news-row .news {
  flex: 0 0 auto;       
  width: 400px;         
  text-align: center;
}


.cartoonvision-stage{
    width:100%;
    height:100vh;
	background-image:
        linear-gradient(to bottom,
            rgba(0,0,0,0.50) 0%,
            rgba(0,0,0,0.40) 25%,
            rgba(0,0,0,0.30) 50%,
            rgba(0,0,0,0.6) 100%
        ),
        url("img/cartoonvision.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
	position: relative;
}

::-webkit-scrollbar {
    width: 10px;        
}

::-webkit-scrollbar-track {
    background: #000;   
}

::-webkit-scrollbar-thumb {
    background: #444;      
    border-radius: 6px;  
}

::-webkit-scrollbar-thumb:hover {
    background: #666;     
}

.winners-section {
    padding: 40px 50px 80px 120px;
    background: linear-gradient(to bottom, #0a0722, #130c35);
    color: white;
    text-align: left;
}

.winners-section h2 {
    font-size: 2.5rem;
    margin-bottom: 30px;
}

.winners-row {
  display: flex;          
  overflow-x: auto;       
  gap: 20px;             
  padding: 20px 0;
}

.winner {
  flex: 0 0 auto;       
  width: 200px;         
  text-align: center;
}

.winner img {
    width: 200px;           
    height: auto;                
    object-fit: cover;      
    transition: transform 0.3s ease; 
}

.winner img:hover {
    transform: scale(1.05);
}

.winners-row-full{
	display: flex;          
	overflow-x: auto;       
	gap: 20px; 
    width:90%;
    padding:20px 0px 10px 120px;
}

.social-section {
	padding: 60px 120px 60px 120px;
    background: linear-gradient(to bottom, #130c35, #07051a);
    text-align: center;
}

.social-section h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.social-row {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.social-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    transition: 0.3s;
}

.social-icon img {
    width: 30px;
    height: 30px;
}


.social-icon:hover {
    transform: scale(1.15);
    box-shadow:
        0 0 15px rgba(255,255,255,0.3),
        0 0 30px rgba(12,144,218,0.4);
}

.footer-bar{
    margin-top:60px;
    padding: 20px 120px 30px 120px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.footer-left,
.footer-center,
.footer-right{
    flex:1;
}

.footer-left img{
    height:160px;
}

.footer-center{
    text-align:left;
}

.footer-center p{
    margin:0;
    font-size:15px;
}

.footer-right{
    text-align:right;
}

.footer-right p{
    margin:0;
    font-size:15px;
    font-weight:bold;
}

.about-page {
      background: linear-gradient(
        to bottom,
        #0a0722 0%,
        #130c35 40%,
        #07051a 100%
    );

    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh;
}

.text-part-section{
    width:90%;
    padding:120px 0px 60px 120px;
    color:white;
}

.text-part-section h1{
    text-align:center;
    font-size:4vw;
    margin-bottom:40px;
}

.text-part-section-content,
.rules-content{
    max-width:90%;
    margin:0 auto 40px auto;
}

.text-part-section-content p{
    font-size:1.5vw;
    line-height:1.4;
	 text-align: justify;
}

.text-part-section-content img{
    width:100%;
    height:auto;
    display:block;
    margin:0 auto;
}

.rules-content p{
	font-size:1.4vw;
    line-height:1.4;
	text-align: justify;
}

.rules-content h2{
	font-size:1.5vw;
    font-weight:bold;
	text-decoration: underline;
}

.rules-content ul {
    list-style-type: disc;
    padding-left: 20px;  
	color: white;
	font-size:1.4vw;
    margin: 0;
}

.rules-content li {
    margin-bottom: 0.5em;
}

a[href^="mailto:"]{
    color: #00BFFF;
    text-decoration: none;
}

a[href^="mailto:"]:hover{
    color: #4a1a8a; 
    text-decoration: underline;
}

.social-links a{
    color: #00BFFF;
    text-decoration: none;
    transition: 0.3s;
}

.social-links a:hover{
    color: #4a1a8a;   
    text-decoration: underline;
}

.accordion{
    width: 100%;
    max-width: 90%;
    margin: 50px auto;
}

.accordion-item{
    border-bottom: 1px solid rgba(255,255,255,0.15);   
}

.accordion-header{
    width: 100%;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    text-align: left;
    padding: 20px 0;
    cursor: pointer;
    letter-spacing: 1px;
    transition: 0.3s;
}

.accordion-header:hover{
    color: #5c2cff;
}

.accordion-content{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    color: white;
    font-size: 1.2rem;
}

.accordion-content p{
    margin: 10px 0 20px 0;
}

.accordion-content h2{
    font-size:1.5vw;
    font-weight:bold;
	text-decoration: none;
}

.participants-list{
    list-style-type: disc;
    padding-left: 20px;  
	color: white;
	font-size:1.4vw;
    margin: 0;
}

.participants-list li{
    padding:6px 0;
}

.accordion-content img{
    width:100%;
    height:auto;
    display:block;
    margin:0 auto;
}

.results-table,
.results-full{
    width:100%;
    border-collapse: collapse;
    margin-top:20px;
    color:white;
    font-size:14px;
	table-layout: fixed;
}

.results-table th,
.results-full th{
    text-align:left;
    padding:12px 10px;
    border-bottom:2px solid rgba(255,255,255,0.2);
}

.results-table td,
.results-full td{
	text-align:left; 
    padding:10px;
    border-bottom:1px solid rgba(255,255,255,0.1);
}

.results-table th,
.results-table td,
.results-full th,
.results-full td{
    border-right:1px solid rgba(255,255,255,0.08);
}

.results-table th:nth-child(1),
.results-table td:nth-child(1),
.results-full th:nth-child(1),
.results-full td:nth-child(1){
    width:6%;
    text-align:center;
}

.results-table th:nth-child(3),
.results-table td:nth-child(3){
	text-align:center;
}

.results-full th:nth-child(3),
.results-full td:nth-child(3),
.results-full th:nth-child(5),
.results-full td:nth-child(5){
	width:10%;
    text-align:center;
}

.results-table th:nth-child(4),
.results-table td:nth-child(4){
    width:8%;
    text-align:center;
}

.results-table th:nth-child(5),
.results-table td:nth-child(5){
    width:10%;
    text-align:center;
}

.results-table th:nth-child(6),
.results-table td:nth-child(6){
    width:12%;
	text-align:center;
}

.results-table tr:hover,
.results-full tr:hover{
    background: rgba(255,255,255,0.05);
}

.film-cell{
    display:flex;
    align-items:center;   
    gap:2px;
    text-align:left;
}

.film-cell img{
    width:50px;
    height:30px;
	margin:8px;
}

.news-row-full{
	display: flex;    
	flex-wrap:wrap;	      
	gap: 20px; 
    width:90%;
    padding:20px 0px 10px 60px;
}

.news_f img {
    width: 310px;           
    height: 350px;                
    object-fit: cover;      
    transition: transform 0.3s ease; 
}

.news_f{
	width:310px;
	height: 415px;
    border-radius:16px;
    overflow:hidden;
}

.news_f p{
	font-size:clamp(14px,1.5vw,20px);
	font-weight:bold;
    margin:0;
    line-height:1.2;
	text-align:center;
	max-width:310px;
	padding:12px;
	background:linear-gradient(135deg,#1e4fff,#00aaff);
	min-height:60px;
	display:flex;
}

.news_f:hover{
    transform:scale(1.05);
}

.news-row-full a,
.latest-news-row a {
	color:white;
	text-decoration:none;
}

@media (max-width: 1024px){
    .header-container{
        flex-direction: column;
        gap:20px;
    }

    .menu{
        gap:20px;
    }
	
	.hero-content{
        left:50%;                 
        transform:translate(-50%, -50%);
        text-align:center;       
    }
	
    .hero-content h1{ font-size:6vw; }
    .hero-content p{ font-size:2.5vw; }
	.read-more-btn{
        font-size:2.5vw;
        padding:12px 28px;
    }
	
	.news p,
	.news_f p{
		font-size:3vw;
	}
	
	
	.text-part-section{
		padding:215px 0px 60px 60px;
	}
	
	.text-part-section h1{
		font-size:4.5vw;
		margin-bottom:20px;
	}

	.text-part-section-content p{
		font-size:2.3vw;
	}
	
	.rules-content p{
		font-size:2vw;
	}

	.rules-content h2{
		font-size:2.1vw;
	}

	.rules-content ul {
		font-size:2vw;
	}
	
	.winners-row-full{
		padding:20px 0px 10px 15px;
	}
	
	.participants-list{
		font-size:2.5vw;
	}
	
	.results-table,
	.results-full{
		font-size:13px;
	}

	.results-table th,
	.results-table td,
	.results-full th,
	.results-full td{
		padding:8px 6px;
	}

	.film-cell img{
		width:40px;
		height:24px;
		margin:4px;
	}

	.results-table th:nth-child(6),
	.results-table td:nth-child(6){
		width:14%;
	}
	
	.accordion-content h2{
		 font-size:2vw;
	}

}

@media (max-width: 768px){
	.menu-grid{
        display:grid;
		left:20px;
    }

    .nav-container{
        position:fixed;
        left:-100%;
        top:0;
        width:260px;
        height:100vh;
        background:rgba(0,0,0,0.95);
        transition:0.3s;
    }

    .nav-container.active{
        left:0;
    }

    .menu{
        flex-direction:column;
        padding:80px 30px;
    }
	
	.hero-content{
        left:50%;                 
        transform:translate(-50%, -50%);
        text-align:center;       
    }
	
    .hero-content h1{ font-size:8vw; }
    .hero-content p{ font-size:3.5vw; }
	.read-more-btn{
        font-size:3.5vw;
        padding:12px 28px;
    }
	
	.image-section{
		background-image:url("img/poster_s.jpg");
 
	}
	
	.winners-section,
	.latest-news	{
		padding: 40px 50px 80px 40px;
	}
	
	.cartoon-section-content h1{
		font-size:9vw;    
	}
	
	.social-section {
		padding: 60px 40px 60px 40px;
	}
	
	 .footer-bar{
		padding: 60px 40px 60px 40px;
        flex-direction:column;
        text-align:center;
        gap:15px;
    }
	
	.footer-center{
		text-align:center;
	}

	.footer-right{
		text-align:center;
	}
	
	.news p,
	.news_f p {
		font-size:3.5vw;
	}
	
	.text-part-section{
		padding:150px 0px 60px 30px;
	}
	
	.text-part-section h1{
		font-size:5vw;
		margin-bottom:20px;
	}

	.text-part-section-content p{
		font-size:2.8vw;
	}
	
	.rules-content p{
		font-size:3vw;
	}

	.rules-content h2{
		font-size:3.1vw;
	}

	.rules-content ul {
		font-size:3vw;
	}
	
	.winners-row-full{
		padding:20px 0px 10px 15px;
	}
	
	.participants-list{
		font-size:3.5vw;
	}
	
	.accordion-content {
        overflow-x: auto; 
        overflow-y: hidden;
    }
	
	.accordion-content h2{
		font-size:4.5vw;
	}
	
    .results-table,
    .results-full {
        
        table-layout: auto !important; 
        min-width: 650px;
        width: 100%;
        font-size: 13px;
    }

   
    .film-cell, 
    .results-table td {
        white-space: nowrap;
    }

    
    .film-cell img {
        width: 35px;
        height: 22px;
        flex-shrink: 0;
    }

}