/*google fonts*/
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


/*montserrat-uniquifier weight: od 100 do 900*/

montserrat-uniquifier {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
}



orbitron-uniquifier {
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
}

/*orbitron weight: od 400 do 900*/

/*základ*/

* {

margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 15px;


}



html {

scroll-behavior: smooth;

}

body {


background: rgb(241, 241, 241);

}

h1, h2  {

font-family: "Orbitron", sans-serif;


}

body, p, a, li, h3 {

font-family: "Montserrat", sans-serif;


}

@media  (min-width:600px) {

/*pro tablety a větší displeje*/

}

@media (min-width:900px) {

/*pro desktop*/


.hero-section .section-content {

flex-direction: row;
align-items: center;
justify-content: space-between;
text-align: left;

}

}

h2 {

margin-top: 1.5rem;
margin-bottom: 1rem;


}

header {

background-color: rgb(97, 94, 92);
position: fixed;
width: 100%;
z-index: 5;



}

header .navbar {


display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;


}

.navbar .nav-menu {

display: flex;
gap: 10px;



}

.navbar .nav-menu .nav-link {

color: rgb(222, 217, 217);
padding: 10px 18px;
background: linear-gradient(rgb(95, 91, 91), rgb(31, 30, 30));
border-radius: 10px;
font-size: 1rem;
transition: 0.3s ease;

}

/*zajímavé buttons*/

.navbar .nav-menu .nav-link:hover {

background: linear-gradient(rgb(31, 30, 30), rgb(95, 91, 91));
font-size:larger;
color: rgb(249, 129, 2);


}

.navbar .nav-logo .logo-text {

color: rgb(255, 255, 255);
font-size: x-large;
font-weight: bold;


}

ul {

list-style: none;

}

a {

text-decoration: none;

}

button {

cursor: pointer;
border: none;
background: none;


}

img {

width: 100%;
height: auto;

}

/*Odpočet design*/

#clock {

display: flex;
justify-content: flex-start;
gap: 20px;
margin-top: 15px;

}

#clock .time-box {

display: flex;
flex-direction: column;
align-items: center;
padding: 10px 15px;
box-shadow: 0 2px 6px rgba(12, 12, 12, 0.177);
min-width: 70px;

}

.section-content {

margin: 0 auto;
max-width: 1300px;
padding: 0 20px;



}

.hero-section {

min-height: 100vh;
background: rgb(241, 241, 241);


}

/*Light & Dark Mode uplatnění a všude kde je .dark bude černé pozadí a bílý text*/

.dark {

background-color: rgb(0, 0, 0);
color: rgb(241, 241, 241);

}

.dark .hero-section {

background: rgb(0, 0, 0);

}

.dark .hero-details .title {

color: rgb(249, 129, 2);


}

.dark .hero-details .subtitle,
.dark .hero-details .description {

color: rgb(255, 255, 255);

}

.hero-section .hero-details .title {

font-size: 60px;
color: rgb(249, 129, 2);



}

.hero-section .hero-details .subtitle {

font-size: 30px;
margin-top: 8px;
max-width: 70%;

}

.hero-section .hero-details .description {

font-size: 20px;
max-width: 70%;
margin: 24px 0 40px;


}

img {

width: 100%;

}

.hero-image {

width: 120%;
height: auto;


}

.hero-section .hero-image-wrapper {

max-width: 900px;
margin-right: 50px;


}

.hero-section .hero-details .button {

padding: 10px 26px;
background: linear-gradient(rgb(249, 129, 2), rgb(255, 255, 255));
color: rgb(31, 30, 30);
border-radius: 10px;
font-weight:bold;
border: 2px solid transparent;
transition: 0.3s ease;
font-size: 1rem;

}

.hero-section .hero-details .button:hover {

background: linear-gradient(rgb(255, 255, 255), rgb(249, 129, 2));
font-size: larger;
color: rgb(15, 15, 15);


}

.hero-section .hero-details .buttons {

display: flex;
gap: 23px;


}

.hero-section .section-content {

display: flex;
align-items: center;
min-height: 100vh;
color: rgb(119, 119, 119);
justify-content: space-between;


}

/*Jdeme to udělat responzivní*/

@media screen and (max-width: 900px) {

.navbar .nav-menu {

display: block;
position: fixed;
left: 0;
top: 0;
width: 300px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 100px;
background: rgb(95, 91, 91);



}

.navbar .nav-menu .nav-link {

font-size: 1rem;
display: block;
margin-top: 17px;


}

.hero-image {

width: 600px;
height: auto;

}


}

.dark .card{

background-color: rgb(0, 0, 0);


}

.dark .card-image img {


background-color: rgb(0, 0, 0);

}

.dark .card-content p {

color: rgb(255, 255, 255);


}

.dark .card-content h1 {

    color: rgb(255, 255, 255);


}

.dark .timeline-date {

color: rgb(255, 255, 255);


}


.card-container {

margin: 50px 80px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
margin: 50px 80px;

}


.card-content {

display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 25px;
padding: 30px 30px;
line-height: 1.3;



}

.card {

max-width: 400px;
background-color: rgb(222, 217, 217);
border-radius: 10px;
box-shadow: 0px 5px 10px rgb(0, 0, 0);
color: rgb(95, 91, 91);
padding: 15px;
cursor: pointer;
position: relative;
flex: 1;
z-index: 1;



}

/*duhový rámeček upcoming*/

.card::before {

content: "";
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
background: linear-gradient(

270deg,
red,
orange,
yellow,
green,
cyan,
blue,
violet,
red


);

background-size: 600% 600%;
border-radius: 12px;
z-index: -1;
animation: rainbow 8s linear infinite;

}

.card-image img {

max-width: 700px;
height: auto;
border-radius: 10px;
box-shadow: 0px 5px 10px rgb(0, 0, 0);
background: rgb(222, 217, 217);


}

.image-border {

position: relative;
display: inline-block;
border-radius: 12px;
overflow: hidden;
padding: 5px;
background: rgb(119, 119, 119);


}

/*stříbrný rámeček incoming*/

.image-border::before {

content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(

from 0deg,
white 0deg,
silver 20deg,
transparent 60deg,
transparent 360deg
);
animation: spin 5s linear infinite;


}

.image-border img {

display: block;
border-radius: 8px;
width: 100%;
height: auto;
position: relative;
z-index: 1;


}

@keyframes spin {

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


}

.card::after {

content: "";
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
background: inherit;
border-radius: 8px;
z-index: -1;


}

@keyframes rainbow {

0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }

}

.card-content h1 {

font-size: 35px;
margin-bottom: 10px;
color: rgb(95, 91, 91);
text-align: center;


}

.pulse-title {

font-size: 35px;
margin-bottom: 10px;
color: rgba(249, 129, 2);
animation: pulseText 1.8s infinite;


}

@keyframes pulseText {

0% { transform: scale(1); text-shadow: 0 0 5px rgba(148, 148, 148, 0.5) ;}
50% { transform: scale(1.1); text-shadow: 0 0 20px rgba(234, 234, 234, 0.9); }
100% { transform: scale(1); text-shadow: 0 0 5px rgba(186, 186, 186, 0.5); }


}

.card-content p {

font-size: 17px;
margin-bottom: 20px;
color: rgb(97, 94, 92);


}

.card-content .read-more {

font-size: 27px;
text-decoration: none;
color: rgb(241, 241, 241);
font-weight: bold;
background: linear-gradient(rgb(95, 91, 91), rgb(31, 30, 30));
border-radius: 10px;
padding: 10px;

}

.read-more:hover {


color: rgb(249, 129, 2);


}


.dark .schedule-section {

background-color: rgb(0, 0, 0);

}

.schedule-title {

font-size: 2.5rem;
text-align: center;
margin: 60px 0 40px;
color: rgb(249, 129, 2);
font-weight: bold;


}

/*tady budou šimpanzi a půjde to nakonec stránky k partnerům*/

.info-highlight {

font-size: 1.2rem;
text-align: center;
margin: 40px auto;
padding: 15px 20px;
max-width: 800px;
border-left: 4px solid rgb(119, 119, 119);
border-radius: 8px;
background: rgb(205, 205, 205);
color: rgb(97, 94, 92);
font-family: "Montserrat", sans-serif;

}

.dark .info-highlight {

background: rgb(14, 14, 14);
color: rgb(241, 241, 241);
border-color: rgb(222, 217, 217);

}

/*časový harmonogram*/

.timeline-section {

min-height: 100vh;
padding: 100px 15px;


}

.timeline-items {

margin: auto;
max-width: 1000px;
display: flex;
flex-wrap: wrap;
position: relative;


}

.timeline-items::before {

content: "";
position: absolute;
width: 5px;
height: 100%;
background-color: rgb(205, 205, 205);
left: calc(50% - 1px);


}

.timeline-item {

margin-bottom: 40px;
width: 100%;
position: relative;


}

.timeline-item {

margin-bottom: 40px;
width: 100%;
position: relative;


}

.timeline-item:last-child {

margin-bottom: 0;

}

.timeline-item:last-child(even) {

padding-right: calc(50% + 30px);
text-align: right;
}

.timeline-item:nth-child(even) {

padding-left: calc(50% + 30px) ;


}

/*oranžový puntík u časové osy*/

.timeline-dot {

height: 21px;
width: 21px;
background-color: rgb(249, 129, 2);
position: absolute;
left: calc(50% - 8px);
border-radius: 50% ;
top: 10px;
}

.timeline-date {

font-size: 20px;
font-weight: 800;
color: rgb(15, 15, 15);
margin: 6px 0 15px;

}

.timeline-content {

background-color: rgba(186, 186, 186, 0.5);
backdrop-filter: blur(20px);
border: 1px solid rgb(31, 30, 30);
padding: 30px;
border-radius: 1em ;
cursor: pointer;
transition: 0.3s ease;
max-width: 400px;
margin: 0 auto;


}

.dark .timeline-content p,
.dark .timeline-content span {

color: rgb(241, 241, 241) !important;


}

.dark .timeline-content {

background-color: rgb(0, 0, 0);
color: rgb(241, 241, 241);
border-color: rgb(222, 217, 217);


}

.dark .timeline-content h3 {

color: rgb(248, 129, 1);

}

.dark timeline-content p {

color: rgb(241, 241, 241);

}

.timeline-content:hover {

transform: scale(1.05);

}

.timeline-content h3{

font-size: 20px;
color: rgb(15, 15, 15);
margin: 0 0 10px;
text-transform: capitalize;
font-weight: 500;

}

.timeline-content p {

color: rgb(31, 30, 30);
opacity: 0.8;
font-size: 16px;
font-weight: 400;
line-height: 22px;


}

@media(max-width: 900px) {

.timeline-items::before {

left: 7px;

}

.timeline-item:nth-child(odd) .timeline-content {

padding-right: auto;


}

.timeline-item:nth-child(odd), 
.timeline-item:nth-child(even) {

padding-left: 37px;

}

.timeline-dot {

left: 0;

}

}

/*k programu*/


.card__container {

margin-inline: 1.5rem;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
justify-content: center;


}

.card__article {

position: relative;
background-color: rgb(205, 205, 205);
padding: 2.5rem;
border-radius: 2rem;
text-align: center;
box-shadow: 0 20px 24px rgb(0, 0, 0);
overflow: hidden;
width: 100%;
max-width: 400px;
margin: 0 auto;

display: flex;
flex-direction: column;
justify-content: flex-start;
height: 100%;


}

.dark .card__article {

background-color: rgb(0, 0, 0);
color: rgb(241, 241, 241);
border: 2px solid rgb(222, 217, 217);


}

.card__img {

width: 250px;
margin-bottom: 1.5rem;
animation: float-img 2.5s ease-in-out infinite;
height: 270px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;

}



.card__title {

color: rgb(97, 94, 92);
font-size: 1.2rem;
line-height: 1.3;
margin-bottom: 1rem;
min-height: 60px; /*zarovnáváme*/
align-items: center;
justify-content: center;
font-family: "Montserrat", sans-serif;


}

.dark .card__title {

color: rgb(241, 241, 241);

}

.card__description {


font-size: medium;

}

.card__date {

flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;


}

.card__shapes {

display: grid;
justify-items: center;
row-gap: 2.5rem;
position: absolute;
inset: 0;
top: -3.5rem;
z-index: 1;


}

.card__shape {

display: block;
width: 260px;
height: 40px;
background: linear-gradient(rgb(250, 124, 22), rgb(240, 205, 6),rgb(248, 129, 1),rgb(251, 230, 0));
border-radius: 4rem;
transform: rotate(-24deg);
opacity: 0;

}

.card__shape:nth-child(1) {

animation-delay: .1s;

}
.card__shape:nth-child(2) {

animation-delay: .2s;

}
.card__shape:nth-child(3) {

animation-delay: .3s;

}
.card__shape:nth-child(4) {

animation-delay: .4s;

}
.card__shape:nth-child(5) {

animation-delay: .5s;

}
.card__shape:nth-child(6) {

animation-delay: .6s;

}
.card__shape:nth-child(7) {

animation-delay: .7s;

}
.card__shape:nth-child(8) {

animation-delay: .8s;

}

@keyframes float-img {

0% {

transform: translateY(0);

}

50% {

transform: translateY(-.75rem);

}

100% {

transform: translateY(0);

}

}

.card__article:hover .card__shape {

animation-name: shape-animate;
animation-duration: .8s;
animation-iteration-count: 2;

}

@keyframes shape-animate {

0% {

opacity: 0;

}
20% {

opacity: .1;

}
40% {

opacity: .3;

}
60% {

opacity: .7;

}
80% {

opacity: 1;

}
100% {

opacity: 0;

}


}

@media screen and (max-width: 340px) {

.card__container {

margin-inline:1.5rem ;

}

.card__article {

padding: 1.5rem;

}

.card__img {

width: 160px;

}

.card__title {

font-size: 2rem;

}


}

@media screen and (min-width:440px) {

.card__container {

grid-template-columns: 328px;

}

}

@media screen and (min-width:768px) {

.card__container {

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
column-gap: 2rem;


}


}

@media screen and (min-width:1100px) {

.cardd {

min-height: 100vh;

}

.card__container {

grid-template-columns: repeat(3, 328px);

}

}

@keyframes slide {

from {
    transform: translateX(0);

}
to {
    transform: translateX(-100%);
}


}

/*partneři*/

.logos {

overflow: hidden;
padding: 60px 0;
background: rgb(241, 241, 241);
white-space: nowrap;
position: relative;
margin-top: 50px;
align-items: center;
justify-content: center;

}

.logos:before,
.logos:after {

position: absolute;
top: 0;
width: 250px;
height: 100%;
content: "";
z-index: 2;


}

.logos:before {
left: 0;
background: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(255, 255, 255));


}

.logos:after {
right: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));


}

.logos:hover .logos-slide {

animation-play-state: paused;

}

.logos-slide img {

width: 200px;
margin: 0 40px;

}

.logos-slide {

display: inline-block;
animation: 25s slide infinite linear;

}

/*zápatí s kontaktními údaji*/

footer {

background: rgb(97, 94, 92);
padding-top: 50px;
color: rgb(241, 241, 241);
text-align: center;


}

.container_footer {

width: 100%;
margin: auto;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
text-align: center;

}

.container_footer img {

width: 200px;
margin: 20px;
height: auto;


}

.footer {

width: 33.3%;


}

.container_footer h3 {

font-size: 2.5rem;
margin-bottom: 15px;
text-align: center;
color: rgba(255, 255, 255, 0.9);



}

.footer-content {

max-width: 200px;

}

.footer-content p{

width: 190px;
margin: 5px 0;
padding: 7px;
font-size: 1rem;
color: rgb(200, 200, 200);


}

.footer-content h3{

font-size: 1.5rem;
margin-bottom: 15px;


}


.bottom-bar {

margin-top: 20px;
font-size: 0.9rem;
padding: 10px;
margin-top: 20px;


}

.bottom-bar a {

text-decoration: none;
color: rgb(241, 241, 241);

}