/*====================================================
                CASE STUDY
        Portfolio Case Study Layout
====================================================*/

:root{

    --container-width:1200px;

    --container-padding:40px;

    --section-space:90px;

    --card-radius:24px;

}

/* Vietnamese font support - inherit from style.css */
html[data-language="vi"],
html[lang="vi"] {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

html[data-language="vi"] h1,
html[data-language="vi"] h2,
html[data-language="vi"] h3,
html[data-language="vi"] h4,
html[data-language="vi"] h5,
html[data-language="vi"] h6,
html[lang="vi"] h1,
html[lang="vi"] h2,
html[lang="vi"] h3,
html[lang="vi"] h4,
html[lang="vi"] h5,
html[lang="vi"] h6 {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}



/*====================================================
                    RESET
====================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

.case-hero *,
.case-section *{

    box-sizing:border-box;

}



/*====================================================
                HERO
====================================================*/

.case-hero{

    max-width:var(--container-width);

    margin:70px auto;

    padding:0 var(--container-padding);

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.case-info{

    width:100%;

    text-align:left;

}

.case-company{

    display:inline-block;

    margin-bottom:18px;

    color:#f28a8a;

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

    text-transform:uppercase;

}

.case-info h1{

    margin-bottom:24px;

    font-size:58px;

    line-height:1.15;

    color:#222;

    text-align:left;

}

.case-info p{

    font-size:18px;

    line-height:1.9;

    color:#555;

    text-align:left;

}

.case-image{

    width:100%;

}

.case-image img{

    width:100%;

    display:block;

    border-radius:28px;

    box-shadow:0 20px 40px rgba(0,0,0,.08);

}



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

.case-section{

    max-width:var(--container-width);

    margin:var(--section-space) auto;

    padding:0 var(--container-padding);

    text-align:left;

}

.case-section h2{

    margin: 0 0 28px 0;

    padding: 0 0 0 20px;

    font-size: 40px;

    font-weight: 700;

    color: #222;

    text-align: left;

    width: 100%;

    border-left: 4px solid #f28a8a;

    letter-spacing: -0.5px;

}

.case-section h3{

    margin: 50px 0 0 0;

    padding: 0;

    font-size:20px;

    color:#222;

    text-align:left;

    width: 100%;

    font-weight:600;

}

/* Chỉ áp dụng cho đoạn mô tả ngay dưới heading */

.case-section > p{

    font-size:18px;

    line-height:1.9;

    color:#555;

    text-align:left;

    width: 100%;

}

.case-section + .case-section{

    margin-top:110px;

}
/*====================================================
                PROJECT SNAPSHOT
====================================================*/

.snapshot-grid{

    width:100%;

    display:grid;

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

    gap:60px;

    margin: 35px 0 0 0;

    padding: 0;

}

.snapshot-card{

    background:#fff;

    border-radius:24px;

    padding:30px;

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

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:flex-start;

    text-align:left;

    transition:.3s;

}

.snapshot-card:hover{

    transform:translateY(-6px);
    box-shadow:0 12px 30px rgba(242, 138, 138, 0.15);

}

.snapshot-card h4{

    width:100%;

    margin: 0 0 10px 0;

    padding: 0;

    color:#888;

    font-size:14px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.8px;

    text-align:left;

}

.snapshot-card p{

    width:100%;

    font-size:20px;

    font-weight:600;

    line-height:1.5;

    color:#222;

    text-align:left;

}



/*====================================================
            WORKFLOW
====================================================*/

.workflow-container{

    width:100%;

    margin: 35px 0 0 0;

    padding: 0;

}

.workflow-steps{

    display:grid;

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

    gap:30px;

}

.workflow-steps:has(> :nth-child(5)){

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

}

.workflow-step{

    display:flex;

    flex-direction:row;

    align-items:flex-start;

    gap:20px;

    text-align:left;

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:16px;

    padding:28px;

    transition:.3s;

}

.workflow-step:hover{

    border-color:#f28a8a;

    box-shadow:0 12px 30px rgba(242,138,138,0.15);

    transform:translateY(-6px);

}

.step-number{

    width:48px;

    height:48px;

    background:linear-gradient(135deg, #f28a8a 0%, #f78b89 100%);

    color:#fff;

    font-size:20px;

    font-weight:700;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    box-shadow:0 4px 12px rgba(242, 138, 138, 0.2);

    transition:.3s ease;

}

.workflow-step:hover .step-number{

    transform:scale(1.1);

    box-shadow:0 8px 20px rgba(242, 138, 138, 0.3);

}

.step-content{

    flex:1;

}

.step-content h3{

    font-size:18px;

    font-weight:600;

    color:#222;

    margin:0 0 8px 0;

    padding:0;

    line-height:1.4;

}

.step-content p{

    font-size:16px;

    color:#666;

    margin:0;

    padding:0;

    line-height:1.6;

}

/*====================================================
            CONTRIBUTIONS
====================================================*/

.contributions-grid{

    width:100%;

    display:grid;

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

    gap:30px;

    margin: 35px 0 0 0;

    padding: 0;

}

.contributions-card{

    background:#f9f9f9;

    border: 1px solid #e8e8e8;

    border-radius:16px;

    padding:28px;

    text-align:left;

    transition:.3s;

    width:100%;

}

.contributions-card:hover{

    border-color:#f28a8a;

    box-shadow:0 12px 30px rgba(242,138,138,0.15);

    transform:translateY(-6px);

}

.contributions-card h3{

    font-size:18px;

    font-weight:600;

    color:#222;

    margin:0 0 12px 0;

    padding:0;

    text-align:left;

    width:100%;

}

.contributions-card p{

    font-size:16px;

    line-height:1.7;

    color:#666;

    margin:0;

    padding:0;

    text-align:left;

    width:100%;

}

/*====================================================
                RESPONSIBILITY
====================================================*/

.responsibility-grid{

    width:100%;

    display:flex;

    flex-wrap:wrap;

    justify-content:flex-start;

    align-items:flex-start;

    align-content:flex-start;

    gap:16px;

    margin: 20px 0 0 0;

    padding: 0;

}

.responsibility-card{

    background:#fde8e8;

    border-radius:999px;

    padding:12px 24px;

    text-align:center;

    transition:.3s;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    white-space:nowrap;

}

.responsibility-card:hover{

    background:#f8dcdc;

    transform:translateY(-2px);

}

.responsibility-card h4{

    margin: 0;

    padding: 0;

    font-size:15px;

    font-weight:600;

    color:#d63384;

    text-align:center;

    line-height:1.4;

}

/*====================================================
            STRATEGIC CARDS GRID (4-Column)
====================================================*/

.strategic-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 35px 0 0 0;
    padding: 0;
    width: 100%;
    justify-items: start;
    align-items: start;
}

.strategic-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    padding: 28px;
    text-align: left;
    transition: all 0.3s ease;
    width: 100%;
    justify-self: start;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.strategic-card:hover {
    border-color: #f28a8a;
    box-shadow: 0 12px 30px rgba(242, 138, 138, 0.15);
    transform: translateY(-6px);
}

.strategic-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    text-align: left;
    width: 100%;
}

.strategic-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #666;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}



/*====================================================
                    TOOLS
====================================================*/

.case-section:has(.tool-list) {
    text-align: left !important;
}

.case-section:has(.tool-list) h2 {
    text-align: left !important;
}

.tools-grid{

    display:grid;

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

    gap:32px;

    margin:35px 0 0 0;

    padding:0;

    width:100%;

}

.tools-category{

    text-align:left;

}

.tools-category h4{

    font-size:16px;

    font-weight:600;

    color:#222;

    margin:0 0 18px 0;

    padding:0;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.tools-list{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:12px;

    margin:0;

    padding:0;

}

.tools-list span{

    display:inline-flex;

    align-items:center;

    justify-content:flex-start;

    height:48px;

    padding:0 16px;

    background:#fde8e8;

    border-radius:999px;

    font-size:15px;

    font-weight:500;

    color:#444;

    transition:.25s;

    box-shadow:0 2px 8px rgba(242,138,138,0.1);

}

.tools-list span:hover{

    background:#f28a8a;

    color:#fff;

    transform:translateY(-2px);

    box-shadow:0 6px 16px rgba(242,138,138,0.25);

}

.tool-list{

    width:100%;

    display:flex;

    flex-wrap:wrap;

    justify-content:flex-start;

    align-items:flex-start;

    align-content:flex-start;

    gap:20px;

    margin: 20px 0 0 0;

    padding: 0;

}

.tool-list span,
.tool-item{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:52px;

    padding:0 24px;

    background:#fde8e8;

    border-radius:999px;

    font-size:15px;

    font-weight:500;

    color:#444;

    transition:.25s;

    box-shadow:0 2px 8px rgba(242, 138, 138, 0.1);

}

.tool-list span:hover,
.tool-item:hover{

    background:#f28a8a;

    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 6px 16px rgba(242, 138, 138, 0.25);

}
/*====================================================
                    GALLERY
====================================================*/

.gallery-item{

    background:#fff;

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

    transition:.3s;

    display:flex;

    flex-direction:column;

    height:100%;

}

.gallery-item:hover{

    transform:translateY(-6px);

    box-shadow:0 12px 30px rgba(242,138,138,0.15);

}

.gallery-item h4{

    margin:0;

    padding:0;

    font-size:15px;

    font-weight:600;

    color:#888;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.gallery-item p{

    margin:0;

    padding:0;

}

.gallery-item a{

    display:inline-block;

    margin:18px 20px 22px;

    color:#5a73e8;

    text-decoration:none;

    font-weight:600;

}


.gallery-item img{

    width:100%;

    object-fit:cover;

    display:block;

    border-radius:18px;

    box-shadow:0 8px 20px rgba(0,0,0,.06);

    transition:.35s;

}


.gallery-item:hover img{

    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(0,0,0,.12);

}

.gallery-item h3{

    width:100%;

    margin: 0;

    padding: 20px 20px 12px;

    font-size:20px;

    font-weight:600;

    color:#222;

    text-align:left;

}

.gallery-item p{

    width:100%;

    margin: 0;

    padding: 0 20px 20px;

    font-size:15px;

    line-height:1.7;

    color:#666;

    text-align:left;

    flex-grow:1;

}

/*==========================
        FEATURED WORKS
==========================*/

.featured-works-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin: 35px 0 0 0;
    padding: 0;
    width: 100%;
}

.featured-work-item {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    transition: 0.3s;
}

.featured-work-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(242, 138, 138, 0.15);
}

.featured-work-header {
    padding: 24px;
    padding-bottom: 16px;
}

.featured-work-number {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #f28a8a;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.featured-work-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

.featured-work-image {
    width: 100%;
    height: 240px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f0f0f0 0%, #fafafa 100%);
}

.featured-work-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.featured-work-categories span {
    font-size: 13px;
    font-weight: 500;
    color: #f28a8a;
    background: #fde8e8;
    padding: 6px 12px;
    border-radius: 999px;
}

.featured-work-item p {
    font-size: 15px;
    line-height: 1.7;
    color: #666;
    margin: 0;
    padding: 20px 24px;
    text-align: left;
}

.featured-work-item a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 24px 20px 24px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #f28a8a 0%, #f78b89 100%);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(242, 138, 138, 0.2);
}

.featured-work-item a:hover {
    background: linear-gradient(135deg, #f08888 0%, #f68787 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(242, 138, 138, 0.3);
}

.gallery{

    display:grid;

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

    gap:28px;

    margin: 35px 0 0 0;

    padding: 0;

    width:100%;

}

.gallery-item{

    display:flex;

    flex-direction:column;

    height:100%;

}

.gallery-slider{

    margin: 35px 0 0 0;

    padding: 0;

}

.slider-container{

    position:relative;

    width:100%;

    overflow:hidden;

}

.slider-track{

    display:flex;

    gap:0;

    overflow-x:hidden;

    scroll-behavior:smooth;

    transition:transform 0.5s ease-in-out;

}

.slider-item{

    flex:0 0 100%;

    overflow:hidden;

    border-radius:18px;

}

.slider-item img{

    width:100%;

    height:400px;

    display:block;

    object-fit:cover;

    border-radius:18px;

    box-shadow:0 8px 20px rgba(0,0,0,.06);

}

.mobile-slider-container .slider-item img{

    height:100%;

}

/* Mobile Experience Images in Gallery Item */
.gallery-item-mobile-exp{

    display:flex;

    flex-direction:column;

}

.mobile-experience-images{

    width:100%;

    display:flex;

    gap:12px;

    margin:0;

    padding:0;

    overflow-x:auto;

    scroll-behavior:smooth;

}

.mobile-experience-images img{

    flex:0 0 calc(100% - 12px);

    border-radius:12px;

}

.mobile-experience-images img{

    width:100%;

    height:auto;

    aspect-ratio:1024/1500;

    object-fit:cover;

    border-radius:12px;

    box-shadow:0 8px 20px rgba(0,0,0,.06);

}

.slider-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    background:rgba(0,0,0,0.6);

    color:#fff;

    border:none;

    width:44px;

    height:44px;

    border-radius:50%;

    font-size:24px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:10;

    transition:all 0.3s ease;

}

.slider-btn:hover{

    background:rgba(0,0,0,0.8);

}

.slider-btn-prev{

    left:12px;

}

.slider-btn-next{

    right:12px;

}

.slider-dots{

    display:flex;

    justify-content:center;

    gap:8px;

    margin-top:16px;

    padding:0;

}

.dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#ddd;

    cursor:pointer;

    transition:all 0.3s ease;

}

.dot.active{

    background:#5a73e8;

    width:30px;

    border-radius:5px;

}

.gallery img{

    width:100%;

    height:auto;

    display:block;

    object-fit:contain;

    border-radius:18px;

    border:1px solid #eee;

    background:#fff;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

    transition:.35s;

    cursor:pointer;

}

.gallery img:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(0,0,0,.12);

}
/*====================================================
            IMAGE SPACING
====================================================*/

.case-image,

.gallery{

    width:100%;

}
/*====================================================
                DESKTOP LARGE
====================================================*/

@media (min-width:1441px){

:root{

    --container-width:1280px;

}

.case-info h1{

    font-size:64px;

}

.case-section h2{

    margin: 0 0 28px 0;

    padding: 0 0 0 20px;

    font-size: 40px;

    font-weight: 700;

    color: #222;

    text-align: left;

    width: 100%;

    border-left: 4px solid #f28a8a;

    letter-spacing: -0.5px;

}

}



/*====================================================
                    LAPTOP
====================================================*/

@media (max-width:1200px){

:root{

    --container-width:1000px;

    --container-padding:36px;

}

.case-hero{

    gap:50px;

}

.case-info h1{

    font-size:52px;

}

.case-section h2{

    margin: 0 0 28px 0;

    padding: 0 0 0 20px;

    font-size: 40px;

    font-weight: 700;

    color: #222;

    text-align: left;

    width: 100%;

    border-left: 4px solid #f28a8a;

    letter-spacing: -0.5px;

}

.snapshot-grid{

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

    gap:72px;

}

.strategic-cards-grid{

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

    gap:24px;

}

.gallery{

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

}

}



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

@media (max-width:992px){

:root{

    --container-padding:30px;

}

.case-hero{

    grid-template-columns:1fr;

    gap:40px;

    align-items:flex-start;

}

.case-image{

    order:-1;

}

.case-info{

    width:100%;

}

.case-info h1{

    font-size:46px;

}

.workflow-steps{

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

    gap:28px;

}

.snapshot-grid{

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

    gap:48px;

}

.contributions-grid{

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

    gap:24px;

}

.strategic-cards-grid{

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

    gap:20px;

}

.tools-grid{

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

    gap:28px;

}

.responsibility-grid{

    gap:12px;

}

.responsibility-card{

    padding:10px 20px;

}

.responsibility-card h4{

    font-size:14px;

}

.gallery{

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

}

/* Tablet - Featured Works Grid */
.featured-works-grid {
    grid-template-columns: 1fr;
}

}



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

@media (max-width:768px){

:root{

    --container-padding:24px;

    --section-space:70px;

}

.slider-item img{

    height:280px;

}

.mobile-slider-container{

    aspect-ratio:680/1000;

}

.case-hero,

.case-section{

    padding-left:var(--container-padding);

    padding-right:var(--container-padding);

}

.case-hero{

    margin:35px auto;

    gap:28px;

}

.case-info h1{

    font-size:40px;

    margin-bottom:18px;

}

.case-info p{

    font-size:16px;

    line-height:1.8;

}

.case-section{

    margin:var(--section-space) auto;

}

.case-section h2{

    margin: 0 0 28px 0;

    padding: 0 0 0 20px;

    font-size: 40px;

    font-weight: 700;

    color: #222;

    text-align: left;

    width: 100%;

    border-left: 4px solid #f28a8a;

    letter-spacing: -0.5px;

}

.case-section h3{

    margin-top:40px;

    font-size:18px;

}

.case-section > p{

    font-size:16px;

}

.snapshot-grid{

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

    gap:32px;

}

.snapshot-card{

    padding:24px;

}

.snapshot-card h4{

    font-size:13px;

}

.snapshot-card p{

    font-size:18px;

}

.workflow-steps{

    grid-template-columns:1fr;

    gap:24px;

}

.workflow-step{

    padding:24px;

    gap:16px;

}

.step-number{

    width:44px;

    height:44px;

    font-size:18px;

    margin-top:2px;

}

.step-content h3{

    font-size:17px;

}

.step-content p{

    font-size:15px;

}

.contributions-grid{

    grid-template-columns:1fr;

    gap:20px;

}

.contributions-card{

    padding:24px;

}

.contributions-card h3{

    font-size:18px;

}

.contributions-card p{

    font-size:15px;

}

.responsibility-grid{

    grid-template-columns:1fr;

    gap:20px;

}

.responsibility-card{

    padding:26px;

}

.responsibility-card h3{

    font-size:22px;

}

.responsibility-card p{

    font-size:16px;

}

.tool-list{

    gap:16px;

}

.tool-list span,
.tool-item{

    height:50px;

    padding:0 24px;

    font-size:15px;

}

.gallery-desktop{

    display:none !important;

}

.gallery{

    grid-template-columns:1fr;

    gap:22px;

}

.gallery-item h3{

    font-size:20px;

}

.gallery-item p{

    font-size:15px;

}

}



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

@media (max-width:480px){

:root{

    --container-padding:18px;

}

.case-info h1{

    font-size:34px;

}

.case-section h2{

    margin: 0 0 28px 0;

    padding: 0 0 0 20px;

    font-size: 40px;

    font-weight: 700;

    color: #222;

    text-align: left;

    width: 100%;

    border-left: 4px solid #f28a8a;

    letter-spacing: -0.5px;

}

.case-section h3{

    margin-top:35px;

    font-size:16px;

}

.case-section > p{

    font-size:15px;

}

.snapshot-card{

    padding:22px;

}

.responsibility-grid{

    gap:10px;

}

.responsibility-card{

    padding:9px 18px;

}

.responsibility-card h4{

    font-size:13px;

}

.gallery{

    gap:16px;

}

.tool-list{

    gap:16px;

}

.tool-list span{

    height:40px;

    padding:0 16px;

    font-size:13px;

}

}
.project-gallery{

    margin: 35px 0 0 0;

    padding: 0;

}

.project-set{

    margin-top:70px;

}

.project-set:first-child{

    margin-top:35px;

}

.project-set h3{

    margin: 0 0 25px 0;

    padding: 0;

    font-size:28px;

    text-align:left;

}

.project-set a{

    display:inline-block;

    margin-top:25px;

    color:#5a73e8;

    font-weight:600;

    text-decoration:none;

}

.project-set a:hover{

    transform:translateX(5px);

}
/*====================================================
                PROPOSAL PROJECTS
====================================================*/

.proposal-grid{

    display:grid;

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

    gap:32px;

    margin: 35px 0 0 0;

    padding: 0;

}

.proposal-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

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

    transition:.3s;

}

.proposal-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.10);

}

/* Background giống mockup PowerPoint */

.proposal-image{

    background:#f6f6f6;

    padding:32px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.proposal-image img{

    width:100%;

    max-width:100%;

    display:block;

    aspect-ratio:16/9;

    object-fit:cover;

    background:#fff;

    border-radius:16px;

    border:1px solid #ececec;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.proposal-content{

    padding:28px;

    text-align:left;

}

.proposal-content h3{

    margin: 0 0 14px 0;

    padding: 0;

    font-size:24px;

    color:#222;

    text-align:left;

}

.proposal-content p{

    margin:0 0 22px;

    color:#555;

    line-height:1.8;

}

.proposal-content a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#5a73e8;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.proposal-content a:hover{

    color:#f78b89;

    transform:translateX(5px);

}



/*====================================================
            OBJECTIVES, RESULTS, RESEARCH
====================================================*/

.objectives-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin: 35px 0 0 0;
    padding: 0;
    width: 100%;
    justify-items: start;
    align-items: start;
}

.objectives-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    padding: 28px;
    text-align: left;
    transition: 0.3s;
    width: 100%;
    justify-self: start;
}

.objectives-card:hover {
    border-color: #f28a8a;
    box-shadow: 0 12px 30px rgba(242, 138, 138, 0.15);
    transform: translateY(-6px);
}

.objectives-card p {
    font-size: 16px;
    line-height: 1.7;
    color: #666;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

.objectives-card p::before {
    content: "★ ";
    color: #f28a8a;
    font-weight: 600;
    margin-right: 12px;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin: 35px 0 0 0;
    padding: 0;
    width: 100%;
    justify-items: start;
    align-items: start;
}

.results-card {
    background: linear-gradient(135deg, #fff9f8 0%, #fff 100%);
    border: 2px solid #f28a8a;
    border-radius: 16px;
    padding: 32px;
    text-align: left;
    transition: 0.3s;
    width: 100%;
    justify-self: start;
    position: relative;
}


.results-card:hover {
    border-color: #f28a8a;
    box-shadow: 0 12px 30px rgba(242, 138, 138, 0.2);
    transform: translateY(-6px);
}

.results-card p {
    font-size: 18px;
    line-height: 1.8;
    color: #555;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
    font-weight: 500;
}

.results-card p::before {
    content: "✓ ";
    color: #f28a8a;
    font-weight: 700;
    margin-right: 12px;
    font-size: 20px;
}

/*====================================================
            RESEARCH & INSIGHTS
====================================================*/

.research-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin: 35px 0 0 0;
    padding: 0;
    width: 100%;
    justify-items: start;
    align-items: start;
}

.research-card {
    background: #f9f9f9;
    border-radius: 16px;
    padding: 28px;
    text-align: left;
    width: 100%;
    justify-self: start;
}

.research-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    margin: 0 0 15px 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

.research-card p {
    font-size: 16px;
    line-height: 1.8;
    color: #666;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

.research-list {
    list-style: none;
    margin: 12px 0 0 0;
    padding: 0;
}

.research-list li {
    font-size: 15px;
    line-height: 1.8;
    color: #666;
    margin: 0 0 10px 0;
    padding: 0 0 0 24px;
    text-align: left;
    position: relative;
}

.research-list li::before {
    content: "•";
    color: #f28a8a;
    font-weight: 700;
    position: absolute;
    left: 0;
    font-size: 18px;
}

.insight-item {
    margin-top: 24px;
}

.insight-item:first-of-type {
    margin-top: 0;
}

.insight-item h4 {
    font-size: 15px;
    font-weight: 600;
    color: #f28a8a;
    margin: 0 0 8px 0;
    padding: 0;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.insight-item p {
    font-size: 15px;
    line-height: 1.7;
    color: #666;
    margin: 0;
    padding: 0;
    text-align: left;
}

.research-card:hover {
    background: #f0f0f0;
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(242, 138, 138, 0.15);
}

/*====================================================
            STRATEGY
====================================================*/

.strategy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin: 35px 0 0 0;
    padding: 0;
    width: 100%;
    justify-items: start;
    align-items: start;
}

.strategy-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    padding: 28px;
    text-align: left;
    transition: 0.3s;
    width: 100%;
    justify-self: start;
}

.strategy-card:hover {
    background: #f0f0f0;
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(242, 138, 138, 0.15);
}

.strategy-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin: 0 0 12px 0;
    padding: 0;
    line-height: 1.6;
    text-align: left;
    width: 100%;
}

.strategy-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #666;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

/*====================================================
            EXECUTION
====================================================*/

.execution-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin: 35px 0 0 0;
    padding: 0;
    width: 100%;
    justify-items: start;
    align-items: start;
}

.execution-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    padding: 28px;
    text-align: left;
    transition: 0.3s;
    width: 100%;
    justify-self: start;
}

.execution-card:hover {
    border-color: #f28a8a;
    box-shadow: 0 12px 30px rgba(242, 138, 138, 0.15);
    transform: translateY(-6px);
}

.execution-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin: 0 0 12px 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

.execution-card p {
    font-size: 16px;
    line-height: 1.7;
    color: #666;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

/*====================================================
            CAMPAIGN ECOSYSTEM
====================================================*/

.ecosystem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin: 35px 0 0 0;
    padding: 0;
    width: 100%;
    justify-items: start;
    align-items: start;
}

.ecosystem-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    padding: 28px;
    text-align: left;
    transition: 0.3s;
    width: 100%;
    justify-self: start;
}

.ecosystem-card:hover {
    border-color: #f28a8a;
    box-shadow: 0 12px 30px rgba(242, 138, 138, 0.15);
    transform: translateY(-6px);
}

.ecosystem-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin: 0 0 12px 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

.ecosystem-card p {
    font-size: 16px;
    line-height: 1.7;
    color: #666;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

/*====================================================
            KEY LEARNINGS
====================================================*/

.learnings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
    margin: 35px 0 0 0;
    padding: 0;
    width: 100%;
    justify-items: start;
    align-items: start;
}

.learning-card {
    background: #f9f9f9;
    border-radius: 16px;
    padding: 30px;
    text-align: left;
    transition: 0.3s;
    width: 100%;
    justify-self: start;
}

.learning-card:hover {
    background: #f0f0f0;
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(242, 138, 138, 0.15);
}

.learning-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin: 0 0 15px 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

.learning-card p {
    font-size: 16px;
    line-height: 1.8;
    color: #666;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

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

@media(max-width:768px){

.proposal-grid{

    grid-template-columns:1fr;

    gap:24px;

    margin-top:28px;

}

.proposal-image{

    padding:24px;

}

.proposal-image img{

    width:80%;

}

.proposal-content{

    padding:22px;

}

.proposal-content h3{

    font-size:21px;

}

.proposal-content p{

    font-size:15px;

    line-height:1.8;

}

/* Objectives Grid Mobile */
.objectives-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}

.objectives-card {
    padding: 20px;
}

/* Results Grid Mobile */
.results-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}

.results-card {
    padding: 24px;
}

.objectives-card p {
    font-size: 15px;
}

/* Research Grid Mobile */
.research-grid {
    grid-template-columns: 1fr;
    gap: 24px;
}

/* Strategy Grid Mobile */
.strategy-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}

.strategy-card {
    padding: 20px;
}

/* Featured Works Grid Mobile */
.featured-works-grid {
    grid-template-columns: 1fr;
    gap: 24px;
}

.featured-work-header {
    padding: 20px 20px 12px;
}

.featured-work-header h3 {
    font-size: 18px;
}

.featured-work-image {
    height: 200px;
}

.featured-work-categories {
    padding: 16px 20px;
}

.featured-work-item p {
    padding: 16px 20px;
}

.strategy-card h3 {
    font-size: 16px;
}

/* Execution Grid Mobile */
.execution-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}

.execution-card {
    padding: 20px;
}

.execution-card h3 {
    font-size: 16px;
}

.execution-card p {
    font-size: 14px;
}

/* Ecosystem Grid Mobile */
.ecosystem-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}

.ecosystem-card {
    padding: 20px;
}

.ecosystem-card h3 {
    font-size: 16px;
}

.ecosystem-card p {
    font-size: 14px;
}

/* Learnings Grid Mobile */
.learnings-grid {
    grid-template-columns: 1fr;
    gap: 24px;
}

.learning-card {
    padding: 20px;
}

.learning-card h3 {
    font-size: 16px;
}

.learning-card p {
    font-size: 14px;
}

/* Strategic Cards Grid Mobile */
.strategic-cards-grid {
    grid-template-columns: 1fr;
    gap: 18px;
}

.strategic-card {
    padding: 20px;
}

.strategic-card h3 {
    font-size: 16px;
}

.strategic-card p {
    font-size: 14px;
}

/* Tools Grid Mobile */
.tools-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}

.tools-category h4 {
    font-size: 14px;
    margin-bottom: 14px;
}

.tools-list span {
    font-size: 14px;
    height: 44px;
    padding: 0 14px;
}

}
/* Tools Container */
.tools-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin: 35px 0 0 0;
    padding: 0;
    width: 100%;
    text-align: left;
}

.tools-group h3 {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    margin: 0 0 18px 0;
    padding: 0;
    line-height: 1.6;
}

.tools-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tool-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    text-align: center;
    transition: 0.3s;
}

.tool-card:hover {
    background: #f8f8f8;
    border-color: #f28a8a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(242, 138, 138, 0.1);
}

/* Tools Container Mobile */
@media (max-width: 768px) {
    .tools-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .tools-group h3 {
        font-size: 14px;
        margin-bottom: 14px;
    }

    .tool-card {
        padding: 12px 16px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .tools-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Section Title Hover Effect */
.case-section h2 {
    transition: padding-left 0.3s ease, border-color 0.3s ease;
}

.case-section h2:hover {
    padding-left: 24px;
    border-left-color: #e87a7a;
}

/* Section Title Responsive */
@media (max-width: 1024px) {
    .case-section h2 {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .case-section h2 {
        font-size: 28px;
        padding-left: 16px;
        border-left-width: 3px;
    }
}

@media (max-width: 480px) {
    .case-section h2 {
        font-size: 24px;
        padding-left: 14px;
        margin-bottom: 20px;
    }
}

/*====================================================
        TOOLS ITEMS INLINE
====================================================*/

.tools-items-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 35px 0 0 0;
    padding: 0;
    width: 100%;
}

.tools-items-inline .tool-card {
    background: #fde8e8;
    border: none;
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    color: #444;
    text-align: center;
    transition: 0.25s;
    box-shadow: 0 2px 8px rgba(242, 138, 138, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.tools-items-inline .tool-card:hover {
    background: #f28a8a;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(242, 138, 138, 0.25);
}

@media (max-width: 768px) {
    .tools-items-inline {
        gap: 10px;
    }
    
    .tools-items-inline .tool-card {
        padding: 8px 16px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .tools-items-inline {
        gap: 8px;
    }
    
    .tools-items-inline .tool-card {
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* ====================================================
   EMAIL JOURNEY INFOGRAPHIC STYLES
==================================================== */

.journey-header {
    text-align: center;
    margin-bottom: 50px;
}

.journey-header h3 {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.journey-header p {
    font-size: 16px;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

/* Desktop Timeline Layout */
.email-journey.desktop-view {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 50px;
    align-items: start;
    margin-bottom: 60px;
}

.journey-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
}

.journey-stage::after {
    content: '→';
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #ddd;
    animation: pulse-horizontal 2s infinite;
    z-index: 10;
    background: white;
    padding: 0 4px;
}

.journey-stage:last-child::after {
    display: none;
}

/* Hide arrows from placeholder and last visible card */
.journey-stage[style*="visibility: hidden"]::after {
    display: none;
}

.email-journey.desktop-view.browse-abandonment-journey .journey-stage:nth-last-of-type(2)::after,
.email-journey.desktop-view.abandoned-cart-journey .journey-stage:nth-last-of-type(2)::after {
    display: none;
}

.stage-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #999;
    text-align: center;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Email Cards */
.email-card {
    width: 100%;
    background: white;
    border: 2px solid #e8e8e8;
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.email-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #5a73e8, #7c8df0);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.email-card:hover {
    border-color: #5a73e8;
    box-shadow: 0 8px 24px rgba(90, 115, 232, 0.12);
    transform: translateY(-6px);
}

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

/* Card Colors */
.email-card-1 {
    border-top: 4px solid #FF6B9D;
}

.email-card-2 {
    border-top: 4px solid #C44569;
}

.email-card-3 {
    border-top: 4px solid #F8B500;
}

.email-card-4 {
    border-top: 4px solid #5a73e8;
}

.email-card-5 {
    border-top: 4px solid #00D4FF;
}

.email-card-6 {
    border-top: 4px solid #00B859;
}

.email-card-7 {
    border-top: 4px solid #E85D75;
}

.email-icon {
    font-size: 28px;
    line-height: 1;
}

.email-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.3px;
}

.email-goal {
    font-size: 12px;
    color: #888;
    font-weight: 500;
}

.email-cta {
    font-size: 12px;
    font-weight: 600;
    color: #5a73e8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}



/* Mobile View */
.email-journey-mobile.mobile-view {
    display: none;
}

.mobile-journey-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mobile-journey-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.stage-badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    min-width: 90px;
    text-align: center;
    flex-shrink: 0;
}

.stage-badge.awareness {
    background: rgba(255, 107, 157, 0.1);
    color: #FF6B9D;
}

.stage-badge.consideration {
    background: rgba(196, 69, 105, 0.1);
    color: #C44569;
}

.stage-badge.education {
    background: rgba(248, 181, 0, 0.1);
    color: #F8B500;
}

.stage-badge.trust {
    background: rgba(90, 115, 232, 0.1);
    color: #5a73e8;
}

.stage-badge.conversion {
    background: rgba(0, 212, 255, 0.1);
    color: #00D4FF;
}

.stage-badge.retention {
    background: rgba(0, 184, 89, 0.1);
    color: #00B859;
}

.stage-badge.reengagement {
    background: rgba(232, 93, 117, 0.1);
    color: #E85D75;
}

.mobile-journey-item .email-card {
    flex: 1;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .email-journey.desktop-view {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .email-journey.desktop-view.browse-abandonment-journey,
    .email-journey.desktop-view.abandoned-cart-journey {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .email-journey.desktop-view {
        display: none;
    }

    .email-journey-mobile.mobile-view {
        display: block;
    }

    .journey-header h3 {
        font-size: 24px;
    }

    .journey-header p {
        font-size: 14px;
    }

    .email-card {
        min-height: auto;
        padding: 16px 12px;
        gap: 8px;
    }

    .email-icon {
        font-size: 24px;
    }

    .email-title {
        font-size: 13px;
    }

    .email-goal {
        font-size: 11px;
    }

    .email-cta {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .journey-header h3 {
        font-size: 20px;
    }

    .stage-badge {
        min-width: 80px;
        font-size: 10px;
    }

    .mobile-journey-item {
        gap: 10px;
    }
}

/* Journey Subtitle */
.journey-header .journey-subtitle {
    font-size: 15px;
    line-height: 1.6;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
}

/* Browse Abandonment Journey - Same size cards as Welcome Series, centered */
.email-journey.desktop-view.browse-abandonment-journey {
    grid-template-columns: repeat(8, 1fr);
    gap: 50px;
    align-items: start;
    width: fit-content;
    margin: 0 auto;
}





/* Browse Abandonment Journey Header - Left aligned like case-section h2 */
.journey-header.browse-abandonment-header {
    text-align: left;
    margin-bottom: 50px;
}

.journey-header.browse-abandonment-header h3 {
    text-align: left;
    padding-left: 20px;
}

.journey-header.browse-abandonment-header .journey-subtitle {
    text-align: center;
    max-width: 800px;
    margin: 12px auto 0 auto;
}

/* Browse Abandonment Card Colors */
.email-card-ba-1 {
    border-top: 4px solid #9B59B6;
}

.email-card-ba-2 {
    border-top: 4px solid #3498DB;
}

.email-card-ba-3 {
    border-top: 4px solid #E74C3C;
}

.email-card-ba-4 {
    border-top: 4px solid #F39C12;
}

.email-card-ba-5 {
    border-top: 4px solid #27AE60;
}

.email-card-ba-6 {
    border-top: 4px solid #C0392B;
}

/* Abandoned Cart Journey - 6 cards centered */
.email-journey.desktop-view.abandoned-cart-journey {
    grid-template-columns: repeat(6, 1fr);
    gap: 50px;
    align-items: start;
    width: fit-content;
    margin: 0 auto;
}

/* Abandoned Cart Card Colors */
.email-card-ac-1 {
    border-top: 4px solid #F39C12;
}

.email-card-ac-2 {
    border-top: 4px solid #3498DB;
}

.email-card-ac-3 {
    border-top: 4px solid #27AE60;
}

.email-card-ac-4 {
    border-top: 4px solid #C0392B;
}

/* Mobile Badge Colors for Abandoned Cart */
.stage-badge.reminder {
    background: rgba(243, 156, 18, 0.1);
    color: #F39C12;
}

.stage-badge.incentive {
    background: rgba(39, 174, 96, 0.1);
    color: #27AE60;
}

.stage-badge.urgency {
    background: rgba(192, 57, 43, 0.1);
    color: #C0392B;
}

/* Mobile Badge Colors for Browse Abandonment */
.stage-badge.interest {
    background: rgba(155, 89, 182, 0.1);
    color: #9B59B6;
}

.stage-badge.guidance {
    background: rgba(231, 76, 60, 0.1);
    color: #E74C3C;
}

.stage-badge.reminder {
    background: rgba(39, 174, 96, 0.1);
    color: #27AE60;
}

.stage-badge.reengagement {
    background: rgba(192, 57, 43, 0.1);
    color: #C0392B;
}