.icon-text1{
    font-family: 'Monsarrat', sans-serif;
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    color: #f6f7f8;
    margin: 0; /* Eltávolítjuk a margót */
    padding: 0px; /* Adunk egy kis belső margót a szöveg köré */
    border: 0px solid white; /* Fehér színű keret */
    border-radius: 35px; /* Lekerekítjük a sarkokat */
    background-color: #00736b; /* Fehér háttér, enyhe átlátszósággal */
        
}
.bordered-text {
    color: #00736b;;
    border: 2px solid white;
    text-align: center;
    font-size: 20px;
    padding: 10px;
    border-radius: 35px; /* Opcionális: lekerekített sarkok */
    display: inline-block; /* A keret a szöveg körül marad */
    background-color: #f6f7f8; /* Ha kell, lehet fehér háttér is */
  
  }
  

/* Az egész lista formázása */
ul.list-unstyled {
    margin: 0; /* Eltávolítja az alapértelmezett margót */
    padding: 0; /* Eltávolítja az alapértelmezett paddinget */
    list-style: none; /* Alapértelmezett lista stílus eltávolítása */
   
}


ul.list-unstyled ul {
    margin-left: 15px; /* Beágyazott lista behúzása */
    margin-top: 0px; /* Csökkentjük a beágyazott lista tetejének margóját */
    margin-bottom: 0px; /* Az alsó margót eltávolítjuk */
    padding-left: 0px; 
}
ul.list-unstyled ul {
    margin: 15px !important;/* Behúzva maradjon a beágyazott lista */
    padding: 0 !important;
}


/* Az egyes listaelemek formázása */
.icon-text {
    display: flex; /* Az ikon és a szöveg egymás mellé helyezése */
    align-items: baseline; /* Ikon és szöveg függőleges igazítása */
    font-size: 16px; /* Szöveg mérete */
    color: #333; /* Szöveg színe */
   
}

.icon-text {
  position: relative;
  padding-left: 45px; /* belső margó az ikon miatt */
  margin-bottom: 8px; /* Távolság az ikon és a szöveg között */
}

li.icon-text {
    display: block;
    margin-bottom: 10px; /* Csökkentjük a sortávolságot a listaelemek között */
}

/* Az ikon méretének és színének testreszabása */
.icon-text i {
    font-size: 20px; /* Ikon mérete */
    color: #FF1E1E; /* Ikon színe */
    margin-left: 15px; /* Beágyazott lista behúzása */
   
}

.icon-text i {
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  
}
    
.icon-text span {
    display: inline-block;
    max-width: 90%; /* Elkerüli a túlcsordulást */
    word-wrap: break-word; /* A szöveget törni engedi, ha nem fér el */
  }
  
.icon-text li {
    display: flex;
    flex-wrap: wrap; /* Ha a szöveg nem fér el, akkor új sorba megy */
  }
  
  .icon-text li span {
    margin-left: 0px; /* Ha a szöveg áttörik, a második sor 20px-től kezdődik */
    padding-left: 0px; /* Az új sorban lévő szöveg bal oldali távolsága */
  }
  
  .hover-effect {
    transition: all 0.3s ease-in-out;
  }

  .hover-effect:hover {
    transform: scale(1.05); /* 1.5-szeres nagyítás */
    box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.2); /* Árnyék hozzáadása */
  }

  /*csak az új riaszto.html-hez*/
  .bg-teal {
    background-color: #fff2da;
  }
  .bg-light-blue {
    background-color: #e1e8ef;
  }
  
  .card {
    border-radius: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  }
  .card-body li {
    line-height: 1.6;
  }


  .card-header.bg-teal {
  color: #00736b; 
}


.icon-red {
  color: #d62828; /* piros ikon */
}

.icon-red-f {
  color: #00736b; /* zöld ikon */
}

/* Biztonsági funkciók fejléc */
.security-header {
  background-color: #fff2da; /* mély zöldeskék */
  color: #00736b; /* fehér betűszín */
  border-bottom: 4px solid #00736b; /* halvány zöldeskék vonal alul */
}

/* Kényelmi funkciók fejléc */
.comfort-header {
  background-color: #fff2da; /* világosabb */
  color: #00736b; /* fehér betűszín */
  border-bottom: 4px solid #00736b; /* halvány kék vonal alul */
}

/* Kártyák testének (tartalom) megkülönböztetése */
.security-card {
  background-color: #e1e8ef; /* világosszürke háttér marad */
}

.comfort-card {
  background-color: #e1e8ef; /* kissé világosabb kékes árnyalat */
}

.security-card, .comfort-card {
  display: flex;
  flex-direction: column;
}

.card-body {
  flex-grow: 1; /* 🔸 kitölti a maradék helyet, egyenlő magasságot biztosít */
}

.bg-light-blue, .security-card, .comfort-card {
  background-color: #e1e8ef;
}



/*kamera.html*/
    .card-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem auto;
    background-color: #e1e8ef; /* kör háttér */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #0d6efd;
  }
    .card {
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.05);
      height: 100%;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }
    .btn-custom {
      background-color: #0d9488;
      color: #fff;
      transition: all 0.3s ease;
    }
    .btn-custom:hover {
      background-color: #e1e8ef;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }
    .card-body {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .card-title-wrapper {
    background-color: #b0c0cf;
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 1rem;
  }