/* ==========================================================
                      HOME HERO BANNER
   ========================================================== */

.hero.-type-2{position:relative;width:100%;height:100vh;overflow:hidden}.hero__bg{position:absolute;inset:0;width:100%;height:100%;z-index:1}.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center center}.hero__bg::after{content:"";position:absolute;inset:0;background:rgb(0 0 0 / .35);z-index:2}.hero__content{position:relative;z-index:3;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 20px}.hero__title{color:#fff;font-size:clamp(28px, 5vw, 64px);line-height:1.2;margin:0}@media (max-width:768px){.hero.-type-2{height:70vh}.hero__title{font-size:clamp(24px, 7vw, 36px);padding:0 12px}}@media (max-width:480px){.hero.-type-2{height:60vh}}.hero__content,.hero__content *{opacity:1!important;visibility:visible!important;transform:none!important}.hero__title{opacity:1!important;visibility:visible!important;display:block!important;position:relative;z-index:5}.hero__content{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;text-align:center}.hero__content{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 20px}@media (min-width:769px){.hero.-type-2 .swiper-slide{position:relative}.hero.-type-2 .hero__content{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;margin:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;z-index:5}.hero.-type-2 .hero__title{width:100%;max-width:900px;margin:0 auto!important;text-align:center!important;left:auto!important;right:auto!important;transform:none!important;position:relative!important}}@media (min-width:993px){.hero.-type-2 .swiper-slide{position:relative!important}.hero.-type-2 .hero__content{position:absolute!important;top:0!important;bottom:0!important;left:0!important;right:0!important;width:100%!important;height:100%!important;max-width:100%!important;margin:0!important;padding:0 40px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important}.hero.-type-2 .hero__title{width:100%!important;max-width:900px!important;margin:0 auto!important;text-align:center!important;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;position:relative!important}}.hero.-type-2 .swiper-slide{position:relative!important}.hero.-type-2 .hero__content{position:absolute!important;top:0!important;bottom:0!important;left:0!important;right:0!important;width:100%!important;height:100%!important;max-width:100%!important;margin:0!important;padding:0 20px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important}.hero.-type-2 .hero__title{width:100%!important;max-width:900px!important;margin:0 auto!important;text-align:center!important;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;position:relative!important}@media (max-width:768px){.hero.-type-2 .hero__title{font-size:clamp(26px, 7vw, 40px)!important;line-height:1.3!important;padding:0 10px}}@media (max-width:768px){.hero.-type-2 .hero__title{font-size:clamp(36px, 9vw, 52px)!important;line-height:1.25!important;padding:0 16px;font-weight:600}}@media (max-width:480px){.hero.-type-2 .hero__title{font-size:clamp(32px, 10vw, 44px)!important}}





/* =========================================================
   VEDANT PROJECTS
   HOME PAGE PREMIUM UI
   Fully Responsive
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {
    --vp-home-dark: #171c22;
    --vp-home-dark-2: #10151a;
    --vp-home-dark-3: #21272d;

    --vp-home-gold: #c79569;
    --vp-home-gold-light: #e2b98f;
    --vp-home-gold-dark: #a9774f;

    --vp-home-cream: #f5f1eb;
    --vp-home-soft: #efede9;
    --vp-home-white: #ffffff;

    --vp-home-text: #1c2228;
    --vp-home-muted: #74736f;

    --vp-home-container: 1320px;

    --vp-home-shadow:
        0 22px 55px rgba(18, 22, 27, .10);

    --vp-home-shadow-dark:
        0 28px 70px rgba(0, 0, 0, .22);

    --vp-home-transition:
        .4s cubic-bezier(.2, .65, .25, 1);
}


/* =========================================================
   HOME CUSTOM CONTAINER
   SAME VISUAL WIDTH AS FOOTER
========================================================= */

.vp-home-container {
    position: relative;

    width: calc(100% - 64px);
    max-width: var(--vp-home-container);

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
}


/* =========================================================
   COMMON SECTION HEADING
========================================================= */

.vp-section-heading {
    position: relative;
}


.vp-section-heading__eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 17px;

    color: var(--vp-home-gold);

    font-size: 12px;
    line-height: 1;

    font-weight: 600;

    letter-spacing: 2.4px;

    text-transform: uppercase;
}


.vp-section-heading__eyebrow::before {
    content: "";

    width: 30px;
    height: 1px;

    background: var(--vp-home-gold);
}


.vp-section-heading h2 {
    margin: 0;

    color: var(--vp-home-text);

    font-size: clamp(42px, 4.5vw, 66px);
    line-height: 1.03;

    font-weight: 300;

    letter-spacing: -1.3px;
}


.vp-section-heading h2 span {
    color: var(--vp-home-gold);
}


.vp-section-heading p {
    margin: 0;

    color: var(--vp-home-muted);

    font-size: 18px;
    line-height: 1.8;
}


/* split heading */

.vp-section-heading--split {
    display: grid;

    grid-template-columns:
        minmax(380px, .95fr)
        minmax(350px, .75fr);

    align-items: end;

    justify-content: space-between;

    column-gap: 80px;

    margin-bottom: 55px;
}


.vp-section-heading--split
.vp-section-heading__right {
    max-width: 520px;

    justify-self: end;
}


/* centered heading */

.vp-section-heading--center {
    width: 100%;
    max-width: 780px;

    margin:
        0
        auto
        55px;

    text-align: center;
}


.vp-section-heading--center
.vp-section-heading__eyebrow {
    justify-content: center;
}


.vp-section-heading--center
.vp-section-heading__eyebrow::after {
    content: "";

    width: 30px;
    height: 1px;

    background: var(--vp-home-gold);
}


.vp-section-heading--center p {
    max-width: 620px;

    margin:
        20px
        auto
        0;
}


/* =========================================================
   01. ABOUT
========================================================= */

.vp-home-about {
    position: relative;

    padding:
        clamp(80px, 7.5vw, 120px)
        0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(199, 149, 105, .09),
            transparent 31%
        ),
        radial-gradient(
            circle at 90% 70%,
            rgba(199, 149, 105, .045),
            transparent 26%
        ),
        var(--vp-home-dark);

    color: #fff;
}


/* decorations */

.vp-home-about__decor {
    position: absolute;

    pointer-events: none;
}


.vp-home-about__decor--one {
    top: 0;
    right: 8%;

    width: 1px;
    height: 180px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(199,149,105,.55),
            transparent
        );
}


.vp-home-about__decor--two {
    top: 72px;
    right: calc(8% - 28px);

    width: 55px;
    height: 1px;

    background:
        rgba(199,149,105,.5);
}


/* =========================================================
   ABOUT INTRO - CENTER
========================================================= */

.vp-home-about__intro {
    width: 100%;
    max-width: 850px;

    margin:
        0
        auto;

    text-align: center;
}


.vp-home-about__eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 23px;

    color: var(--vp-home-gold-light);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 2.4px;

    text-transform: uppercase;
}


.vp-home-about__eyebrow::after,
.vp-home-about__eyebrow span {
    content: "";

    display: block;

    width: 32px;
    height: 1px;

    background: var(--vp-home-gold);
}


.vp-home-about__title {
    max-width: 850px;

    margin:
        0
        auto;

    color: #fff;

    font-size: clamp(40px, 4.6vw, 68px);

    line-height: 1.08;

    font-weight: 300;

    letter-spacing: -1.3px;
}


.vp-home-about__title span {
    display: block;

    color: var(--vp-home-gold-light);
}


.vp-home-about__lead {
    max-width: 620px;

    margin:
        28px
        auto
        0;

    color: var(--vp-home-gold);

    font-size: 15px;
    line-height: 1.7;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.vp-home-about__lead strong {
    color: #fff;

    font-weight: 500;
}


.vp-home-about__description {
    max-width: 720px;

    margin:
        20px
        auto
        0;

    color: rgba(255,255,255,.58);

    font-size: 16px;
    line-height: 1.9;
}


/* =========================================================
   COUNTERS
========================================================= */

.vp-home-stats {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-top: 65px;
}


.vp-home-stat {
    position: relative;

    min-height: 175px;

    padding:
        28px
        20px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    border:
        1px solid rgba(255,255,255,.10);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );

    overflow: hidden;

    transition:
        transform var(--vp-home-transition),
        border-color var(--vp-home-transition),
        background var(--vp-home-transition);
}


.vp-home-stat::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 34px;
    height: 2px;

    transform: translateX(-50%);

    background: var(--vp-home-gold);

    transition:
        width var(--vp-home-transition);
}


.vp-home-stat:hover {
    transform: translateY(-6px);

    border-color:
        rgba(199,149,105,.38);

    background:
        rgba(255,255,255,.045);
}


.vp-home-stat:hover::before {
    width: 80px;
}


.vp-home-stat__number {
    display: flex;

    align-items: baseline;
    justify-content: center;

    color: var(--vp-home-gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(43px, 4vw, 61px);

    line-height: 1;

    font-weight: 400;
}


.vp-home-stat__plus {
    margin-left: 2px;

    font-size: .65em;
}


.vp-home-stat__label {
    margin-top: 13px;

    color: rgba(255,255,255,.72);

    font-size: 16px;
    line-height: 1.4;

    font-weight: 500;

    letter-spacing: .8px;
}


/* =========================================================
   ABOUT IMAGE SLIDER
========================================================= */

.vp-home-gallery {
    position: relative;

    margin-top: 58px;

    overflow: hidden;
}


.vp-home-gallery__item {
    position: relative;

    aspect-ratio: 1.35 / 1;

    overflow: hidden;

    background: #11161b;
}


.vp-home-gallery__item::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(14,19,23,.01),
            rgba(14,19,23,.30)
        );

    pointer-events: none;
}


.vp-home-gallery__item img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.65,.25,1);
}


.vp-home-gallery__item:hover img {
    transform: scale(1.045);
}


/* =========================================================
   02. PROJECTS
========================================================= */

.vp-projects {
    position: relative;

    padding:
        clamp(80px, 7.5vw, 120px)
        0;

    background:
        linear-gradient(
            180deg,
            #f1efec 0%,
            #f6f3ef 100%
        );

    overflow: hidden;
}


.vp-projects::before {
    content: "";

    position: absolute;

    top: 0;
    right: -120px;

    width: 480px;
    height: 480px;

    border:
        1px solid rgba(199,149,105,.12);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   PROJECT GRID
========================================================= */

.vp-project-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        42px
        24px;
}


/* =========================================================
   PROJECT CARD
========================================================= */

.vp-project-card {
    position: relative;

    min-width: 0;

    background: #fff;

    border:
        1px solid rgba(25,30,35,.075);

    box-shadow:
        0 12px 36px rgba(22,26,30,.045);

    transition:
        transform var(--vp-home-transition),
        box-shadow var(--vp-home-transition),
        border-color var(--vp-home-transition);
}


.vp-project-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(199,149,105,.27);

    box-shadow:
        0 25px 55px rgba(20,24,28,.10);
}


/* =========================================================
   PROJECT IMAGE
========================================================= */

.vp-project-card__image {
    position: relative;

    display: block;

    aspect-ratio: 1.08 / 1;

    overflow: hidden;

    background: #eae8e4;
}


.vp-project-card__image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(13,17,21,0) 55%,
            rgba(13,17,21,.32) 100%
        );

    opacity: .45;

    transition:
        opacity var(--vp-home-transition);
}


.vp-project-card__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .75s cubic-bezier(.2,.7,.25,1);
}


.vp-project-card:hover
.vp-project-card__image img {
    transform: scale(1.045);
}


.vp-project-card:hover
.vp-project-card__image::after {
    opacity: 1;
}


/* =========================================================
   PROJECT BADGE
========================================================= */

.vp-project-card__badge {
    position: absolute;

    top: 17px;
    left: 17px;

    z-index: 3;

    padding:
        9px
        14px;

    background:
        rgba(22,28,33,.92);

    color: #fff;

    font-size: 12px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: 1.25px;

    text-transform: uppercase;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}


.vp-project-card__badge::before {
    content: "";

    display: inline-block;

    width: 5px;
    height: 5px;

    margin-right: 7px;

    border-radius: 50%;

    background: var(--vp-home-gold);
}


.vp-project-card__badge--upcoming {
    background:
        rgba(151,109,73,.92);
}


.vp-project-card__badge--completed {
    background:
        rgba(49,57,62,.90);
}


/* image arrow */

.vp-project-card__imageArrow {
    position: absolute;

    right: 16px;
    bottom: 16px;

    z-index: 4;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff;

    color: var(--vp-home-text);

    font-size: 16px;

    opacity: 0;

    transform:
        translateY(8px);

    transition:
        opacity var(--vp-home-transition),
        transform var(--vp-home-transition),
        background var(--vp-home-transition);
}


.vp-project-card:hover
.vp-project-card__imageArrow {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   PROJECT CONTENT
========================================================= */

.vp-project-card__content {
    padding:
        24px
        24px
        25px;
}


.vp-project-card__top {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 15px;
}


.vp-project-card__top h3 {
    margin: 0;

    font-size: 27px;

    line-height: 1.15;

    font-weight: 400;

    letter-spacing: -.4px;
}


.vp-project-card__top h3 a {
    color: var(--vp-home-text);

    text-decoration: none;
}


.vp-project-card__index {
    flex: 0 0 auto;

    padding-top: 3px;

    color: rgba(25,30,35,.30);

    font-size: 10px;

    letter-spacing: 1px;
}


/* =========================================================
   PROJECT META
========================================================= */

.vp-project-card__meta {
    min-height: 61px;

    margin-top: 17px;

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.vp-project-card__meta span {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    color: #6d6b67;

    font-size: 16px;

    line-height: 1.5;
}


.vp-project-card__meta i {
    width: 14px;

    flex: 0 0 14px;

    margin-top: 3px;

    color: var(--vp-home-gold);

    text-align: center;
}


/* =========================================================
   PROJECT BUTTON
========================================================= */

.vp-project-card__button {
    width: fit-content;

    margin-top: 21px;

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding:
        12px
        16px;

    border:
        1px solid rgba(169,119,79,.54);

    color: var(--vp-home-gold-dark);

    font-size: 12px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    text-decoration: none;

    transition:
        background var(--vp-home-transition),
        color var(--vp-home-transition),
        border-color var(--vp-home-transition);
}


.vp-project-card__button span {
    font-size: 14px;
}


.vp-project-card__button:hover {
    background: var(--vp-home-dark);

    border-color: var(--vp-home-dark);

    color: #fff;
}


/* =========================================================
   03. VIDEO - FULL WIDTH
========================================================= */

.vp-video-section {
    position: relative;

    width: 100%;

    height: clamp(500px, 53vw, 760px);

    overflow: hidden;

    background: #10151a;
}


.vp-video-section__image {
    position: absolute;

    inset: -8% 0;

    width: 100%;
    height: 116%;
}


.vp-video-section__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.vp-video-section__overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(10,15,20,.78) 0%,
            rgba(10,15,20,.48) 48%,
            rgba(10,15,20,.20) 100%
        );
}


/* =========================================================
   VIDEO CONTENT
========================================================= */

.vp-video-section__content {
    position: absolute;

    z-index: 4;

    top: 50%;
    left: max(
        32px,
        calc((100% - var(--vp-home-container)) / 2)
    );

    width: min(630px, 48vw);

    transform:
        translateY(-50%);
}


.vp-video-section__eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 19px;

    color: var(--vp-home-gold-light);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 2.3px;

    text-transform: uppercase;
}


.vp-video-section__eyebrow::before {
    content: "";

    width: 35px;
    height: 1px;

    background: var(--vp-home-gold);
}


.vp-video-section h2 {
    margin: 0;

    color: #fff;

    font-size: clamp(43px, 4.5vw, 68px);

    line-height: 1.04;

    font-weight: 300;

    letter-spacing: -1.4px;
}


.vp-video-section h2 span {
    display: block;

    color: var(--vp-home-gold-light);
}


.vp-video-section__content p {
    max-width: 520px;

    margin:
        24px
        0
        0;

    color: rgba(255,255,255,.65);

    font-size: 18px;

    line-height: 1.8;
}


/* =========================================================
   VIDEO PLAY
========================================================= */

.vp-video-section__play {
    width: fit-content;

    margin-top: 32px;

    display: inline-flex;

    align-items: center;

    gap: 16px;

    color: #fff;

    text-decoration: none;
}


.vp-video-section__playIcon {
    position: relative;

    width: 64px;
    height: 64px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(255,255,255,.65);

    border-radius: 50%;

    background:
        rgba(255,255,255,.06);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    transition:
        background var(--vp-home-transition),
        transform var(--vp-home-transition),
        border-color var(--vp-home-transition);
}


.vp-video-section__playIcon::after {
    content: "";

    position: absolute;

    inset: -7px;

    border:
        1px solid rgba(199,149,105,.35);

    border-radius: 50%;
}


.vp-video-section__play:hover
.vp-video-section__playIcon {
    transform: scale(1.07);

    background: var(--vp-home-gold);

    border-color: var(--vp-home-gold);
}


.vp-video-section__playText {
    font-size: 14px;

    font-weight: 600;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


/* =========================================================
   04. TESTIMONIALS
========================================================= */

.vp-testimonials {
    position: relative;

    padding:
        clamp(85px, 8vw, 125px)
        0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #eceae7 0%,
            #f5f2ed 100%
        );
}


.vp-testimonials__glow {
    position: absolute;

    top: -260px;
    left: 50%;

    width: 620px;
    height: 620px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(199,149,105,.13),
            transparent 68%
        );

    pointer-events: none;
}


/* =========================================================
   TESTIMONIAL SLIDER
========================================================= */

.vp-testimonials__slider {
    position: relative;

    max-width: 950px;

    margin:
        0
        auto;

    overflow: hidden;
}


.vp-testimonials__slider
.swiper-slide {
    height: auto;
}


/* =========================================================
   TESTIMONIAL CARD
========================================================= */

.vp-testimonial-card {
    position: relative;

    min-height: 370px;

    padding:
        65px
        80px
        55px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background:
        rgba(255,255,255,.76);

    border:
        1px solid rgba(32,37,42,.07);

    box-shadow:
        0 28px 65px rgba(25,30,35,.075);

    overflow: hidden;
}


.vp-testimonial-card::after {
    content: "";

    position: absolute;

    right: -65px;
    bottom: -75px;

    width: 190px;
    height: 190px;

    border:
        1px solid rgba(199,149,105,.20);

    border-radius: 50%;
}


/* quote */

.vp-testimonial-card__quote {
    position: absolute;

    top: 22px;
    left: 34px;

    color:
        rgba(199,149,105,.15);

    font-family:
        Georgia,
        serif;

    font-size: 110px;

    line-height: 1;
}


/* stars */

.vp-testimonial-card__stars {
    position: relative;

    z-index: 2;

    margin-bottom: 25px;

    color: var(--vp-home-gold);

    font-size: 15px;

    letter-spacing: 5px;
}


/* review */

.vp-testimonial-card > p {
    position: relative;

    z-index: 2;

    max-width: 740px;

    margin: 0;

    color: #555653;

    font-size: clamp(17px, 1.45vw, 20px);

    line-height: 1.8;
}


/* author */

.vp-testimonial-card__author {
    position: relative;

    z-index: 2;

    margin-top: 33px;

    display: flex;

    align-items: center;

    gap: 15px;
}


.vp-testimonial-card__line {
    width: 34px;
    height: 1px;

    background: var(--vp-home-gold);
}


.vp-testimonial-card__author h4 {
    margin: 0;

    color: var(--vp-home-text);

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


.vp-testimonial-card__author
div > span {
    display: block;

    margin-top: 5px;

    color: #99948e;

    font-size: 12px;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* =========================================================
   TESTIMONIAL PAGINATION
========================================================= */

.vp-testimonials__slider
.swiper-pagination {
    position: relative !important;

    left: auto !important;
    bottom: auto !important;

    margin-top: 30px;
}


.vp-testimonials__slider
.swiper-pagination-bullet {
    width: 7px;
    height: 7px;

    margin:
        0
        5px !important;

    opacity: 1;

    background:
        rgba(30,34,38,.22);

    transition:
        width .3s ease,
        background .3s ease,
        border-radius .3s ease;
}


.vp-testimonials__slider
.swiper-pagination-bullet-active {
    width: 28px;

    border-radius: 20px;

    background: var(--vp-home-gold);
}


/* =========================================================
   05. PROJECT LOGOS
========================================================= */

.vp-brand-projects {
    position: relative;

    padding:
        clamp(80px, 7.5vw, 120px)
        0;

    overflow: hidden;

    background: #fff;
}


.vp-brand-projects__shape {
    position: absolute;

    top: 0;
    left: 50%;

    width: 1px;
    height: 75px;

    background:
        linear-gradient(
            180deg,
            rgba(199,149,105,.6),
            transparent
        );

    pointer-events: none;
}


/* =========================================================
   LOGO GRID
========================================================= */

.vp-brand-projects__grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    border-top:
        1px solid rgba(25,30,35,.08);

    border-left:
        1px solid rgba(25,30,35,.08);
}


/* =========================================================
   LOGO CARD
========================================================= */

.vp-brand-card {
    position: relative;

    min-height: 210px;

    padding:
        28px
        18px
        20px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    border-right:
        1px solid rgba(25,30,35,.08);

    border-bottom:
        1px solid rgba(25,30,35,.08);

    background: #fff;

    text-decoration: none;

    overflow: hidden;

    transition:
        background var(--vp-home-transition),
        transform var(--vp-home-transition),
        box-shadow var(--vp-home-transition);
}


.vp-brand-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 0;
    height: 2px;

    transform: translateX(-50%);

    background: var(--vp-home-gold);

    transition:
        width var(--vp-home-transition);
}


.vp-brand-card:hover {
    z-index: 2;

    background: #fbfaf8;

    box-shadow:
        0 20px 45px rgba(20,24,28,.075);
}


.vp-brand-card:hover::before {
    width: 100%;
}


/* card number */

.vp-brand-card__number {
    position: absolute;

    top: 15px;
    right: 15px;

    color:
        rgba(25,30,35,.25);

    font-size: 9px;

    letter-spacing: 1px;
}


/* image */

.vp-brand-card__image {
    width: 100%;

    min-height: 95px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.vp-brand-card__image img {
    width: 145px;
    max-width: 88%;

    height: 78px;

    display: block;

    object-fit: contain;

    filter:
        grayscale(100%);

    opacity: .52;

    transition:
        filter var(--vp-home-transition),
        opacity var(--vp-home-transition),
        transform var(--vp-home-transition);
}


.vp-brand-card:hover
.vp-brand-card__image img {
    filter:
        grayscale(0);

    opacity: 1;

    transform:
        scale(1.035);
}


/* brand name */

.vp-brand-card__name {
    margin-top: 13px;

    color: #77736f;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    opacity: 0;

    transform:
        translateY(6px);

    transition:
        opacity var(--vp-home-transition),
        transform var(--vp-home-transition);
}


.vp-brand-card:hover
.vp-brand-card__name {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   1536 / 1440 LAPTOP
========================================================= */

@media (min-width: 1200px) and (max-width: 1599px) {

    .vp-home-container {
        width:
            calc(100% - 80px);

        max-width: 1280px;
    }


    /* ABOUT */

    .vp-home-about {
        padding:
            90px
            0;
    }


    .vp-home-about__title {
        font-size: 55px;
    }


    .vp-home-stats {
        margin-top: 55px;
    }


    .vp-home-stat {
        min-height: 155px;
    }


    /* PROJECTS */

    .vp-projects {
        padding:
            90px
            0;
    }


    .vp-section-heading--split {
        margin-bottom: 45px;

        column-gap: 55px;
    }


    .vp-section-heading h2 {
        font-size: 53px;
    }


    .vp-project-grid {
        gap:
            34px
            20px;
    }


    .vp-project-card__content {
        padding:
            21px
            20px
            22px;
    }


    .vp-project-card__top h3 {
        font-size: 26px;
        font-weight: 500;
    }


    /* VIDEO */

    .vp-video-section {
        height: 590px;
    }


    .vp-video-section__content {
        left: max(
            40px,
            calc((100% - 1280px) / 2)
        );
    }


    .vp-video-section h2 {
        font-size: 55px;
    }


    /* TESTIMONIAL */

    .vp-testimonials {
        padding:
            90px
            0;
    }


    /* LOGOS */

    .vp-brand-projects {
        padding:
            90px
            0;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 1199px) {

    .vp-home-container {
        width:
            calc(100% - 56px);

        max-width: 980px;
    }


    /* SECTION HEADING */

    .vp-section-heading--split {
        grid-template-columns:
            .9fr
            .8fr;

        column-gap: 40px;
    }


    /* ABOUT */

    .vp-home-about__intro {
        max-width: 760px;
    }


    .vp-home-stats {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }


    /* PROJECT GRID */

    .vp-project-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }


    /* VIDEO */

    .vp-video-section__content {
        left: 42px;

        width: 58vw;
    }


    /* LOGOS */

    .vp-brand-projects__grid {
        grid-template-columns:
            repeat(3, minmax(0,1fr));
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .vp-home-container {
        width:
            calc(100% - 48px);
    }


    /* -----------------------------------------
       SECTION HEADER
    ----------------------------------------- */

    .vp-section-heading--split {
        display: block;

        margin-bottom: 42px;
    }


    .vp-section-heading--split
    .vp-section-heading__right {
        max-width: 620px;

        margin-top: 24px;

        justify-self: auto;
    }


    .vp-section-heading h2 {
        font-size: 46px;
    }


    /* -----------------------------------------
       ABOUT
    ----------------------------------------- */

    .vp-home-about {
        padding:
            75px
            0;
    }


    .vp-home-about__title {
        font-size: 47px;
    }


    .vp-home-about__description {
        max-width: 650px;
    }


    .vp-home-stat {
        min-height: 145px;
    }


    /* -----------------------------------------
       PROJECTS
    ----------------------------------------- */

    .vp-projects {
        padding:
            75px
            0;
    }


    /* -----------------------------------------
       VIDEO
    ----------------------------------------- */

    .vp-video-section {
        height: 520px;
    }


    .vp-video-section__content {
        left: 32px;

        width:
            calc(100% - 64px);

        max-width: 600px;
    }


    .vp-video-section h2 {
        font-size: 48px;
    }


    /* -----------------------------------------
       TESTIMONIAL
    ----------------------------------------- */

    .vp-testimonials {
        padding:
            75px
            0;
    }


    .vp-testimonial-card {
        min-height: 340px;

        padding:
            55px
            55px
            48px;
    }


    /* -----------------------------------------
       PROJECT LOGOS
    ----------------------------------------- */

    .vp-brand-projects {
        padding:
            75px
            0;
    }


    .vp-brand-card {
        min-height: 190px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .vp-home-container {
        width:
            calc(100% - 36px);
    }


    /* =====================================================
       COMMON HEADING
    ===================================================== */

    .vp-section-heading__eyebrow {
        font-size: 12px;

        letter-spacing: 1.8px;
    }


    .vp-section-heading h2 {
        font-size: 38px;

        line-height: 1.08;

        letter-spacing: -.8px;
    }


    .vp-section-heading p {
        font-size: 16px;

        line-height: 1.75;
    }


    .vp-section-heading--center {
        margin-bottom: 38px;
    }


    /* =====================================================
       ABOUT
    ===================================================== */

    .vp-home-about {
        padding:
            60px
            0;
    }


    .vp-home-about__decor--one {
        right: 18px;

        height: 100px;
    }


    .vp-home-about__decor--two {
        display: none;
    }


    .vp-home-about__eyebrow {
        font-size: 12px;

        letter-spacing: 1.7px;
    }


    .vp-home-about__eyebrow::after,
    .vp-home-about__eyebrow span {
        width: 22px;
    }


    .vp-home-about__title {
        font-size: 38px;

        line-height: 1.09;
    }


    .vp-home-about__lead {
        margin-top: 22px;

        font-size: 12px;

        line-height: 1.7;
    }


    .vp-home-about__description {
        margin-top: 15px;

        font-size: 16px;

        line-height: 1.75;
    }


    /* Stats */

    .vp-home-stats {
        gap: 10px;

        margin-top: 42px;
    }


    .vp-home-stat {
        min-height: 125px;

        padding:
            20px
            9px;
    }


    .vp-home-stat__number {
        font-size: 38px;
    }


    .vp-home-stat__label {
        margin-top: 9px;

        font-size: 12px;

        line-height: 1.35;
    }


    /* gallery */

    .vp-home-gallery {
        margin-top: 38px;
    }


    .vp-home-gallery__item {
        aspect-ratio:
            1.08 / 1;
    }


    /* =====================================================
       PROJECTS
    ===================================================== */

    .vp-projects {
        padding:
            60px
            0;
    }


    .vp-section-heading--split {
        margin-bottom: 34px;
    }


    .vp-section-heading--split
    .vp-section-heading__right {
        margin-top: 17px;
    }


    .vp-project-grid {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .vp-project-card__image {
        aspect-ratio:
            1.15 / 1;
    }


    .vp-project-card__content {
        padding:
            19px
            18px
            21px;
    }


    .vp-project-card__top h3 {
        font-size: 24px;
    }


    .vp-project-card__meta {
        min-height: 0;
    }


    .vp-project-card__imageArrow {
        width: 38px;
        height: 38px;

        opacity: 1;

        transform: none;
    }


    .vp-project-card__button {
        margin-top: 18px;
    }


    /* =====================================================
       VIDEO
    ===================================================== */

    .vp-video-section {
        height: 500px;
    }


    .vp-video-section__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(10,15,20,.35) 0%,
                rgba(10,15,20,.78) 100%
            );
    }


    .vp-video-section__content {
        top: auto;

        left: 18px;
        right: 18px;
        bottom: 45px;

        width: auto;

        transform: none;
    }


    .vp-video-section h2 {
        font-size: 39px;
    }


    .vp-video-section__content p {
        font-size: 16px;

        line-height: 1.7;
    }


    .vp-video-section__play {
        margin-top: 23px;
    }


    .vp-video-section__playIcon {
        width: 54px;
        height: 54px;
    }


    /* =====================================================
       TESTIMONIAL
    ===================================================== */

    .vp-testimonials {
        padding:
            60px
            0;
    }


    .vp-testimonial-card {
        min-height: 355px;

        padding:
            48px
            24px
            38px;
    }


    .vp-testimonial-card__quote {
        top: 13px;
        left: 17px;

        font-size: 82px;
    }


    .vp-testimonial-card__stars {
        margin-bottom: 20px;

        font-size: 13px;

        letter-spacing: 4px;
    }


    .vp-testimonial-card > p {
        font-size: 15px;

        line-height: 1.75;
    }


    .vp-testimonial-card__author {
        margin-top: 25px;
    }


    /* =====================================================
       BRAND PROJECTS
    ===================================================== */

    .vp-brand-projects {
        padding:
            60px
            0;
    }


    .vp-brand-projects__grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }


    .vp-brand-card {
        min-height: 155px;

        padding:
            18px
            10px;
    }


    .vp-brand-card__image {
        min-height: 70px;
    }


    .vp-brand-card__image img {
        width: 110px;

        height: 60px;
    }


    .vp-brand-card__name {
        margin-top: 5px;

        font-size: 8px;

        opacity: .55;

        transform: none;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .vp-home-container {
        width:
            calc(100% - 30px);
    }


    /* ABOUT */

    .vp-home-about__title {
        font-size: 32px;
    }


    .vp-home-stats {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }


    .vp-home-stat {
        min-height: 115px;
    }


    .vp-home-stat__number {
        font-size: 33px;
    }


    /* PROJECT */

    .vp-section-heading h2 {
        font-size: 33px;
    }


    .vp-project-card__badge {
        top: 12px;
        left: 12px;

        padding:
            8px
            10px;

        font-size: 12px;
    }


    /* VIDEO */

    .vp-video-section {
        height: 450px;
    }


    .vp-video-section h2 {
        font-size: 34px;
    }


    /* TESTIMONIAL */

    .vp-testimonial-card {
        padding:
            43px
            19px
            33px;
    }


    /* LOGOS */

    .vp-brand-card {
        min-height: 145px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 359px) {

    .vp-home-stats {
        grid-template-columns: 1fr;
    }


    .vp-home-stat {
        min-height: 105px;
    }


    .vp-brand-projects__grid {
        grid-template-columns: 1fr;
    }


    .vp-brand-card {
        min-height: 135px;
    }

}