/*
Theme Name: Divi Child
Template: Divi
*/

.container{
    max-width:1080px;
    margin:0 auto;
    padding: 80px 0;
    display:flex;
    justify-content:space-between;
}

.collapsible{
    width: 30%;
    height: fit-content;
    position: sticky;
    top: 0;
}

.collapse-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #E42924;
    color: white;
    padding: 22px 15px;
}

.collapse-title h4{
    padding-bottom: 0px;
    color: white !important;
}


@keyframes dropdown {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(180deg);
    }
}

@keyframes dropdown-reverse {
    0% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.collapse-title i {
    transition: transform 0.3s ease-in-out;
}

.collapse-title i.expanded {
    animation: dropdown 0.3s ease-in-out forwards;
}

.collapse-title i:not(.expanded) {
    animation: dropdown-reverse 0.3s ease-in-out forwards;
}


.collapse-items a{
    text-decoration: none;
}

.collapse-items li {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    list-style: none;
    padding: 12px;
    color: #1C1B17;
    font-size: 16px;
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.15);
    gap: 20px;
}

.collapse-items li span {
    flex: 1; 
    word-break: break-word; 
}

.collapse-items li img {
    max-width: 40px;
    max-height: 40px;
    min-width: 40px;
    min-height: 40px;
    object-fit: contain;
    flex-shrink: 0; 
}


.collapse-items li:hover{
    background-color: #FEF5ED;
    color: #E42924;
}

.content{
    width: 66%;
}

.content h1{
    font-size: 36px;
    line-height: 1.2em;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.content img{
    max-width: 100px;
    max-height: 100px;
    min-height: 100px;
    min-width: 100px;
    object-fit: contain;
}

.content p{
    margin-top: 20px;
}


/* =-=-=-=-=-=-=-=-=-=-=-=-==-=-=-=--= media query =-=-=-=-=-=-==-=-=-==-=-==-===-=-=-=-=-=-==-=- */

@media screen and (max-width: 769px) {
    
    .container{
        width: 80%;
        padding: 60px 0;
        display: block;
    }

    .collapsible{   
        width: 100%;
        position: unset;
    }

    .content{
        width: 100%;
        margin-top: 40px;
        padding-left: unset;
    }
}


@media screen and (max-width: 426px) {
    
    .container{
        width: 90%;
    }
}