/* =========================================================
   HERO
========================================================= */
.hero {

    isolation: isolate;

    position: relative;

    overflow: hidden;

    padding: 130px 0;

    background:
            radial-gradient(
                    circle at top right,
                    rgba(154,52,18,.16),
                    transparent 40%
            ),

            radial-gradient(
                    circle at bottom left,
                    rgba(182,70,47,.10),
                    transparent 30%
            ),

            var(--bg);
}

/* HERO GRID */

.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

            linear-gradient(
                    rgba(255,255,255,.025) 1px,
                    transparent 1px
            ),

            linear-gradient(
                    90deg,
                    rgba(255,255,255,.025) 1px,
                    transparent 1px
            );

    background-size: 42px 42px;

    mask-image:
            radial-gradient(
                    ellipse at center,
                    black 40%,
                    transparent 90%
            );

    -webkit-mask-image:
            radial-gradient(
                    ellipse at center,
                    black 40%,
                    transparent 90%
            );

    pointer-events: none;

    z-index: 0;
}

.hero::after {

    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    background:
            radial-gradient(
                    circle,
                    rgba(154,52,18,.20),
                    transparent 70%
            );

    filter: blur(120px);

    top: -200px;
    right: -100px;

    border-radius: 50%;

    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 5;
}

.price {

    font-size: 3.8rem;

    font-weight: 800;

    letter-spacing: -4px;

    background:
            linear-gradient(
                    135deg,
                    #ffedd5,
                    #fb923c,
                    #dc2626
            );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    filter:
            drop-shadow(
                    0 0 18px rgba(154,52,18,.25)
            );
}

.price medium{
    font-family: 'Inter', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -3px;
    color: #9a3412;
}
.price small{
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 0;
    opacity: .9;
    -webkit-text-fill-color: initial;
}

/* WRAPPER */

.hero-wrapper{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:60px;
}

/* =========================================================
   LEFT CONTENT
========================================================= */
.hero-title {

    font-size: clamp(3rem,5vw,5.4rem);

    line-height: 1;

    letter-spacing: -3px;

    color: white;

    margin-bottom: 24px;

    text-shadow:
            0 10px 40px rgba(0,0,0,.45);
}

/* =========================================================
   RIGHT VISUAL
========================================================= */
.main-card img{

    width:100%;

    display:block;
}

/* BROWSER TOP */

.hero-browser-top{

    height:48px;

    display:flex;

    align-items:center;

    gap:8px;

    padding:0 18px;

    border-bottom:1px solid var(--border);

    background:var(--bg-soft);
}

.hero-browser-top span{

    width:12px;
    height:12px;

    border-radius:50%;

    background:#d6b7a5;
}

.hero-browser-top span:nth-child(1){
    background:#ef4444;
}

.hero-browser-top span:nth-child(2){
    background:#f59e0b;
}

.hero-browser-top span:nth-child(3){
    background:#22c55e;
}

/* FLOATING TAG */

.hero-floating {

    position: absolute;

    padding: 14px 18px;

    border-radius: 999px;

    background:
            rgba(24,18,13,.88);

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

    backdrop-filter:
            blur(18px);

    box-shadow:
            0 10px 30px rgba(0,0,0,.35);

    font-size: 13px;

    font-weight: 700;

    color: white;
}

/* POSITION */

.floating-1{

    top:12%;
    left:-40px;
}

.floating-2{

    right:-20px;
    top:45%;

    animation-delay:1s;
}

.floating-3{

    left:20px;
    bottom:-10px;

    animation-delay:2s;
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes floatCard{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }
}

@keyframes floatTag{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }
}

.hero-system-status {

    margin-top: 24px;
    margin-bottom: 20px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 18px;

    border-radius: 999px;

    background:
            rgba(24,18,13,.88);

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

    color: white;

    font-size: 14px;

    font-weight: 600;

    backdrop-filter:
            blur(16px);
}

.status-dot {

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
            0 0 15px #22c55e;
}

/* HERO CTA */

.hero-cta {
    display: flex;
    gap: 18px;
    margin-top: 38px;
    flex-direction:row;
    align-items:center;

}

/* BASE BUTTON */

.hero-btn {

    position: relative;

    overflow: hidden;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-width: 210px;

    height: 62px;

    padding: 0 28px;

    border-radius: 20px;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    transition: .35s ease;

    backdrop-filter: blur(18px);

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

/* PRIMARY */

.hero-btn-primary {

    background:
            linear-gradient(
                    135deg,
                    #7c2d12,
                    #b6462f,
                    #dc2626
            );

    color: white;

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

    box-shadow:
            0 10px 30px rgba(154,52,18,.35),
            0 0 40px rgba(154,52,18,.12);
}

/* OUTLINE */

.hero-btn-outline {

    background:
            rgba(24,18,13,.82);

    color: white;

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

    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.03),
            0 10px 30px rgba(0,0,0,.25);
}

/* ICON */

.hero-btn i {

    font-size: 17px;
}

/* SHINE EFFECT */

.hero-btn::before {

    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    rgba(255,255,255,.14),
                    transparent
            );

    transition: .7s;
}

.hero-btn:hover::before {

    left: 100%;
}

/* HOVER */
.hero-btn:hover {

    transform:
            translateY(-4px)
            scale(1.01);
}

.hero-btn-primary:hover {

    box-shadow:
            0 20px 50px rgba(154,52,18,.45),
            0 0 60px rgba(154,52,18,.18);
}

.hero-btn-outline:hover {

    border-color:
            rgba(154,52,18,.35);

    background:
            rgba(30,22,17,.95);

    box-shadow:
            0 20px 50px rgba(0,0,0,.35),
            0 0 40px rgba(154,52,18,.10);
}

/* HERO VISUAL */
.hero-visual {

    position: relative;

    z-index: 2;
}

/* MAIN CARD */
.main-card{

    animation:floatCard 5s ease-in-out infinite;
}

.hero-card.main-card{

    position: relative;

    overflow: hidden;

    border-radius: 34px;

    padding: 0;

    background:
            linear-gradient(
                    135deg,
                    rgba(255,255,255,.10),
                    rgba(255,255,255,.02)
            );

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

    backdrop-filter: blur(18px);

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

/* GLOSSY BORDER GLOW */

.hero-card.main-card::before {

    content: "";

    position: absolute;

    inset: -2px;

    border-radius: 36px;

    padding: 2px;

    background:
            linear-gradient(
                    135deg,
                    rgba(255,255,255,.20),
                    rgba(154,52,18,.55),
                    rgba(220,38,38,.45),
                    rgba(255,255,255,.08)
            );

    /*-webkit-mask:*/
    /*        linear-gradient(#fff 0 0) content-box,*/
    /*        linear-gradient(#fff 0 0);*/

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events: none;
}

/* BROWSER TOP */

.hero-browser-top{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 18px;

    background:rgba(0,0,0,.28);

    border-bottom:
            1px solid rgba(255,255,255,.05);
}

/* BROWSER DOT */

.hero-browser-top span {

    width: 12px;
    height: 12px;

    border-radius: 50%;
}

.hero-browser-top span:nth-child(1) {

    background: #ef4444;
}

.hero-browser-top span:nth-child(2) {

    background: #f59e0b;
}

.hero-browser-top span:nth-child(3) {

    background: #22c55e;
}

/* IMAGE */

.hero-card img{

    display:block;

    width:100%;

    height:auto;

    border-radius:0;

    transform:scale(1.01);

    transition:.5s ease;
}

/* IMAGE HOVER */

.hero-card:hover img {

    transform:
            scale(1.03)
            translateY(-2px);
}

/* AMBIENT GLOW */

.hero-card.main-card::after {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    background:
            radial-gradient(
                    circle,
                    rgba(154,52,18,.25),
                    transparent 70%
            );

    top: -120px;
    right: -100px;

    filter: blur(80px);

    pointer-events: none;
}

/* HERO CONTENT */

.hero-content {

    position: relative;

    z-index: 10;
}

/* CTA */

.hero-cta {

    position: relative;

    z-index: 20;
}

/* BUTTON */

.hero-btn {

    position: relative;

    z-index: 30;

    pointer-events: auto;
}

   /*MOBILE Hero****************/
/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

    .hero {

        padding: 110px 0 80px;
    }

    .hero-wrapper {

        grid-template-columns: 1fr;

        gap: 50px;

        text-align: center;
    }

    .hero-content {

        display: flex;

        flex-direction: column;

        align-items: center;
    }

    .hero-title {

        font-size: clamp(2.8rem, 8vw, 4rem);

        line-height: 1.05;

        letter-spacing: -2px;
    }

    .hero-subtitle h5 {

        font-size: 1rem;

        line-height: 1.6;
    }

    .hero-cta {

        justify-content: center;

        flex-wrap: wrap;
    }

    .hero-visual {

        width: 100%;

        max-width: 540px;

        margin: auto;
    }

    /* floating jangan keluar layar */

    .floating-1 {

        top: -14px;
        left: 10px;
    }

    .floating-2 {

        top: 42%;
        right: 10px;
    }

    .floating-3 {

        bottom: -14px;
        left: 20px;
    }
}


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

@media (max-width: 576px) {

    .hero {
        padding: 90px 0 70px;
    }

    .hero-wrapper {
        gap: 38px;
    }

    .hero-title {
        font-size: 2.2rem;
        line-height: 1.1;
        letter-spacing: -1px;
        margin-bottom: 18px;
    }

    .price {
        display: inline-block;
        font-size: 2.3rem;
        letter-spacing: -1px;
        margin-top: 10px;
    }

    .price small {
        font-size: 1rem;
    }

    .hero-subtitle h5 {
        font-size: .95rem;
        line-height: 1.5;
    }

    .hero-cta {
        width: 100%;
        flex-direction: row;
        gap: 10px;
        margin-top: 28px;
    }

    .hero-btn {
        min-width: unset;
        height: 35px;
        border-radius: 16px;
        font-size: 13px;
    }

    /* FIX VISUAL */

    .hero-visual {
        position: relative;
        max-width: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hero-card.main-card {
        width: 100%;
        border-radius: 24px;
        overflow: hidden;
    }

    .hero-browser-top {
        height: 42px;
        padding: 0 14px;
    }

    /* FLOATING FIX */
    .hero-floating {
        position: absolute;
        font-size: 10px;
        padding: 8px 10px;
        border-radius: 999px;
        z-index: 5;
        white-space: nowrap;
    }

    .floating-1 {
        top: 20px;
        left: 10%;
    }

    .floating-2 {
        right: 8px;
        top: 45%;
    }

    .floating-3 {
        bottom: 10px;
        left: 20%;
        transform: translateX(-50%);
    }
}


/* =========================================================
   EXTRA SMALL
========================================================= */

@media (max-width: 420px) {

    .hero-cta {
        width: 100%;
        flex-direction: column;
        gap: 14px;
        margin-top: 28px;
    }

    .hero-btn {
        width: 100%;
        min-width: unset;
        height: 56px;
        border-radius: 16px;
        font-size: 14px;
    }

    .hero-floating {
        font-size: 9px;
        padding: 7px 9px;
    }

    .floating-2 {
        top: auto;
        bottom: 60px;
        right: 6px;
    }
}

@media (max-width: 380px) {

    .hero-title {

        font-size: 1.9rem;
    }

    .price {

        font-size: 2rem;
    }

    .hero-btn {

        height: 54px;

        font-size: 13px;
    }
}


/* =========================================================
   PREMIUM STATS SECTION
========================================================= */

.stats-section {

    position: relative;

    padding: 130px 0;

    overflow: hidden;

}

/* GRID */

.stats-grid {

    display: grid;

    grid-template-columns:
            repeat(
                    auto-fit,
                    minmax(260px,1fr)
            );

    gap: 30px;
}

/* CARD */

.stats-card {

    position: relative;

    overflow: hidden;

    padding: 38px 34px;

    border-radius: 30px;

    background:
            rgba(24,18,13,.82);

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

    backdrop-filter:
            blur(18px);

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

    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.03),
            0 20px 50px rgba(0,0,0,.30);

    transition:
            .35s ease;
}

/* RANDOM PREMIUM ROTATION */

.stats-card:nth-child(1) {

    transform:
            rotate(-1.2deg);
}

.stats-card:nth-child(2) {

    transform:
            rotate(.8deg);
}

.stats-card:nth-child(3) {

    transform:
            rotate(-.7deg);
}

.stats-card:nth-child(4) {

    transform:
            rotate(1deg);
}

/* TOP */

.stats-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 30px;
}

/* ICON */

.stats-icon {

    width: 68px;
    height: 68px;

    display: flex;

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

    border-radius: 22px;

    background:
            linear-gradient(
                    135deg,
                    rgba(154,52,18,.30),
                    rgba(220,38,38,.18)
            );

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

    box-shadow:
            0 10px 30px rgba(154,52,18,.16);

    font-size: 28px;

    color: white;
}

/* NUMBER */

.stats-number {

    font-size: clamp(4rem,5vw,5rem);

    font-weight: 800;

    line-height: 1;

    letter-spacing: -5px;

    margin-bottom: 20px;

    background:
            linear-gradient(
                    135deg,
                    #fff,
                    #fb923c,
                    #dc2626
            );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    filter:
            drop-shadow(
                    0 0 18px rgba(154,52,18,.16)
            );
}

/* TITLE */

.stats-card h3 {

    font-size: 1.45rem;

    line-height: 1.3;

    margin-bottom: 18px;

    color: white;
}

/* DESCRIPTION */

.stats-card p {

    margin: 0;

    color: var(--muted);

    line-height: 1.9;
}

/* HOVER */

.stats-card:hover {

    transform:
            rotate(0deg)
            translateY(-10px)
            scale(1.01);

    border-color:
            rgba(154,52,18,.22);

    box-shadow:
            0 30px 80px rgba(0,0,0,.40),
            0 0 40px rgba(154,52,18,.10);
}

/* GLOW */

.stats-card::before {

    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    top: -120px;
    right: -120px;

    background:
            radial-gradient(
                    circle,
                    rgba(154,52,18,.18),
                    transparent 70%
            );

    filter:
            blur(40px);

    pointer-events: none;
}

/* MOBILE */

@media (max-width: 768px) {

    .stats-section {

        padding: 90px 0;
    }

    .stats-card {

        padding: 30px;
        transform: none !important;

    }

    .stats-number {

        font-size: 4rem;
    }

    .stats-card h3 {

        font-size: 1.25rem;
    }
}
@media (max-width: 768px) {


}


/* =========================================================
   TRUSTED SECTION
========================================================= */

.trusted-section {

    position: relative;

    padding: 10px 0 100px 0;

    overflow: hidden;

    border-top:
            1px solid rgba(255,255,255,.04);

    border-bottom:
            1px solid rgba(255,255,255,.04);
}

.marquee {
    overflow: hidden;
}

.trusted-row {

    display: flex;

    width: max-content;

    gap: 22px;

    margin-bottom: 22px;
}

.marquee-left .trusted-row {
    animation: moveLeft 25s linear infinite;
}

.marquee-right .trusted-row {
    animation: moveRight 25s linear infinite;
}

.trusted-card {

    min-width: 240px;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 18px 22px;
}

/* LOGO */

.trusted-logo {

    width: 58px;
    height: 58px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    background:
            linear-gradient(
                    135deg,
                    rgba(154,52,18,.35),
                    rgba(220,38,38,.20)
            );

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

    box-shadow:
            0 10px 25px rgba(154,52,18,.18);

    font-size: 18px;

    font-weight: 700;

    color: white;
}

.trusted-card span {
    font-weight: 600;
}

@keyframes moveLeft {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes moveRight {

    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

/*Portfolio sihandal.com/index.html*/
/* =========================================================
   PORTFOLIO SECTION
========================================================= */

.portfolio-section {

    position: relative;

    padding: 100px 0 50px 0;

    overflow: hidden;

}

/* HEADING */

.portfolio-title {

    font-size:
            clamp(2.5rem,4vw,4.5rem);

    line-height: 1.05;

    letter-spacing: -2px;

    color: white;
}

.portfolio-subtitle {

    max-width: 760px;

    margin: 20px auto 0;

    color: var(--muted);

    line-height: 1.9;
}

/* CARD */

.portfolio-card {

    height: 100%;

    overflow: hidden;

    border-radius: 30px;

    background:
            rgba(24,18,13,.88);

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

    transition:
            .45s ease;

    box-shadow:
            0 18px 50px rgba(0,0,0,.28);
}

/* HOVER */

.portfolio-card:hover {

    transform:
            translateY(-8px);

    border-color:
            rgba(255,255,255,.10);

    box-shadow:
            0 28px 70px rgba(0,0,0,.38);
}

/* IMAGE */

.portfolio-image {

    position: relative;

    display: block;

    overflow: hidden;

    aspect-ratio: 16/10;

    background: #0f0a07;
}

.portfolio-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
            transform .7s ease;
}

/* IMAGE HOVER */

.portfolio-card:hover img {

    transform:
            scale(1.05);
}

/* OVERLAY */

.portfolio-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
            rgba(10,10,10,.45);

    opacity: 0;

    transition:
            .35s ease;
}

.portfolio-card:hover .portfolio-overlay {

    opacity: 1;
}

/* OVERLAY TEXT */

.portfolio-overlay span {

    padding: 12px 18px;

    border-radius: 999px;

    background:
            rgba(24,18,13,.92);

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

    color: white;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: .3px;

    backdrop-filter:
            blur(12px);
}

/* CONTENT */

.portfolio-content {

    padding: 30px;
}

/* TITLE */

.portfolio-content h3 {

    font-size: 1.35rem;

    line-height: 1.35;

    margin-bottom: 16px;

    color: white;
}

/* DESCRIPTION */

.portfolio-content p {

    margin-bottom: 24px;

    line-height: 1.9;

    color: var(--muted);
}

/* TAGS */

.portfolio-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

/* TAG */

.portfolio-tags span {

    padding: 10px 14px;

    border-radius: 999px;

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

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

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

    font-size: 13px;

    font-weight: 600;
}

/* MORE BUTTON */

.portfolio-more {

    margin-top: 60px;
}

/* BUTTON */

.portfolio-more .btn-primary {

    min-width: 260px;
}

/* MOBILE */

@media (max-width: 768px) {

    .portfolio-section {

        padding: 90px 0;
    }

    .portfolio-content {

        padding: 24px;
    }

    .portfolio-content h3 {

        font-size: 1.2rem;
    }
}

/* =========================================================
   PRICING SECTION
========================================================= */

.pricing-section {

    position: relative;

    padding: 130px 0 50px 0;

    overflow: hidden;

    background:
            linear-gradient(
                    180deg,
                    var(--bg) 0%,
                    #221a15 18%,
                    #4f4037 45%,
                    #cfc5be 78%,
                    #ffffff 100%
            );
}

.gap-wrapper {
    margin-top: 40px;
    margin-bottom: 40px;
}

.pricing-header {
    padding-bottom: 25px;
    padding-top: 10px;
}
.pricing-header h2 {

    font-size:
            clamp(2.5rem,4vw,4.5rem);

    line-height: 1.05;

    letter-spacing: -2px;

    color: white;

    margin-bottom: 18px;
}

.pricing-header p {

    max-width: 720px;

    margin: auto;

    color: var(--muted);

    line-height: 1.9;
}

.pricing-card {

    position: relative;

    height: 100%;

    padding: 40px 34px;

    border-radius: 32px;

    background:
            rgba(18,13,9,.92);

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

    overflow: hidden;

    transition:
            .4s ease;

    box-shadow:
            0 20px 50px rgba(0,0,0,.28);
}

.pricing-card:hover {

    transform:
            translateY(-10px);

    border-color:
            rgba(255,255,255,.10);

    box-shadow:
            0 30px 80px rgba(0,0,0,.38);
}

.pricing-price {

    margin:
            28px 0;
}

/* ======== CUSTOM OFFER SECTION =========== */

.sih-custom-offer-box {

    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;

    padding: 55px;

    border-radius: 34px;

    overflow: hidden;

    background:
            linear-gradient(
                    90deg,
                    #f5f5f5 0%,
                    #f3f1ed 35%,
                    #eee8df 72%,
                    #e8dfd1 100%
            );

    border:
            1px solid rgba(180, 140, 90, .08);

    box-shadow:
            0 20px 50px rgba(15, 23, 42, .04);

    transition: .4s ease;
}

/* RIGHT CREAMY EFFECT */
.sih-custom-offer-box::before {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 42%;
    height: 100%;

    background:
            linear-gradient(
                    180deg,
                    rgba(226,217,204,.55) 0%,
                    rgba(236,229,218,.88) 100%
            );

    border-radius: 140px 34px 34px 140px;

    pointer-events: none;
}

/* =========================================================
   LEFT CONTENT
========================================================= */

.sih-custom-offer-content {

    position: relative;

    z-index: 2;

    flex: 1;

    max-width: 700px;
}

/* BADGE */
.sih-custom-offer-badge {

    display: inline-flex;
    align-items: center;

    padding: 12px 22px;

    border-radius: 999px;

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

    border:
            1px solid rgba(224, 178, 108, .35);

    font-size: .92rem;
    font-weight: 600;

    color: #7c5a32;

    margin-bottom: 28px;

    backdrop-filter: blur(10px);
}

/* TITLE */
.sih-custom-offer-title {

    font-size: clamp(2.5rem, 5vw, 4.2rem);

    line-height: 1.08;

    font-weight: 800;

    color: #172033;

    margin-bottom: 14px;

    letter-spacing: -1px;
}

/* PRICE */
.sih-custom-offer-price {

    font-size: 1.3rem;

    font-weight: 700;

    color: #f59e0b;

    margin-bottom: 30px;
}

/* =========================================================
   FEATURE LIST
========================================================= */

.sih-custom-offer-list {

    display: flex;
    flex-direction: column;

    gap: 18px;

    padding: 0;
    margin: 0;

    list-style: none;
}

.sih-custom-offer-list li {

    position: relative;

    padding-left: 38px;

    font-size: 1.03rem;

    line-height: 1.8;

    color: #475569;
}

/* CHECK ICON */
.sih-custom-offer-list li::before {

    content: "✓";

    position: absolute;

    left: 0;
    top: 3px;

    width: 24px;
    height: 24px;

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

    border-radius: 50%;

    background:
            rgba(245, 158, 11, .12);

    color: #f59e0b;

    font-size: .82rem;
    font-weight: 800;
}

/* =========================================================
   RIGHT BUTTON
========================================================= */

.sih-custom-offer-action {

    position: relative;

    z-index: 2;

    flex-shrink: 0;

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

/* BUTTON */
.sih-custom-offer-button {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    padding: 20px 38px;

    border-radius: 18px;

    background: #f59e0b;

    color: #fff;

    font-size: 1.05rem;
    font-weight: 700;

    text-decoration: none;

    transition:
            transform .3s ease,
            background .3s ease,
            box-shadow .3s ease;

    box-shadow:
            0 18px 35px rgba(245, 158, 11, .28);
}

.sih-custom-offer-button:hover {

    transform: translateY(-4px);

    background: #ea8c00;

    color: #fff;

    box-shadow:
            0 22px 40px rgba(245, 158, 11, .34);
}

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

@media (max-width: 992px) {

    .sih-custom-offer-box {

        flex-direction: column;
        align-items: flex-start;

        gap: 34px;

        padding: 36px 24px;

        border-radius: 28px;
    }

    .sih-custom-offer-box::before {

        width: 100%;

        height: 38%;

        top: auto;
        bottom: 0;

        border-radius: 80px 80px 28px 28px;
    }

    .sih-custom-offer-title {

        font-size: 2.2rem;
    }

    .sih-custom-offer-price {

        font-size: 1.08rem;
    }

    .sih-custom-offer-list li {

        font-size: .96rem;

        line-height: 1.75;
    }

    .sih-custom-offer-action {

        width: 100%;
    }

    .sih-custom-offer-button {

        width: 100%;

        padding: 18px 24px;
    }
}


/* End Fleksibel*/

.pricing-list {
    list-style: none;
    padding: 0;
    margin: 0 0 35px;
}
.pricing-list-beforeToggle {
    list-style: none;
    padding: 0;
    margin: 0 0 35px;
}

.pricing-list li {
    font-size: 12px;

    /*padding: 14px 0;*/

    /*border-bottom: 1px solid #f1f5f9;*/
}

.pricing-list li:last-child {
    border-bottom: none;
}

.feature-list{
    list-style:none;
    padding:0;
}

.feature-list li{
    margin:12px 0;
    position:relative;
    padding-left:30px;
}

.feature-list li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:#16a34a;
    font-weight:900;
    font-size:18px;
}

.pricing-popular {

    border:
            1px solid rgba(180,70,47,.30);

    background:
            linear-gradient(
                    180deg,
                    rgba(28,20,15,.96),
                    rgba(18,13,9,.96)
            );

    transform:
            scale(1.03);
}

.popular-tag {

    position: absolute;
    top: 22px;
    right: 22px;
    padding: 10px 16px;
    border-radius: 999px;
    background:
            rgba(180,70,47,.14);

    border:
            1px solid rgba(180,70,47,.22);
    color: #ffb38f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

/*Price Harga Table*/
.pricing-toggle{
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 10px 0;
    margin-bottom: 10px;
}

.pricing-toggle span{
    font-weight: 600;
}

.toggle-btn{

    border: none;

    background: none;

    color: white;

    font-size: 28px;

    font-weight: 700;

    cursor: pointer;
}

.toggle-btn:hover{

    color: #f5f5f5;
}
/* HIDDEN DEFAULT */

.pricing-list{
    max-height: 0;
    overflow: hidden;

    transition: all .4s ease;
}

/* ACTIVE */

.pricing-list.active{
    max-height: 500px;
    margin-top: 20px;
}


/* =========================================================
   COMPARISON SECTION
========================================================= */

.comparison-section {

    position: relative;

    overflow: hidden;

    padding: 20px 0 80px 0;
    background: white;

}

.comparison-section .section-heading h2 {
    color: #1f1713 !important;
}

/* SUBTLE GLOW */

/*.comparison-section::before {*/

/*    content: "";*/

/*    position: absolute;*/

/*    top: -140px;*/
/*    left: 50%;*/

/*    transform: translateX(-50%);*/

/*    width: 520px;*/
/*    height: 240px;*/

/*    background:*/
/*            radial-gradient(*/
/*                    circle,*/
/*                    rgba(154,52,18,0.06),*/
/*                    transparent 72%*/
/*            );*/

/*    filter: blur(70px);*/

/*    pointer-events: none;*/
/*}*/

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

.comparison-section .section-heading {

    position: relative;

    z-index: 2;

    text-align: center;

    margin-bottom: 54px;
}

.comparison-section .section-heading h2 {

    color: var(--dark);

    font-weight: 900;
}

.comparison-section .section-heading p {

    color: #5f534c;

    max-width: 720px;

    margin: auto;

    line-height: 1.8;
}

.comparison-table-wrapper {

    position: relative;

    z-index: 2;

    overflow-x: auto;

    border-radius: 28px;

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

    border:
            2px solid rgba(120,80,50,0.08);

    box-shadow:
            0 12px 40px rgba(20,10,5,.06);
}

.comparison-table {

    width: 100%;

    min-width: 920px;

    border-collapse: collapse;
}

.comparison-table thead th {

    padding: 24px 20px;

    background:
            linear-gradient(
                    135deg,
                    #2f211b,
                    #59392b
            );

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

    font-size: 14px;

    font-weight: 800;

    text-align: center;
}

.comparison-table thead th:first-child {

    text-align: left;

    border-top-left-radius: 28px;
}

.comparison-table thead th:last-child {

    border-top-right-radius: 28px;
}

.comparison-table thead th.highlight {

    background:
            linear-gradient(
                    135deg,
                    #9a3412,
                    #c2410c
            );

    position: relative;
}

.comparison-table thead th.highlight::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
            linear-gradient(
                    180deg,
                    rgba(255,255,255,.10),
                    transparent
            );

    pointer-events: none;
}

.comparison-table thead th.highlight span {

    display: block;

    margin-top: 6px;

    font-size: 18px;

    font-weight: 900;
}

.comparison-table tbody tr {

    transition:
            background .2s ease;
}

.comparison-table tbody td {

    padding: 20px;

    text-align: center;

    font-size: 14px;

    color: #4b4038;

    border-bottom:
            1px solid rgba(120,80,50,0.08);

    line-height: 1.7;

    font-weight: 600;
}

/* FIRST COLUMN */

.comparison-table tbody td:first-child {

    width: 240px;

    text-align: left;

    font-weight: 800;

    color: #1f1713;

    background:
            rgba(247,237,228,0.32);
}

/* HIGHLIGHT */

.highlight-text {

    color: #9a3412 !important;

    font-weight: 900;
}

/* CHECK */

.check {

    color: #15803d;

    font-size: 18px;

    font-weight: 900;
}

/* CROSS */

.cross {

    color: #dc2626;

    font-size: 18px;

    font-weight: 900;
}

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

@media (max-width: 992px) {

    .comparison-section {

        padding: 90px 0;
    }

    .comparison-table {

        min-width: 100%;

        display: block;
    }

    .comparison-table thead {

        display: none;
    }

    .comparison-table tbody {

        display: flex;

        flex-direction: column;

        gap: 18px;
    }

    .comparison-table tbody tr {

        display: grid;

        grid-template-columns: repeat(2,1fr);

        gap: 12px;

        padding: 20px;

        border-radius: 22px;

        background: white;

        border:
                1px solid rgba(120,80,50,0.08);

        box-shadow:
                0 4px 18px rgba(20,10,5,.04);
    }

    /* FEATURE TITLE */

    .comparison-table tbody td:first-child {

        width: 100%;

        grid-column: 1 / -1;

        padding: 0;

        margin-bottom: 6px;

        background: transparent;

        border: none;

        color: #1f1713;

        font-size: 1.05rem;

        font-weight: 900;
    }

    /* NORMAL CELL */

    .comparison-table tbody td {

        border: none;

        padding: 16px;

        background: #faf8f6;

        border-radius: 16px;

        text-align: left;

        display: flex;

        flex-direction: column;

        justify-content: center;

        gap: 6px;

        min-height: 82px;

        line-height: 1.5;

        color: #2f241f;

        font-size: 14px;
    }

    /* LABEL */

    .comparison-table tbody td:not(:first-child)::before {

        font-size: 11px;

        font-weight: 900;

        letter-spacing: .8px;

        text-transform: uppercase;

        color: #64748b;
    }

    .comparison-table tbody td:nth-child(2)::before {

        content: "siHandal";

        color: #9a3412;
    }

    .comparison-table tbody td:nth-child(3)::before {

        content: "DIY Builder";
    }

    .comparison-table tbody td:nth-child(4)::before {

        content: "Freelancer";
    }

    .comparison-table tbody td:nth-child(5)::before {

        content: "Agensi";
    }

    /* RECOMMENDED */

    .comparison-table tbody td:nth-child(2) {

        background:
                rgba(154,52,18,.08);

        border:
                1px solid rgba(154,52,18,.10);
    }

    .comparison-table-wrapper {

        overflow: visible;

        background: transparent;

        border: none;

        box-shadow: none;
    }
}

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

@media (max-width: 520px) {

    .comparison-table tbody tr {

        grid-template-columns: 1fr;
    }

    .comparison-table tbody td {

        min-height: auto;
    }
}

/*<!-- FAQ CSS  -->*/
 .faq-section {
     padding: 80px 20px;
     background:
             linear-gradient(
                     180deg,
                     #ffffff 0%,
                     #ffffff 0%
                     /*#f8fafc 100%*/

             );
     font-family: 'Poppins', sans-serif;
 }

.faq-container {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    max-width: 1200px;
    margin: 20px 20px;
}

.faq-info {
    flex: 1 1 400px;
    position: sticky;
    top: 120px;
    align-self: flex-start;
}

.faq-info h2 {
    font-size: 36px;
    color: #1f2937;
    margin-bottom: 20px;
}

.faq-info span {
    font-size: 36px;
    color: #1f2937;
}

.faq-info p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
    color: #1f2937;
}

.faq-btn {
    display: inline-block;
    background-color: #ff6700;
    color: #fff;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.faq-btn:hover {
    background-color: #e65c00;
}

/* Accordion */
.faq-accordion {
    flex: 1 1 500px;
}

.faq-item {
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.faq-question {
    width: 100%;
    color: #1f2937;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    position: relative;
    padding-left: 50px;
    padding-bottom: 20px;
}

.faq-question::before{

    content: "?";

    position: absolute;
    left: 0;
    top: 40%;

    transform: translateY(-50%);

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: #ff6700;

    color: white;

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

    font-size: 16px;
    font-weight: 700;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    font-size: 15px;
    color: #4b5563;
    line-height: 1.6;
    padding-bottom: 0;
}

.faq-answer p {
    margin: 15px 0;
    padding: 0 50px;
    color: #4b5563;
}

/* Active FAQ */
.faq-item.active .faq-answer {
    max-height: 1000px; /* cukup tinggi untuk isi panjang */
    padding-bottom: 15px;
}

.faq-question span{
    font-size: 12px;
    font-weight: 300;
    transition: .3s ease;
}

/* Responsive */
@media (max-width:1200px) {

    .faq-section{
        padding: 60px 20px;
    }

    .faq-container {
        flex-direction: column;
        gap: 0;
    }

    .faq-info {
        position: static;
        top: unset;
        margin-bottom: 50px ;
        padding-bottom: 0 ;
        flex: unset;
        width: 100%;
        align-self: stretch;
    }

    .faq-accordion{
        flex: unset;
        width: 100%;
    }

    .faq-info h2{
        margin-bottom: 12px;
    }

    .faq-info p{
        margin-bottom: 18px;
    }
}

/* =========================
   CTA SECTION
========================= */
.cta-section{

    padding: 20px 20px;

    position: relative;

    overflow: hidden;

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

.cta-section-second{

    padding: 15px 0 80px 0;

    position: relative;

    overflow: hidden;

    background:
            linear-gradient(
                    180deg,
                    #ffffff 0%,
                    #f8fafc 30%,
                    #f5efe6 70%,
                    #ede0d1 100%
            );


}

.cta-wrapper{
    background:
            linear-gradient(
                    145deg,
                    rgba(255,255,255,0.04),
                    rgba(255,255,255,0.02)
            );
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    padding: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    overflow: hidden;
}

.cta-wrapper::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(
                    circle at top right,
                    rgba(255,140,0,0.12),
                    transparent 45%
            );
    pointer-events: none;
}

.cta-content{
    max-width: 650px;
    position: relative;
    z-index: 2;
}

.cta-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,140,0,0.12);
    border: 1px solid rgba(255,140,0,0.18);
    font-size: 13px;
    color: #2B2B2B;
    margin-bottom: 18px;
}

.cta-content h2{
    font-size: 34px;
    line-height: 1.3;
    margin-bottom: 16px;
    color: #2B2B2B;
    font-weight: 700;
}

.cta-content p{
    color: #1f2937;
    line-height: 1.8;
    font-size: 15px;
}

.cta-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    position: relative;
    z-index: 2;
}

.cta-btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 24px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease;
}

.cta-primary-btn{
    background: #ff8c00;
    color: #fff;
}

.cta-primary-btn:hover{
    transform: translateY(-2px);
    background: #ff9d24;
}

/* MOBILE */
@media(max-width: 768px){

    .cta-wrapper{
        flex-direction: column;
        align-items: flex-start;
        padding: 30px;
    }

    .cta-content h2{
        font-size: 26px;
    }

    .cta-actions{
        width: 100%;
    }

    .cta-btn{
        width: 100%;
        justify-content: center;
    }

}

/*REVEAL CSS****************/
.reveal-section {

    opacity: 0;

    transform: translateY(50px);

    transition:
            opacity .8s ease,
            transform .8s ease;

    will-change: opacity, transform;
}

.reveal-section.active {

    opacity: 1;

    transform: translateY(0);
}

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

.client-testimonial-wall {

    position: relative;

    padding: 100px 60px;

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

.testimonial-layout {

    display: grid;

    grid-template-columns: 420px minmax(0, 1fr);

    gap: 70px;

    max-width: 1400px;

    margin: auto;

    align-items: start;
}

/* LEFT */

.testimonial-left {

    position: relative;
    height: 100%;
}

/* sticky desktop */

.testimonial-heading {

    position: sticky;

    top: 120px;
}

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

.mini-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 18px;

    border-radius: 999px;

    background: #fff1e8;

    border: 1px solid #ffe1d0;

    color: #ff6b2c;

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 22px;
}

.testimonial-heading h2 {

    font-size: clamp(2.5rem, 5vw, 4.2rem);

    line-height: 1;

    letter-spacing: -0.05em;

    font-weight: 800;

    color: #111827;

    margin-bottom: 22px;
}

.testimonial-heading p {

    font-size: 1rem;

    line-height: 1.9;

    color: #6b7280;

    max-width: 520px;
}

/* =========================================================
HEADING WRAPPER
========================================================= */

.testimonial-heading {

    position: sticky;

    top: 120px;
}

/* =========================================================
TOP
========================================================= */

.testimonial-heading-top {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 28px;
}

/* =========================================================
ICON
========================================================= */

.testimonial-icon {

    width: 58px;

    height: 58px;

    border-radius: 18px;

    background:
            linear-gradient(
                    135deg,
                    #ff9b68 0%,
                    #ff6b2c 100%
            );

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 22px;

    box-shadow:
            0 15px 40px rgba(255,107,44,0.25);
}

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

.testimonial-heading h2 {

    font-size: clamp(2.8rem, 5vw, 4.5rem);

    line-height: 0.95;

    letter-spacing: -0.06em;

    font-weight: 850;

    color: #111827;

    margin-bottom: 24px;
}

/* =========================================================
TEXT
========================================================= */

.testimonial-heading p {

    font-size: 1rem;

    line-height: 1.9;

    color: #6b7280;

    margin-bottom: 34px;

    max-width: 500px;
}

/* =========================================================
STATS
========================================================= */

.testimonial-stats {

    display: flex;

    flex-wrap: wrap;

    gap: 16px;
}

.testimonial-stat {

    padding: 18px 22px;

    border-radius: 22px;

    background: rgba(255,255,255,0.7);

    border: 1px solid rgba(255,255,255,0.95);

    backdrop-filter: blur(12px);

    box-shadow:
            0 10px 30px rgba(15,23,42,0.05);

    min-width: 130px;
}

.testimonial-stat strong {

    display: block;

    font-size: 1.2rem;

    font-weight: 800;

    color: #111827;

    margin-bottom: 4px;
}

.testimonial-stat span {

    font-size: 0.78rem;

    color: #6b7280;
}

/* =========================================================
RIGHT
========================================================= */

.testimonial-right {

    position: relative;
}

/* =========================================================
MARQUEE
========================================================= */

.testimonial-marquee {

    position: relative;

    height: 760px;

    overflow: hidden;

    mask-image:
            linear-gradient(
                    to bottom,
                    transparent,
                    black 8%,
                    black 92%,
                    transparent
            );
}

/* =========================================================
TRACK
========================================================= */

.testimonial-track {

    height: 100%;

    overflow: hidden;
}

/* =========================================================
COLUMN
========================================================= */

.testimonial-column {

    display: flex;

    flex-direction: column;

    gap: 24px;

    will-change: transform;

    transform: translate3d(0,0,0);

    backface-visibility: hidden;

    animation: marqueeUp 32s linear infinite;
}

/* =========================================================
ANIMATION
========================================================= */

@keyframes marqueeUp {

    from {

        transform: translate3d(0, 0, 0);
    }

    to {

        transform: translate3d(0, -50%, 0);
    }
}

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

.testimonial-card {

    position: relative;

    padding: 32px;

    border-radius: 30px;

    background:
            rgba(255,255,255,0.82);

    backdrop-filter: blur(18px);

    border: 1px solid rgba(255,255,255,0.95);

    box-shadow:
            0 10px 35px rgba(15,23,42,0.06);

    transition:
            transform .35s ease,
            box-shadow .35s ease,
            border-color .35s ease;

    transform: translateZ(0);
}

.testimonial-card:hover {

    transform: translateY(-6px);

    border-color: #ffd7c3;

    box-shadow:
            0 20px 60px rgba(15,23,42,0.10);
}

/* =========================================================
QUOTE ICON
========================================================= */

.testimonial-card::before {

    content: "“";

    position: absolute;

    top: 14px;

    left: 22px;

    font-size: 74px;

    line-height: 1;

    font-weight: 800;

    color: rgba(255,107,44,0.08);
}

/* =========================================================
TEXT
========================================================= */

.testimonial-card p {

    position: relative;

    z-index: 2;

    margin: 0 0 30px;

    font-size: 0.95rem;

    line-height: 1.9;

    color: #111827;
}

/* =========================================================
FOOTER
========================================================= */

.testimonial-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;
}

/* =========================================================
CLIENT INFO
========================================================= */

.client-info {

    display: flex;

    align-items: center;

    gap: 14px;
}

.client-avatar {

    width: 52px;

    height: 52px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
            linear-gradient(
                    135deg,
                    #ff9b68 0%,
                    #ff6b2c 100%
            );

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 13px;

    font-weight: 800;

    box-shadow:
            0 10px 28px rgba(255,107,44,0.20);
}

.client-info h4 {

    margin: 0 0 4px;

    font-size: 0.95rem;

    font-weight: 700;

    color: #111827;
}

.client-info span {

    display: block;

    font-size: 0.78rem;

    color: #6b7280;
}

/* =========================================================
RATING
========================================================= */

.testimonial-rating {

    flex-shrink: 0;

    text-align: right;

    color: #ff7a3d;

    font-size: 0.9rem;

    line-height: 1.4;

    font-weight: 700;
}

.testimonial-rating small {

    display: block;

    margin-top: 4px;

    color: #111827;

    font-size: 0.75rem;

    font-weight: 700;
}

/* =========================================================
PAUSE ON HOVER
========================================================= */

.testimonial-marquee:hover .testimonial-column {

    animation-play-state: paused;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .testimonial-layout {

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .testimonial-heading {

        position: relative;

        top: unset;
    }

    .testimonial-marquee {

        height: 620px;
    }
}

@media (max-width: 768px) {

    .client-testimonial-wall {

        padding: 70px 24px;
    }

    .testimonial-heading h2 {

        font-size: 2.5rem;
    }

    .testimonial-marquee {

        height: 540px;
    }

    .testimonial-card {

        padding: 26px;
    }

    .testimonial-footer {

        flex-direction: column;

        align-items: flex-start;
    }

    .testimonial-rating {

        text-align: left;
    }

}