/*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: rgb(252, 111, 59);
      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: rgb(252, 111, 59);
      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 KOLM KAARTI*/
  .container {
    position: relative;
    margin-right: 4.5%;
    margin-top: 0.1%;
    width: 91.8%;
    max-width: 1200px;
  }
  
  .container .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 .card .content 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: center; /* Lisatud, et pealkiri oleks horisontaalselt keskel */
    align-items: center; /* Lisatud, et pealkiri oleks vertikaalselt keskel */
    margin-right: 60px;
}
.container .card .content h5{
  position: relative;
  color: #07677f;
  font-size: 1.1em;
  font-weight: 400;
  display: flex; /* Lisatud, et kasutada Flexboxi omadusi */
  margin-right: 2px;
  flex-wrap: nowrap; /* Lisatud, et tagada ühele reale jäämine */
  align-items: center;
  justify-content: center;
  padding-top: 20px;
}  

.container .card::before /*See on minu kolmnurk*/
  {
    content: '';
    position: absolute;
    top: 22.8%;
    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: 300px;
    overflow: hidden;
  }

.container .card.active .content
  {
  height: auto;
  }
  
  .container .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 .card.active .content::before
  {
  display: none;
  }
  
  .container .card .content h3 /*Pealkiri*/
  {
    color: #fb6804;
    font-size: 1.2em;
    font-weight: 300;
    margin-left: 50px;
    margin-bottom: 20px;
    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 .card .content .divider {
    position: absolute;
    top: 20%;
    left: 0;
    width: 100%;
    height: 0.1px;
    background-color: #ccc; /* Halli joone värv */
    margin-top: 10px;
  }

  .container .card .content p
  {
    font-weight: 326;
    color: #000000;
    padding-top: 10%;
  }
  
  .container .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: #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:#07677f;          /*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: 12px;            /*See reegel määrab teksti suuruse. "14px" */
    border-radius: 6px;
    
  }
  .container .card.active .rohkem 
  {
    background: #07677f;
    color: #fb6804;
  }
  
  .container .card .rohkem::before
  {
  content: 'Read more';
  }
  
  .container .card.active .rohkem::before
  {
    content: 'Raed Less';
  }
  /*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.1em;
      font-weight: 500;
      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-top: 80px;
    margin-left: 35px;
  }
  
  .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: 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-4 h4{
      position: relative;
      color: #07677f;
      font-size: 1.1em;
      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: 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-weight: 400; 
  }
  /* MENÜÜ LÕPP*/