/* RESET ONLY INSIDE BLOCK */

.ai-container,
.ai-container *{
box-sizing:border-box;
}

/* MAIN WRAPPER */

.ai-container{
max-width:1200px;
margin:0 auto;
padding:20px;
display:flex;
align-items:center;
justify-content:space-between;
gap:80px;
width:100%;
}

/* LEFT SIDE */

.ai-menu{
width:48%;
display:flex;
flex-direction:column;
}

.menu-item{
display:flex;
align-items:center;
gap:16px;
padding:20px 0;
border-bottom:1px solid rgba(255,255,255,0.18);
cursor:pointer;
transition:all .3s ease;
font-size:18px;
line-height:1.4;
color:#d2d8df;
}

.ai-showcase-light .menu-item{
    color:#3d3d3d;
    border-bottom:1px solid #3d3d3d;
}

.menu-item span{
display:block;
flex:1;
}

.menu-item:hover,
.menu-item.active{
color:#9cff66;
}

.ai-showcase-light .menu-item:hover,
.ai-showcase-light .menu-item.active{
color:#1C4D86;
}

/* ICON */

.icon1{
width:32px;
height:32px;
min-width:32px;
border:1px solid #ffffff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
font-weight:600;
color:inherit;
}

.ai-showcase-light .icon1{
    background: #DFDFDF;
    border: none;
}

.ai-showcase-light .menu-item:hover .icon1,
.ai-showcase-light .menu-item.active .icon1{
    background: #1C4D86;
    color: #fff;
}

/* RIGHT SIDE */

.ai-display{
width:48%;
height:420px;
position:relative;
overflow:hidden;
border-radius:16px;
background:#000;
}

.display-image{
width:100%;
height:100%;
display:block;
object-fit:cover;
transition:opacity .35s ease;
}

/* TEXT CARD */

.text-card{
position:absolute;
left:35px;
right:35px;
bottom:35px;
background:#e8e8e8;
padding:24px;
border-radius:14px;
box-shadow:0 15px 30px rgba(0,0,0,0.25);
}

.display-text{
margin:0;
font-size:16px;
line-height:1.6;
color:#333333;
}

/* TABLET */

@media (max-width:1024px){

.ai-container{
gap:40px;
}

.ai-menu,
.ai-display{
width:50%;
}

.ai-display{
height:360px;
}

.menu-item{
font-size:16px;
}

}

/* MOBILE */

@media (max-width:768px){

.ai-container{
flex-direction:column;
gap:30px;
}

.ai-menu,
.ai-display{
width:100%;
}

.ai-display{
height:320px;
}

.text-card{
left:20px;
right:20px;
bottom:20px;
padding:18px;
}

.display-text{
font-size:14px;
line-height:1.5;
}

.menu-item{
font-size:15px;
padding:16px 0;
}

}

/* SMALL MOBILE */

@media (max-width:480px){

.ai-display{
height:auto;
}

.icon1{
width:28px;
height:28px;
min-width:28px;
font-size:13px;
}

.display-text{
font-size:13px;
}

}