.btn-phi {
    --bs-btn-color: #fff;
    --bs-btn-bg: #7d4fe2;
    --bs-btn-border-color: #7d4fe2;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #7e4fe2ae;
    --bs-btn-hover-border-color: #5c3ba5;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5e32bd;
    --bs-btn-active-border-color: #632bdd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #7d4fe2;
    --bs-btn-disabled-border-color: #7d4fe2;
}

.btn {
    width: 250px;
    height: 50px;
}

.know-more-button {
    background-color: #8c52ff; /* A shade of purple */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
    width: 280px;
    transition: background-color 0.3s ease;
    --cut: 20px; /* change this to adjust the diagonal size */
    clip-path: polygon(
        var(--cut) 0,
        /* top edge after TL cut */ 100% 0,
        /* top-right (normal) */ 100% calc(100% - var(--cut)),
        /* right edge before BR cut */ calc(100% - var(--cut)) 100%,
        /* bottom edge after BR cut */ 0 100%,
        /* bottom-left (normal) */ 0 var(--cut) /* left edge after TL cut */
    );
    /* optional for older Safari */
    -webkit-clip-path: polygon(
        var(--cut) 0,
        100% 0,
        100% calc(100% - var(--cut)),
        calc(100% - var(--cut)) 100%,
        0 100%,
        0 var(--cut)
    );
    transition: scale 0.3s ease;
}

.know-more-button:hover {
    background-color: #7b46d1; /* A slightly darker purple on hover */
    scale: 1.2;
}

.w100 {
    width: 100vh;
}
.h100 {
    height: 100vh;
}

/* .text-3d {
    text-shadow: 0px 0px 0 rgb(124, 124, 124), 1px 1px 0 rgb(124, 124, 124),
        2px 2px 1px rgba(0, 0, 0, 0), 2px 2px 1px rgba(0, 0, 0, 0.5),
        0px 0px 1px rgba(0, 0, 0, 0.2);
} */