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


.raamiga-box-3 {
position: relative;
background-color: white;
max-height: 700px;
max-width: 1000px;
margin: 0 auto;
}
  
.fotobox {
display: flex;
flex-direction: column; /* Paneb elemendid vertikaalselt kõrvuti */
align-items: center; /* Keskkõrvutamine vertikaalsuunas */
position: relative;
border: 1px solid #fb6304;
border-radius: 10px;
background-color: white;
width: 450px;
height: 300px;
margin-right: 20px; 
left: 20px;
top: 12px;
}
  
.fotobox-img-fluid{
width: 98%;
max-height: 100%;
display: block;
padding-top: 15px;
padding-bottom: 15px;
}
  
.tekstibox {
position: relative;
background-color: white;
flex-grow: 1;
padding-left: 50px;
overflow: auto;
}
.collapse.show{
  display: block;
  height: auto;
  overflow: visible;
}

.border-box {
border-left: 1px solid #fb6304;
position: relative;
padding-left: 20px;
}
.tekstibox h3{
position: relative;
color: rgb(252, 111, 59);
font-size: 1.4em;
font-weight: 400;
margin-bottom: 10px;
justify-content: left; /* Lisatud, et pealkiri oleks horisontaalselt keskel */
left: 1px;
}
.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;
left: 1px;
}
.tekstibox p{
font-weight: 326;
color: #000000;
}
/*SIIT LÕPPEB CONTAINER-3-ÜLEMINE EHK FOTO !!VASAK!! JA TEXST PAREM*/

/*SIIT ALGAB KESKMINE CONATINER*/
.container-3-keskmine{
display: flex;
flex-direction: row;
max-width: 1200px;
min-height: 600px;/*See on kasti kõrgus*/
height: max-content;/* See annab selle, et kast läheks koos texstiga kõrgemaks*/
margin: 0 auto;
padding-top: 60px;
padding-right: 40px;
padding-bottom: 40px;
background-color: white;
border: 1px solid #fb6304;
border-radius: 10px;
box-sizing: border-box;
overflow-y: auto;
margin: 25px auto 0;
padding-left: 20px;
}
  
.raamiga-box-3-keskmine{
border-radius: 10px;
background-color: white;
max-height: 600px;
margin: 0 auto;
}
  
.fotobox-keskmine {
position: relative;
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: -20px;
left: 25px;
}
  
.fotobox-img-fluid-keskmine{
width: 99.6%;
max-height: 100%;
display: block;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 1px;
padding-left: 2px;
}

.tekstibox-keskmine{
position: relative;
background-color: white;
margin-right: 40px;
}
      
.tekstibox-keskmine 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-keskmine 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-keskmine p{
font-weight: 326;
color: #000000;
}
/*SIIT LÕPPEB KESKMINE CONTAINER*/


/*SIIT ALGAB ALUMINE CONATINER*/
.container-3-alumine {
  display: flex;
  flex-direction: row;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 600px;
  height: max-content;/* See height sellepärast, et kogu sisu oleks kõrgusega kaasas*/
  padding: 20px;
  padding-top: 60px;
  background-color: white;
  border: 1px solid #fb6304;
  border-radius: 10px;
  box-sizing: border-box;
  overflow-y: auto;
  margin: 40px auto 0;
  overflow: hidden;
  padding-bottom: 40px;
  padding-left: 35px;
  }
    
  .raamiga-box-3-alumine {
  position: relative;
  background-color: white;
  max-height: 700px;
  max-width: 1000px;
  margin: 0 auto;
  }
    
  .fotobox-alumine {
  display: flex;
  flex-direction: column; /* Paneb elemendid vertikaalselt kõrvuti */
  align-items: center; /* Keskkõrvutamine vertikaalsuunas */
  position: relative;
  border: 1px solid #fb6304;
  border-radius: 10px;
  background-color: white;
  width: 450px;
  height: 300px;
  margin-right: 20px; 
  left: 20px;
  top: 12px;
  }
    
  .fotobox-img-fluid-alumine{
  width: 98%;
  max-height: 100%;
  display: block;
  padding-top: 15px;
  padding-bottom: 15px;
  }
    
  .tekstibox-alumine{
  position: relative;
  background-color: white;
  flex-grow: 1;
  padding-left: 50px;
  overflow: auto;

  }
  
  
  .border-box-alumine{
  border-left: 1px solid #fb6304;
  position: relative;
  padding-left: 20px;
  }
  .tekstibox-alumine h3{
  position: relative;
  color: rgb(252, 111, 59);
  font-size: 1.4em;
  font-weight: 400;
  margin-bottom: 10px;
  justify-content: left; /* Lisatud, et pealkiri oleks horisontaalselt keskel */
  left: 1px;
  }
  .tekstibox-alumine 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;
  left: 1px;
  }
  .tekstibox p-alumine{
  font-weight: 326;
  color: #000000;
  }
/*SIIT LÕPPEB CONTAINER-3-ALUMINE EHK FOTO !!VASAK!! JA TEXST PAREM*/
 
  
  
/*SIIT ALGAB FOOTER*/
.viimane-joon{
max-width: 1200px;
padding: 10px;
border-bottom: 1px solid ;
background-color: white;
margin-top: 20px;
margin: auto 0;
justify-content: center;
align-items: center;
margin-top: 200px;
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(165, 165, 165); /* 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 */
  border-radius: 10px;
  padding-top: 2%;
  padding-bottom: 2%;
  border: solid 1px #fb6304;
  }
    
  .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; 
  background-color: #fb9570;
  }
  .navbar-nav .nav-link {
  font-weight: 400;
  }
  


  /* MENÜÜ LÕPP*/
    
    
    
    
    

/*SIIT ALGAB HEADER*/
.fotobox-header {
border-top: 2px solid #848484;
overflow: hidden;
width: 90%;
max-width: 1250px;
margin: 20px auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 350px; /* Uus kõrgus */
padding-bottom: 20px;
}
    
.fotobox-img-container-header{
position: relative;
}
    
.fotobox-img-fluid-header {
position: relative;
width: 100%;
height: 100%;
margin-top: 10%;
object-fit: cover;
display: block;
margin-left: 20px;
}
    
.pealkiri-header {
  position: absolute;
  top: 65%;
  transform: translateY(-50%);
  width: 90%;
  text-align: center;
  color: #fb6304;
  background-color: white;
  margin-right: 60px;
  padding: 0 auto;
  z-index: 1;
  padding-bottom: 31px;
  padding-top: 20px;

}


/*SIIT LÕPEB HEADER*/

.testimonial-card .card-up {
  height: 120px;
  overflow: hidden;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
}
.tagasiside{
  margin-top: 40px;
}

.aqua-gradient {
  background: linear-gradient(40deg, #ffdcc6, #ffece1) !important;
}

.testimonial-card .avatar {
  width: 120px;
  margin-top: -60px;
  overflow: hidden;
  border: 6px solid #ffffff;
  border-radius: 50%;
}
  
.testimonial-card {
  margin: 0 auto 10px; /* Veidi tühja ruumi kaartide vahele ja keskjoondamine */
  width: 350px;
}
.testimonial-card h4 {
  color: rgb(252, 111, 59);
  font-size: 1.3em;
  font-weight: 500;
}

.testimonial-card h5{
  color: #07677f;
  font-size: 1.2em;
  font-weight: 300;
}
.testimonial-card p{
  font-weight: 326;
  color: #000000;
}

/*Button tesimonial raam*/
.custom-btn-outline {
  border-width: 1px; /* Muutke raami laiust */
  padding: 5px 10px; /* Muutke nupu sisepatju vastavalt vajadusele */
}

.table {
  max-width: 1200px;
  margin: 0 auto; /* Selleks, et hoida tabel keskel */
  margin-top: 80px;
}


  .position-relative {
    position: relative;
  }

  .progress-container {
    position: absolute;
    left: 300px; /* Reguleerige horisontaalset paigutust vastavalt vajadusele */
    top: 20px; /* Reguleerige vertikaalset paigutust vastavalt vajadusele */
    width: 800px; /* Reguleerige progressiriba laiust vastavalt vajadusele */
  }

  .progress-bar {
    background-color: #ff9100; /* Muutke progressiriba värv vastavalt soovile */
    height: 30px; /* Reguleerige progressiriba kõrgust vastavalt vajadusele */
  }

  /* Stiilid väikesele mobiiliekraanile */
@media (max-width: 767px) {
  /* Siin saate määrata stiile mobiiliekraani jaoks */
  .container-fluid {
      /* Näiteks muudame konteineri laiust mobiiliekraanil */
      width: 100%;
  }
}

/* Stiilid suurele desktopiekraanile */
@media (min-width: 1200px) {
  /* Siin saate määrata stiile suurele desktopiekraanile */
  .container-fluid {
      /* Näiteks muudame konteineri laiust suurel ekraanil */
      width: 1200px;
  }
}

/*SIIN ON ÜLEMISE CONATINERI NUPP*/
.container-3 .raamiga-box::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-3 .raamiga-box .tekstibox
{
  position: relative;
  height: 400px;
  overflow: hidden;
}

.container-3 .raamiga-box .col-md-6.active .tekstibox
{
  height: max-content;
}

.container-3 .raamiga-box.active .tekstibox
{
height: auto;
}

.container-3 .raamiga-box .tekstibox::before /* See osa teeb kirjale valge kasti, mille muudab siis natuke transparendiks.*/
{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
}

.container-3 .raamiga-box.active .tekstibox::before
{
display: none;
}

.container-3 .raamiga-box .tekstibox {
  position: relative;
  /* ...muud stiilireeglid... */
}

.container-3 .raamiga-box .tekstibox p
{
  font-weight: 326;
  color: #000000;
  padding-top: 10%;
}

.container-3 .raamiga-box .nupp /* 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: fit-content;               /*Nupu pikkus*/
  background: #f9883d;      /*See reegel määrab elemendi taustavärvi.*/
  margin-top: 20px;           /*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;
  margin-left: 50px;
}
.container-3 .raamiga-box .col-md-6.active .nupp 
{
  background: #f8c9a7;
  color: #4c4b4b;
}

.container-3 .raamiga-box .col-md-6 .nupp::before
{
content: 'Loe rohkem';
}

.container-3 .raamiga-box .col-md-6.active .nupp::before
{
  content: 'Loe vähem';
}  
    
    
    
    
/*SIIN ON KESKMISE CONATINERI NUPP*/
.container-3-keskmine .raamiga-box-3-keskmine::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-3-keskmine .raamiga-box-3-keskmine .tekstibox-keskmine
{
  position: relative;
  height: 400px;
  overflow: hidden;
}

.container-3-keskmine .raamiga-box-3-keskmine .col-md-6.active .tekstibox-keskmine /*See siin määrab ära et texst avaneks täielkus mahus, mitte poolikult*/
{
  height: max-content;
}
.container-3-keskmine .raamiga-box-3-keskmine.active .tekstibox-keskmine /*et kõrgus klikates nupul auomaatselt muudaks koos teksitga kõrgust*/
{
height: auto;
}

.container-3-keskmine .raamiga-box-3-keskmine .tekstibox-keskmine::before 
{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
}

.container-3-keskmine .raamiga-box-3-keskmine.active .tekstibox-keskmine::before
{
display: none;
}

.container-3-keskmine .raamiga-box-3-keskmine .tekstibox-keskmine {
  position: relative;
  /* ...muud stiilireeglid... */
}

.container-3-keskmine .raamiga-box-3-keskmine .tekstibox-keskmine p
{
  font-weight: 326;
  color: #000000;
  padding-top: 10%;
}

.container-3-keskmine .raamiga-box-3-keskmine .nupp /* 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: fit-content;         /*Nupu pikkus*/
  background: #f9883d;      /*See reegel määrab elemendi taustavärvi.*/
  margin-top: 20px;           /*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;
  margin-right: 10px;
}
.container-3-keskmine .raamiga-box-3-keskmine .col-md-6.active .nupp 
{
  background: #f8c9a7;
  color: #4c4b4b;
}

.container-3-keskmine .raamiga-box-3-keskmine .col-md-6 .nupp::before
{
content: 'Loe rohkem';
}

.container-3-keskmine .raamiga-box-3-keskmine .col-md-6.active .nupp::before
{
  content: 'Loe vähem';
}  
  
/*SIIN ON ALUMISE CONTAINERI NUPP*/
.container-3-alumine .raamiga-box-alumine::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-3-alumine .raamiga-box-alumine .tekstibox-alumine
{
  position: relative;
  height: 400px;
  overflow: hidden;
}

.container-3-alumine .raamiga-box-alumine .col-md-6.active .tekstibox-alumine /*See siin määrab ära et texst avaneks täielkus mahus, mitte poolikult*/
{
  height: max-content;
}
.container-3-alumine .raamiga-box-alumine.active .tekstibox-alumine /*et kõrgus klikates nupul auomaatselt muudaks koos teksitga kõrgust*/
{
height: auto;
}

.container-3-alumine .raamiga-box-alumine .tekstibox-alumine::before 
{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
}

.container-3-alumine .raamiga-box-alumine.active .tekstibox-alumine::before
{
display: none;
}

.container-3-alumine .raamiga-box-alumine .tekstibox-alumine {
  position: relative;
  /* ...muud stiilireeglid... */
}

.container-3-alumine .raamiga-box-alumine .tekstibox-alumine p
{
  font-weight: 326;
  color: #000000;
  padding-top: 10%;
}

.container-3-alumine .raamiga-box-alumine .nupp /* 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: fit-content;               /*Nupu pikkus*/
  background: #f9883d;      /*See reegel määrab elemendi taustavärvi.*/
  margin-top: 20px;           /*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;
  margin-left: 50px;
}
.container-3-alumine .raamiga-box-alumine .col-md-6.active .nupp 
{
  background: #f8c9a7;
  color: #4c4b4b;
}

.container-3-alumine .raamiga-box-alumine .col-md-6 .nupp::before
{
content: 'Loe rohkem';
}

.container-3-alumine .raamiga-box-alumine .col-md-6.active .nupp::before
{
  content: 'Loe vähem';
}