/*SIIT ALGAB CONTAINER-CONTAINER-1 /AINE PEALKRI JA SISSEJUHATUS*/
.container-1 {
position: relative;
width: 89%;
max-width: 1200px;
padding: 20px;
margin-top: 2%;
background: #ffffff;
border: 1px solid #fb6804; /* Jäta raam kaardi ümber */
border-radius: 15px; /* Ümardatud nurkadega */
}
.container-1 .card-1 .content-1 h3 /*Pealkiri AINE*/
{
color: rgb(252, 111, 59);
font-size: 1.4em;
font-weight: 420;
margin-bottom: 10px;
text-align: left; /* Lisatud, et tekst oleks keskele joondatud horisontaalselt */
display: flex; /* Lisatud, et kasutada Flexboxi omadusi */
justify-content: left; /* Lisatud, et pealkiri oleks horisontaalselt keskel */
align-items: left; /* Lisatud, et pealkiri oleks vertikaalselt keskel */
}

.card-1{
  border-right: none; /* Eemalda parem raam kaardi paremalt küljelt */
}

.card-2 {
  border-left: none; /* Eemalda vasak raam kaardi vasakult küljelt */
}
.container-1 .card-2 .content-2 h3 /*Pealkiri SISSEJUHATUS*/
{
color: #fb6804;
font-size: 1.4em;
font-weight: 420;
margin-bottom: 10px;
text-align: center; /* Lisatud, et tekst oleks keskele joondatud horisontaalselt */
display: flex; /* Lisatud, et kasutada Flexboxi omadusi */
justify-content: center; /* Lisatud, et pealkiri oleks horisontaalselt keskel */
align-items: center; /* Lisatud, et pealkiri oleks vertikaalselt keskel */
}
.container-1 .card-2 .content-2 p{
font-weight: 326;
color: #000000;
}
/*SIIT LÕPEB CONTAINER-CONTAINER-1 /AINE PEALKRI JA SISSEJUHATUS*/

/*SIIT AGAB CONTAINER-CONTAINER-2/RED MORE RED LESS KOLM KAARTI*/
.container-2 {
  position: relative;
  margin-right: 4.5%;
  margin-top: 0.1%;
  width: 91.2%;
  max-width: 1200px;
}

.container-2 .card  /* Kaardi (card) osa*/
{
position: relative;
width: 100%;/*See on kõikide cardide laius*/
padding: 20px;
margin-top: 20px;
background: #ffffff;
border-radius: 5%;
border: solid #fb6304 1px;
}

.container-2 .card::before
{
  content: '';
  position: absolute;
  top: 20.1%;
  right: 45%;
  border-top: 20px solid #feeadf;
  border-right: 20px solid #fb6804;
  transform: rotate(45deg); /* Pöörake elementi 45 kraadi */
  transform-origin: top right; /* Määrake pööramise keskpunkt ülemisse paremasse nurka */
}
  



.container .card .content
{
  position: relative;
  height: 214px;
  overflow: hidden;
}

.container-2 .card.active .content
{
height: auto;
}

.container-2 .card .content::before /* See osa teeb kirjale valge kasti, mille muudab siis natuke transparendiks.*/
{
  content: '';/*Kui see ära võtta siis kaob ka hajusus kirja peal*/
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(transparent,#ffebde);/* Siia tuleb boxsi taustavärv panna*/
}

.container-2 .card.active .content::before
{
display: none;
}

.container-2 .card .content h3 /*Pealkiri*/
{
  color: #fb6804;
  font-size: 1.4em;
  font-weight: 400;
  margin-bottom: 10px;
  text-align: center; /* Lisatud, et tekst oleks keskele joondatud horisontaalselt */
  display: flex; /* Lisatud, et kasutada Flexboxi omadusi */
  justify-content: center; /* Lisatud, et pealkiri oleks horisontaalselt keskel */
  align-items: center; /* Lisatud, et pealkiri oleks vertikaalselt keskel */
}

.container-2 .card .content {
  position: relative;
  /* ...muud stiilireeglid... */
}

.container-2 .card .content .divider {
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  height: 0.1px;
  background-color: #ccc; /* Halli joone värv */
}



.container-2 .card .content p
{
  font-weight: 326;
  color: #000000;
  padding-top: 10%;
}

.container-2 .card .rohkem /* See on nupu funktsioonid ja suurused*/
{
  position: relative;         /*See reegel määrab elemendi positsiooni suhtes selle esialgsele asukohale. "Relative" tähendab, et see jääb oma tavalisse asukohta, kuid seda saab nihutada kasutades näiteks "top", "right", "bottom" ja "left"*/
  padding: 10px 10px;         /*See reegel määrab elemendi sisemise polstri, mis on tühimik elementi ja selle sisu vahel. "10px" on ülemine ja alumine polster ning "15px" on vasak ja parem polster.*/
  width: 117px;               /*Nupu pikkus*/
  background: #f9883d;      /*See reegel määrab elemendi taustavärvi.*/
  margin-top: 15px;           /*See reegel määrab elemendi ülemise serva ja selle ülemise naabri vahelise tühimiku (marginaali). "15px" on siin tühimiku suurus.*/
  display: inline-block;      /*See reegel määrab elemendi kuvamisviisi. "Inline-block" teeb elemendi sarnaseks inline-elementidega, mis tähendab, et see sobib samasse ritta teiste inline-elementidega, kuid võimaldab ka blokkidele omaseid omadusi.*/
  cursor: pointer;            /*See reegel muudab hiirekursori elemendi peal olles. "Pointer" kursor näitab, et tegemist on lingi või klõpsatava elemendiga.*/
  text-transform: uppercase;  /*See reegel muudab elemendi teksti suurteks tähtedeks.*/
  color:#ffffffd9;          /*See reegel määrab teksti värvi. "#383838" on konkreetselt värvikood.*/
  font-weight: 500;           /*See reegel määrab teksti rasvuse. "500" on siin keskmise rasvuse taseme väärtus.*/
  letter-spacing: 2px;        /*See reegel määrab tähevahe tekstis. "2px" */
  font-size: 14px;            /*See reegel määrab teksti suuruse. "14px" */
  border-radius: 6px;
}
.container-2 .card.active .rohkem 
{
  background: #f8c9a7;
  color: #4c4b4b;
}

.container-2 .card .rohkem::before
{
content: 'Read more';
}

.container-2 .card.active .rohkem::before
{
  content: 'Raed Less';
}
/*SIIT LÕPPEB CONTAINER-CONTAINER-2/RED MORE RED LESS KOLM KAARTI*/


/*SIIT ALGAB CONTAINER-CONTAINER-3 /AINE PEALKRI JA SISSEJUHATUS*/
.container-3 {
  position: relative;
  border: 1px solid #fb6804;
  border-radius: 10px;
  margin-top: 1.8%;
  margin-right: 5.2%;
  padding: 20px;  /* Sellega saan kasti kirja jaoks suuremaks teha*/
  padding-top: 1%;
  padding-left: 20px;/* See annab mulle teksti boxsi sees paigutuse*/
  width: 89.5%;
}

.container-3 .content-3 h3 {
color: #fb6804;
font-size: 1.4em;
font-weight: 420;
margin-bottom: 10px;
text-align: center; /* Lisatud, et tekst oleks keskele joondatud horisontaalselt */
display: flex; /* Lisatud, et kasutada Flexboxi omadusi */
justify-content: center; /* Lisatud, et pealkiri oleks horisontaalselt keskel */
align-items: center; /* Lisatud, et pealkiri oleks vertikaalselt keskel */
}

.container-3 .content-3 p
{
font-weight: 326;
color: #000000;
}
/*SIIT LÕPEB CONTAINER-CONTAINER-3 /AINE PEALKRI JA SISSEJUHATUS*/

/*MENÜÜ ALGUS*/
.navbar {
  background-color: rgb(255, 255, 255); /* Muudame navbari tausta valgeks */
  border: 1px solid rgb(178, 178, 178); /* Lisame piiratud musta joone */
}
.navbar .navbar-nav .nav-item .nav-link {
  color: rgb(243, 109, 7); /* Muudame teksti värvi oranžiks */
}

.navbar .navbar-nav .nav-item .nav-link:hover {
  color: #050504; /* Muudame teksti värvi oranžiks, kui hiirekursor on üle sõna */
}

.navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item {
  color: rgb(198, 89, 5); /* Muudame teksti värvi oranžiks dropdown menüüs */
}

.navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
  color: rgb(198, 89, 5); /* Muudame teksti värvi oranžiks, kui hiirekursor on üle dropdown menüü sõna */
}
/* Muuda navbari menüü teksti fonti Montserrat'iks */
.navbar-nav .nav-link {
  font-family: 'Montserrat', sans-serif;
}
/* MENÜÜ LÕPP*/

/*SIIT ALGAB SALIDER*/

.mida { /*wrapper*/
  left: 1px;
  max-width: 1100px;
  position: relative;
  margin-top: 40px;
  
}
.mida .karusell{ /*wrapper*/
  margin-left: 60px;
  white-space: nowrap;
  font-size: 0;
  cursor: pointer;
  overflow: hidden;/*kaotab ära ekraanilt teised fotot ja jätab ainult kom tk*/
  scroll-behavior: smooth;
}
.karusell img{
  cursor: grab;
  scroll-behavior: auto;
}

.karusell.dragging img{
  pointer-events: none;
}
.mida img{ /*wrapper*/
  left: 3px;
  height: 340px;
  object-fit: cover;
  width: calc(100% / 3);
  margin-left: 14px;
}

.karusell img:first-child{
  margin-left: 0px;
}

.mida i{ /*wrapper*/
  top: 50%;
  height: 46px;
  width: 46px;
  cursor: pointer;
  position: absolute;
  font-size: 1.2rem;
  text-align: center;
  line-height: 46px;
  background: #ee7a0d;
  border-radius: 50%;
  transform: translateY(-90%);/*See liigutab nuppu üles või alla foto öörel*/
}

.mida i:first-child{ /*wrapper*/
  left: 85px;
}
.mida i:last-child{
  right: -115px;
}

.raam { /*See on salideriülemine ja alumine oranz joon*/
  display: inline-block;
  padding: 25px; /* Määra soovitud polsterdus */
  border-width: 0; /* Alustame nulliga, et ainult top ja bottom piirjoon oleks nähtav */
  border-top-width: 1px; /* Määra raami ülaosa piirjoone paksus */
  border-bottom-width: 1px; /* Määra raami alaosa piirjoone paksus */
  border-style: solid; /* Raami stiil (solid, dotted, dashed jne) */
  border-color: #fb6804; /* Raami värv */
  width: 1190px; /* Raami laius */
  height: auto; /* Elemendi kõrgus kohaneb sisuga */
  margin-top: -5%;
  margin-left: 25px;
}
/*SIIT LÕPEB SLAIDER*/

/*SIIT ALGAB FOOTER*/
.viimane-joon {
  max-width: 1200px;
  padding: 5px;
  border-bottom: 1px solid ;
  background-color: white;
  margin-top: 20px;
  margin: auto 0;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
}
.viimane-joon p{
  font-weight: 200;
  color: #fb6304;
}
/*SIIT LÕPPEB FOOTER*/



/*SIIT ALGAB HEADER TEXST*/
.header-joon{
  background-color: white;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -5px;
  }
  .header-joon p{
  font-weight: 300;
  font-size: 1.0em;
  color: #fb6304;
  padding-top: 80px;
  }
  /*SIIT LÕPPEB HEADER TEXST*/