@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap);

.timeline-item::before,
.timeline::before {
    content: "";
    position: absolute;
    background: #e6c28b
}

p {
    font-size: 17px;
    font-weight: 500;
    color: #6b6b6b
}

@media (max-width:991px) {
    p{font-size: 15px;}
    .trust-content h2{font-size: 35px;}
    .group-img img{margin: auto;}
    .small-title{font-size: 30px !important;}
    .explore-btn{font-size: 14px !important;}
    .info-block h4{font-size: 19px ;}
    .info-block p{font-size: 14px;}
    .vintage-title{font-size: 30px !important;}
    .title-big{font-size: 25px !important;}
}
.heighlight {
    font-weight: 700
}

.aboutBanner {
    position: relative;
    width: 100%;
    display: inline-block
}

.aboutBanner img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    position: relative;
    z-index: 2
}

.aboutBanner::after {
    content: "";
    position: absolute;
    top: 30px;
    right: 30px;
    left: -30px;
    bottom: -30px;
    border: 1px solid #d8b98a;
    pointer-events: none;
    z-index: 1
}

.section-heading {
    margin-bottom: 30px
}
.vericalimg{
    aspect-ratio: 4/ 4;
    object-fit: cover;
}
.aboutsmall {
    width: 80%;
    display: flex
}

.section-subtitle {
    display: inline-block;
    font-family: Inter, sans-serif;
    font-size: 14px;
    letter-spacing: 1.5px;
    color: #c59a52;
    margin-bottom: 10px
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 44px;
    font-weight: 600;
    line-height: 1.2;
    color: #b5623d;
    margin: 0;
    overflow: hidden
}

.small-title,
.timeline-section {
    font-family: "Playfair Display", serif
}
.timeline-section ul li::marker{
    color: #e6c28b;
    font-size: 15px;
}
.group-vintage-section {
    background: #f6f6f6;
    padding: 80px 0
}

.group-img {
    width: 100%
}

.group-img img {
    width: 90%;
    display: block;
    object-fit: cover
}

.group-img-center img {
    display: block;
    aspect-ratio: 2/2;
    object-fit: cover;
    transform: translateY(-25px)
}

@media (max-width:767px) {
    .group-img-center {
        transform: translateY(0)
    }
}

.desc,
.title-small {
    transform: translateY(10px);
    opacity: 0
}

.group-content {
    max-width: 720px;
    margin-top: 35px
}

.group-content p {
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #4a4a4a;
    margin-bottom: 18px
}

.gold-divider {
    display: block;
    width: 220px;
    height: 38px;
    margin: 35px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background: linear-gradient(90deg, #b28a44 0, #e9d8a6 45%, #b28a44 100%);
    position: relative
}

.gold-divider a {
    color: #000;
    text-decoration: none;
}

@media (max-width:991px) {
    .section-title {
        font-size: 34px
    }

    .group-vintage-section {
        padding: 60px 0
    }
}

@media (max-width:576px) {
    .section-title {
        font-size: 28px
    }

    .group-content {
        padding: 0 15px
    }
}

.timeline-section {
    background: #a95c40;
    padding: 100px 0;
    color: #fff
}

.timeline-header {
    text-align: center;
    margin-bottom: 80px
}

.timeline-eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #e6c28b
}

.timeline-header h2 {
    font-size: 42px;
    margin-top: 10px
}

.timeline {
    position: relative;
    width: 90%;
    max-width: 1100px;
    margin: auto
}

.timeline::before {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%)
}

.timeline-item {
    position: relative;
    width: 50%;
    padding: 30px 40px;
    box-sizing: border-box;
    opacity: 0;
    transition: .9s
}

.desc,
.title-big,
.title-small {
    transition: .5s
}

.timeline-item.left {
    left: 0;
    transform: translateX(-80px);
    text-align: right
}

.reach-section p,
.timeline-item p {
    color: #fff
}

.timeline-item.right {
    left: 50%;
    transform: translateX(80px);
    text-align: left
}

.timeline-item::before {
    top: 53px;
    width: 30px;
    height: 2px;
    z-index: 2
}

.timeline-item.left::before {
    right: 0
}

.timeline-item.right::before {
    left: 0
}

.timeline-item .content h3 {
    font-size: 35px;
    color: #e6c28b;
    margin-bottom: 10px
}

.timeline-item .content p {
    font-size: 20px;
    line-height: 1.6;
    font-family: Inter, sans-serif
}

.timeline-item img {
    max-height: 40px
}

.timeline-item.show {
    opacity: 1;
    transform: translateX(0)
}

.img-frame-left::before,
.img-frame::before {
    inset: 0;
    top: 27px;
    border: 1px solid #d8b98a;
    transform: translate(15px, 15px);
    z-index: 0;
    content: "";
    position: absolute
}

.timeline-row {
    display: flex;
    align-items: start;
    gap: 16px
}

.timeline-row.left-img {
    justify-content: flex-end
}

.timeline-row.right-img {
    justify-content: flex-start
}

.timeline-row img {
    max-height: 90px;
    width: 74px
}
/* MOBILE RESPONSIVE TIMELINE */
@media (max-width: 768px) {

.timeline {
    width: 95%;
}

/* Move vertical line to left */
.timeline::before {
    left: 20px;
    transform: none;
}

/* All items full width */
.timeline-item {
    width: 100%;
    padding-left: 60px;
    padding-right: 20px;
    margin-bottom: 40px;
}

/* Remove left/right positioning */
.timeline-item.left,
.timeline-item.right {
    left: 0;
    text-align: left;
    transform: translateX(0);
}

/* Connector line */
.timeline-item::before {
    left: 20px;
    width: 25px;
}

/* Timeline row stack */
.timeline-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* Image size for mobile */
.timeline-row img {
    width: 60px;
    max-height: 60px;
}

/* Heading size */
.timeline-item .content h3 {
    font-size: 26px;
}

/* Text size */
.timeline-item .content p {
    font-size: 16px;
}

/* Header size */
.timeline-header h2 {
    font-size: 30px;
}

}

.info-section {
    padding: 80px 0;
    background: #fff
}

.container {
    max-width: 1200px;
    margin: auto;
    padding: 0 20px
}

.info-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 100px
}
.info-rowbig{gap:10px !important;}
.info-row.reverse {
    flex-direction: row-reverse
}

.info-image,
.info-text {
    flex: 1
}

.info-text span {
    font-size: 17px;
    margin-bottom: 5px;
    display: block
}

.small-title {
    font-size: 35px;
    color: #b06b4c;
    margin-bottom: 25px
}

.info-block h4 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 5px
}

.info-block p {
    font-size: 18px;
    color: #555;
    margin-bottom: 18px
}

.bold-text {
    font-weight: 600;
    margin-top: 15px
}

.img-frame,
.img-frame-left {
    position: relative;
    padding: 12px
}

.img-frame::before {
    left: -27px;
    right: 60px
}

.img-frame img,
.img-frame-left img {
    width: 100%;
    display: block;
    aspect-ratio: 3/2;
    position: relative;
    z-index: 1
}

.img-frame-left::before {
    right: 0;
    left: 20px
}

.icon-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.icon-list li span {
    display: inline
}

.icon-list li {
    position: relative;
    padding-left: 38px;
    margin-bottom: 28px;
    font-size: 19px;
    line-height: 1.6;
    color: #333
}

.icon-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 20px;
    height: 24px;
    background: url("../images/aboutpage/SVG/Asset\ 10.svg") center/contain no-repeat
}

@media (max-width:768px) {

    .info-row,
    .info-row.reverse {
        flex-direction: column;
        /* gap: 40px */
    }

    .img-frame::before {
        transform: translate(10px, 10px)
    }
}

.vintage-section {
    background: #a85c3b;
    color: #fff
}

.vintage-section small {
    color: #c59a52
}

.vintage-title {
    font-family: serif;
    font-size: 42px
}

.advantage-item {
    text-align: center;
    padding: 20px 0;
    cursor: pointer;
    /* min-height: 220px */
}

.contact-section,
.reach-section {
    background: #a95c40;
    padding: 60px 0
}

.advantage-item img {
    margin-bottom: 12px;
    width: 40px
}

.title-big {
    font-family: playfair display,serif ;
    font-size: 30px
}

.title-small {
    font-size: 20px;
}

.desc {
    font-size: 16px;
    line-height: 1.6;
    max-width: 500px;
    margin: 6px auto 0
}

.advantage-item:hover .title-big {
    opacity: 0;
    transform: translateY(-10px)
}

.advantage-item:hover .title-small {
    opacity: 1;
    margin-top: -30px;
    transform: translateY(0);
    font-size: 20px;
    color: #c59a52
}

.advantage-item:hover .desc {
    opacity: 1;
    font-size: 18px;
    color: #fff;
    transform: translateY(0)
}

.map-wrap iframe {
    width: 100%;
    height: 500px;
    border: 0
}

.reach-section {
    color: #f3d7b3
}

.reach-section small {
    letter-spacing: 1px;
    font-size: 12px;
    opacity: .9
}

.reach-title {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    margin-bottom: 25px;
    color: #fff !important
}

.reach-info a,
.reach-info p {
    font-size: 18px;
    text-decoration: none !important;
    margin-bottom: 6px;
    color: #fff
}

.reach-info h5 {
    font-weight: 400 !important;
    color: #e2c28f
}

.contact-section {
    color: #f4d3a3;
    font-family: Inter, sans-serif
}

.contact-input,
.contact-textarea {
    width: 100%;
    background: #caa16f;
    border: none;
    outline: 0
}

.contact-title {
    color: #f4d3a3;
    margin-bottom: 30px;
    font-weight: 500
}

.contact-label {
    font-size: 20px;
    color: #fff
}

.contact-input {
    height: 34px
}

.contact-textarea {
    height: 140px;
    resize: none
}

.careers {
    font-size: 12px;
    margin: 30px
}

.careers a {
    text-decoration: none;
    color: #f4d3a3
}

@media(max-width:768px) {
    .contact-label {
        margin-bottom: 6px;
        display: block
    }

    .reach-title {
        font-size: 28px
    }

    .map-wrap iframe {
        height: 240px
    }
}

.timeline-item.left.show ul {
    text-align: start;
}