#solutions_index #hero_section {padding: 120px 0;}
#solutions_index .hero_content {text-align: center; color: #000000;}
#solutions_index .hero_title {font-size: 60px; font-weight: bold; margin-bottom: 40px; color: #000000;}
#solutions_index .hero_subtitle {font-size: 24px; color: #2a3344; margin-bottom: 40px;}
#solutions_index .hero_buttons {display: flex; justify-content: center; gap: 20px; padding: 20px;}
#solutions_index .hero_image {margin-top: 40px; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.06); line-height: 0;}
#solutions_index .hero_image img {max-width: 100%; height: auto; display: block;}

#solutions_index .btn_primary {display: inline-block; padding: 15px 30px; background-color: #ffb32f; color: #000000; text-decoration: none; border-radius: 7px; font-weight: 600; font-size: 16px; transition: all 0.3s ease;}
#solutions_index .btn_primary:hover {background-color: #e6a02a; transform: translateY(-2px);}

#solutions_index .btn_secondary {display: inline-block; padding: 15px 30px; background-color: #ffffff; color: #023df3; text-decoration: none; border: 2px solid #023df3; border-radius: 7px; font-weight: 600; font-size: 16px; transition: all 0.3s ease;}
#solutions_index .btn_secondary:hover {background-color: #023df3; color: #ffffff;}

#solutions_index #key_solutions {padding: 80px 0 0 0; background-color: #ffffff;}
#solutions_index .section_title {font-size: 42px; font-weight: bold; text-align: center; color: #111827;}

#solutions_index .solution_section {padding: 80px 0; background-color: #ffffff;}
#solutions_index .alt_bg {background-color: #f6f9fe;}
#solutions_index .solution_container {display: flex; align-items: center; gap: 60px; flex-direction: row;}
#solutions_index .solution_container.reverse .solution_image {order: 1;}
#solutions_index .solution_container.reverse .solution_content {order: 2;}
#solutions_index .solution_content {flex: 4;}
#solutions_index .solution_image {flex: 5; box-shadow: 0 6px 20px rgba(0,0,0,0.06);}
#solutions_index .solution_image img {max-width: 100%; height: auto;}

#solutions_index .solution_section .solution_image {box-shadow: none;}
#solutions_index .solution_section .solution_image {box-shadow: none;}

#solutions_index .solution_title {font-size: 48px; font-weight: bold; color: #000000; margin-bottom: 15px;}
#solutions_index .solution_description {font-size: 24px; color: #000000; line-height: 1.6; margin-bottom: 30px;}

#solutions_index .feature_list {list-style: none; padding: 0; margin: 30px 0;}
#solutions_index .feature_item {position: relative; padding-left: 35px; margin-bottom: 18px; font-size: 16px; color: #3b4659;}
#solutions_index .feature_item:after {content: ""; background: url('/frontend/web/images/solutions/icon-arrow.png') no-repeat; background-size: 20px 20px; width: 20px; height: 20px; display: inline-block; position: absolute; left: 0; top: 1px;}

#solutions_index .features_grid {display: grid; margin-top: 80px; grid-template-columns: repeat(4, 1fr); gap: 40px;}
#solutions_index .feature_card {text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.06); border-radius: 15px; padding: 55px 35px;}
#solutions_index .feature_icon {width: 86px; height: 86px; background-color: #0f3fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 50px auto;}
#solutions_index .feature_icon img {width: 44px; height: 40px;object-fit: contain;}
#solutions_index .feature_title {font-size: 20px; color: #111827; margin-bottom: 15px;}
#solutions_index .feature_desc {font-size: 16px; color: #6b7280; line-height: 1.6;}

@media (max-width: 1024px) {
    #solutions_index .solution_container {flex-direction: column; gap: 40px;}
    #solutions_index .solution_container.reverse {flex-direction: column;}
    #solutions_index .features_grid {grid-template-columns: repeat(2, 1fr);}
    #solutions_index .hero_title {font-size: 36px;}
    #solutions_index .solution_title {font-size: 30px;}
    #solutions_index .section_title {font-size: 36px;}
    #solutions_index .hero_buttons {flex-direction: column; align-items: center;}
}

@media (max-width: 768px) {
    #solutions_index .features_grid {grid-template-columns: 1fr;}
    #solutions_index .hero_title {font-size: 28px;}
    #solutions_index .solution_title {font-size: 24px;}
    #solutions_index .section_title {font-size: 28px;}
    #solutions_index .solution_section {padding: 60px 0;}
    #solutions_index #hero_section {padding: 80px 0;}
    #solutions_index .solution_container {gap: 30px;}
    #solutions_index .hero_buttons {gap: 15px;}
    #solutions_index .btn_primary, #solutions_index .btn_secondary {padding: 12px 25px;}
}