@charset "UTF-8";
/* CSS Document */
:root {
				--primary-color: #40435b;
				--secondary-color: #f8f9fa;
				--accent-color: #40435b;
		}
.mb-4, .my-4 {
	margin-bottom: 1rem !important;
}


.header-placeholder {
    position: static; /* Ensure proper positioning */
    overflow: visible; /* Allow dropdown to render outside parent */
    z-index: auto; /* Reset z-index */
}

/* Fix for dropdown menu visibility */
.dropdown-menu {
    z-index: 1050; /* Ensure it is above most elements */
}

.body{
	display: flex;
	height: 100vh;
}

/* START backfade */
.backfade{
	background: #FFFFFF; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#FFFFFF, #F7F7F7); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#FFFFFF, #F7F7F7); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#FFFFFF, #F7F7F7); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#FFFFFF, #F7F7F7); /* Standard syntax (must be last) */
		margin-bottom: 4em;
}

/* END backfade */

.pizza{
	color: white;
	padding-top: 10em;
	padding-bottom: 10em;
}

.calc{
	padding-top: 3em;
	padding-bottom: 3em;
}
.result{
	padding-top: 1em;
}


/* CARD */
.Bcard {
  width: 252px;
  height: 265px;
  background: white;
  border-radius: 30px;
  box-shadow: 15px 15px 30px #bebebe,
             -15px -15px 30px #ffffff;
  transition: 0.2s ease-in-out;
	margin-bottom: 20px;
}

.img {
  width: 100%;
  height: 50%;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  background: linear-gradient(#e66465, #9198e5);
  display: flex;
  align-items: top;
  justify-content: right;
}

.card-img-top{
  width: 100%;
  height: 50%;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  display: flex;
  align-items: top;
  justify-content: right;
}


.text {
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: space-around;
}

.text .h3 {
  font-family: 'Lucida Sans' sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: black;
}

.text .p {
  font-family: 'Lucida Sans' sans-serif;
  color: #999999;
  font-size: 13px;
}


.Bcard:hover {
  cursor: pointer;
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
}

/* END CARD */


.container-pattern{
	width: 100%;
  height: 100%;
  --s: 82px;
  --c1: #b2b2b2;
  --c2: #ffffff;
  --c3: #d9d9d9;

  --_g: var(--c3) 0 120deg, #0000 0;
  background: conic-gradient(from -60deg at 50% calc(100% / 3), var(--_g)),
    conic-gradient(from 120deg at 50% calc(200% / 3), var(--_g)),
    conic-gradient(
      from 60deg at calc(200% / 3),
      var(--c3) 60deg,
      var(--c2) 0 120deg,
      #0000 0
    ),
    conic-gradient(from 180deg at calc(100% / 3), var(--c1) 60deg, var(--_g)),
    linear-gradient(
      90deg,
      var(--c1) calc(100% / 6),
      var(--c2) 0 50%,
      var(--c1) 0 calc(500% / 6),
      var(--c2) 0
    );
  background-size: calc(1.732 * var(--s)) var(--s);
}



.coffee-btn {
		background-color: var(--primary-color);
		color: white;
		font-weight: bold;
		padding: 10px 20px;
		border-radius: 4px;
		text-decoration: none;
		display: inline-block;
		margin-top: 20px;
		transition: all 0.3s ease;
}

.coffee-btn:hover {
		background-color: #333344;
		transform: translateY(-2px);
		box-shadow: 0 4px 8px rgba(0,0,0,0.1);
		color: white;
}

@media (max-width: 768px) {
    .calc {
        padding: 15px;
    }
    .form-label {
        font-size: 1rem;
    }
    .form-control {
        font-size: 1.1rem;
        height: 45px; /* Larger touch target */
    }
    ul li {
        font-size: 1rem;
        margin-bottom: 10px;
    }
		.slide-image-container {
			max-height: 15rem;
		}
}