.content_tabs_section {
padding: 60px 0;
background: linear-gradient(-106deg, #F2F2F2 0%, #FFFFFF 100%);
& .title_wrapper { 
display: flex;
flex-direction: column;
max-width: 790px;
}
& .section_title {
color: #1E1B4B;
font-size: 40px;
margin-bottom: 20px;
line-height: 1.2;
}
& .section_content {
color: #4D4D4D;
margin-bottom: 40px;
}
& .content_tabs_wrapper {
display: flex;
gap: 80px;
margin-top: 40px;
background: #FFFFFF;
box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.15);
border-radius: 5px;
padding: 40px;
align-items: center;
@media (max-width: 991px) {
gap: 20px;
}
& .tabs_navigation {
width: 40%;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 10px;
@media (max-width: 991px) {
width: 100%;
}
& .tab_link {
width: 100%;
text-align: left;
padding: 15px 20px;
background: #fff;
border: none;
font-size: 18px;
color: #00007C;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
text-decoration: none;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #DBDBDB;
&:last-child {
border:none;
}
&:hover {
background: #fff;
color: #F64A22;
box-shadow: 0 4px 12px rgba(246, 74, 34, 0.1);
& .arrow_icon path {
fill: #F64A22!important;
}
}
&.active {
background: #fff;
color: #F64A22;
font-weight: 600;
box-shadow: 0 4px 12px rgba(246, 74, 34, 0.1);
& .arrow_icon path {
fill: #F64A22!important;
}
}
& .arrow_icon {
transition: all 0.3s ease;
fill: #00007C;
}
}
& .content_bottom {
margin-top: 15px;
margin-bottom: 15px;
padding-left: 20px;
}
} & .tabs_content {
flex-grow: 1; 
width: 60%;
@media (max-width: 991px) {
width: 100%;
}
& .tab_content {
display: none;
opacity: 0;
transform: translateX(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
&.active {
display: block;
opacity: 1;
transform: translateX(0);
}
& .content_tab {
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 40px;
@media (max-width: 991px) {
flex-direction: column;
gap: 0px;
}
& .tab_image {
width: 40%;
height: 293px;
@media (max-width: 991px) {
height: auto;
margin-bottom: 1rem;
}
& img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
& .tab_content_wrapper {
width: 60%;
@media (max-width: 991px) {
width: 100%;
}
}
& .tab_title {
font-size: 28px;
color: #00007C;
margin: 25px 0 15px;
@media (max-width: 1024px) {
font-size: 24px!important;
}
}
& .tab_content_text {
color: #666;
line-height: 1.6;
font-size: 16px;
}
}
}
}
}
&  a.button.button-primary {
color: var(--white) !important;
background: var(--secondary) !important;
font-weight: bold;
font-size: 14px;
border:none;
box-shadow: none;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
@media (max-width: 991px) {
margin-top: 0!important;
}
&:hover {   
background: var(--primary) !important;
}
.phone_icon {
margin-right: 1rem;
}
span {
font-size: 14px;
font-weight: bold;
color: var(--white) !important;
@media (max-width: 400px) {
font-size: 12px!important;
}
}
}
}
@media (max-width: 1024px) {
& .tabs_navigation {
width: 30%;
}
} @media (max-width: 991px) {
.content_tabs_wrapper {
flex-direction: column;
gap: 30px;
& .tabs_navigation {
width: 100%;
& .tab_link {
padding: 12px 15px;
font-size: 16px;
}
}
}
.section_title {
font-size: 32px;
}
& .content_tab {
align-items: flex-start!important;
}
}
@media (max-width: 767px) {
.content_tabs_section {
padding: 40px 0;
& .section_title {
font-size: 28px;
}
& .tab_title {
font-size: 24px;
}
}
}