/*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.9em;
      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.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-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 #fb6304;
    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: rgb(252, 111, 59);
      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.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 {
      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: #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;
    }
    .loe-rohkem-kastid .kaardid-loe-rohkem.active .rohkem 
    {
      background: #07677f;
      color: #fb6304;
    }
    
    .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: #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 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-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: 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: #717070;
      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-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*/