/**
 * Theme Name: breakoutviral
 * Designed by: Tanvirul Islam Tusher
 * Contact for custom design: https://www.fiverr.com/tanvirultusher
*/

::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:#919191}
::-webkit-scrollbar-thumb{background:#333}
::-webkit-scrollbar-thumb:hover{background:#00b65c}

.btn:focus-visible, .btn.show {
    border: 2px solid var(--button-primary-stroke, rgba(255, 255, 255, 0.15));
    background: var(--button-primary-bg);
    background-size: 100% 100%;
    box-shadow: 0px 1.18245px 2.3649px 0px rgba(0, 182, 92, .88), 0px 0px 0px 1.18245px #00b65c;
    color: #fff;
}

.pera-title {
    width: 100%;
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    margin: 30px 0px 20px 0px;
}

.pera-title .number-icon {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 100px;
    text-align: center;
    background: #069cdf;
    color: #fff;
    display: inline-block;
    margin-right: 10px;  
}

.bd-callout-blue {
    border-left-color: #069cdf !important;
}

.bd-callout {
    padding: 10px 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    border: 1px solid #03060d;
    border-left-width: 0.25rem;
    border-radius: 0.25rem;
}
.bg-lightn1 {
    background: #0a121e;
}

.card-text {
    font-weight: 400;
}

/* new  */


.homeLogin {
    padding: 100px 0 50px 0;
}

.homeLogin .card {
    background: rgb(21,35,27);
    background: linear-gradient(90deg,rgba(21,35,27,1) 0%,rgba(22,47,32,1) 100%);
    border-radius: 15px;
    border: 2px solid #84988d;
}

.homeLogin .card .hlTitle {
    background: linear-gradient(89.31deg,rgb(98 245 164) 4.55%,rgba(255,255,255,0) 69.39%),linear-gradient(0deg,#ffffff,#ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 14px;
}

.homeLogin .hl-group {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 25px 0;
}

.homeLogin .hl-group .hl-item {
    width: 100%;
}

.form-control.form-control-lg {
    background: #005121;
    border: 1px solid #005121;
    border-radius: 25px;
    line-height: 20px;
    outline: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    color: rgba(255, 255, 255, .842);
    height: 50px;
    padding: 20px 18px;
    width: 450px;
}

.hl-item .btn-primary {
    width: 100%;
    max-height: 55px;
}

.homeLogin .hlText {
    font-size: 14px;
}

.section-title .section-title_title span::before {
    /* transition: all cubic-bezier(0.25, 0.25, 0.145, 1.42); */
    transform: translate3d(-50%, -50%, 0);
    -webkit-filter: blur(60px)!important;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
}

@media screen and (max-width: 768px) {
    .homeLogin .hl-group {
        flex-direction: column;
    }

    .form-control.form-control-lg {
        width: 100%;
    }
    /* .section-title_title span::before {
        display: none;
    } */
}

.img-fluid {max-width: 100%; height: auto;}.mx-auto{margin: 0 auto;}.d-block{display: block;}
.ph-card {
    height: 100%;
    position: relative;
    text-align: right;
}
.main-badge {
    clip-path: polygon(92.32051% 40%,93.79385% 43.1596%,94.69616% 46.52704%,95% 50%,94.69616% 53.47296%,93.79385% 56.8404%,92.32051% 60%,79.82051% 81.65064%,77.82089% 84.50639%,75.35575% 86.97152%,72.5% 88.97114%,69.3404% 90.44449%,65.97296% 91.34679%,62.5% 91.65064%,37.5% 91.65064%,34.02704% 91.34679%,30.6596% 90.44449%,27.5% 88.97114%,24.64425% 86.97152%,22.17911% 84.50639%,20.17949% 81.65064%,7.67949% 60%,6.20615% 56.8404%,5.30384% 53.47296%,5% 50%,5.30384% 46.52704%,6.20615% 43.1596%,7.67949% 40%,20.17949% 18.34936%,22.17911% 15.49361%,24.64425% 13.02848%,27.5% 11.02886%,30.6596% 9.55551%,34.02704% 8.65321%,37.5% 8.34936%,62.5% 8.34936%,65.97296% 8.65321%,69.3404% 9.55551%,72.5% 11.02886%,75.35575% 13.02848%,77.82089% 15.49361%,79.82051% 18.34936%);
    width: 124px;
    height: 124px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: #fff;
    background: linear-gradient(90deg,#00b65c 0%,#047f42 100%);
}
.mbadge-one {
    position: absolute;
    right: 40px;
    top: -10px;
}
.floating {
    -webkit-animation-name: floating;
    animation-name: floating;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    margin-top: 5px;
    box-shadow: none!important;
}
@keyframes floating {
    0% {
        box-shadow: 0 5px 15px 0 rgba(0,0,0,.6);
        -webkit-transform: translatey(0);
        transform: translatey(0)
    }

    50% {
        box-shadow: 0 25px 15px 0 rgba(0,0,0,.2);
        -webkit-transform: translatey(-20px);
        transform: translatey(-20px)
    }

    100% {
        box-shadow: 0 5px 15px 0 rgba(0,0,0,.6);
        -webkit-transform: translatey(0);
        transform: translatey(0)
    }
}
.main-badge h6 {
    font-weight: 700;
    font-size: 26px;
}
.main-badge span {
    font-size: 14px;
    line-height: 16px;
    margin-top: -5px;
}
.ph-card .himg-2 {
    left: 9px;
    top: 333px;
    position: absolute;
    height: auto;
    width: 226px;
}
.ph-card .himg-1 {
    left: 25px;
    top: 250px;
    position: absolute;
}
@media screen and (max-width: 768px) {
    .ph-card {
        margin-top: 40px;
    }
    .ph-card .himg-1 {
        left: 9px;
        top: 175px;
    }
    .ph-card .himg-2 {
        left: 9px;
        top: 274px;
        width: 226px;
    }
}
.p-relative {
    position: relative;
}
/* .video-container {
    width: 410px;
    height: 185px;
    margin: 0 auto;
} */
.video-container .image-container {
    position: absolute;
    top: 167px;
    right: 73px;
    border-radius: 10%;
}
.video-container .image-container img {
    vertical-align: middle;
    width: 410px;
    height: 189px;
    object-fit: cover;
    border-radius: 14px;
}
.play-button {
    width: 68px;
    height: 48px;
    position: absolute;
    transform: translate3d(-50%, -50%, 0);
    top: 50%;
    left: 50%;
    z-index: 1;
    background-color: transparent;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>');
    filter: grayscale(100%);
    transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1);
    border: none;
}
.video-container:hover .play-button {
    filter: none;
}
.steps-img iframe {
    position: absolute;
    left: 250px;
    top: 170px;
    border-radius: 15px;
    width: 400px;
    height: 186px;
}
.s-number {
    background-color:#00b65c;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    text-align: center;
    font-weight: 700;
}
.s-text {
    font-weight: 700;
    font-size: 24px;
    margin-left: -20px;
}

.steps-content p {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    color: #fafafa;
}


@media screen and (max-width: 768px) {

.s-text {
    font-weight: 600;
    font-size: 18px;
    margin-left: -20px;
}
.steps-content p {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    color: #fafafa;
}
}

@media screen and (max-width: 430px) {
    .video-container {
        width: 100%;
        height: auto;
    }
    .video-container .image-container {
        top: 104px;
        right: 8px;
        border-radius: 8px;
    }
    .video-container .image-container img {
        width: 255px;
        height: 120px;
        border-radius: 12px;
    }
    .steps-img iframe {
        position: absolute;
        top: 104px;
        right: 8px;
        border-radius: 12px;
        width: 255px;
        height: 120px;
        left: auto;
    }
}

@media screen and (max-width: 375px) {
    .video-container .image-container {
        top: 90px;
        right: 6px;
        border-radius: 8px;
    }
    .video-container .image-container img {
        width: 222px;
        height: 103px;
        border-radius: 8px;
    }
    .steps-img iframe {
        position: absolute;
        right: 6px;
        top: 90px;
        border-radius: 15px;
        width: 222px;
        height: 103px;
        left: auto;
    }
}

@media screen and (max-width: 360px) {
    .video-container .image-container {
        top: 88px;
        right: 5px;
        border-radius: 8px;
    }
    .video-container .image-container img {
        width: 216px;
        height: 100px;
        border-radius: 8px;
    }
    .steps-img iframe {
        position: absolute;
        top: 88px;
        right: 5px;
        border-radius: 15px;
        width: 216px;
        height: 100px;
        left: auto;
    }
}

.world-area {
    border: 1px solid #84988d;
    border-radius: 25px;
    padding: 50px 50px 225px 50px;
}
.world-area h3 {
    text-align: center;
    font-size: 42px;
}
.world-statics {
    display: flex;
    justify-content: space-between;
    text-align: center;
    padding-bottom: 50px;
}
.world-statics .ws-item {
    width: 191px;
}
.world-statics .ws-item h5 {
    font-size: 46px;
    margin: 15px 0 0 0;
}

@media screen and (max-width: 768px) {
.world-area {
    padding: 25px 15px 200px 15px;
}
.world-statics {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
.world-statics .ws-item {
    width: auto;
}

.world-statics .ws-item h5, .world-statics .ws-item h5 span {
    font-size: 28px;
}
.world-statics .ws-item span {
    font-size: 13px;
    font-weight: 300;
}
}


.what-we-do {
    padding: 150px 0 25px 0;
    text-align: center;
}

.what-we-do .wwd-content {
    text-align: left;
}

.what-we-do .wwd-content .wwd-text {
    max-width: 425px;
}

.what-we-do .circle-bg {
    position: absolute;
    left: -250px;
    top: -250px;
    width: 850px;
    z-index: 1;
}

.hp-bf-box {
    padding: 44px 34px;
    border-radius: 15px;
    color: #fff;
    -webkit-transition: .14s ease;
    transition: .14s ease;
    text-align: left;
    transition: 500ms all;
    position: relative;
    z-index: 2;
}

.hp-bf-box:hover {
    transform: translateY(-1rem);
    transition: 500ms all;
    cursor: pointer;
}

.hp-bf-box.bg-1 {
    background: rgb(27,67,44);
    background-image: url(https://storage.perfectcdn.com/dvj0ve/pbm3a38j7zr6r6f4.png),linear-gradient(180deg,rgba(27,67,44,1) 25%,rgba(6,155,79,1) 100%);
    background-repeat: no-repeat;
    background-size: cover;
}

.hp-bf-box.bg-2 {
    background: rgb(27,67,44);
    background: url(https://storage.perfectcdn.com/dvj0ve/e7ixwy1yy4k60xc4.png),linear-gradient(360deg,rgba(27,67,44,1) 25%,rgba(6,155,79,1) 100%);
    background-repeat: no-repeat;
    background-size: cover;
}

.hp-bf-box.bg-3 {
    background: rgb(27,67,44);
    background-image: url(https://storage.perfectcdn.com/dvj0ve/pjubby343w7htegh.png),linear-gradient(180deg,rgba(27,67,44,1) 25%,rgba(6,155,79,1) 100%);
    background-repeat: no-repeat;
    background-size: cover;
}

.hp-bf-box.bg-4 {
    background: rgb(27,67,44);
    background-image: url(https://storage.perfectcdn.com/dvj0ve/p4oe4j4qmtu569s4.png),linear-gradient(180deg,rgba(27,67,44,1) 25%,rgba(6,155,79,1) 100%);
    background-repeat: no-repeat;
    background-size: cover;
}

.hp-bf-box .hp-bf-title {
    font-weight: 600;
    font-size: 19px;
    line-height: 135%;
    color: #fff;
}

.hp-bf-box .hp-bf-text {
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -.4px;
    color: #fff;
    margin-bottom: 0;
}

.faq__item .body {
    height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out 0s;
}

.faq__item.active .body {
    height: auto;
}

/* @keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(100%-1rem));
    }
}

.scroll {
    animation: scroll 5s linear infinite;
} */

.marqueediv {
    position: absolute;
}


.smmspot-dropdown .list.show {
    padding: 5px;
    margin: 0;
    gap: 5px !important;
    list-style: none;
    flex-direction: column;
    background:var(--card-bg-color, #FFF);
    border: 1px solid #3c3c3c;
    max-height: 400px;
    overflow: hidden;
    overflow-y: auto;
}

.smmspot-dropdown .list.show li {
    margin: 5px 0;
}

.smmspot-dropdown .list.show .list-link {
    min-height: 40px;
    border-radius: 10px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding: 10px;
    width: 100%;
    white-space: nowrap;
    border-radius: 10px;
    border: 1px solid var(--stroke-color, #16181E);
    background: var(--card-bg-inner-color, #080D16);
    text-decoration: none;
    color: var(--body-text, #061237);
    transition: .14s ease all;
}

.select2-container--default .select2-results > .select2-results__options {
    background-color: var(--actulus-selectbox-bg-color);
}

.select2-results__option.select2-results__option--highlighted {
    background: #b3f0b617;
}

.select2-container .select2-selection__id-4 {
    min-width: 45px;
    background: #333;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #00b65c !important;
}

.select2-results__option a {
    padding: 7px 20px !important;
    color: #fff !important;
}

.search-dropdown .select2-results__option a {
    color: #333 !important;
}


/* View Ticket page  */

.ticket_conv_title{
    display: flex;
    align-items: center;
    flex-direction: row;
}

.ticket_conv_title h3{
    font-size: 30px;
    font-family: var(--font-text);
    margin-bottom: 0px;
    font-weight: 400;
}

.conversations{
    min-height: 600px;
}

.conversations .user_conv {
   text-align: right;
}

.conversations .user_conv .msg{
    background: #00753b;
    color: #fff;
    width: 100%;
    float: right;
    display: block;
    text-align: left;
    padding: 18px;
    margin-bottom: 10px;
    border-radius: 15px 15px 0px 15px;
}

.conversations .user_conv .user_info{
    display: block;
    float: right;
    font-size: 15px;
}

.conversations .admin_conv .msg{
    background: linear-gradient(180deg, #333 0%, #000 100%);
    color: #fff;
    width: 100%;
    float: left;
    display: block;
    text-align: left;
    padding: 18px;
    margin-bottom: 10px;
    border-radius: 15px 15px 15px 0px;
}

.conversations .admin_conv .user_info{
    display: block;
    float: left;
    font-size: 15px;
}


.conversation__box .reply_box{
    display: block;
    position: relative;
    align-items: center;
}

.ticket_info_card{
    background:rgb(59 59 59 / 60%);
    background-size: contain;
}
.ticket_info_card .ticket_id{
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: #f3f3f3;
}
.ticket_info_card h2{
    
    font-size: 40px;
    font-weight: 600;
    color: #f3f3f3;
}
.ticket_info_card p{
    font-family: var(--font-text);
    font-size: 18px;
    color: #f3f3f3;
    font-weight: 400;
    margin-bottom: 35px;
}

.caps_item{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 30px;
}

.caps_item .caps_left{
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    background: #333;
    padding: 15px 0px 15px 20px;
    border-radius: 50px 0px 0px 50px;
    min-height: 60px;
    display: flex;
    align-items: center;
}

.caps_item .caps_right{
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    padding: 0px 0px 0px 0px;
    border-radius: 0px 50px 50px 0px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.caps_item.caps_subject .caps_right{
    background: #00b65c;
}
.caps_item.caps_priority .caps_right{
    background: #00433a;
}
.caps_item.caps_time .caps_right{
    background: #00a05d;
}


.conversation__box .reply_box .reply_form_control{
    border-radius: 50px;
    height: 57px;
    box-shadow: none;
    border-color: var(--primary-border-color);
    padding-left: 20px;
    padding-right: 150px;
    box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.07);
}

.conversation__box .reply_box .submit_btn{
    position: absolute;
    right: 0;
    top: 0;
}