.custom-header {
    width: 100%;
    height: 300px;
    background: url('P2H_Preparation_Header2.png') no-repeat center center;
    background-size: cover;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to the top */
    padding: 20px;
    margin-top: -8px;
}


@media screen and (max-width: 768px) {
    .custom-header {
        background-position: left center; /* Shift the focus to the left side of the image */
    }
}

.header-content h1 {
    font-size: 5vw; 
    margin: 0;
 font-family: 'Architects Daughter', cursive;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); 
    color: #fff; 
    position: absolute;
    top: 20px;
    left: 40px;
}

.header-content p {
    font-size: 2.5vw; 
    margin: 7% 2% 0; 
 font-family: 'Ysabeau SC', sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); 
    color: #fff;
    width: 40%;
}


@media screen and (max-width: 768px) {
	  .custom-header {
        height: 250px; 
		   
    }

  
    .header-content h1 {
        font-size: 8.5vw; 
    }

    .header-content p {
        font-size: 4.5vw; 
		 margin: 13% 4% 0;
		  width: 50%;
	
		  
    }
}.SS-submit-btn21-v22 {
    font-size: 32px;
    width: 400px;
    padding: 10px 30px;
    cursor: pointer;
    display: block;
    margin: auto;
    margin-top: 50px;
    border: 0;
     background: linear-gradient(to right, #29a3a3, #78e3e3);
    outline: none;
    border-radius: 20px;
    color: white;
     font-family: 'Architects Daughter', cursive;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 10px white; 
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
    transition: box-shadow 0.3s ease-in-out; 
}

.SS-submit-btn21-v22:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px white; 
}
.SS-ProductContainer01-52{
	 overflow: hidden;
	 align-items: center;
	 justify-content: center;
	 display: flex;
  flex-direction: column;
 
	padding: 10px;
	height: auto;
	width: 88vw;
	background-color: rgba(0, 153, 153, 0.2); /* Teal (#009999) with 50% transparency */



	border-radius: 1em;
	border: 2px solid teal;
}
.SS-ProductContainer01-29{
	 overflow: hidden;
	 align-items: center;
	 justify-content: center;
	 display: flex;
  flex-direction: column;
 
	padding: 10px;
	height: auto;
	width: 88vw;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 1em;
	border: 2px solid white;
}
.SS-ProductContainer01-QL {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap; /* Allow wrapping to the next line */
    justify-content: space-evenly; /* Evenly space buttons horizontally in each row */
    align-items: center;
    padding: 50px;
    height: auto;
    width: 88vw;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 1em;
    border: 2px solid white;
    gap: 10px; /* Add a consistent gap between rows */
	
}

.SS-ProductContainer02{
	margin: 20px 20px;
	 overflow: hidden;
	 align-items: center;
	 justify-content: center;
	 display: flex;
  flex-direction: column;
  flex-wrap: wrap;
	padding: 5%;
	height: auto;
	width: 90%;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 1em;
	border: 1px solid #33cccc;
}
.SS-tag9{
	margin: 10px 0;
	text-align: center;
font-size: 40px;	
font-family: 'Caveat', cursive;
 color:  orange;
 text-shadow: 1px 1px 1px brown;
}
.SS-input29::placeholder{
	color: orange;
	font-size: 35px;
	text-shadow: 1px 1px 1px brown;
}
.SS-input29-v2::placeholder{
	color: orange;
	font-size: 35px;
	text-shadow: 1px 1px 1px brown;
}
.SS-input29-v2 {
    width: 50%;
    padding: 10px 0;
    margin: 15px 0;
    border: none;
    border-radius: .5em;
    outline: none;
    background: white;
    color: black;
   font-family: 'Ysabeau SC', sans-serif;
    font-size: 35px;
    text-align: center;
	border: 1px solid #33cccc;
	text-shadow: 1px 1px 1px black;

}
.SS-input29 {
    width: 98%;
    padding: 10px 0;
    margin: 15px 0;
    border: none;
    border-radius: .5em;
    outline: none;
    background: white;
    color: black;
   font-family: 'Ysabeau SC', sans-serif;
    font-size: 35px;
    text-align: center;
	border: 1px solid #33cccc;
	text-shadow: 1px 1px 1px black;

}
.SS-input29-10::placeholder{
	color: orange;
	font-size: 40px;
	text-shadow: 1px 1px 1px brown;
}
.SS-input29-10 {
    width: 50%;
    padding: 10px 0;
    margin: 15px 0;
    border: none;
    border-radius: .5em;
    outline: none;
    background: white;
    color: black;
   font-family: 'Ysabeau SC', sans-serif;
    font-size: 35px;
    text-align: center;
	border: 1px solid #33cccc;
	text-shadow: 1px 1px 1px black;

}
.SS-input29-15 {
	max-width: 700px;
    width: 70%;
    padding: 10px 0;
    margin: 15px 0;
    border: none;
    border-radius: .5em;
    outline: none;
    background: white;
    color: #008080;
   font-family: 'Ysabeau SC', sans-serif;
    font-size: 35px;
    text-align: center;
	border: 1px solid #33cccc;
	text-shadow: 1px 1px 1px black;

}






.SS-input52::placeholder{
	color: orange;
	font-size: 40px;
	text-shadow: 1px 1px 1px #cc6600;
}
.SS-input52 {
    width: 50%;
    padding: 10px 0;
    margin: 15px 0;
    border: none;
    border-radius: .5em;
    outline: none;
    background: white;
    color: orange;
    font-family: 'Ysabeau SC', sans-serif;
    font-size: 40px;
    text-align: center;
	border: 1px solid #33cccc;
	text-shadow: 1px 1px 1px brown;

}
.SS-input52-v2::placeholder{
	color: orange;
	font-size: 40px;
	text-shadow: 1px 1px 1px #cc6600;
}
.SS-input52-v2 {
    width: 50%;
    padding: 10px 0;
    margin: 15px 0;
    border: none;
    border-radius: .5em;
    outline: none;
    background: white;
    color: orange;
    font-family: 'Ysabeau SC', sans-serif;
    font-size: 40px;
    text-align: center;
	border: 1px solid #33cccc;
	text-shadow: 1px 1px 1px brown;

}

   #SS-Heading{
		 text-align: center;
    font-size: 70px;


 font-weight:lighter;
font-family: 'Cinzel', serif;
 text-shadow: 1px 1px 2px black;
color:  #009999;
  }









/* login */
.SS-body052 {
  margin: 100px 0; 
    padding-bottom: 100px;
    padding-top: 40px;
    background-image: url('H_052000_04.jpg'); 
    background-size: auto 100%; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
}
#SS-center52{
		 align-items: center;
	 justify-content: center;
	 display: flex;
	 width: 100%;
}
#SS-Error21{
	 align-items: center;
	 justify-content: center;
	 display: flex;
	  border-radius: 1em;
	border: 2px solid white;
	width: 370px;
	 background-color: rgba(255, 255, 255, 0.9); 
	margin-top:10px;
	padding: 15px;
    font-size: 25px;
height:70px;
text-align: center;
	 font-family: 'Ysabeau SC', sans-serif;
	color: black;


  }
.SS-BoxL052 {
    position: relative;
  transition: height 0.5s ease;
  border-radius: 1em;
    background-color: rgba(255, 255, 255, 0.9); 
    margin: 0px auto;
    height: 370px;
    width: 370px;
    padding: 15px;
    padding-top: 30px;
    color: black;
    overflow: hidden;
    padding-bottom: 30px;
	border: 2px solid white;
}
  	#SS-login{
		left: 20px;
	} 
  #SS-register{
		left: 450px;
		
	}
	  .SS-ButtonBox052{
	   width: 370px;
	margin: auto;
	   position: relative;
	   box-shadow: 10px 10px 25px #cc6600;
	   border-radius: 1em;
	   
   }
   #SS-btn052{
	left:0;
	right: 0;
	   position: absolute;
	  width: 200px;
	   height:100%;
	   background: linear-gradient(to right, #cc6600,   orange);
	   border-radius: 1em;
	   transition: .5s;
   }
 .SS-toggle-btn052 {
    margin-left: 10px;
    padding: 10px 50px;
    cursor: pointer;
    background: transparent;
    border: 0;
    outline: none;
    position: relative;
    font-size: 25px;
    font-family: 'Ysabeau SC', sans-serif;
    transition: color 0.3s ease; 
    color: grey; 
}

.SS-toggle-btn052#loginBtn {
    color: white;
}

.SS-toggle-btn052#registerBtn {
    color: grey;
}
   .SS-input-field21::placeholder {
  color: grey;
font-family: 'Montserrat', sans-serif;
}
.SS-input-field21{
	width: 96%;
	padding: 10px 5px 5px 10px;
	margin: 5px 0;
	border-left: 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid #29a3a3;
	outline: none;
	background: transparent;
	margin-top: 30px;
	color: black;
	font-family: 'Comfortaa', sans-serif;
	border-radius: 5px;
	 font-size: 25px;
	  background-color: rgba(255, 255, 255, 0.9);
	
}
.SS-input-group{
	top: 100px;
	position: absolute;
	width: 360px;
	transition: .5s;
}




.bodyR {
  display: flex;
  flex-direction: column;
 padding: 0;
 margin: 0 auto;
  align-items: center;
  background: linear-gradient(to right,#ccffee,  #cceeff);

  min-height: 100vh; 
 
}
.row052 {
   
    display: flex;
    justify-content: space-between; 
    width: 100%;
    margin: 0 auto;
    align-items: center;
    white-space: nowrap; 
    gap: 4vw; 
}

.SS-submit-btn21-3 {
    flex: 1 1 30%; 
    font-size: 1.5vw; 
    padding: 10px 10px;
    cursor: pointer;
	margin: 20px;
  
    border: 0;
    background: linear-gradient(to right, #cc6600,   orange);
    outline: none;
    border-radius: 20px;
    color: white;
    font-family: 'Architects Daughter', cursive;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 10px white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.3s ease-in-out;
    text-align: center;
}

.SS-submit-btn21-3:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px white;
}


@media (max-width: 768px) {
    .row052 {
        gap: 3vw;
    }
    .SS-submit-btn21-3 {
        font-size: 4vw; 
		margin: 10px;
    }
	
}



.SS-submit-btn21-5 {
    font-size: 32px;
    width: 400px;
    padding: 10px 30px;
    cursor: pointer;
    display: block;
    margin: auto;
    margin-top: 50px;
    border: 0;
     background: linear-gradient(to right, #cc6600,   orange);
    outline: none;
    border-radius: 20px;
    color: white;
     font-family: 'Architects Daughter', cursive;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 10px white; 
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
    transition: box-shadow 0.3s ease-in-out; 
}

.SS-submit-btn21-5:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px white; 
}

.SS-submit-btn21-2 {
    font-size: 27px; 
    width: 400px;
    padding: 10px 30px;
    cursor: pointer;
    display: block;
    margin: auto;
    margin-top: 50px;
    border: 0;
    outline: none;
    border-radius: 20px;
    color: white;
    font-family: 'Architects Daughter', cursive;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 10px white; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
    transition: box-shadow 0.3s ease-in-out; 
    text-align: center; 
    line-height: .8; /* reduce the space between lines */
}

.SS-submit-btn21-2 .food-name {
	margin-top: 10px;
    font-size: 29px; 
    font-weight: bold;
    display: block;
}

.SS-submit-btn21-2 .calories {
    font-size: 28px; 
    font-style: italic;
	margin-bottom: 10px;
}
@media screen and (max-width: 680px) {
    .SS-submit-btn21-2 {
        width: 150px; 
		line-height: .6;
    }

    .SS-submit-btn21-2 .food-name {
        font-size: 22px;
    }

    .SS-submit-btn21-2 .calories {
        font-size: 17px; 
    }
}


.SS-submit-btn21-2:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px white; 
}
.SS-submit-btn21-52 {
    font-size: 32px;
    width: 400px;
    padding: 10px 30px;
    cursor: pointer;
    display: block;
    margin: auto;
    margin-top: 50px;
    border: 0;
     background: linear-gradient(to right, #cc6600,   orange);
    outline: none;
    border-radius: 20px;
    color: white;
     font-family: 'Architects Daughter', cursive;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 10px white; 
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
    transition: box-shadow 0.3s ease-in-out; 
}

.SS-submit-btn21-52:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px white; 
}


.SS-submit-btn21 {
    font-size: 32px;
    width: 100%;
    padding: 10px 30px;
    cursor: pointer;
    display: block;
    margin: auto;
    margin-top: 50px;
    border: 0;
     background: linear-gradient(to right, #29a3a3, #78e3e3);
    outline: none;
    border-radius: 20px;
    color: white;
     font-family: 'Architects Daughter', cursive;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 10px white; 
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
    transition: box-shadow 0.3s ease-in-out; 
}

.SS-submit-btn21:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px white; 
}
.SS-submit-btn20 {
    font-size: 32px;
    width: 50%;
    padding: 10px 30px;
    cursor: pointer;
    display: block;
    margin: auto;
    margin-top: 50px;
    border: 0;
     background: linear-gradient(to right, #29a3a3, #78e3e3);
    outline: none;
    border-radius: 20px;
    color: white;
     font-family: 'Architects Daughter', cursive;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 10px white; 
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
    transition: box-shadow 0.3s ease-in-out; 
}

.SS-submit-btn20:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px white; 
}
.SS-submit-btnQL {
    font-size: 20px;
    width: 100%;
    padding: 0px 30px;
    cursor: pointer;
    display: block;
    margin: auto;
    margin-top: 20px;
    border: 0;
    outline: none;
    border-radius: 0;
    color: white;
    font-family: 'Architects Daughter', cursive;
    background: none; /* Remove background */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 

   
    transition: border-bottom 0.3s ease-in-out;
}
.SS-submit-btnQL:hover {
     color: orange;
}






.column {
    margin-bottom: 1px; /* Space between each label and field */
    text-align: center; /* Center align the text within the container */
	
}
.column2 {
    margin-bottom: 1px; /* Space between each label and field */
    text-align: center; /* Center align the text within the container */
	width: 97%;
}

.SS-label {
    display: block; 
    color: white; 
    font-weight: bold; 
    font-size: 1.6em; 
     font-family: 'Cinzel', serif;
    margin-bottom: 1px; 
    text-align: center; 
	 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}








.SS-body2{
margin: 0;
 background-color: white;
	display: flex;
	flex-direction: column;
	  justify-content: center;
  align-items: center;
  padding-bottom: 200px;
	
}
.SS-Form22 {
	width: 90vw;
 border-radius: 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 padding-bottom:10px;
  margin: 20px 0;
background: linear-gradient(45deg, #addceb, #687f40);



}
.navbar {
  position: fixed;
  top: 0; 
  left: 0;
  background-color: rgba(51, 51, 51, 0.6);
  width: 100%;
  padding: 10px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}







.SS-ToolBox {
    width: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ddd; 
    flex-wrap: wrap;
	padding: 20px 0;
	margin: 20px 0;
}
.SS-picture2 {

}

.SS-picture2 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image covers the entire container */
}

.SS-picture {
    border: 1px solid grey;
    flex: 0 0 30%;
    margin-right: 20px; /* Space between image and tool info */
    max-height: 400px;
    overflow: hidden; /* Ensure content is contained within the parent div */
}

.SS-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image covers the entire container */
}


.SS-ToolInfo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.SS-tool-header {
	margin-bottom: 10px;
    font-family: 'Cinzel', serif;
    font-size: 4vw;
    text-align: center;
}

.tool-details {
    width: 100%;
    font-size: 20px;
    font-family: 'Ysabeau SC', sans-serif;
}

.tool-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px; 
}

.tool-item {
    font-size: 2vw;
    padding: 5px;
    flex: 1;
    display: flex;
    align-items: center;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1); /* All-around shadow effect with spread */
}


.tool-item:not(:last-child) {
    margin-right: 10px; /* Space between items in a row */
}

.tool-button {
	margin-top: 5%;
    display: flex;
    align-items: center;
}

.label {
    color: grey;
    margin-right: 5px; 
}

.SS-button9 {
    text-shadow: 1px 1px 2px black;
    font-size: 30px;
    width: 390px;
    padding: 10px 30px;
    cursor: pointer;
    display: block;
    margin: auto;

    border: 0;
    background: linear-gradient(to left, #FFD700, #FFA500); 
    outline: none;
    border-radius: 20px;
    color: white;
    font-family: 'Architects Daughter', cursive;
  
    transition: box-shadow 0.3s ease-in-out; 
    box-shadow: 0 4px 8px rgba(128, 128, 128, 0.5); 
}

.SS-button9:hover {
    box-shadow: 0 4px 12px rgba(128, 128, 128, 0.7); 
}

.label2 {
	width: 200px;
	 font-family: 'Ysabeau SC', sans-serif;
	font-size: 2vw;
    color: black;
    margin-right: 5px; 
}.tool-item2 {
	margin: 0 10px;
	 font-family: 'Ysabeau SC', sans-serif;
	border: none;
    font-size: 2vw;
    padding: 5px 10px;
    flex: 1;
    display: flex;
    align-items: center;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1); 
}
.row {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 10px;
margin: 10px 0;
    align-items: center; 
	justify-content: center;
	
}

.SS-items{
	    width: 90%;
    background-color: white;
    display: flex;
	flex-direction: column;
  
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ddd; 
 margin-top: -30px;
	padding: 20px;
	
}

.SS-ToolBox2 {
    width: 100%;
    background-color: white;
    display: flex;
	flex-direction: column;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ddd; 
    flex-wrap: wrap;
	padding: 20px 0;
	margin: 20px 0;
}
.tool-row2 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px; 
}








@media (max-width: 750px) {
	.tool-item2 {
		margin: 10px 0;
	}
	.SS-items{
	width: 95%;}
	.tool-item2 {
	
    font-size: 5vw;
	}
.label2 {
	
	font-size: 5vw;
	
}



	.tool-item {
    font-size: 6vw;
	}
	
	
	
	.SS-tool-header {
  margin-top: 30px;
    font-size: 8vw;
	}
	.SS-picture {
		max-height: 800px;
		min-width: 100%; 
    flex: 0 0 100%;
    margin-right: 0px; 
}

.SS-picture img {
    width: 100%;
    height: auto;
}
    .tool-details {
        display: flex;
        flex-direction: column;
		
    }
    .tool-row {
        display: flex;
        flex-direction: column;
    }
    .tool-item:not(:last-child) {
        margin-right: 0; 
        margin-bottom: 10px; 
    }
    .SS-button9 {
        width: 100%;
        text-align: center;
    }
}


.SS-Form51 {
    width: 90vw;
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    margin: 20px 0;
    background: rgba(255, 255, 255, 0.5);
}

.SS-input29-1, .SS-input29-2 {
    padding: 10px 0;
    margin: 15px 10px; /* Add some margin between elements */
    border: none;
    border-radius: .5em;
    outline: none;
    background: white;
    color: black;
    font-family: 'Ysabeau SC', sans-serif;
    font-size: 30px;
    text-align: center;
    flex: 1;
}

.SS-input29-1 {
    width: calc(30vw - 20px); /* Adjust width based on viewport */
    min-width: 150px; /* Minimum width to ensure it doesn’t get too small */
}

.SS-input29-2 {
    width: calc(45vw - 20px); /* Adjust width based on viewport */
    min-width: 150px; /* Minimum width to ensure it doesn’t get too small */
}

.SS-Form51 .row {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}

.SS-Form51 .row .SS-input29-1 {
    flex: 1;
}

.SS-Form51 .row-2 {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}


@media (min-width: 768px) {
	
    .SS-input29-1 {
		 font-size: 2vw;
        width: calc(25vw - 20px); 
    }

    .SS-input29-2 {
		 font-size: 2vw;
        width: calc(40vw - 20px); 
    }

    .SS-input29 {
		 font-size: 2vw;
        width: 98%;
    }.SS-input29-v2 {
		 font-size: 2vw;
        width: 50%;
    }  .SS-input52 {
		 font-size: 2vw;
        width: 98%; 
    }
	.SS-input52-v2 {
		 font-size: 2vw;
        width: 50%; 
    }
	
}
@media (max-width: 768px) {
	
    .SS-input29-1 {
		 font-size: 4vw;
       
    }

    .SS-input29-2 {
		 font-size: 4vw;
      
    }
 .SS-input29 {
		 font-size: 5vw;
 
    }
	 .SS-input52 {
		 font-size: 5.5vw;
  width: 98%; 
    }

   .SS-input52-v2 {
		 font-size: 5.5vw;
  width: 98%; 
    }
	.SS-input29-v2 {
		 font-size: 5.5vw;
        width: 98%;
    } 
}




















.SS-Form_H00 {
  background-color: #e6e6e6;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center; 
  align-items: center;
  width: 100%;
  max-width: 100%; 
  padding: 10px; 
  box-sizing: border-box; 
  overflow: hidden; 
}

.SS-Form_H00 .SS-button54 {
  width: 400px; 
  max-width: calc(100% - 40px); 
  margin: 10px; 
  display: flex;
  align-items: center;
  font-family: 'Cinzel', serif;
  border-radius: 5px;
  height: 100px;
  font-size: 30px;

  border: none;
  outline: none;
  color: #4d4d4d;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 
              0 6px 20px rgba(0, 0, 0, 0.1); 
  cursor: pointer; 
  background-color: white; 
  box-sizing: border-box; 
 flex-shrink: 0; /* Prevent shrinking */
  flex-grow: 0; /* Prevent growing */
}

@media (max-width: 750px) {
	.SS-input29-15 {
		
		font-size: 5vw;
	}
  .SS-Form_H00 .SS-button54 {
    width: 100%; 
    max-width: 400px; 
    margin: 10px auto; 
  }
}


.SS-Form11 {


	 background-color:  #e6e6e6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 40px 0;

}
.SS-column {

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;

}
.SS-Form {


	background: linear-gradient(45deg, #addceb, #687f40);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;

}








#SS-Heading-Container {
    display: flex;
    align-items: center; 
}

#Tool-Box-Image {
    width: 150px;
    height: auto; /* Maintain aspect ratio */
    margin-right: 10px; /* Space between image and text */
}


   #SS-Heading51{
		 text-align: center;
    font-size: 25px;


 font-weight:lighter;
font-family: 'Cinzel', serif;

color: white;
  }

   #SS-2Heading{
		 text-align: center;
    font-size: 30px;

  font-family: 'Ysabeau SC', sans-serif;
 font-weight:lighter;


color: black;
  }
   #SS-3Heading{
	   margin-top: 65px;
		 text-align: center;
    font-size: 30px;

 padding:20px 5% 5px 5%;
 font-weight:lighter;
 font-family: 'Vollkorn SC', serif;
text-shadow: 1px 1px 2px black;
  color: white;
  }
  .SS-1image {
	  margin: 50px auto;
	  border-radius: 20px;
    width: 97%;
    height: auto; 
	max-width: 700px;
}

.SS-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
background-color: rgba(0, 128, 128, 0.3); /* Teal with 40% transparency */

  display: flex;
  justify-content: space-around;
  align-items: center;
}
.SS-button90 {
	text-shadow: 1px 1px 2px teal;
    font-size: 30px;
    width: 390px;
    padding: 10px 30px;
    cursor: pointer;
    display: block;
    margin: auto;

    border: 0;
    background: linear-gradient(to right, #29a3a3, #78e3e3);
    outline: none;
    border-radius: 20px;
    color: white;
     font-family: 'Architects Daughter', cursive;
  
    transition: box-shadow 0.3s ease-in-out; /* Smooth transition for the shadow effect */
}
.SS-button54-2 {
    margin-top: 20px;
	
  font-family: 'Cinzel', serif;
    border-radius: 5px;
    height: 100px;

	width: 400px;
    font-size: 30px;

    text-shadow: 1px 1px 2px white, 
                 2px 2px 4px white,
                 3px 3px 6px white,
                 4px 4px 8px white,
                 5px 5px 10px white,
                 6px 6px 12px white,
                 7px 7px 14px white,
                 8px 8px 16px white,
                 9px 9px 18px white,
                 10px 10px 20px white,
                 11px 11px 22px white,
                 12px 12px 24px white;
    border: none;
    outline: none;
    color: #eff5f5;
    padding: 10px 0; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), /* Adds a black shadow with transparency */
                0 6px 20px rgba(0, 0, 0, 0.1); /* Additional larger shadow for depth */
    cursor: pointer; 
}
.SS-button54 {
    display: flex;
    align-items: center;
    margin-top: 20px;
    font-family: 'Cinzel', serif;
    border-radius: 5px;
    height: 100px;
    width: 400px;
    font-size: 30px;
   /*  text-shadow: 1px 1px 2px white, 
                 2px 2px 4px white,
                 3px 3px 6px white,
                 4px 4px 8px white,
                 5px 5px 10px white,
                 6px 6px 12px white,
                 7px 7px 14px white,
                 8px 8px 16px white,
                 9px 9px 18px white,
                 10px 10px 20px white,
                 11px 11px 22px white,
                 12px 12px 24px white;*/
    border: none;
    outline: none;
    color: #eff5f5;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), /* Adds a black shadow with transparency */
                0 6px 20px rgba(0, 0, 0, 0.1); /* Additional larger shadow for depth */
    cursor: pointer; 
    background-color: #e9fce9; 
}

.SS-button-icon {
    height: 90px; 
    margin-right: 10px; 
}
.SS-1button-icon {
    height: 90px; 
    margin-right: 50px; 
}

.SS-button555 {
    margin-top: 20px;
	
  font-family: 'Cinzel', serif;
    border-radius: 5px;
    height: 100px;

	width: 390px;
    font-size: 45px;

    text-shadow: 1px 1px 2px white, 
                 2px 2px 4px white,
                 3px 3px 6px white,
                 4px 4px 8px white,
                 5px 5px 10px white,
                 6px 6px 12px white,
                 7px 7px 14px white,
                 8px 8px 16px white,
                 9px 9px 18px white,
                 10px 10px 20px white,
                 11px 11px 22px white,
                 12px 12px 24px white;
    border: none;
    outline: none;
    color: #4d4d4d;
    padding: 10px 0; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), /* Adds a black shadow with transparency */
                0 6px 20px rgba(0, 0, 0, 0.1); /* Additional larger shadow for depth */
    cursor: pointer; 
}



.SS-button555:hover {
    font-size: 48px; 
}

.SS-submit3 {
	
	background: linear-gradient(#a9a9a9, #808080);

 padding: 7px 20px;
 font-family: 'Vollkorn SC', serif;
	 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 
                0 6px 20px rgba(0, 0, 0, 0.1);
  color: white;
  border: none;
  cursor: pointer;
   border-radius: 20px;
	font-size: 30px;
	width: 90%;
	max-width: 380px;
	text-shadow: 1px 1px 2px black;

 
}
 #file-upload {
            margin-left: 50px;
        }

.SS-gif-image {
    width: 200px;

}
.SS-1gif-image {
    width: 150px;

}



    #SS-Heading148-5{
	  
	  
	padding: 20px 5px;
    margin-top: 5%;
    font-size: 25px;
    margin-bottom: 5%;
	

    font-weight:lighter;
	 font-family: 'Vollkorn SC', serif;
   color: #e69500;
     
	text-shadow: 
    2px 2px 15px rgba(0, 0, 0, 0.9),
    


  }
  #SS-TableContent148{

font-size: 20px;
  padding: 10px 0;
  text-align: center;
 font-family: 'Cinzel', serif;
  color:black;
  size: 20px;
 

}

#SS-Table165 {
    overflow: auto;
    align-self: center;
    align-content: center;
    max-width: 90vw;
    width: 85vw;
    height: auto;
    margin: auto;
    padding: 10px;
    box-shadow: 4px 4px 5px  white;
    border-radius: 1em;
    background-color: rgba(225, 225, 225, 0.6);
}

#SS-Table165 table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px; 
}

#SS-Table165 td {
    padding: 15px 5px 0 5px; 
    text-align: center;
background-color: white;
    vertical-align: middle; 
	border-radius: .2em;
}
.SS-Form2 {
	width: 80vw;
 border-radius: 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 padding-bottom:10px;
  margin: 20px 0;
background: linear-gradient(45deg, #333333, #555555);



}




























.SS-image171{
	width: 210px;
	height: 200px;
	margin: 5%;
	border: 1px solid grey;
}
.flex{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	margin: 10px;
	align-content: center;
	justify-content: center;
}
.SS_FlexBox{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: no-wrap;
}
.column{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
}
.container{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}





      .SS-ButtonBox020163-2{
	   width: 320px;
	margin: auto;
	   position: relative;
	   box-shadow: 5px 10px 4px #2f6690;
	   border-radius: 30px;
	   
   }
 




.SS-submit {
	 padding: 7px 20px;
	 background: linear-gradient(#FDB931, #9f7928);
  color: white;
  border: none;
  cursor: pointer;
   border-radius: 30px;
	font-size: 20px;
	width: 30vw;
font-family: 'Vollkorn SC', serif;
 
}
.SS-submit2 {
	 padding: 10px 10px;
	 background: linear-gradient(#FDB931, #9f7928);
  color: white;
  border: none;
  cursor: pointer;
   border-radius: .5em;
	font-size: 15px;
	width: 35vw;
font-family: 'Vollkorn SC', serif;
 
}


#SS-input-field20{
	font-family: 'Cardo', serif;
	width: 370px;
	padding: 30px 10px;

	
	border: 1px solid #999;
	outline: none;
	background-color: white;
	height: 50px;
	color: black;
	font-size: 1rem;

}


.SS-input-group1-20{
	top: 120px;
	position: absolute;
	width: 280px;
	transition: .5s;
	margin-right: 2%;
	margin-left: -30px;

}
.SS-input-group2-20{
	top: 120px;
	position: absolute;
	width: 280px;
	transition: .5s;
	margin-right: 2%;
	margin-left: -30px;
	margin-top: -45px;

}
.SS-input-group3-20{
	top: 95px;
	position: absolute;
	width: 280px;
	transition: .5s;
	margin-right: 2%;
	margin-left: -30px;
	margin-top: -45px;

}
  .SS-bottom-fixed-container {
	  gap: 70px;
	  height: 150px;
	  display: flex;
	  flex-direction: row;
        position: fixed;
		justify-content: center;
		align-items: center;
        bottom: 0;
        left: 0;
        right: 0; /* This will make it span the entire width of the screen. */
        background-color: #16425B;
        padding: 10px; /* Adjust as needed for spacing inside the container. */
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1); /* Optional: Adds a slight shadow to make it distinct from the content. */
        z-index: 9999; /* This ensures the container remains above other elements. */
    }
  #SS-SelectChoice20-2{
	text-align-last: left;
	margin-top: 10px;
	width: 400px;
	background-color:  white;
	padding: 2% 5%;
	color: #16425B;
	border-radius: .7em;
	border: none;
font-family: 'Lora', serif;
	font-size: 15px;
	margin-bottom: 2%;
	outline: solid grey 1px;
}
  #SS-SelectChoice20{
	text-align-last: left;
	margin-top: 5%;
	width: 107%;
	background-color:  white;
	padding: 2% 5%;
	color: grey;
	border-radius: .7em;
	border: none;
font-family: 'Lora', serif;
	font-size: 15px;
	margin-bottom: 2%;
	outline: solid grey 1px;
}
.SS-input-field3{
	width: 100%;
	padding: 30px 0;
	margin: 1px 0;
	border-left: 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid #999;
	outline: none;
	background: transparent;
	margin-top: 2px;
	
}
.SS-input-field2{
	width: 100%;
	padding: 50px 0;
	margin: 5px 0;
	border-left: 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid #999;
	outline: none;
	background: transparent;
	margin-top: 20px;
	
}

.SS-field21-5{
	width: 90%;
	padding: 15px 10px;
	margin: 5px 0;
	border-left: 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid #999;
	outline: none;
	background: transparent;
	margin-top: 20px;
	color: white;
	

	
}
.SS-input-field20{
	width: 100%;
	padding: 10px 10px;
	margin: 5px auto;
border: 1px solid #16425B;
	border-radius:1em;
	background: white;
	margin-top: 5px;


	
}


.SS-MainBox152Articles{
padding-top:70px;
	margin: -2%;

	background-color: #c585B3;
	padding-bottom: 400px;
		display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	


}
      			#SS-Menu163-2{

		border:none;
        background-color: transparent ;
        background-position: 10px 10px;
        color:black;
	font-family: 'Montserrat', sans-serif;
		
        justify-content: center;
        padding: 30px 26%;
        text-align: center;
        font-weight: bold;
        font-size: 25px;
       
        cursor: pointer;
        vertical-align: center;
        border-radius: 1em;
        opacity: 2;
        
        width:200px;
        display: flex;
      
        touch-action: manipulation;
       
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        }


   		

   .SS-column163{
	   display: flex;
	   flex-direction: column;
	   color: black;
	   width: 100px;
	   border: 1px solid black;
	   
   }

  
#SS-SecondRow163{
font-family: 'Cardo', serif;
	margin-top: 5px;
}




.SS-submit-btn3{
	width:200px;
	padding: 10px 30px;
	cursor: pointer;
	display:block;
	margin: auto;
	margin-top: 50px;
	border: 0;
	  background: linear-gradient(to right, #2f6690, #A53860);
	  outline: none;
	  border-radius: 30px;
	  color: white;
}

      .SS-toggle-btn15-2{
	   padding: 10px 12px;
	   cursor: pointer;
	   background: transparent;
	   border: 0;
	   outline: none;
	   position: relative;
	   color: black;
	   
   }


#SS-Table163 tr {
	
    height: 40px !important;
}
#SS-Table163 tr {
	
    height: 40px; 
    overflow: hidden; /* This will hide content that spills out, for testing purposes */
}
#SS-Table163 td {

    height: 40px; 
    overflow-y: auto;
    max-height: 40px; 
    vertical-align: top; 
}
.cell-content {
	 width: 150px;  
    max-height: 40px;  
    overflow-y: auto;  /* Adds a vertical scrollbar when the content exceeds the max-height */
   font-size: 15px;
    word-wrap: break-word;
}

th.wide-cell {
    width: 150px;  
}

 


    #SS-DataHeading21{  
	
font-size: 15px;
  text-align: center;
font-family: 'Lora', serif;
   color:  white;
  }




.SS-Form3 {
	width: 84vw;
 border-radius: 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom:10px;
  margin: 20px 0;
background: linear-gradient(45deg, #DAA520, #FFD700);

}
.custom-file-upload:hover {
    background-color: #005bb5;
}

/* Hide the default file input element */
#file-upload {
    display: none;
}

.SS-input::placeholder {
  color: grey;
font-family: 'Montserrat', sans-serif;
}

.SS-input{
	width: 22vw;
	padding: 10px 0;
	margin: 15px 0;
	border: none;
	border-radius: .5em;
	outline: none;
	background: white;
	margin-top: 20px;
	color: black;
	font-family: 'Vollkorn SC', serif;
	 font-size: 18px;
	 text-align: center;
	
}
.SS-input2::placeholder {
  color: grey;
font-family: 'Montserrat', sans-serif;
 font-size: 15px;
}
.SS-input2{
	width: 22vw;
	padding: 10px 0;
	margin: 15px 0;
	border: none;
	border-radius: .5em;
	outline: none;
	background: white;
	margin-top: 20px;
	color: black;
	font-family: 'Vollkorn SC', serif;
	 font-size: 25px;
	 text-align: center;
	
}



.SS-MenuItem {
    color: white;            
    background-color: transparent; 
   outline: none;
   border: none;
 font-family: 'Montserrat', sans-serif;
    padding: 10px 20px;      
    font-size: 15px;       
    cursor: pointer;         
    transition: 0.3s;       
}
#SS-Error3{
	
	margin: 10px 0;
    font-size: 30px;
width: 100%;
text-align: center;
	font-family: 'Montserrat', sans-serif;
	color: black;


  }
#SS-Error{
	
	margin: 60px 0 -50px 0;
    font-size: 20px;
width: 100%;
text-align: center;
	font-family: 'Montserrat', sans-serif;
	color: white;


  }

     #SS-Welcome21{
		 text-align: center;
    font-size: 20px;

 padding:20px 5% 5px 5%;
 font-weight:lighter;
font-family: 'Montserrat', sans-serif;

color: white;
  }
    #SS-Total{
		 text-align: center;
    font-size: 25px;

 padding:20px 5% 0 5%;
 font-weight:lighter;
font-family: 'Cinzel', serif;

color:#b3b3b3;
  }
   #SS-Welcome33{
		 text-align: center;
    font-size: 20px;

 padding:20px 5% 5px 5%;
 font-weight:lighter;
font-family: 'Cinzel', serif;

color: gold;
  }
     #SS-Recipient{
		 text-align: center;
    font-size: 25px;

 padding:20px 5% 10px 5%;
 font-weight:lighter;
font-family: 'Cinzel', serif;

color:gold;
  }
  #SS-Date{
	 text-align: center;
    font-size: 25px;

 padding:30px 5% 5px 5%;
 font-weight:lighter;
font-family: 'Comfortaa', sans-serif;

color: white;  
  }
  
         #SS-Welcome33-21{
	 text-align: center;
    font-size: 15px;

 padding:20px 5% 5px 5%;
 font-weight:lighter;
font-family: 'Ysabeau SC', sans-serif;

color: black;
  }   
          
  #SS-a{
	   display: block;
    width: fit-content; 
	  margin: 0 auto;
	 text-align: center;
    font-size: 13px;  
	   font-weight:lighter;
color: #2F6690;
font-family: 'Lora', serif;
	  align-self: center;
  }
             #SS-Welcome20{
				 text-align: center;
    font-size: 13px;

margin: 430px 0px -15px 0px;
 font-weight:lighter;

font-family: 'Lora', serif;
color:  #2F6690;

  }
         
     


#SS-Table26::-webkit-scrollbar-thumb {
  background-color: #ff4400; 
  border-radius: 6px;
}

#SS-Table26::-webkit-scrollbar-track {
  background-color: #262626; 
}

/* Firefox scrollbar */
#SS-Table26 {
  scrollbar-width: thin;
  scrollbar-color: #ff4400 #262626; /* Thumb and track colors */
}





	@media (max-width: 850px) {
			#Tool-Box-Image {
    width: 100px;

}



   #SS-Heading{
	   font-size: 40px;
   }
		.SS-ToolBox {

  flex-direction: column;




}
		#SS-Table21-2{
			width: 85vw;
			
		}
		.SS-Box21{
			margin-top: 30px;
		}
		  .SS-bottom-fixed-container {
	  display: flex;
	  flex-direction: column;
	  gap: 0px;
	  height: 200px;
	 
       
		
    }
	   #SS-Container163{
		   margin-top: 10px;
	   }
	.SS-MainBox163-3{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
	}
	.SS-submit-btn020163-3{
		margin-top: -20px;
	}
	  #SS-SelectChoice20-2{
	margin-top: 25px;
}
		
		  .image21 {
		     width: 90%;
			

	}.SS_FlexBox{
	
	flex-wrap: wrap;
}
		#SS-Navbar21 {
			margin-left: -10%;
			
		padding-left:40px;
		padding-right: 40px;
			width: 110%;
        flex-direction: column;
        align-items: flex-start;
		        height: auto;  /* Allows it to grow with content */
        min-height: 60px; 
		
			
    }


  #SS-Table163{
	  width: 100vw;
  }

	}