@import url(../iconfont/iconfont.css);
li{
    list-style: none;
}
:root {  
    --primary-color: #001e93;  
    --primary-light: rgba(0, 30, 147, 0.1);  
    --primary-dark: #001666;  
    --text-primary: #333;  
    --text-secondary: #666;  
    --white: #fff;  
}  

.container {  
    padding: 4rem 0rem;  
}  

main{
	margin-top: 8rem;
}

/* 关键更新：调整行和列的间距 */  
main .row {  
    display: flex;  
    flex-wrap: wrap;  
}  

main .row > * {  
    display: flex;  
}  

.forex-card {  
    width: 100%;  
    display: flex;  
}  

.card-wrapper {  
    background: var(--white);  
    border-radius: 2.5rem;  
    padding: 3rem 3.5rem;  
    box-shadow: 0 0.5rem 2rem rgba(0, 30, 147, 0.08);  
    transition: all 0.3s ease;  
    display: flex;  
    flex-direction: column;  
    border: 0.1rem solid rgba(0, 30, 147, 0.05);  
    width: 100%;  
}  

.card-wrapper:hover {  
    transform: translateY(-1rem);  
    box-shadow: 0 1rem 3rem rgba(0, 30, 147, 0.12);  
    border-color: rgba(0, 30, 147, 0.1);  
}  

.tool-icon {  
    width: 5.5rem;  
    height: 5.5rem;  
    background: var(--primary-light);  
    border-radius: 1.5rem;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    margin-bottom: 2rem;  
    transition: all 0.3s ease;  
    flex-shrink: 0;  
}  

.tool-icon i {  
    font-size: 2.5rem;  
    color: var(--primary-color);  
    transition: all 0.3s ease;  
}  

.card-wrapper:hover .tool-icon {  
    background: var(--primary-color);  
}  

.card-wrapper:hover .tool-icon i {  
    color: var(--white);  
}  

.content {  
    flex: 1;  
    display: flex;  
    flex-direction: column;  
}  

.title {  
    font-size: 2.2rem;  
    font-weight: 600;  
    margin-bottom: 1.2rem;  
    color: var(--primary-color);  
}  

.desc {  
    font-size: 1.6rem;  
    color: var(--text-secondary);  
    margin-bottom: 2rem;  
    flex: 1;  
    line-height: 1.5;  
}  

.action-btn {  
    background: var(--primary-color);  
    color: var(--white);  
    border: none;  
    border-radius: 1.2rem;  
    padding: 1.2rem 2.5rem;  
    font-size: 1.6rem;  
    cursor: pointer;  
    transition: all 0.3s ease;  
    width: fit-content;  
    margin-top: auto;  
}  

.action-btn:hover {  
    background: var(--primary-dark);  
    transform: translateY(-0.3rem);  
}  

/* 响应式调整 */  

@media (max-width: 992px) { 
	main{
		margin-top: 6rem;
	} 
    :root {  
        --gap-x: 1.2rem;  
        --gap-y: 2rem;  
    }  

    .container {  
        padding: 2rem 1rem;  
    }  

    .card-wrapper {  
        padding: 2rem;  
    }  
    
    .tool-icon {  
        width: 4.5rem;  
        height: 4.5rem;  
        margin-bottom: 1.5rem;  
    }  
    
    .title {  
        font-size: 1.8rem;  
        margin-bottom: 1rem;  
    }  
    
    .desc {  
        font-size: 1.4rem;  
        margin-bottom: 1.5rem;  
    }  
}