/*SIIT ALGAB CONTAINER-CONTAINER-1 /AINE PEALKRI JA SISSEJUHATUS*/
.container-1{
  position: relative;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #fb6804;
  border-radius: 15px;
  margin-top: 20px;
}
  .container-1 .card-1 .content-1 h1 /*TEXST /Kuidas sünnib veebileht*/
  {
    position: relative;
    color: #fb6304;
    font-size: 1.8em;
    font-weight: 400;
    margin-bottom: 10px;
    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 */
    margin-right: 60px;
  }
  .container-1 .card-1 .content-1 h4 /*TEXST /Veebikujundus*/
  {
    position: relative;
    color: #07677f;
    font-size: 1.4em;
    font-weight: 400;
    bottom: 20px;
    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 */
    margin-right: 60px;
    letter-spacing: 1.4px;
  }


  
  .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*/
  {
    position: relative;
    color: #fb6304;
    font-size: 1.5em;
    font-weight: 400;
    margin-bottom: 10px;
    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 */
    margin-right: 60px;
  }
  .container-1 .card-2 .content-2 p{
  font-weight: 326;
  color: #000000;
  }

  .container-1 .card-1 .content-1 hr {
    position: relative;
    width: 400px;
    height: 1px; /* Muutke siin soovitud kõrguseks */
    background-color: black; /* Lisame taustavärvi, et luua värviline joon */
    border: none; /* Eemaldame vaikimisi piiri */
    right: 6%;
}
 /*SIIT LÕPEB CONTAINER-CONTAINER-1 /AINE PEALKRI JA SISSEJUHATUS*/
  
  /*SIIT AGAB CONTAINER-CONTAINER-2/RED MORE RED LESS KAKS KAARTI*/
  .loe-rohkem-kastid {
    position: relative;
    margin-left: 3.5%;
    margin-top: 40px;
    width: 200%;
    max-width: 1200px;

  }
  
  .loe-rohkem-kastid .kaardid-loe-rohkem  /* Kaardi (card) osa*/
  {
  position: relative;
  width: 95%;/*See on kõikide cardide laius*/
  padding: 20px;
  margin-top: 50px;
  background: white;
  border-radius: 1%;
  border: solid #fb6804;
  border-width: 1px;
  }
  
  .loe-rohkem-kastid .kaardid-loe-rohkem::before /*see peaks olema joone kolmnurgad*/
  {
    content: '';
    position: absolute;
    top: 65.1px;
    left: 50%;
    border-top: 20px solid #feeadf;
    border-right: 20px solid #a43f3f;
    transform: rotate(45deg); /* Pöörake elementi 45 kraadi */
    transform-origin: top right; /* Määrake pööramise keskpunkt ülemisse paremasse nurka */
  }
    
  
  
  
  .loe-rohkem-kastid .kaardid-loe-rohkem .sisu-loe-rohkem
  {
    position: relative;
    height: 400px;
    overflow: hidden;
  }
  
  .loe-rohkem-kastid .kaardid-loe-rohkem.active .sisu-loe-rohkem
  {
  height: auto;
  }
  
  .loe-rohkem-kastid .kaardid-loe-rohkem .sisu-loe-rohkem::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*/
  }
  
  .loe-rohkem-kastid .kaardid-loe-rohkem.active .sisu-loe-rohkem::before
  {
  display: none;
  }
  
  
  .loe-rohkem-kastid .kaardid-loe-rohkem .sisu-loe-rohkem 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 */
  }
  .loe-rohkem-kastid .kaardid-loe-rohkem .sisu-loe-rohkem h5 /*Pealkiri*/
  {
    color: #07677f;
    font-size: 1.3em;
    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 */
  }
  
  
  
  
  
  
  .loe-rohkem-kastid .kaardid-loe-rohkem .sisu-loe-rohkem {
    position: relative;
    /* ...muud stiilireeglid... */
  }
  
  .loe-rohkem-kastid .kaardid-loe-rohkem .sisu-loe-rohkem .joon {
    position: absolute;
    top: 45px;
    left: 0;
    width: 100%;
    height: 0.1px;
    background-color: #ccc; /* Halli joone värv */
  }
  
  
  
  .loe-rohkem-kastid .kaardid-loe-rohkem .sisu-loe-rohkem p
  {
    font-weight: 326;
    color: #000000;
    padding-top: 10%;
  }
  
  .loe-rohkem-kastid .kaardid-loe-rohkem .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: 125.9px;               /*Nupu pikkus*/
    background: #fb6804;      /*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;
  }
  .loe-rohkem-kastid .kaardid-loe-rohkem.active .rohkem 
  {
    background: #07677f;
    color: #fb6804;
  }
  
  .loe-rohkem-kastid .kaardid-loe-rohkem .rohkem::before
  {
  content: 'Loe Rohkem';
  }
  
  .loe-rohkem-kastid .kaardid-loe-rohkem.active .rohkem::before
  {
    content: 'Loe vähem';
  }
  /*SIIT LÕPPEB CONTAINER-CONTAINER-2/RED MORE RED LESS KOLM KAARTI*/
  
  /*SIIT ALGAB CONTAINER-3 EHK FOTO VASAK JA TEXST PAREM*/
  .container-3 {
  display: flex;
  flex-direction: row;
  max-width: 1200px;
  max-height: 600px;
  margin: 0 auto;
  padding: 20px;
  padding-top: 40px;
  background-color: white;
  border: 1px solid #fb6304;
  border-radius: 10px;
  box-sizing: border-box;
  overflow-y: auto;
  margin-top: 80px;
}

.raamiga-box-3 {
  border-radius: 10px;
  background-color: white;
  max-height: 600px;
  margin: 0 auto;
}

.fotobox {
  border: 1px solid #fb6304;
  padding: 15px;
  border-radius: 10px;
  background-color: white;
  max-width: 500px; /* Lisasin maksimaalse laiuse */
  height: 345px;
  margin-bottom: 20px; /* Muutsin margin-bottom */
  margin-right: 100px;
  width: calc(100% - 320px - 30px); /* Vähendasin width, arvestades .raamiga-box-3 paddingut */
}

.fotobox img {
  margin: 2px auto;
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
}

.tekstibox {
  border-radius: 0px;
  background-color: white;
  border-left: 1px solid #fb6304;
  max-width: 500px; /* Lisasin maksimaalse laiuse */
  flex-grow: 1;
  margin-right: 40px;
  padding-left: 20px;
}
.tekstibox h3{
  position: relative;
  color: rgb(252, 111, 59);
  font-size: 1.4em;
  font-weight: 400;
  margin-bottom: 10px;
  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 */
  margin-right: 60px;
}
.tekstibox h4{
    position: relative;
    color: #07677f;
    font-size: 1.3em;
    font-weight: 400;
    bottom: 20px;
    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 */
    margin-right: 60px;
    letter-spacing: 1.4px;
}
.tekstibox p{
  font-weight: 326;
  color: #000000;
}


/*SIIT LÕPPEB CONTAINER-3 EHK FOTO VASAK JA TEXST PAREM*/

/*SIIT ALGAB CONTAINER-3 EHK FOTO VASAK JA TEXST PAREM*/
.container-4 {
  display: flex;
  flex-direction: row;
  max-width: 1200px;
  max-height: 600px;
  padding: 20px;
  padding-top: 40px;
  background-color: white;
  border: 1px solid #fb6304;
  border-radius: 10px;
  box-sizing: border-box;
  overflow-y: auto;
  margin-left: 1px;
  margin-top: 80px;
}

.raamiga-box-4 {
  border-radius: 10px;
  background-color: white;
  max-height: 600px;
  margin: 0 auto;
}

.fotobox-4 {
  border: 1px solid #fb6304;
  padding: 15px;
  border-radius: 10px;
  background-color: white;
  max-width: 500px; /* Lisasin maksimaalse laiuse */
  height: 345px;
  margin-bottom: 20px; /* Muutsin margin-bottom */
  margin-right: 100px;
  width: calc(100% - 320px - 30px); /* Vähendasin width, arvestades .raamiga-box-3 paddingut */
}

.fotobox-4 img {
  margin: 2px auto;
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
}

.tekstibox-4 {
  border-radius: 0px;
  background-color: white;
  border-left: 1px solid #fb6304;
  max-width: 500px; /* Lisasin maksimaalse laiuse */
  flex-grow: 1;
  margin-right: 40px;
  padding-left: 20px;
}
.tekstibox-4 h3{
  position: relative;
  color: #fb6804;
  font-size: 1.4em;
  font-weight: 400;
  margin-bottom: 10px;
  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 */
  margin-right: 60px;
}
.tekstibox-4 h4{
    position: relative;
    color: #07677f;
    font-size: 1.3em;
    font-weight: 400;
    bottom: 20px;
    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 */
    margin-right: 60px;
    letter-spacing: 1.4px;
}
.tekstibox-4 p{
  font-weight: 326;
  color: #000000;
}


/*SIIT LÕPPEB CONTAINER-3 EHK FOTO VASAK JA TEXST PAREM*/

/*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: 30px;
  margin-left: auto;
  margin-right: auto;
}
.viimane-joon p{
  font-weight: 200;
  color: #fb6304;
}
/*SIIT LÕPPEB FOOTER*/

/*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: #07677f; /* Muudame teksti värvi oranžiks, kui hiirekursor on üle sõna */
  }
    
  .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item {
      color: #07677f; /* Muudame teksti värvi oranžiks dropdown menüüs */
  }
    
  .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
  color: #07677f; /* 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-weight: 400; 
  }
  /* MENÜÜ LÕPP*/