:root {
    --light-pink: #F8EFEF;
    --pink: #FFE6E6;
    --dark-pink: #CB6681;
    --semi-white: #FFF9EF;
    --white: #FFFFFF;
    --green: #5E7344;
    --dark-green: #3E5720;
    --yellow-brown: #CBA357;
    --light-brown: #B2832C;
    --brown: #C27F06;
    --pinker: #FF007A;
    --dark-pinker: #C4395E;
  }
  
  #hero .hero-img {
    min-height: 400px;
    height: calc(100vh - 131px - 256px);
    background: url(../images/Home/sample_work_7.jpg) center center/cover no-repeat;

    position: relative;
}

.floating-text {
    position: absolute;
    left: 0;
    bottom: 50px;
    width: auto;
    max-width: 30%;
    min-width: 250px;
    background-color: var(--pink);
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border: 3px solid var(--dark-pink);
    border-left: none;
    color: var(--dark-green);
}

#sample {
    border: 3px solid var(--brown);
}

.sample {
    border-radius: 10px;
    border: 3px solid var(--brown);
    overflow: hidden;
}

.sample img {
    transition: all 0.3s ease;
}

.sample:hover img {
    transform: scale(1.15);
}