/* Overlay */
.flipbook-overlay {
    display: none; /* ซ่อน overlay เริ่มต้น */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9); /* สีเข้มขึ้นเล็กน้อยเพื่อความหรูหรา */
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

/* Flipbook Container */
.flipbook {
    width: 70%; /* ลดขนาดเพื่อความกระชับ */
    height: 70%;
    position: relative; /* ใช้จัดตำแหน่งปุ่มใกล้ Flipbook */
    transform: scale(0);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    opacity: 0; /* ใช้ opacity สำหรับเอฟเฟกต์ fade-in */

}

/* เมื่อ active */
.flipbook.active {
    transform: scale(1);
    opacity: 1;
}

/* ปุ่มปิด */
.close-overlay {
    margin-left: 20px;
    margin-top: -550px;
    font-size: 20px;
    
    color: #ffffff; /* สีข้อความ */
    font-size: 16px; /* ขนาดข้อความ */
    font-weight: bold; /* ตัวหนา */
    text-align: center; /* จัดข้อความให้อยู่ตรงกลาง */
    background: #5f4f52; /* สีพื้นหลังปุ่ม */
    border: 1px solid #807979;
    border-radius: 5px; /* ขอบมน */
    padding: 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    display: inline-flex; /* ใช้ inline-flex เพื่อให้ขยายตามเนื้อหา */
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
/* Hover Effect */
.close-overlay:hover {
    transform: scale(1.5); /* ขยายเล็กน้อย */
}
.ebook-overlay-head1 {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    font-size: 24px;
    margin-top: 300px;
}
.ebook-overlay-head2 {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    font-size: 40px;
}

.ebook-inner-head1 {
    position: relative;
    display: block;
    width: 100%;
    left: 30px; /* จัดให้อยู่ทางซ้าย */
    color: #0f0f0f;
    font-weight: bold;
    font-size: 30px;
    margin-top: 140px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* เพิ่มเงาตัวเอียง */
    font-style: italic; /* ทำตัวเอียง */
}

.ebook-inner-head2 {
    position: relative;
    display: block;
    width: 100%;
    right: -180px; /* จัดให้อยู่ทางขวา */
    color: #0f0f0f;
    font-weight: bold;
    margin-top: 0px;
    font-size: 25px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* เพิ่มเงาตัวเอียง */
    font-style: italic; /* ทำตัวเอียง */
}
.sarabun {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    font-size: 40px;
    margin-top: 500px;
}
/* จัดสไตล์ให้ ul */
ul {
    list-style: none; /* เอาเครื่องหมายจุดออก */
    padding: 0;
    margin: 0;
    margin-left: 40px;
}

/* จัดตำแหน่ง li ด้วย Flexbox */
ul li {
    display: flex; /* ใช้ Flexbox */
    justify-content: space-between; /* จัดระยะห่างระหว่างลูก */
    align-items: center; /* จัดให้อยู่กึ่งกลางแนวตั้ง */
    padding: 10px 0; /* เพิ่มระยะห่างระหว่างรายการ */
}

/* สไตล์ลิงก์ goto-page */
ul li .goto-page{
    text-decoration: none; /* ลบขีดเส้นใต้ */
    color: #050505; /* สีตัวอักษร */
    font-size: 18px; /* ขนาดตัวอักษร */
}
ul li .goto-page1{
    text-decoration: none; /* ลบขีดเส้นใต้ */
    color: #050505; /* สีตัวอักษร */
    font-size: 18px; /* ขนาดตัวอักษร */
}
ul li .goto-page2{
    text-decoration: none; /* ลบขีดเส้นใต้ */
    color: #050505; /* สีตัวอักษร */
    font-size: 18px; /* ขนาดตัวอักษร */
}
ul li .goto-page3{
    text-decoration: none; /* ลบขีดเส้นใต้ */
    color: #050505; /* สีตัวอักษร */
    font-size: 18px; /* ขนาดตัวอักษร */
}





/* สไตล์ตัวเลข page-number-text */
ul li .page-number-text {
    text-decoration: none; /* ลบขีดเส้นใต้ */
    color: #030303; /* สีตัวเลข (สีอ่อนกว่า) */
    font-size: 18px; /* ขนาดตัวอักษร */
    font-weight: bold; /* ตัวหนา */
    margin-right: 120px;
}
/* สไตล์ตัวเลข page-number-text */
ul li .page-number-text1 {
    text-decoration: none; /* ลบขีดเส้นใต้ */
    color: #030303; /* สีตัวเลข (สีอ่อนกว่า) */
    font-size: 18px; /* ขนาดตัวอักษร */
    font-weight: bold; /* ตัวหนา */
    margin-right: 120px;
}

/* Container สำหรับปุ่ม */
.footer-buttons1 {
    position: fixed; /* ตรึงปุ่มให้อยู่ที่ด้านบนของหน้าจอ */
    top: 80px; /* ระยะห่างจากขอบบน */
    right: -105px; /* ตรึงปุ่มให้อยู่ขวาของหน้าจอ */
    display: flex; /* ใช้ Flexbox สำหรับจัดตำแหน่ง */
    white-space: nowrap;
    justify-content: center; /* จัดให้อยู่ตรงกลางในแนวนอน */
}

/* ปุ่ม */
.footer-buttons1 h6 {
    margin: 0;
    padding: 10px 20px; /* เพิ่มพื้นที่ภายในปุ่ม */
    color: #ffffff; /* สีข้อความ */
    font-size: 16px; /* ขนาดข้อความ */
    font-weight: bold; /* ตัวหนา */
    text-align: center; /* จัดข้อความให้อยู่ตรงกลาง */
    background: #cf0a2c; /* สีพื้นหลังปุ่ม */
    border-radius: 5px; /* ขอบมน */
    cursor: pointer; /* เปลี่ยนเคอร์เซอร์เมื่อชี้ */
    transition: background 0.3s ease, transform 0.2s ease; /* เพิ่ม Animation */
    position: fixed; /* ล็อคปุ่มให้อยู่กับที่ */
    z-index: 10000; /* ทำให้ปุ่มอยู่ด้านบนสุด */
}

/* Hover Effect */
.footer-buttons1 h6:hover {
    background: #ffffff; /* พื้นหลังเปลี่ยนเป็นสีขาว */
    color: #cf0a2c; /* เปลี่ยนสีข้อความ */
    transform: scale(1.1); /* ขยายเล็กน้อย */
}

/* Container สำหรับปุ่ม */
.footer-buttons2 {
    position: fixed; /* ตรึงปุ่มให้อยู่ที่ด้านบนของหน้าจอ */
    top: 140px; /* ระยะห่างจากขอบบน */
    right: -148px; /* ตรึงปุ่มให้อยู่ขวาของหน้าจอ */
    display: flex; /* ใช้ Flexbox สำหรับจัดตำแหน่ง */
    white-space: nowrap;
    justify-content: center; /* จัดให้อยู่ตรงกลางในแนวนอน */
}

/* ปุ่ม */
.footer-buttons2 h6 {
    margin: 0;
    padding: 10px 20px; /* เพิ่มพื้นที่ภายในปุ่ม */
    color: #ffffff; /* สีข้อความ */
    font-size: 16px; /* ขนาดข้อความ */
    font-weight: bold; /* ตัวหนา */
    text-align: center; /* จัดข้อความให้อยู่ตรงกลาง */
    background: #cf0a2c; /* สีพื้นหลังปุ่ม */
    border-radius: 5px; /* ขอบมน */
    cursor: pointer; /* เปลี่ยนเคอร์เซอร์เมื่อชี้ */
    transition: background 0.3s ease, transform 0.2s ease; /* เพิ่ม Animation */
}

/* Hover Effect */
.footer-buttons2 h6:hover {
    background: #ffffff; /* พื้นหลังเปลี่ยนเป็นสีขาว */
    color: #cf0a2c; /* เปลี่ยนสีข้อความ */
    transform: scale(1.1); /* ขยายเล็กน้อย */
}


.page-head-text {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    font-size: 20px;
    margin-top: -28px;
}

.page-footer-text {
    position: absolute;
    display: block;
    width: 100%;
    text-align: left;
    color: #ffffff;
    font-weight: bold;
    font-size: 20px;
    bottom: 15px; /* นับความสูงจากขอบด้านล่าง */
}

.page-footer-textcount {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    color: #00000062;
    font-weight: bold;
    font-size: 14px;
    margin-top: 5px;
    
}
.page-footer-textcount0{
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    color: #00000062;
    font-weight: bold;
    font-size: 14px;
    margin-top: 5px;
    
}
.page-footer-textcountGPA {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    color: #00000062;
    font-weight: bold;
    font-size: 14px;
    margin-top: 5px;
    
}
/* Container สำหรับรูปภาพ */
.image-ebook-row {
    display: flex; /* ใช้ Flexbox สำหรับจัดตำแหน่ง */
    justify-content: center; /* จัดรูปภาพให้อยู่ตรงกลาง */
    gap: 10px; /* เพิ่มระยะห่างระหว่างรูป */
    padding: 70px; /* เพิ่มระยะห่างภายใน container */
    border-radius: 10px; /* ขอบมนของ container */
}


/* สไตล์สำหรับรูปภาพ */
.image-ebook-row img {
    width: 128px; /* ความกว้างรูป */
    height: 128px; /* ความสูงรูป */
    border-radius: 10px; /* มุมโค้งมนของรูป */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* เพิ่ม Animation */
    cursor: pointer; /* เปลี่ยนเคอร์เซอร์เป็น pointer */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.0)); /* เพิ่ม drop shadow */
    object-fit: cover; /* ป้องกันการบีบหรือปรับขนาดรูป */
}

/* Hover Effect สำหรับรูป */
.image-ebook-row img:hover {
    transform: scale(1.3); /* ขยายรูปเล็กน้อยเมื่อ Hover */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); /* เพิ่ม drop shadow */
}

/* Container สำหรับรูปภาพ */
.photolib1 {
    display: flex; /* ใช้ Flexbox สำหรับจัดตำแหน่ง */
    justify-content: center; /* จัดรูปภาพให้อยู่ตรงกลาง */
    gap: 10px; /* เพิ่มระยะห่างระหว่างรูป */
    padding: 10px; /* เพิ่มระยะห่างภายใน container */
    border-radius: 10px; /* ขอบมนของ container */
}


/* สไตล์สำหรับรูปภาพ */
.photolib1 img {
    width: 128px; /* ความกว้างรูป */
    height: 128px; /* ความสูงรูป */
    border-radius: 10px; /* มุมโค้งมนของรูป */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* เพิ่ม Animation */
    cursor: pointer; /* เปลี่ยนเคอร์เซอร์เป็น pointer */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.0)); /* เพิ่ม drop shadow */
    object-fit: cover; /* ป้องกันการบีบหรือปรับขนาดรูป */
}

/* Hover Effect สำหรับรูป */
.photolib1 img:hover {
    transform: scale(1.3); /* ขยายรูปเล็กน้อยเมื่อ Hover */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); /* เพิ่ม drop shadow */
}
ul li .book-item-detail1, ul li .book-item-detail2 {
    font-size: 14px; /* ขนาดตัวอักษร */
}

ul li .book-item-detail1 {
    color: #cf0a2c; /* สีตัวอักษร */
    font-weight: bold; /* ตัวหนา */
    margin-top: 25px; /* ปรับระยะบรรทัด */
    margin-left: 25px;
    padding: 0.5px;
    line-height: 0.1px; /* ระยะห่างระหว่างบรรทัด */
}

ul li .book-item-detail1::after {
    content: " :"; /* เพิ่ม : ต่อหลังตัวหนังสือ */
}

ul li .book-item-detail2 {
    color: #020202; /* สีตัวเลข (สีอ่อนกว่า) */
    text-align: left; /* ตัวหนังสือเริ่มจากซ้าย */
    margin-left: 30px;
    margin-top: 0px;
    padding: -10px;
    line-height: 0.1px; /* ระยะห่างระหว่างบรรทัด */
}
.proto5 {
    width: 80%;
    height: 110px;
    margin-left: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:10px;
    
  }
  
  .proto5 img {
    width: 30%;
    height: 80%;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #fff;
    transition: all ease-out 0.5s;
    cursor: pointer;
    overflow: hidden;
  }
  .proto5 {
    transform: scale(0.9); /* ขยายรูปเล็กน้อยเมื่อ Hover */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); /* เพิ่ม drop shadow */
}
  .proto5 img:hover {
    width: 100%;
  }
.proto4 {
    width: 90%;
    height: 120px;
    margin-left: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:33px;
    
  }
  
  .proto4 img {
    width: 30%;
    height: 80%;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #fff;
    transition: all ease-out 0.5s;
    cursor: pointer;
    overflow: hidden;
  }
  .proto4 {
    transform: scale(0.9); /* ขยายรูปเล็กน้อยเมื่อ Hover */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); /* เพิ่ม drop shadow */
}
  .proto4 img:hover {
    width: 100%;
  }

  .proto42 {
    width: 90%;
    height: 120px;
    margin-left: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:12px;
    
  }
  
  .proto42 img {
    width: 30%;
    height: 80%;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #fff;
    transition: all ease-out 0.5s;
    cursor: pointer;
    overflow: hidden;
  }
  .proto42 {
    transform: scale(0.9); /* ขยายรูปเล็กน้อยเมื่อ Hover */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); /* เพิ่ม drop shadow */
}
  .proto42 img:hover {
    width: 100%;
  }
.proto3 {
    width: 90%;
    height: 120px;
    margin-left: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:-23px;
    
  }
  
  .proto3 img {
    width: 30%;
    height: 80%;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #fff;
    transition: all ease-out 0.5s;
    cursor: pointer;
    overflow: hidden;
  }
  .proto3 {
    transform: scale(0.9); /* ขยายรูปเล็กน้อยเมื่อ Hover */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); /* เพิ่ม drop shadow */
}
  .proto3 img:hover {
    width: 100%;
  }
.proto2 {
    width: 90%;
    height: 120px;
    margin-left: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:10px;
    }
    .proto2 img {
        width: 30%;
        height: 80%;
        object-fit: cover;
        border-radius: 10px;
        border: 2px solid #fff;
        transition: all ease-out 0.5s;
        cursor: pointer;
        overflow: hidden;
      }
      .proto2 {
        transform: scale(0.9); /* ขยายรูปเล็กน้อยเมื่อ Hover */
        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); /* เพิ่ม drop shadow */
    }
      .proto2 img:hover {
        width: 100%;
      }
  
.proto {
    width: 90%;
    height: 120px;
    margin-left: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:-15px;
    
  }
  
  .proto img {
    width: 30%;
    height: 80%;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #fff;
    transition: all ease-out 0.5s;
    cursor: pointer;
    overflow: hidden;
  }
  .proto {
    transform: scale(0.9); /* ขยายรูปเล็กน้อยเมื่อ Hover */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); /* เพิ่ม drop shadow */
}
  .proto img:hover {
    width: 100%;
  }
.ponramia {
    right:-20px;
    margin: 10px; /* เพิ่มระยะห่างรอบรูป */
    display: flex; /* ใช้ Flexbox สำหรับจัดตำแหน่ง */
    flex-direction: column; /* จัดเรียงรูปในแนวตั้ง */
    justify-content: flex-start; /* จัดรูปให้อยู่ชิดบน */
    gap: 20px; /* เพิ่มระยะห่างระหว่างรูป */
    
}
.ponramia1 {
    position: relative; /* เพิ่ม position เพื่อควบคุมตำแหน่ง */
    left: 220px;
    margin: 10px; /* เพิ่มระยะห่างรอบรูป */
    display: flex; /* ใช้ Flexbox สำหรับจัดตำแหน่ง */
    flex-direction: column; /* จัดเรียงรูปในแนวตั้ง */
    justify-content: center; /* จัดให้อยู่ตรงกลางในแนวตั้ง */
    align-items: center; /* จัดให้อยู่ตรงกลางในแนวนอน */
    gap: 20px; /* เพิ่มระยะห่างระหว่างรูป */
}
.ponramia2 {
    position: relative; /* เพิ่ม position เพื่อควบคุมตำแหน่ง */
    margin: 0px; /* เพิ่มระยะห่างรอบรูป */
    flex-direction: column; /* จัดเรียงรูปในแนวตั้ง */
    justify-content: center; /* จัดให้อยู่ตรงกลางในแนวตั้ง */
    align-items: center; /* จัดให้อยู่ตรงกลางในแนวนอน */
    gap: 0px; /* เพิ่มระยะห่างระหว่างรูป */
}
.ponramia3 {
    position: relative; /* เพิ่ม position เพื่อควบคุมตำแหน่ง */
    margin-top: -530px; /* เพิ่มระยะห่างรอบรูป */
    flex-direction: column; /* จัดเรียงรูปในแนวตั้ง */
    justify-content: center; /* จัดให้อยู่ตรงกลางในแนวตั้ง */
    align-items: center; /* จัดให้อยู่ตรงกลางในแนวนอน */
    gap: 0px; /* เพิ่มระยะห่างระหว่างรูป */
    left: 155px;
}
.ponramia4
{
    position: relative; /* เพิ่ม position เพื่อควบคุมตำแหน่ง */
    top: 25px; /* เพิ่มระยะห่างรอบรูป */
    flex-direction: column; /* จัดเรียงรูปในแนวตั้ง */
    justify-content: center; /* จัดให้อยู่ตรงกลางในแนวตั้ง */
    align-items: center; /* จัดให้อยู่ตรงกลางในแนวนอน */
    gap: 0px; /* เพิ่มระยะห่างระหว่างรูป */
    left: 155px;
}
.ponramia5
{
    position: relative; /* เพิ่ม position เพื่อควบคุมตำแหน่ง */
    top: 47px; /* เพิ่มระยะห่างรอบรูป */
    flex-direction: column; /* จัดเรียงรูปในแนวตั้ง */
    justify-content: center; /* จัดให้อยู่ตรงกลางในแนวตั้ง */
    align-items: center; /* จัดให้อยู่ตรงกลางในแนวนอน */
    gap: 0px; /* เพิ่มระยะห่างระหว่างรูป */
    left: 155px;
}
.ponramia6
{
    position: relative; /* เพิ่ม position เพื่อควบคุมตำแหน่ง */
    top: 67px; /* เพิ่มระยะห่างรอบรูป */
    flex-direction: column; /* จัดเรียงรูปในแนวตั้ง */
    justify-content: center; /* จัดให้อยู่ตรงกลางในแนวตั้ง */
    align-items: center; /* จัดให้อยู่ตรงกลางในแนวนอน */
    gap: 0px; /* เพิ่มระยะห่างระหว่างรูป */
    left: 155px;
}
.ponramia7
{
    position: relative; /* เพิ่ม position เพื่อควบคุมตำแหน่ง */
    top: 87px; /* เพิ่มระยะห่างรอบรูป */
    flex-direction: column; /* จัดเรียงรูปในแนวตั้ง */
    justify-content: center; /* จัดให้อยู่ตรงกลางในแนวตั้ง */
    align-items: center; /* จัดให้อยู่ตรงกลางในแนวนอน */
    gap: 0px; /* เพิ่มระยะห่างระหว่างรูป */
    left: 155px;
}
.ponramia8
{
    position: relative; /* เพิ่ม position เพื่อควบคุมตำแหน่ง */
    top: 108px; /* เพิ่มระยะห่างรอบรูป */
    flex-direction: column; /* จัดเรียงรูปในแนวตั้ง */
    justify-content: center; /* จัดให้อยู่ตรงกลางในแนวตั้ง */
    align-items: center; /* จัดให้อยู่ตรงกลางในแนวนอน */
    gap: 0px; /* เพิ่มระยะห่างระหว่างรูป */
    left: 155px;
}


.center-boxสินค้า1{
    color: #f8f2f3; /* สีตัวอักษร */
}
.box-photo{
    position: absolute;
    top: 5px; /* ระยะห่างจากด้านบน */
    left:320px; /* ระยะห่างจากซ้าย */
    width: 150px; /* หรือขนาดที่ต้องการ */
    height: 140px; /* หรือขนาดที่ต้องการ */
}
.photo-view img {
    width: 150px;
    height: auto;
    border-radius: 15px; /* มุมโค้ง */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* เงา */
    transition: transform 0.3s ease, filter 0.3s ease;
  }

  .proto02 {
    width: 90%;
    height: 120px;
    margin-left: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:-20px;
    }
    .proto02 img {
        width: 30%;
        height: 80%;
        object-fit: cover;
        border-radius: 10px;
        border: 2px solid #fff;
        transition: all ease-out 0.5s;
        cursor: pointer;
        overflow: hidden;
      }
      .proto02 {
        transform: scale(0.9); /* ขยายรูปเล็กน้อยเมื่อ Hover */
        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); /* เพิ่ม drop shadow */
    }
      .proto02 img:hover {
        width: 100%;
      }
ul li .book-item-detail3{
    font-size: 14px; /* ขนาดตัวอักษร */
}

ul li .book-item-detail3 {
    color: #020202; /* สีตัวเลข (สีอ่อนกว่า) */
    text-align: left; /* ตัวหนังสือเริ่มจากซ้าย */
    margin-left: 50px; /* ขยับมาหน้าสุด */
    margin-top: 25px;
    padding: -10px;
    line-height: 0.1px; /* ระยะห่างระหว่างบรรทัด */
    z-index: 9999; /* ทำให้ข้อความอยู่ด้านบนสุด */ 
    transition: color 0.3s, transform 0.3s;
    font-weight: bold; /* ตัวหนา */
}
ul li .book-item-detail3:hover {
    color: #cf0a2c;
    transform: scale(1.1);
}