/* css by Arun kumar 12-12-2024 */
/* role page */
.interview-question-section{
    background: #f9f7fa;
    
}
.ai-chat-icon i{
    font-size: 40px;
    color: #8951FF;
}
.ai-chat-icon p{
        font-size: 26px;
    font-weight: 600;
    line-height: 50px;
}
.ai-mock-inter {
    height: 150px;
    padding: 15px;
    background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) -20%, rgba(209,177,238,1) 35%);
    
    border-radius: 20px;
}
.mockk-intter ul{
        padding-left: 0;
}
.mockk-intter ul li{
    display: flex;
    align-items: center;
    list-style: none;
    display: flex;
    gap: 5px;
    margin: 7px 0;
}
.ai-powered-interview{
    justify-content: center;
    gap: 50px;
}
.mockk-intter ul li i{
    background-color: #5cce62;
    border-radius: 50%;
    font-size: 13px;
    padding: 5px;
    color: #fff;
    display: inline;
}
.mockk-inter-icon i{
 font-size: 40px;
    color: #e79928;
}
.select-role-div {
    border-radius: 15px;
    background: #fff;
    padding: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #b9b9b9;
        max-width: 880px;
    margin: auto;
}
@media(max-width:991px){
    .ai-mock-inter {
    height: 220px;
}
}
@media (max-width:767px){
    .ai-mock-inter {
        height: auto;
    }
}

/* interview page css */
.ai-picked-mockk-tesst{
    padding: 35px;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) -20%, rgba(209,177,238,1) 35%);
    border-radius: 20px;
}
.ai-mockk-icon i{
     font-size: 15px;
    color: #8951FF;
}
.ai-mockk-icon p{
        font-size: 26px;
    font-weight: 600;
    line-height: 50px;
}
/* silder */
  .slider-container {
            display: flex;
            align-items: center;
            position: relative;
         
            overflow: hidden;
        }

        .pickup-test-slider-div {
            display: flex;
            gap: 15px;
            transition: transform 0.5s ease-in-out;
        }

        .selectt-coursess {
            min-width: 300px; /* Each slide width */
            background: #fff;
            padding: 30px;
            text-align: center;
            border: 1px solid #ddd;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            border-radius: 20px;
        }

        .selectt-coursess a {
            text-decoration: none;
            color: #333;
            font-weight: bold;
        }

        .next-button {
            position: absolute;
            right: 0px;
            top: 50%;
            transform: translateY(-50%);
            background: #333;
            color: #fff;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            border-radius: 5px;
            font-size: 16px;
        }

        .next-button:hover {
            background: #555;
        }

        .previous-mockk-question i{
            font-size: 25px;
        }
        .prvious-question i{
            font-size: 12px;
        }

    .previous-mockk-question {
    border-radius: 15px;
    background: #fff;
    padding: 26px;
    border: 1px solid #b9b9b9;
        
    }
    .ai-question-corner-div{
    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
    padding: 20px;
    border-radius: 15px;
    }
    .ai-question-corner-div p span{
        color: #5e6670;
    }
    .like-dislike-div i{
        font-size: 30px;
        color: #5e6670;
    }
    .like-dislike-div .down-thumbsss {
            transform: scaleX(-1);
    }
    .question-bank-mockk .nav .nav-item .nav-link{
        background: #abaeb2;
        color: #000;
        border-radius: 20px;
        border: 1px solid #00
    }
     .selectt-coursess a {
            text-decoration: none;
            color: #333;
            font-weight: bold;
            cursor: pointer;
        }

        .selectt-coursess a:hover {
            color: #555;
        }

        /* Modal styling */
        .modal {
            display: none; /* Hidden by default */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal-content-test-pre {
            background: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            max-width: 500px;
            width: 100%;
            text-align: center;
            position: relative;
            left: 550px;
            top: 150px;
        }

        .modal-content-test-pre h2 {
            margin-top: 0;
        }

        .close-btn {
            display: inline;
            margin-top: 15px;
            background: none;
            /* background: #333; */
            color: #fff;
            border: none;
            padding: 10px 20px;
            /* border-radius: 5px; */
            cursor: pointer;
        }

        
        .modal-content-test-pre ul li{
            list-style: none;
        }
        .modal-content-test-pre ul li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 5px;
}
        .modal-content-test-pre ul{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 32px;
        }
        .modal-content-test-pre span{
    background: #dcdedf66;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 14px;
        }

        .modal-content-test-pre i{
    background-color: #5cce62;
    border-radius: 50%;
    font-size: 10px;
    padding: 5px;
    color: #fff;
    display: inline;
        }

        /* test-section-content */

        .test-section-content{
               background: #f9f7fa;

        }
        .progress-bar-container {
            width: 100%;
            background-color: #f3f3f3;
            border: 1px solid #ccc;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .progress-bar-que {
            height: 10px;
            width: 0;
            background-color: #979EC2;
            transition: width 0.3s;
        }

        .question-container {
            margin-bottom: 20px;
        }

        .Get-your-answer{
        border: 1px solid #d2cbcb;
        border-radius: 10px;
        margin-bottom: 20px;
        }
        .question {

            font-size: 1.2em;
            margin-bottom: 10px;
        }

        .answer {
            align-items: center;
            gap: 15px;
            margin-bottom: 10px;
        }
        .answer .mirco-phone{
            color: #698FF8;
            font-size: 15px;
        }

        .answer input {
            width: 100%;
            padding: 10px;
            font-size: 1em;
            border: 1px solid #698FF8;
            border-radius: 20px;
        }
        .submit-btn-que{
            border: none;
            background: none;
        }
        .submit-btn-que i {
            display: inline;
            background: #92ADF9;
            border-radius: 50%;
            padding: 10px;
            color: #fff;
            border: none;
            font-size: 25px;
        }
        .completion-message {
            display: none;
            font-size: 1.2em;
            color: green;
            margin-top: 20px;
        }
        .voice-type-control {
    display: flex;
    justify-content: center;
    position: relative;
    }
    .voice-mic-speacker{
        z-index: 99;
    }
    .voice-mic-speacker a {
    display: flex;
    align-items: center;
    flex-direction: column;
    }
   .voice-mic-speacker a i {
    background: #275DF5;
    color: #fff;
    display: inline;
    padding: 25px;
    border-radius: 50%;
    font-size: 22px;
   
}
/* .voice-blank-div {
    position: relative;
    background: #00000040;
    height: 2px;
    width: 88%;
    content: '';
    position: absolute;
    top: 34px;

} */
.type-answer-here a{
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
}
.mic-icon{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mic-icon i{
    background: #275DF5;
    color: #fff;
    display: inline;
    padding: 25px;
    border-radius: 50%;
    font-size: 22px;
}
#audio-section{
        
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}