:root, [data-bs-theme=light] {
  --bs-primary: #281845;
  --bs-primary-rgb: 40,24,69;
  --bs-primary-text-emphasis: #100A1C;
  --bs-primary-bg-subtle: #D4D1DA;
  --bs-primary-border-subtle: #A9A3B5;
  --bs-warning: #e25563;
  --bs-warning-rgb: 226,85,99;
  --bs-warning-text-emphasis: #5A2228;
  --bs-warning-bg-subtle: #F9DDE0;
  --bs-warning-border-subtle: #F3BBC1;
  --bs-danger: #4d1230;
  --bs-danger-rgb: 77,18,48;
  --bs-danger-text-emphasis: #1F0713;
  --bs-danger-bg-subtle: #DBD0D6;
  --bs-danger-border-subtle: #B8A0AC;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #281845;
  --bs-btn-border-color: #281845;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #22143B;
  --bs-btn-hover-border-color: #201337;
  --bs-btn-focus-shadow-rgb: 223,220,227;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #201337;
  --bs-btn-active-border-color: #1E1234;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #281845;
  --bs-btn-disabled-border-color: #281845;
}

.btn-outline-primary {
  --bs-btn-color: #281845;
  --bs-btn-border-color: #281845;
  --bs-btn-focus-shadow-rgb: 40,24,69;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #281845;
  --bs-btn-hover-border-color: #281845;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #281845;
  --bs-btn-active-border-color: #281845;
  --bs-btn-disabled-color: #281845;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #281845;
}

.btn-warning {
  --bs-btn-color: #000000;
  --bs-btn-bg: #e25563;
  --bs-btn-border-color: #e25563;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: #E66F7A;
  --bs-btn-hover-border-color: #E56673;
  --bs-btn-focus-shadow-rgb: 34,13,15;
  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: #E87782;
  --bs-btn-active-border-color: #E56673;
  --bs-btn-disabled-color: #000000;
  --bs-btn-disabled-bg: #e25563;
  --bs-btn-disabled-border-color: #e25563;
}

.btn-outline-warning {
  --bs-btn-color: #e25563;
  --bs-btn-border-color: #e25563;
  --bs-btn-focus-shadow-rgb: 226,85,99;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: #e25563;
  --bs-btn-hover-border-color: #e25563;
  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: #e25563;
  --bs-btn-active-border-color: #e25563;
  --bs-btn-disabled-color: #e25563;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #e25563;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #4d1230;
  --bs-btn-border-color: #4d1230;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #410F29;
  --bs-btn-hover-border-color: #3E0E26;
  --bs-btn-focus-shadow-rgb: 228,219,224;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #3E0E26;
  --bs-btn-active-border-color: #3A0E24;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #4d1230;
  --bs-btn-disabled-border-color: #4d1230;
}

.btn-outline-danger {
  --bs-btn-color: #4d1230;
  --bs-btn-border-color: #4d1230;
  --bs-btn-focus-shadow-rgb: 77,18,48;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4d1230;
  --bs-btn-hover-border-color: #4d1230;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4d1230;
  --bs-btn-active-border-color: #4d1230;
  --bs-btn-disabled-color: #4d1230;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #4d1230;
}

/* Masking read more */
.read-more-mask {
  -webkit-mask-image: linear-gradient(black 80%, transparent 100%);
  mask-image: linear-gradient (black 80%, transparent 100%);
}

#collapse1, #collapse2 {
  width: 500px;
}

#collapse1.collapse:not(.show), #collapse2.collapse:not(.show), #design.collapse:not(.show){
  display: block;
  height: 400px;
  overflow: hidden;
}

#collapse1.collapsing, #collapse2.collapsing, #design.collapsing {
  height: 400px;
}

.clear-read-more-mask {
  height: 60px;
}

a#more-design.collapsed:after{
  content: '+ Show More';
}

a#more-design:not(.collapsed):after{
  content: '- Show Less';
}

/* Parallax effect */

main{
  background-color: white;
}

.wrapper{
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 10px;
}

.par-header{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  transform-style: preserve-3d;
  z-index: -1;
}

.par-img{
  transform: translateZ(-10px) scale(4); 
  background: linear-gradient(160deg, var(--bs-primary) 23%,rgb(255,45,89) 100%); 

}

.par-img, .par-grad{
  position: absolute;
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  z-index: -1; 
}

.title{
  font-size: 7rem;
  color: beige;
  text-shadow: 0 0 5px black;
}