.modal--container {

    display: flex;

    gap: 20px;

    justify-content: space-between;

    border-radius: 16px;

    overflow: hidden;

}



.modal--left

{

    width: 30%;

}



.modal--right 

{

    width: calc(100% - 30%);

}

 

 

.model--content-head {

    display: flex;

    gap: 20px;

    justify-content: space-between;

}



.model--content-thumbnail {

    background: red;
position: relative;
    width: 60%;

    border-radius: 15px;

    padding: 20px;

    display: flex;

    align-items: end;

    gap: 10px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 220px;
}

.model--content-data,
.model--content-icon
{
    z-index: 9;
}


.model--content-data p
{
    font-size: 14px;
    opacity: .8;
}
.model--content-icon svg {
    width: 40px;
    height: 40px;
}

.model--content-thumbnail h4
{
    margin: 0;
}

.modal--techs {

    width: calc(100% - 60%);
    padding: 0 20px;

}

.modal--acc-title

{
    font-family: var(--e-global-typography-secondary-font-family);
    margin: 0;

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 20px;

    font-weight: 600;

}

.modal--techs svg 

{

    width: 20px;

    height: 20px;

}



ul {

    padding: 0;

   

    list-style: none;

}



.modal--feature-items {

    padding: 16px;
    border-radius: 16px;
    background: #fff;

}

.modal--tab:last-child {
    border-bottom-left-radius: 20px;
}

.modal--features {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;

}



.modal--feature-items ul {

    padding: 0;
    padding-left: 24px;
    list-style:disc;
}

.modal--feature-items ul li
{
     font-family: var(--e-global-typography-primary-font-family);;
      font-size: 14px;
      font-weight: 500;
          margin-bottom: 5px;
}


.modal--techs li {
   
    background: #020618;
    padding: 6px 14px;
    max-width: max-content;
    border-radius: 7px;
    font-size: 14px;
    color: #fff;
    line-height: normal;
    font-weight: 500;
}


.modal--tab-content

{
    flex-direction: column;
    gap: 20px;

}



.modal--left ul {

    margin: 0;

}



.modal--tab {

    padding: 20px;

    font-weight: 600;

    border-bottom: 1px solid #F1F5F9;

    background: #F8FAFC;

    margin-bottom: 1px;

    align-items: center;

    display: flex;

    gap: 10px;

}

.modal--tab-content {

    display: none;

    

}

.modal--tab.active {

    background: #020618;

    color: white;

   

    border-color: #020618;;

}

.modal--tab-content.active {

    display: flex;

}



.modal--tab br

{

    display: none;

}

.modal--techs ul {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;
    margin-bottom: 0;

}

.modal--tab-content p 
{
    font-size: 16px;
    font-weight: 500;
}

.model--content-icon
{
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #ffffff26;
    border: 1px solid #ffffff4f;
    display: flex;
    align-items: center;
    justify-content: center;
}

.model--content-icon svg 
{
    width: 30px;
    height: 30px;
}

.model--content-icon svg path 
{
    stroke: #fff     !important;
}

 .modal--tab-svg
{
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #F1F5F9;
    border: 1px solid #ffffff4f;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal--tab.active .modal--tab-svg
{
  
    background: #F1F5F9;
}


.modal--tab .modal--tab-svg svg{
    width: 24px;
    height: 24px;
}
.modal--tab .modal--tab-svg svg path
{
    stroke: #90A1B9;
}

.modal--tab.active .modal--tab-svg svg path
{
    stroke: var(--e-global-color-secondary);
}

.model--content-thumbnail:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: #00000073;
    top: 0;
    left: 0;
}





@media (max-width:880px) 

{
    .modal--container,
    .model--content-head {
        flex-direction: column;
    }
    
    .modal--left {
        overflow: hidden;
    }

   
    .modal--tab {
        padding: 10px 20px;
       font-size: 14px;
    }
    .modal--left,
    .modal--right  ,
    .model--content-thumbnail,
    .modal--techs
    {

        width: 100%;

    }
    .modal--techs li ,
    .modal--tab-content p 
    {
        font-size: 14px;
    }
    .modal--techs {
        padding: 0;
    }
    .modal--features {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
}
.modal--tab:last-child {
    border-bottom-left-radius: 0;
}


 .modal--left ul {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch; /* smooth scrolling for iOS */
       
    }

 .modal--left ul::-webkit-scrollbar
 {
    display: none;
 }

    .modal--left li.modal--tab {
        flex: 0 0 auto;        
        cursor: pointer;
        white-space: nowrap;
        display: flex;
        gap: 5px;
        transition: background 0.3s;
    }
 

    
}