.feature-card-box {
    background: #fff;
    border-radius: 14px;
    transition: 0.3s;
}

.feature-card-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.about-hero-section {
    height: 60vh;
    background: url("../assets/images/Sunkasale.jpeg") center/cover no-repeat;
    position: relative;
}

.about-hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.about-hero-section .container {
    position: relative;
    z-index: 2;
}

.feature-card-box {
    border-radius: 16px;
    transition: 0.3s;
}

.feature-card-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}

.about-hero-modern {
    position: relative;
    height: 65vh;
    background: url("../assets/images/Sunkasale.jpeg") center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* overlay */
.about-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
            rgba(0, 0, 0, 0.65),
            rgba(62, 39, 35, 0.75));
}

/* content */
.about-hero-content {
    position: relative;
    z-index: 2;
    color: white;
    max-width: 750px;
}

/* tag */
.about-hero-tag {
    letter-spacing: 4px;
    font-size: 13px;
    color: #c49b63;
    font-weight: 600;
}

/* title */
.about-hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 15px;
}

/* subtitle */
.about-hero-subtitle {
    font-size: 18px;
    opacity: 0.9;
}

/* underline effect */
.about-hero-title::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background: #c49b63;
    margin: 18px auto 0;
    border-radius: 5px;
}

.about-hero-premium {
    position: relative;
    height: 70vh;
    background: url("../assets/images/about-banner.webp") center/cover no-repeat;
    display: flex;
    align-items: center;
}

/* cinematic overlay */

.about-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.75) 20%,
            rgba(0, 0, 0, 0.55) 50%,
            rgba(0, 0, 0, 0.25) 80%);
}

/* wrapper */

.about-hero-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1200px;
}

/* text block */

.about-hero-text {
    max-width: 600px;
    color: white;
}

/* heading */

.about-hero-text h1 {
    font-size: 3.8rem;
    font-weight: 700;
    letter-spacing: 1px;
}

/* golden accent */

.hero-accent {
    width: 80px;
    height: 4px;
    background: #c49b63;
    margin: 20px 0;
    border-radius: 10px;
}

/* paragraph */

.about-hero-text p {
    font-size: 18px;
    line-height: 1.7;
    opacity: 0.9;
    text-align: justify;
}

.about-hero-text h1 {
    font-size: 3.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
    font-size: 45px;
}

/* .about-hero-text{
    max-width: 600px;
    color: white;
    margin-top: 98px;
} */

.about-hero-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    padding-top: 160px;
}

/* section background */

.company-story {
    background: #faf7f3;
}

/* title */

.story-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #3e2723;
    margin-bottom: 25px;
    position: relative;
}

/* accent line */

.story-title::after {
    content: "";
    width: 70px;
    height: 4px;
    background: #c49b63;
    display: block;
    margin-top: 12px;
    border-radius: 5px;
}

/* paragraph */

.story-text p {
    color: #555;
    line-height: 1.8;
    font-size: 16px;
    margin-bottom: 18px;
    text-align: justify;
}

/* image styling */

.story-image img {
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    transition: 0.4s ease;
}

/* hover effect */

.story-image img:hover {
    transform: scale(1.03);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
}

/* responsive */

@media (max-width:992px) {

    .story-title {
        font-size: 2rem;
        text-align: center;
    }

    .story-title::after {
        margin: 12px auto;
    }

    .story-text {
        text-align: center;
    }

}

.company-story {
    background: #faf7f3;
    position: relative;
    overflow: hidden;
}

/* watermark coffee icon */

/* .company-story::before{
content:"\f7b6";
font-family:"Bootstrap-icons";
position:absolute;
font-size:320px;
color:#271701;
opacity:0.05;
top:40px;
left:-40px;
transform:rotate(-20deg);
pointer-events:none;
} */

/* second bean */

/* .company-story::after{
content:"\f7b6";
font-family:"Bootstrap-icons";
position:absolute;
font-size:260px;
color:#c49b63;
opacity:0.05;
bottom:-40px;
right:-30px;
transform:rotate(25deg);
pointer-events:none;
} */

.company-story {
    background: #faf7f3;
    position: relative;
    overflow: hidden;
}

/* watermark icon */

/* .story-watermark-left{
position:absolute;
font-size:300px;
color:#694006;
opacity:0.05;
pointer-events:none;
}

.story-watermark-left{
top:20px;
left:-40px;
transform:rotate(-20deg);
} */
.story-watermark-left {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-150%, -50%) rotate(-20deg);

    font-size: 300px;
    color: #694006;
    opacity: 0.05;

    pointer-events: none;
    z-index: 0;
}

@media (max-width:768px) {

    .story-watermark-left {
        font-size: 180px;
    }

}

@media (max-width:768px) {

    .about-hero-premium {
        height: 60vh;
        padding: 0 20px;
        text-align: center;
    }

    .about-hero-text {
        max-width: 100%;
    }

    .about-hero-text h1 {
        font-size: 2rem;
        line-height: 1.3;
    }

    .about-hero-text p {
        font-size: 14px;
    }

    .hero-accent {
        margin: 15px auto;
    }

}

@media (max-width:768px) {

    .story-text {
        text-align: center;
    }

    .story-title {
        font-size: 1.8rem;
    }

    .story-text p {
        font-size: 14px;
    }

    .story-image img {
        margin-top: 25px;
    }

}

@media (max-width:768px) {

    .story-text {
        text-align: center;
    }

    .story-title {
        font-size: 1.8rem;
    }

    .story-text p {
        font-size: 14px;
    }

    .story-image img {
        margin-top: 25px;
    }

}



@media (max-width:768px) {

    .company-story {
        padding: 40px 0;
    }

    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

}

/* section background */

.founder-section {
    /* background: #f7f3ef; */
    background: #e1c4a6;
    ;
    position: relative;
    overflow: hidden;
}


/* coffee bean watermark */

.founder-section::before {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    background: url("../assets/images/coffee-bean.svg") center/contain no-repeat;
    opacity: 0.05;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}


/* avatar */

.founder-avatar {
    /* width: 260px; */
    /* height: 260px; */
    width: 225px;
    height: 225px;
    margin: auto;
    border-radius: 50%;
    padding: 10px;
    background: linear-gradient(135deg, #c49b63, #7a4b21);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.founder-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: white;
}


/* title */

.founder-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: #3e2723;
    margin-bottom: 10px;
    position: relative;
}


/* accent line */

.founder-title::after {
    content: "";
    width: 70px;
    height: 4px;
    background: #c49b63;
    display: block;
    margin-top: 10px;
    border-radius: 5px;
}


/* name */

.founder-name {
    font-weight: 700;
    margin-bottom: 15px;
    color: #5d4037;
}


/* text */

.founder-text p {
    color: #555;
    line-height: 1.8;
    font-size: 16px;
    margin-bottom: 18px;
    text-align: justify;
}


/* responsive */

@media (max-width:992px) {

    .founder-text {
        text-align: center;
    }

    .founder-title::after {
        margin: auto;
    }

    .founder-avatar {
        margin-bottom: 25px;
    }

}

/* section background */

.value-section {
    background: #faf7f3;
}


/* card */

.feature-card-box {
    background: white;
    border-radius: 16px;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}


/* hover lift */

.feature-card-box:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}


/* top gradient glow */

.feature-card-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    /* background: linear-gradient(90deg, #c49b63, #7a4b21); */
    /* background: linear-gradient(90deg, #24860b, #17e96f); */
    transform: scaleX(0);
    transition: 0.3s;
}

.feature-card-box:hover::before {
    transform: scaleX(1);
}


/* icon */

.feature-icon {
    font-size: 38px;
    margin-bottom: 15px;
    /* color: #c49b63; */
    color: #ffffff;
    transition: 0.3s;
}


/* icon animation */

.feature-card-box:hover .feature-icon {
    transform: scale(1.2) rotate(5deg);
}


/* title */

.feature-card-box h5 {
    font-weight: 600;
    margin-bottom: 10px;
    /* color: #3e2723; */
    color: #ffffff;
}


/* text */

.feature-card-box p {
    font-size: 14px;
    /* color: #666; */
    color: #ffffff;
    line-height: 1.6;
}


/* responsive */

@media (max-width:768px) {

    .feature-card-box {
        padding: 25px;
    }

    .feature-icon {
        font-size: 32px;
    }

}

/* .contact-section {
    background: #fff8f2;
}

.contact-title {
    color: #3e2723;
    font-weight: 700;
}

.contact-subtitle {
    color: #666;
    max-width: 600px;
    margin: auto;
}

.contact-box {
    background: white;
    padding: 35px;
    border-radius: 18px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    transition: 0.3s;
}

.contact-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.contact-icon {
    font-size: 28px;
    margin-bottom: 10px;
    color: #c49b63;
}

.contact-box a {
    color: #3e2723;
    font-weight: 600;
    text-decoration: none;
} */
/* section background */

.reach-section {
    /* background:linear-gradient(
135deg,
#fdf7f1,
#f4ede6
); */
    background: linear-gradient(135deg, #d7cabc, #e1b180);
}


/* heading */

.reach-heading {
    font-size: 2.4rem;
    font-weight: 700;
    color: #3e2723;
    position: relative;
    display: inline-block;
}

/* underline */

.reach-heading::after {
    content: "";
    display: block;
    width: 70px;
    height: 4px;
    background: #c49b63;
    margin: 10px auto 0;
    border-radius: 6px;
}


/* subtitle */

.reach-description {
    max-width: 600px;
    margin: auto;
    color: #666;
    margin-top: 10px;
}


/* card */

.reach-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    padding: 40px 30px;
    border-radius: 18px;
    transition: 0.35s;
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}


/* hover */

.reach-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}


/* icon circle */

.reach-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #c49b63;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: auto;
    margin-bottom: 15px;
    transition: 0.3s;
}


/* icon hover */

.reach-card:hover .reach-icon {
    transform: rotate(10deg) scale(1.1);
}


/* text */

.reach-card h5 {
    font-weight: 600;
    color: #3e2723;
    margin-bottom: 8px;
}

.reach-card span {
    font-weight: 600;
    color: #5d4037;
    font-size: 15px;
}


/* responsive */

@media (max-width:768px) {

    .reach-heading {
        font-size: 1.8rem;
    }

    .reach-card {
        padding: 30px 20px;
    }

}

/*Mobile Responsive*/
img {
    max-width: 100%;
    height: auto;
    display: block;
}

section {
    overflow: hidden;
}

.container {
    max-width: 1200px;
}

.about-hero-premium {
    position: relative;
    min-height: 70vh;
    background: url("../assets/images/about-banner.webp") center/cover no-repeat;
    display: flex;
    align-items: center;
}

.about-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.75) 20%,
            rgba(0, 0, 0, 0.55) 50%,
            rgba(0, 0, 0, 0.25) 80%);
}

.about-hero-wrapper {
    position: relative;
    z-index: 2;
    padding: 140px 20px 60px;
}

.about-hero-text {
    max-width: 650px;
    color: white;
}

.about-hero-text h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1px;
    white-space: normal;
}

.about-hero-text p {
    font-size: clamp(14px, 2vw, 18px);
    line-height: 1.7;
    opacity: .9;
    margin-top: 10px;
}

.hero-accent {
    width: 80px;
    height: 4px;
    background: #c49b63;
    margin: 18px 0;
    border-radius: 10px;
}

.company-story {
    background: #faf7f3;
    position: relative;
    padding: 80px 0;
}

.story-title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.story-text p {
    font-size: clamp(14px, 1.3vw, 16px);
    line-height: 1.8;
}

.story-image img {
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    transition: .4s;
}

.story-image img:hover {
    transform: scale(1.03);
}

.story-watermark-left {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-size: clamp(120px, 20vw, 260px);
    color: #694006;
    opacity: .05;
    pointer-events: none;
    z-index: 0;
}

.value-section {
    background: #faf7f3;
    padding: 80px 0;
}

.feature-card-box {
    /* background:white; */
    background: #8d6d63;
    border-radius: 16px;
    transition: .35s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    padding: 30px;
}

.feature-card-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .15);
}

.feature-icon {
    font-size: clamp(28px, 4vw, 38px);
    /* color:#c49b63; */
    margin-bottom: 12px;
}

.reach-section {
    background: linear-gradient(135deg, #d7cabc, #e1b180);
    padding: 80px 0;
}

.reach-heading {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.reach-description {
    font-size: clamp(14px, 1.5vw, 16px);
}

.reach-card {
    padding: clamp(25px, 3vw, 40px);
}

.reach-icon {
    width: 60px;
    height: 60px;
    font-size: 24px;
}

@media (max-width:768px) {

    .about-hero-wrapper {
        padding-top: 120px;
        text-align: center;
    }

    .hero-accent {
        margin: 15px auto;
    }

    .story-text {
        text-align: center;
    }

    .story-title::after {
        margin: auto;
    }

    .story-image img {
        margin-top: 30px;
    }

    .founder-text {
        text-align: center;
    }

    .founder-title::after {
        margin: auto;
    }

}

@media (max-width:992px) {

    .about-hero-text {
        max-width: 100%;
    }

    .story-text {
        text-align: center;
    }

    .founder-avatar {
        margin-bottom: 30px;
    }

}

/* ===== NAVBAR FIX ===== */

.navbar {
    padding: 8px 0 !important;
    min-height: 60px;
}

.navbar-brand img {
    height: 40px;
    width: auto;
}

.navbar-brand {
    font-size: 1.1rem;
}

.navbar-nav .nav-link {
    font-size: 15px;
    padding: 8px 12px;
}

@media (max-width:768px) {

    .navbar {
        padding: 6px 0 !important;
    }

    .navbar-brand img {
        height: 34px;
    }

    .navbar-brand span {
        font-size: 1rem;
    }

}

.about-hero-wrapper {
    padding-top: 120px;
    padding-bottom: 60px;
}

body {
    padding-top: 70px;
}


/*responsive design ends here*/
.story-image-cinematic {
    position: relative;
}

.story-image-buttons {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.story-image-buttons .btn {
    border-radius: 30px;
    padding: 8px 22px;
    font-size: 14px;
}

.story-image-buttons .know-product-btn {
    border: 2px solid #c49b63;
    /* color: #c49b63; */
    color: white;
    /* background: rgba(119, 119, 119, 0.877); */
    background: rgba(129, 129, 129, 0.582);
    padding: 8px 22px;
    border-radius: 30px;
    font-size: 14px;
    text-decoration: none;
    transition: 0.3s ease;
}

.story-image-buttons .know-product-btn:hover {
    background: #c49b63;
    color: white;
    border-color: #c49b63;
}

@media (max-width:768px) {

    .story-image-buttons {
        flex-direction: column;
        gap: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
    }

    .story-image-buttons .btn {
        width: 100%;
    }

}

@media (max-width:768px){

.story-image-cinematic{
margin-top:0;
}

.story-image-cinematic img{
width:100%;
height:auto;
display:block;
}

}
.story-image-buttons a{
padding:8px 22px;
font-size:14px;
border-radius:30px;
}
@media (max-width:768px){

.story-image-buttons{
flex-direction:column;
gap:10px;
left:50%;
transform:translateX(-50%);
width:80%;
}

.story-image-buttons a{
width:100%;
text-align:center;
}

}
.story-image-cinematic{
position:relative;
overflow:hidden;
}
@media (max-width: 768px) {

    #about-get{
        border: 1px solid #000;
        color: #000;
    }

    #about-get:hover{
        background-color: #000;
        color: #fff;
    }

    .story-image-cinematic img{
        width: 85%;
        margin: auto;
        display: block;
    }

}
/* .story-card-wrapper{
display:flex;
justify-content:center;
perspective:1200px;
}

.story-card{
width:750px;
height:420px;
position:relative;
transform-style:preserve-3d;
transition:transform 1s ease;
}


.story-card.flip{
transform:rotateY(180deg);
}



.story-front{
position:absolute;
width:100%;
height:100%;
border-radius:20px;
overflow:hidden;

backface-visibility:hidden;
-webkit-backface-visibility:hidden;

transform:rotateY(0deg);
}

.story-front img{
width:100%;
height:100%;
object-fit:cover;
}




.story-back{
position:absolute;
width:100%;
height:100%;
border-radius:20px;
background:white;
padding:40px;

transform:rotateY(180deg);

backface-visibility:hidden;
-webkit-backface-visibility:hidden;

display:flex;
flex-direction:column;
justify-content:center;
}

.story-back p{
color:#555;
line-height:1.8;
margin-bottom:15px;
}


.story-card{
animation:storyFloat 2s ease;
}

@keyframes storyFloat{
0%{transform:translateY(20px)}
50%{transform:translateY(-8px)}
100%{transform:translateY(0)}
}
.story-card{
transform-style:preserve-3d;
transition:1s;
}

.story-card.flip{
transform:rotateY(180deg);
}

.story-front{
backface-visibility:hidden;
}

.story-back{
transform:rotateY(180deg);
backface-visibility:hidden;
} */