:root {
   --bg-yellow: #fdd000;
   --bg-blue: rgb(34, 162, 233);
   --bg-red: rgb(228, 30, 132);
 }

 body {
   font-family: Arial, sans-serif;
   font-size: 20px;
   font-weight: 500;
   height: 100%;
   margin: 0;
 }

 /* header */
 .ptchlogo {
   width: 500px;
 }

 .ytitle {
   color: #3b3a3a;
 }

 .heatitle {
   font-size: 1.5rem;
   text-align: center;
   color: #3b3a3a;
 }

 .righttiSize {
   font-size: 1.5rem;
   color: #79194c;
   background-image: url('../img/boom.png');
   background-repeat: no-repeat;
   background-size: 150px auto;
   background-position: center left;
 }

 .booming {
   width: 30%;
   margin: 0 20px;
 }

 .heatbooming {
   width: 4%;
 }

 .head-font-style {
   color: #3b3a3a;
 }

 /* body */
 .site-slogan-blue {
   color: black;
   border: #12a0e7 2px solid;
   border-radius: 50px;
   font-weight: 600;
   padding: 20px 20px;

 }

 .site-slogan-red {
   color: black;
   border: #E41E84 2px solid;
   border-radius: 50px;
   font-weight: 600;
   padding: 20px 20px;

 }

 .card-styleblue {
   background-color: #E0F2FE;
 }

 .card-stylered {
   background-color: #FCE7F3;
 }

 .card-styleyellow {
   background-color: #FEF3C7;
 }

 .step-number-blue {
   width: 80px;
   height: auto;
   border-radius: 8px;
   font-size: 5rem;
   color: white;
   background-color: #12a0e7;
   text-align: center;
   flex-shrink: 0;
 }

 .step-number-red {
   width: 80px;
   height: auto;
   border-radius: 8px;
   font-size: 5rem;
   color: white;
   background-color: #E41E84;
   text-align: center;
   flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .step-title-bluestyle {
   font-size: 1.5rem;
   color: #12a0e7;
   width: 100%;
   padding: 10px;
   background-color: white;
   border: #12a0e7 2px solid;
   border-radius: 28px;
   text-align: center;
 }

 .step-title-redstyle {
   font-size: 1.5rem;
   color: #E41E84;
   width: 100%;
   padding: 10px;
   background-color: white;
   border: #E41E84 2px solid;
   border-radius: 28px;
   text-align: center;
 }

 .step-title-endstyle {
   font-size: 1.5rem;
   color: #F39800;
   width: 100%;
   padding: 10px;
   background-color: white;
   border: #F39800 2px solid;
   border-radius: 28px;
   text-align: center;
 }

 .stependstyle {
   background-color: yellow;
 }

 .stepcard-style {
   font-size: 1.25rem;
   text-align: start;
   line-height: 1.5;
   padding: 0 10px;
 }

 .card {
   display: flex;
   flex-direction: column;

 }

 .d-flex.flex-column {
   flex: 1;
 }



 /* 提示按鈕 */
 .floating-btn {
   position: fixed;
   top: 50%;
   right: 20px;
   background: #E41E84;
   border: none;
   color: white;
   border-radius: 18%;
   width: 85px;
   height: 115px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
   justify-content: center;
   align-items: center;
 }

 .bi-file-text {
   font-size: 2rem;
 }

 .footer-style {
   background-color: #fdeeee;
   height: 100px;
 }


 /* RWD */
 @media (max-width:500px) {
   .righttiSize {
     font-size: 1.3rem;
     background-image: url('../img/boom.png');
     background-repeat: no-repeat;
     background-size: 100px auto;
     background-position: top left;
   }
 }

 @media (max-width: 575.98px) {

   .heatbooming {
     display: none;
   }

   .righttiSize {
     font-size: 1.3rem;
   }
 }

 @media (min-width: 576px) and (max-width: 767.98px) {
   .heatbooming {
     display: none;
   }
 }

 @media (min-width: 768px) and (max-width: 992px) {
   .custom-modal-width {
     max-width: 800px;
     height: 600px;
     width: 85%;
   }

   .righttiSize {
     font-size: 1.3rem;
     background-image: url('../img/boom.png');
     background-repeat: no-repeat;
     background-size: 100px auto;
     background-position: top left;
   }

   .heatbooming {
     display: none;
   }
 }

 @media (min-width: 873px) and (max-width: 1140px) {
   .heatbooming {
     display: none;
   }
 }