:root{
  /* --code: #hex; */
  --bs-primary: #fff;
  --bs-secondary: #e1e1e1;/*same with gray : #dddd*/
  --bs-tertiary: #ff0000;
  
  --other-green:#4CAF50;
  --other-blue:#1b7ad9;
  --other-dblue:#032f5cf1;
  }


body {font-family: "Poppins";background-color: #21252b;margin: 0;padding: 0;}
.container {width: 100%;margin: 1.25rem auto;background-color: #c1c1c1;padding: 0;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);max-width: 1200px;}
h1 {text-align: center;color: #333;}

#testimonialCard h1 {padding: .5rem;margin: 0;}
.card-body{padding: 1.5rem;}

#testimonial-list {width: 100%;max-width: unset;}
.testimonial {border-bottom: 1px solid #ddd;padding: 1rem .75rem 0;position: relative;overflow:auto; height:150px;}

.testimonial p {font-size: 16px;color: #555; margin:.5rem;}
.btn-grp {display:flex; position: absolute;top: 1.25rem;float: right;right: 0;}
.testimonial .edit-btn {background-color: #fff;color: #000;padding: 5px 10px;border: #000 1px solid;cursor: pointer;border-radius: 4px;float: right;}
.testimonial .edit-btn:hover {background-color: #000;color: #fff;}
.form-section {margin-top: 30px;}
textarea {width: 100%;height: 100px;padding: 10px;border: 1px solid #ddd;border-radius: 4px;margin-bottom: 10px;font-size: 16px;}
button {color: white;padding: 10px 20px;border: none;cursor: pointer;border-radius: 4px;}
button:hover {background-color: var(--other-dblue);}

.testimonial .delete-btn {background-color: #f44336;color: white;padding: 5px 10px;border: none;cursor: pointer;border-radius: 4px;margin-left: 10px;float: right;}
.testimonial .delete-btn:hover {background-color: #9e1b19;}
#star-rating {margin: 0.5rem 0;}
textarea{margin-top: 15px;}
.testimonial strong {color: var(--other-blue);}
.testimonial em {font-weight: 600;font-size: .7rem;color: #d2d2d2;}


/*MODAL*/
.testimonial-modal {display: none;position: fixed;z-index: 1;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.85);padding-top: 60px;}
.modal-content {background-color: white;margin: 5% auto;padding: 20px;border-radius: 5px;width: 80%;max-width: 500px;}
#open-modal-btn {display: block;margin: auto;}
.close-btn {color: #aaa;font-size: 28px;font-weight: bold;position: absolute;top: 10px;right: 25px;background-color: transparent;border: none;cursor: pointer;}
.close-btn:hover,
.close-btn:focus {color: black;text-decoration: none;cursor: pointer;}

#footer h2 {font-size: 1rem; display: flex;   justify-content: space-between;   gap: 1rem;   line-height: 3; margin:auto 0;}
.references figure {position: absolute;right: 2rem;float: right;bottom: 0;z-index:999;}
#footer .references img {width: 100%;max-width: 100px;}