/*================= M365 Automation Page style ========================*/

#microsoft365-automation-main-container {
    font-size: 13px;
    overflow-x: hidden;
    color: #f9fafb;
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
    display: block;
}
.automation-banner-section {
    padding: 95px 20px 60px;
    background-color: #040042;
}
.automation-banner-container > div{
    vertical-align: middle;
    display: inline-block;
}
.onboarding-content > div, .offboarding-content > div, .flow-section-content > div, .admin-challenges-content > div{
    margin-top:50px;
    margin-bottom:unset;
}
.hero-subtext {
    font-size: 1.1em;
}
.automation-banner-content, .automation-banner-img {
    width: 40%;
    max-width: 550px;
    min-width: 280px;
    margin: 20px 20px 50px 20px;
    text-align: left;
}
.automation-banner-img img {
    width: 100%;
    height: 100%;
}
.automation-heading {
    background: linear-gradient(90deg, #69A8FF 0%, #7284fa 50%, #a764ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.automation-highlight {
    color: #69A8FF;  
}
.automation-banner-icon-content-wrapper {
    display: flex;
    gap: 16px;
    width: 100%;
    max-width: 500px;
    min-width: 300px;
}
.automation-banner-icon {
    width: 100%;
    margin: 15px 0px;
    max-width: 90px;
    display:none;
}
/*.automation-banner-icon svg {
    height: 100%;
    width: auto;
    }
.automation-banner-icon-content {
    min-width: 250px;
}
.automation-banner-icon, .automation-banner-icon-content {
    flex: 1 1 45%;
}*/
.banner-box { 
    background: linear-gradient(90deg, #cae0ff 0%, #c9d0fd 50%, #cae0ff 100%);
    color: #4e4e4e;
    border-radius: 25px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    margin: -14.5em auto 2em;
    padding: 10px 0px;
    max-width: 1100px;
}
.flow-agents-highlight {
    color: #3163d6;
}
.start {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.start img {
     width: 25px;
     height: 25px;
}
.start-automating {
/*    text-align: left;
    max-width: 350px;*/
    display:inline-block;
    vertical-align:middle;
    margin:0px 20px;
}
.stop-text {
    line-height: 1.5;
    font-size:1.5em;
}
.start-text {
    font-size: 2.5em;
    background: linear-gradient(to right, #47b08a, #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: right;
}
.shimmer-once {
    position:relative;
    background-color:#e0e0e0;
    overflow:hidden;
}
.shimmer-once::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgb(240 248 255 / 40%), transparent);
    animation: shimmer 3s forwards;
}   
.stop {
    color: #d00000;
}
.flow-agents-text {
    max-width: 600px;
    text-align: left;
    display:inline-block;
    vertical-align:middle;
    margin:0px 20px;
    font-size:1.1em;
}

/* =================== Onboarding Section Style Starts ====================== */

.automation-onboarding-offboarding-section {
    background-color: aliceblue;
    color: #363636;
}
.onboarding-tag span {
    background: linear-gradient(195deg, #43cea2, #189d3c);
    padding: 4px 7px;
    border-radius: 5px;
    color: white;
}
.onboarding-tag {
    margin-bottom: 8px;
}
.automation-onboarding-section {
    padding: 80px 20px 30px;
    box-shadow: inset 0 3px 3px -3px rgba(255, 255, 255, 0.7), inset 0 -3px 3px -3px rgba(0, 0, 0, 0.15);
}
.onboarding-content-image img, .offboarding-content-image img, .flow-content-image img, .admin-challenges-content-img img {
    width: 90%;
    height: 100%;
}
.onboarding-content-text, .offboarding-content-text, .flow-section-content-text, .admin-challenges-content-text {
    max-width: 685px;
    min-width: 280px;
    margin: 20px;
    text-align: left;
    vertical-align:top;
    display:inline-block;
    width:50%;
}

.onboarding-content-image, .offboarding-content-image, .flow-content-image, .admin-challenges-content-img {
/*    width: 30%;*/
    max-width: 550px;
    min-width: 280px;
    margin: 20px;
    vertical-align:middle;
    display:inline-block;
}
    .onboarding-content-text h2, .feature-highlight-on, .feature-icon-on {
        color: #3D379A;
    }
.onboarding-content-text p, .offboarding-description, .flow-section-title-desc,
.admindroid-workflow-section-title-desc, .automation-library-section-main-title-desc {
    padding: unset;
}
.onboarding-line {
    background-color: #968fff;
    height: 0.5px;
    border: none;
    width: 100%;
}
.onboarding-highlight, .offboarding-highlight, .flow-section-highlight {
    font-size: 1.1em;
    margin: 10px 0px;
    line-height: 1.6;
    letter-spacing: 0.3px;
}
.onboarding-highlight span {
    color: #3F51B5;
}
.feature-highlight, .flow-steps-intro, .admin-challenges-intro {
    font-size: 1.3em;
    margin: 20px auto;
    line-height: 1.4;
    max-width:1205px;
    width:90%;
}
.features {
    gap: 15px;
    margin: 0 auto;
}
.feature {
    width: 100%;
    max-width: 295px;
    text-align: left;
    border-radius: 8px;
    gap: 10px;
}
.feature-icon {
    width: 45px;
    height: 45px;
    margin-bottom: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    flex-shrink: 0;
    background: #3d379a12;
}

/*================= Offboarding section Style Starts ================== */

.automation-offboarding-section {
    padding: 20px 20px 30px;
    position: relative;
    box-shadow: inset 0 3px 3px -3px rgba(255, 255, 255, 0.7), inset 0 -3px 3px -3px rgba(0, 0, 0, 0.15);
    background:#fdfdfd;
}
.offboarding-content-text h2, .feature-highlight-off, .feature-icon-off {
    color: #006d8f;
}
.offboarding-line, .flow-line {
    background-color: #006e8f68;
    height: 0.5px;
    border: none;
    width: 100%;
}
.offboarding-highlight span, .offboarding-title-highlight {
    color: #007616;
}

/*================== Automation flow section style starts ====================*/

.automation-flow-section {
    padding: 20px 20px 30px;
}
.flow-section-main-title, .flow-steps-intro {
    color: #6242a9;
}
.flow-section-highlight span {
    color: #79239a;
}
.flow-steps-container {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.flow-final {
    font-size: 1.3em;
    padding-top: 20px;
    line-height: 1.4;
}
.flow-img-container, .admin-workflow-img-container {
    width: 70%;
    padding: 20px;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(8px);
    background: rgba(153, 157, 163, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.flow-img-container img, .admin-workflow-img-container img {
    border-radius: 5px;
}
.close {
    color: #6a6a6a;
    font-size: 1.5em;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background: aliceblue;
    width: 30px;
    border-radius: 0% 0 0 25%;
    text-align: center;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.5019607843);
    cursor: pointer;
    border-radius: 0% 20% 0 20%;
}
.close:hover {
        color: #383838;
}
.popup-container {
    display: none;
    position: fixed;
    left: 0;
    top: 6%;
    z-index: 7;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
    background-color: rgba(16, 25, 34, 0.9);
}
.popup-container::before {
    content: "";
    top: 0;
        left: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url(../images/bg/docs-grad-bg.png);
        opacity: 0.2;
        background-position: bottom;
        z-index: 0;
        filter: blur(10px);
    }
img {
    width: 100%;
}
/*================ Admin challenges section style starts ====================*/

.automation-admin-challenges-section {
    background-color: #00102c;
}
.admin-challenges-title-desc {
    padding: unset;
    margin-top: 20px;
}
.admin-challenges-main-title, .admin-challenges-main-title-desc-highlight, .standout-features-main-title {
    color: #70b5ff;
}
.admin-challenges-quote-text {
    line-height: 1.6;
    text-align: left;
    border-left: 2px solid #70b5ff;
}
.admin-challenges {
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
}
.admin-challenges-wrapper {
    gap: 20px;
}
.admin-challenge {
    max-width: 360px;
    min-height: 180px;
    padding: 25px 20px;
    border: 1px solid #61ffb819;
    border-radius: 8px;
    background-color: #006c8d29;
    text-align:left;
}
.admin-challenge h3 {
    color: #2bce84;
}
.options {
    margin-top: 40px;
    align-items: center;
}
.hexagon {
    width: 60px;
    height: 60px;
    background: gray;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    flex-shrink: 0;
    border-radius:10px;
}
.orange {
    background: linear-gradient(135deg, #d37c00, #fabb00);
}
.red {
    background: linear-gradient(135deg, #ff301b, #ffb575);
}
.pink {
    background: linear-gradient(135deg, #ff3b5c, #ff7eb3);
}
.purple {
    background: linear-gradient(135deg, #8e2de2, #4a00e0);
}
.violet {
    background: linear-gradient(135deg, #667eea, #764ba2);
}
.blue {
    background: linear-gradient(135deg, #36d1dc, #5b86e5);
}
.green {
    background: linear-gradient(135deg, #43cea2, #185a9d);
}
.option {
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 345px;
    margin: 12px;
    text-align: left;
    background: #cedff185;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #9cb7cf1f;
}

/*================ automation library section style starts ===================*/

.automation-library-section {
    background: #2f1358;
}
.automation-library-section-main-title .highlight {
    color: #43c7ce;
}
.user-centric-workflow-section, .admin-centric-agents-section {
    padding: 40px 0px;
    color: #ffffff;
    position: relative;
}
.user-centric-workflow-card, .admin-centric-agents-card {
    width: 100%;
    max-width: 250px;
    min-height: 240px;
    background-color: rgba(255, 255, 255, 0.025);
    align-items: center;
    justify-content: center;
    padding: 15px 15px;
    position: relative;
    box-sizing: border-box;
    border-radius:5px;
}
.btn-flow {
    font-size: 1em;
    color: #75788a;
    padding: unset;
    text-decoration:underline;
}
.btn-flow::after {
    font-family: "office365icons";
    content: "\e054";
    font-size: inherit;
    font-weight: 400;
    display: inline-block;
    width: 10px;
    margin-right: -10px;
    vertical-align: middle;
    text-decoration: none;
    font-size: 1.1em;
    }
.admin-view-flow-button-wrapper, .view-flow-button-wrapper {
    text-align: left;
    position: absolute;
    bottom: 20px;
    left: 20px;
}
.card-con {
    position: absolute;
    inset: 0;
    padding:20px;
    transition: opacity 0.4s ease, transform 0.4s ease;
    text-align:left;
}
.card-con.hover {
    opacity: 0;
    transform: translateY(20px);
}
.user-centric-workflow-card:hover .card-con.default, .admin-centric-agents-card:hover .card-con.default{
    opacity: 0;
    transform: translateY(-20px);
}
.user-centric-workflow-card:hover .card-con.hover, .admin-centric-agents-card:hover .card-con.hover{
    opacity: 1;
    transform: translateY(0);
}
.user-centric-sub-title-desc, .admin-centric-sub-title-desc {
    color: #363636;
}
.user-centric-workflows-wrapper, .admin-centric-agents-wrapper {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
}
.admin-centric-agents-wrapper {
/*    max-width: 1000px;*/
    margin: 30px auto 0px;
}
.user-centric-section-main-title, .admin-centric-agents-main-title {
    font-size: 1.8em;
}
.revert-section-main-title, .pause-and-resume-agent-section-main-title {
    font-size: 1.6em;
    display: flex;
    gap: 20px;
    text-align: left;
    margin: 0 auto;
    max-width: 1200px;
    align-items: center;
/*    background: linear-gradient(45deg, #ffffff0d, transparent);*/
    padding-left: 10px;
    border-radius: 8px;
}
standout-features-wrapper-pause{
    padding-top:30px;
}
.pause-and-resume-agent-section-main-title {
    /*    border-left: 4px solid #6092da;*/
}
.revert-section-main-title {
/*    border-left: 4px solid #ac80d9;*/
}
    .revert-section-main-title i, .pause-and-resume-agent-section-main-title i {
        font-size: 1.3em;
    }
.pause-icon::after {
    font-family: "office365icons";
    content: "\e054";
    font-size: inherit;
    font-weight: 400;
    display: inline-block;
    width: 10px;
    margin-right: -10px;
    vertical-align: middle;
    text-decoration: none;
    font-size: 1.9em;
    margin-right: 15px;
    margin-left: -5px;
}
.pause-and-resume-agent-execution-container {
    padding: 0px 15px 30px;
}
.user-centric-workflow-card:nth-child(1), .admin-centric-agents-card:nth-child(1) {
    background: linear-gradient(45deg, #dafafc, #d1fdff);
}
.user-centric-workflow-card:nth-child(2), .admin-centric-agents-card:nth-child(2) {
    background: linear-gradient(45deg, #d6ffec, #e2fff2);
}
.user-centric-workflow-card:nth-child(3), .admin-centric-agents-card:nth-child(3) {
    background: linear-gradient(45deg, #dcd7fc, #f4f2ff);
}
.user-centric-workflow-card:nth-child(4), .admin-centric-agents-card:nth-child(4) {
    background: linear-gradient(45deg, #ffdbf4, #ffeffa);
}
.admin-centric-agents-card:nth-child(5) {
    background: linear-gradient(45deg, rgb(215 255 255), #bcf9ff);
}
.user-centric-workflow-card:nth-child(1) .btn-flow:hover, .admin-centric-agents-card:nth-child(1) .btn-flow:hover, 
.admin-centric-agents-card:nth-child(5) .btn-flow:hover {
    color: #0b8c93;
}
.user-centric-workflow-card:nth-child(2) .btn-flow:hover, .admin-centric-agents-card:nth-child(2) .btn-flow:hover {
    color: #007f45;
}
.user-centric-workflow-card:nth-child(3) .btn-flow:hover, .admin-centric-agents-card:nth-child(3) .btn-flow:hover {
    color: #584c9f;
}
.user-centric-workflow-card:nth-child(4) .btn-flow:hover, .admin-centric-agents-card:nth-child(4) .btn-flow:hover {
    color: #9f006f;
}   
.admin-centric-card-icon {
    position: absolute;
    right:20px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
}
    .admin-centric-card-icon i {
        font-size: 3em;
    }
.admin-centric-icon1, .admin-centric-sub-title1, .user-centric-sub-title-one {
    color: #0b8c93;
}
.admin-centric-icon2, .admin-centric-sub-title2, .user-centric-sub-title-two {
    color: #007f45;
}
.admin-centric-icon3, .admin-centric-sub-title3, .user-centric-sub-title-three {
    color: #584c9f;
}
.admin-centric-icon4, .admin-centric-sub-title4, .user-centric-sub-title-four {
    color: #9f006f;
}
.admin-centric-icon5, .admin-centric-sub-title5 {
    color: #00757d;
}

/*================== Tweak the agents section style starts ===================*/

.automation-tweak-the-agents-section {
    background-color: aliceblue;
    color: #363636;
}
.tweak-the-agent-desc .quote {
    font-size: 2.5em;
    color: #a3ccec;
}
.tweak-the-agent-desc {
    padding: unset;
    margin:0 auto;
    max-width: 770px;
}
.flow-customization, .tweak-the-agents-title, .content-box-icon {
    color: #0070b4;
}
.tweak-the-agent-image {
    min-width: 200px;
    max-width: 340px;
    display: inline-block;
    vertical-align: middle;
    animation: jump 5s linear infinite;
}
.tweak-the-agent-content {
    margin:20px;
}
.tweak-the-agent-content-text {
    display: inline-block;
    vertical-align: middle;
    max-width: 550px;
    min-width: 280px;
    margin: 20px;
    text-align: left;
}
.tweak-the-agent-content-box, .tweak-the-agent-content-box1 {
    width: 100%;
    max-width: 400px;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    background: radial-gradient(#e4f3ff, #cbe2fb);
    padding: 10px;
    border-radius: 25px;
    position: relative;
    margin: 30px;
}
    .tweak-the-agent-content-box1 svg {
        bottom: -38px;
        position: absolute;
        transform: rotate(137deg);
        right: -28px;
    }
    .tweak-the-agent-content-box svg {
        position: absolute;
        bottom: -38px;
        left: -27px;
        transform: rotate(225deg);
    }
.content-box-icon {
    font-size: 1.8em;
    margin-bottom: 10px;
    position: absolute;
    background: #cde7ff;
    border-radius: 50%;
    display: flex;
    width: 45px;
    height: 45px;
    justify-content: center;
    align-items: center;
}
.tweak-the-agent-content-box1 .content-box-icon {
    top: 50px;
    left: -50px;
}
.tweak-the-agent-content-box .content-box-icon {
    top: 22px;
    right: -50px;
}
.tweak-the-agent-sub-title-desc {
    padding-left: 20px;
}

/*==================== Automation standout features section style starts ======================*/

.automation-standout-features-section {
    background-color: #00102c;
/*    background-image: url(https://admindroid.com/images/bg/bg-pattern.svg);
    background-size: cover ;
    background-position: top ;
    background-attachment: fixed ;
    background-repeat: no-repeat ;
    position: static;*/
}
.standout-section-title-wrapper {
    width: 100%;
    margin: 0 auto;
}
.tweak-the-agents-title-wrapper, .standout-section-title-wrapper, .automation-library-title-wrapper, .admindroid-workflow-section-main-title-wrapper {
    margin-top: 20px;
}
.standout-features-section-subtitle {
    margin: 0 auto;
    padding: unset;
    color: aliceblue;
}
.built-in-approvals-container {
    padding: 30px 10px;
    background: rgba(124, 177, 255, 0.05);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}
.role-based-access-control-container {
    padding-top: 30px;
    background: rgba(124, 177, 255, 0.05);
    border-radius: 20px;
    backdrop-filter:blur(10px);
}
.standout-features-description {
    border-radius: 10px;
    background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 4%), transparent);
    padding: 20px 0px;
}
.standout-features-section-description {
    display: inline-block;
    max-width: 550px;
    margin: 0px 15px;
}
.standout-features-section-subtag {
    font-size: 2em;
    margin-bottom: 10px;
}
.pause-revert-intro {
    font-size: 1.2em;
    color: #36cd9d;
    margin: 0 auto;
    line-height: 1.7;
    position: relative;
}
    .pause-revert-intro .quote {
        font-size: 4em;
        position: absolute;
        top: -38px;
        color: #05a3b463;
        left: -15px;
        opacity: 0.3;
    }
.revert-agent-actions-section {
    margin: 20px 0px;
}
.standout-features-wrapper {
    position: relative;
    padding-bottom:unset;
}
.revert-points, .pause-points {
    display: inline-block;
    vertical-align: middle;
    max-width: 550px;
    margin: 20px 20px 0px;
    width:40%;
}
.revert-agent-action-content, .pause-and-resume-agent-execution-content {
    text-align: left;
    justify-content: center;
/*    max-width: 550px;*/
    margin-bottom:15px;
    position:relative;
        }
.v-line {
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #9a8bc342, transparent);
    position: absolute;
    overflow: hidden;
    top: 19px;
    left: 4px;
    border-radius: 10px;
}
.revert-agent-action-section-img, .pause-and-resume-agent-execution-section-img {
    display: inline-block;
    vertical-align: middle;
    max-width: 450px;
    margin:0px 40px;
}
.revert-agent-action-section-img img, .pause-and-resume-agent-execution-section-img img {
    width: 100%;
    height:100%;
}
.revert-agent-action-title-one, .revert-agent-action-title-two, .revert-agent-action-title-three {
    /*    color: #b586e1;*/
    color: #509ee2;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dot {
    width: 12px;
    height: 12px;
    /*    background: #b586e191;*/
    background: #509ee27a;
    border-radius: 50%;
    flex-shrink:0;
}
.dot1 {
    width: 12px;
    height: 12px;
    background: #628fd099;
    border-radius: 50%;
    flex-shrink: 0;
}
.action-desc, .execution-desc {
        padding-left: 20px;
}
.pause-and-resume-agent-title-two, .pause-and-resume-agent-title-one, .pause-and-resume-agent-title-three {
    color: #0EA5E9;
    display: flex;
    align-items: center;
    gap: 8px;
}
.highlight-revert {
    /*    color: #ad81da;*/
    color: #509ee2;
}
.highlight-pause {
    color: #0d99da;
}
.pause-example {
    margin-top: 10px;
    padding-left: 20px;
    margin-top: 15px;
    background: #ffffff0f;
    padding: 10px 10px 10px 15px;
    border-radius: 8px;
    border: 1px solid #87ceeb2b;
    line-height: 1.6;
    margin-left: 18px;
}

/*===================== Automation bulk execution section style starts ==========================*/

.bulk-executions-main-title {
    font-size:2em;
}
.bulk-executions-subtitle, .role-based-access-control-quote{
    padding:unset;
    color:whitesmoke;
}
li {
    margin-bottom: 10px;
}
.bulk-executions-section-img, .built-in-approvals-section-img, .role-based-access-control-section-img {
    width: 100%;
    max-width: 400px;
    min-width: 200px;
    display: inline-block;
    vertical-align: middle;
    margin: 20px;
}
    .bulk-executions-section-img img, .role-based-access-control-section-img img, .tweak-the-agent-image img
   {
        width: 100%;
        height: 100%;
    }
.bulk-executions-text, .role-based-access-control-points {
    max-width: 550px;
    display: inline-block;
    vertical-align: middle;
    margin: 20px;
    text-align: left;
    font-size: 1.09em;
    line-height: 1.5;
    width:40%;
}
.bulk-executions-intro {
    border-left: 3px solid #3684b5;
    color: #52baf5;
    padding: 10px 10px 10px 20px;
    background: linear-gradient(90deg, #00518d1f 0%, rgba(115, 115, 115, 0) 100%);
    border-radius: 8px;
}
.bulk-executions-points {
    margin-top: 15px;
    margin-left:25px;
}
.bulk-executions-intro span {
    color: #00BCC6;
    font-size: 1.1em;
}
.bulk-execution-highlight {
    margin-top: 15px;
    background: #ffffff0f;
    padding: 10px 10px 10px 15px;
    border-radius: 8px;
    border: 1px solid #87ceeb2b;
    line-height: 1.6;
    color: #51c2ff;
}
.responsive-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

/*================= Approval section style starts ====================*/


.built-in-approvals-subtitle {
    color: #8cafff;
    border-left: 2px solid #5b86e5;
}
.built-in-approvals-title-wrapper .approval-highlight {
    color: #ffffff;
}
.built-in-approvals-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    margin: 0px auto;
}
.built-in-approvals-wrapper-title {
    padding: 15px 0px;
    line-height: 1.4;
}
.built-in-approvals-icon {
    font-size: 2em;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    left: -31px;
    bottom: 43px
}
.built-in-approvals-card-content{
    padding-left:25px;
}
.built-in-approvals-card {
    background-color: rgb(255 255 255 / 6%);
    padding: 15px 10px;
    position: relative;
    max-width: 500px;
    min-height: 150px;
    border-radius: 8px;
    margin-left: 20px;
}
.built-in-approvals-content{
    display:inline-block;
    vertical-align:middle;
    max-width: 265px;
    text-align:left;
}
.built-in-approvals-card:nth-child(1) {
    border-left: 2px solid #007b89;
}
.built-in-approvals-card:nth-child(2) {
    border-left: 2px solid #cb6b00;
}
.built-in-approvals-card:nth-child(3) {
    border-left: 2px solid #509ee2;
}
.built-in-approvals-card:nth-child(4) {
    border-left: 2px solid #ff6998;
}
.built-in-approvals-card:nth-child(5) {
    border-left: 2px solid #9280d6;
}
.built-in-approvals-card:nth-child(1) h4 {
    color: #32c2c1;
}
.built-in-approvals-card:nth-child(2) h4 {
    color: #da7300;
}
.built-in-approvals-card:nth-child(3) h4 {
    color: #509ee2;
}
.built-in-approvals-card:nth-child(4) h4 {
    color: #ff6998;
}
.built-in-approvals-card:nth-child(5) h4 {
    color: #9280d6;
}
.approvals-intro {
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    max-width: 615px;
    margin: 20px;
}
.built-in-approvals-section-img img{
    width:80%;
    height:100%;
}
.bulk-executions-main-title-wrapper, .role-based-access-control-title-wrapper {
    text-align: left;
    max-width: 1075px;
    margin: 0 auto;
}

/*======================= Role based access control section style starts ===========================*/

.role-based-highlight {
    color: #ad81da;
}
.role-based-access-control-main-title {
     padding-top:10px;
}
.role-based-access-control-point-sub {
    margin: 15px 0px 15px 10px;
    border-left: 1px solid #ad81da;
    padding: 10px 20px;
    background-color: #b472ff0c;
}
.role-based-access-control-content {
    padding-bottom: unset;
}

/*================== Automation admindroid workflow flow section styles start ========================*/

.automation-admindroid-workflow-content{
    max-width:565px;
    margin:30px;
    display:inline-block;
    vertical-align:middle;
}
.workflow-card-quote {
    padding: 5px 10px 8px 10px;
    margin-left: 25px;
    font-size: 1.1em;
    position: relative;
    text-align: left;
}
    .workflow-card-quote i {
        display: inline-block;
        font-size: 1.8em;
        position: relative;
        top: -6px;
        left: -22px;
        margin: 0;
        position: absolute;
        opacity:0.15;
    }
.automation-workflow-img-content-part {
    width: 100%;
    max-width: 650px;
    text-align: left;
    margin: 30px;
    display:inline-block;
   vertical-align:middle;
}
.slide-nav-button-holder {
    bottom: 42% !important;
}
.caurosel {
    width: 87%;
    height: 345px;
    position: relative;
    clear: both;
    margin: 0 auto;
    display: inline-block;
}
.automation-workflow-content-desc-container {
    text-align: left;
    display: inline-block;
    margin-top: 5px;
    padding: 10px 30px;
    border-radius: 8px;
}
.report-img {
    border-radius: 10px;
    border: 5px solid white;
    box-shadow: 0px 0px 6px 2px rgba(92, 91, 91, .33);
    user-select: none;
}
.both-carousel img {
    cursor: pointer;
}
.automation-workflow-content-desc-text1{
    display:none;
}
.automation-admindroid-workflow-section {
    color: #363636;
    background-color: #ffffff;
}
img.carousel-item.carousel-center {
    box-shadow: 0px 0px 12px 2px rgb(29 39 56 / 57%);
}
img.carousel-item.carousel-center {
    filter: none;
    box-sizing: content-box;
}
img.carousel-item {
    filter: blur(px);
    box-sizing: content-box;
}
.workflow-card.active {
    background: aliceblue;
    border-radius: 10px;
}
    .workflow-card.active .automation-workflow-content-desc-text {
        background: #e7f4ff;
        border-radius: 10px;
    }
.description-card {
    transition: transform 0.6s ease !important;
    background: #eff4fa;
/*    border-left: 2px solid #7c8ca9ab;*/
    cursor: pointer;
}
.description-card.active .droid-section-sub-title {
        color: #363636 !important;
        padding: 10px 0px;
    }
.ps-report-section-content-part1 {
    display: inline-block;
    vertical-align: middle;
    padding: 50px 0px;
    max-width: 685px;
    border-radius: 8px;
}
.ps-report-section-image-part {
    vertical-align: top !important;
}
.workflow-desc {
    color: darkslategray;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 10px;
    margin-bottom:8px;
}
    .workflow-desc p {
        margin-bottom: 10px;
    }
.fr-description-card-text .droid-section-sub-title {
    color: #5d5d7c !important;
    font-size: 1.3em !important;
    margin-bottom: unset;
}
.fr-description-card-text{
    width:95% !important;
    margin-left:unset !important;
}
img.carousel-item.carousel-center {
    box-shadow: 0px 0px 12px 2px rgb(29 39 56 / 57%) !important;
}
.description-card .workflow-card-quote, .description-card i {
    color: #005a9d !important;
}
.ps-report-slider-pagination-bullets.active {
    background: #a1d3ff !important;
}
.carousel-left {
    height: 620px !important;
}
    .monitor-automation-agents-quote span, .monitor-agent-highlight, .intelligent-forms-highlight, .built-in-highlight {
        color: #005090;
    }
.dynamic-value-highlight {
    color: #005a9d;
}
.dvi-example {
    margin: 15px 0px 15px 15px;
    padding-left: 15px;
    border-left: 2px solid #0072c6;
    background: #ffffff10;
}
.description-card.active .subtitle-wrapper {
    text-align: left;
    margin-bottom: 15px;
}
.description-card .subtitle-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content:space-between;
}
.description-card .expand {
    transform: rotate(-90deg) !important;
    transition: 0.5s ease;
}

.description-card.active .expand {
    transform: rotate(0deg) !important;
    transition: 0.5s ease;
}

.inner-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}
.workflow-icon {
    font-size: 1.4em;
}
    .workflow-icon i {
        color: #69698e !important;
    }
i.icomoon-insights {
    padding: 0px 3px;
}
i.icomoon-time-manage {
    padding-top: 7px;
}
i.ms-Icon--personRemove {
    padding-left: 3px;
}
.pause-and-revert-section {
    backdrop-filter: blur(10px);
    overflow: hidden;
    background: rgba(124, 177, 255, 0.05);
    border-radius: 20px;
    margin-top: 20px;
    padding:25px 15px;
}
.separator-circuit {
    position: relative;
    width: 100%;
    height: 20px;
}
.quote-line {
    position: relative;
    width: 100%;
    height: 0px;
}
    .separator-circuit .lines {
        position: absolute;
        top: 50%;
        left: 0%;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, rgb(34 147 197 / 30%) 10%, rgb(34 171 197 / 53%) 50%, rgb(95 34 197 / 30%) 90%, transparent 100%);
        opacity: 0.4;
    }
    .separator-circuit .pulse {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100px;
        height: 1.5px;
        background: linear-gradient(90deg, transparent, rgb(34 197 78 / 74%), transparent);
        border-radius: 2px;
        animation: circuit-pulse 4s infinite;
    }
    .separator-circuit .lines1, .quote-line .lines1{
        position: absolute;
        top: 50%;
        right: 0%;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, rgb(34 147 197 / 30%) 10%, rgb(34 171 197 / 53%) 50%, rgb(95 34 197 / 30%) 90%, transparent 100%);
        opacity: 0.4;
    }
    .separator-circuit .pulse1 {
        position: absolute;
        top: 50%;
        right: 0;
        width: 100px;
        height: 1.5px;
        background: linear-gradient(90deg, transparent, rgb(34 197 78 / 74%), transparent);
        border-radius: 2px;
        animation: circuit-pulse1 4s infinite;
    }
.lh {
    height: 2px !important;
}
.mh {
    height: 4px !important;
}
.standout-features-container, .automation-library-section-container {
    overflow: hidden;
}
.separator {
    max-width: 1000px;
    margin: 10px auto;
    overflow: hidden;
}
.lines1::before, .lines1::after, .lines::before, .lines::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: rgb(255 255 255 / 14%);
}
.lines1::after, .lines::after {
    width: 6px;
    height: 6px;
    background: rgb(255 255 255 / 30%);
}
.built-in-approvals-main-title, .role-based-access-control-main-title {
    font-size: 2em;
    margin-bottom: 15px;
    letter-spacing: 0.3px;
    font-family: poppins-regular, Arial, Helvetica, sans-serif;
}
.automation-bulk-executions-section {
    background: rgba(124, 177, 255, 0.05);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}
.admin-workflow-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.left-nav, .right-nav {
    display: block !important;
}

.admin-workflow-title {
    font-size: 1.8em;
    max-width: 300px;
    font-family: 'poppins-regular';
    color: #61b5ff;
}

.admin-workflow-content-container hr {
    margin-top: 15px;
    opacity: 0.3;
    width: 60%;
}

.img-wrapper {
    position: relative;
}

.exp-text {
    position: absolute;
    z-index: 6;
    right: 38px;
    top: 155px;
}

.expand-text i {
    font-size: 1.5em;
}

.exp-text span {
    font-size: 0.7em;
    background: #ddeefd;
    border: 1px solid #60baff3b;
    padding: 1px 5px;
    border-radius: 5px;
    color: #525252;
    box-shadow: -1px 1px 2px 0px #8c8c8c8c;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.ps-report-section-content-part1 .workflow-card-one.active, .ps-report-section-content-part1 .workflow-card-two.active,
.ps-report-section-content-part1 .workflow-card-three.active, .ps-report-section-content-part1 .workflow-card-four.active {
    background: #eff4fa !important;
}
/*======================= Media Query for responsive design ============================*/

    @media (max-width:1339px){
    .tweak-the-agent-content-box svg {
        transform: rotate(35deg);
        top: -41px;
        right: -21px;
        left:unset;
        bottom:unset;
    }
        .onboarding-content-text {
            margin: 40px 0px;
        }
}
    @media(max-width:1139px) {
    .admin-challenges-container {
        padding-top: 40px;
    }
}
    @media(max-width:1190px){
        .onboarding-content-text, .offboarding-content-text, .flow-section-content-text, .admin-challenges-content-text {
            width: 90%;
            max-width: unset;
        }
    }
    @media (max-width:1024px) {
        .automation-banner-icon svg {
            display: none;
        }
        .automation-banner-icon-content-wrapper {
            display: block;
        }
    }
    @media (max-width:1099px) {
    .flow-agents-text {
        width: 90%;
        max-width: unset;
    }

    .start-automating {
        margin-top: 20px;
    }
}
    @media (max-width:900px) {
        .options {
            gap: 20px;
        }
        .option {
            justify-content: center;
            text-align: center;
            flex-direction: column;
            min-height: 195px;
            max-width: 250px;
        }
        .flow-section-content-quote {
            width: 100%;
        }
        .droid-banner-title {
            font-size: 2.2em;
        }
    }
    @media (max-width:875px) {
        .tweak-the-agent-content-box1 svg {
            bottom: -54px;
            transform: rotate(164deg);
            left: 56px;
        }
        .tweak-the-agent-content-box svg {
            transform: rotate(352deg);
            right: 34px;
            top: -55px;
            left: unset;
        }
    }
    @media (max-width:724px) {
        .automation-banner-container .automation-banner-img {
            display: none;
        }
        .automation-banner-btn-wrap {
            text-align: center;
        }
        .automation-banner-content {
            width: 100%;
        }
        .automation-banner-content {
            margin-left: unset;
            margin-right: unset;
        }
        .offboarding-content-text, .flow-section-content-text, .admin-challenges-content-text,
        .tweak-the-agent-content-text, .bulk-executions-text, .pause-points, .revert-points, 
        .tweak-the-agent-image, .tweak-the-agent-content-box, .tweak-the-agent-content-box1 {
            margin: 20px 0px;
        }
        .automation-banner-title {
            font-size: 2.1em;
        }
        .ps-report-section-content-part1 {
            padding: unset;
            margin-top: 30px;
        }
        .bulk-executions-text {
            margin-left: 10px;
        }
    }
    @media (max-width: 769px){
        .modal-admin {
            display: none;
        }
        .bulk-executions-main-title-wrapper, .role-based-access-control-title-wrapper{
            margin-left:10px;
        }
        .admin-challenge{
            max-width:unset;
            min-height:unset;
        }
    }
@media only screen and (min-width: 769px) and (max-width: 1349px) {
    .description-card {
        display: none;
        padding: 10px !important;
        margin-bottom: 0px;
    }
    .ps-report-section-container {
        margin-top: 30px;
    }
    .description-card .expand {
        display: none;
    }
}
@media (max-width:1349px){
    .exp-text{
        display:none;
    }
}
@media (max-width:1051px) {
    .revert-points, .pause-points, .bulk-executions-text, .role-based-access-control-points, .approvals-intro {
        max-width: unset;
        width: 90%;
    }
    .bulk-executions-main-title-wrapper, .role-based-access-control-title-wrapper{
        margin-left:35px;
    }
}
    @media (max-width:550px) {
        .option {
            min-height: unset;
            max-width: 380px;
            justify-content: center;
            flex-direction: row;
            margin: 0 auto;
            text-align: left;
        }
        .content-box-icon {
            display: none;
        }
        .droid-section-main-title {
            font-size: 1.8em !important;
        }
        .user-centric-section-main-title, .admin-centric-agents-main-title, .standout-features-section-subtag, 
        .bulk-executions-main-title, .built-in-approvals-main-title, .role-based-access-control-main-title {
            font-size: 1.6em !important;
        }
        .revert-section-main-title, .pause-and-resume-agent-section-main-title {
            font-size: 1.4em !important;
        }
    }
    @media (max-width:545px){
        .onboarding-container .onboarding-content-image, .offboarding-container .offboarding-content-image,
        .admin-challenges-container .admin-challenges-content-img, .flow-section-container .flow-content-image, .bulk-executions-inner-container .bulk-executions-section-img,
        .role-based-access-control-container .role-based-access-control-section-img,
        .revert-agent-actions-container .revert-agent-action-section-img, .pause-and-resume-agent-execution-container .pause-and-resume-agent-execution-section-img,
        .built-in-approvals-container .built-in-approvals-section-img {
            display: none;
        }
    }
    @media (max-width:426px) {
        .hero-subtext {
            font-size: 13px;
            line-height: 1.5;
        }
       .fr-description-card-text .droid-section-sub-title {
            font-size: 1.1em !important;
        }
        .workflow-desc p {
            font-size: 0.95em;
        }
        .line1 {
            font-size: 1.3rem;
        }
        .start-text {
            font-size: 1.5rem;
            text-align: center;
        }
        .built-in-approvals-icon {
            top: -31px;
            right: 30px;
            transform: rotate(30deg);
            left: unset;
            bottom: unset;
        }
        .built-in-approvals-card {
            margin-bottom: 10px;
            margin-left: unset;
        }
        .built-in-approvals-icon i {
            transform: rotate(-30deg);
        }
        .built-in-approvals-card-content {
            padding-left: 8px;
            padding-top: 20px;
        }
        .built-in-approvals-card:nth-child(1), .built-in-approvals-card:nth-child(2), .built-in-approvals-card:nth-child(3),
        .built-in-approvals-card:nth-child(4), .built-in-approvals-card:nth-child(5) {
            border-left: unset;
        }
        .built-in-approvals-card:nth-child(1) {
            border-top: 2px solid #007b89; 
        }
        .built-in-approvals-card:nth-child(2) {
            border-top: 2px solid #cb6b00;
        }
        .built-in-approvals-card:nth-child(3) {
            border-top: 2px solid #509ee2;
        }
        .built-in-approvals-card:nth-child(4) {
            border-top: 2px solid #ff6998;
        }
        .built-in-approvals-card:nth-child(5) {
            border-top: 2px solid #9280d6;
        }
    }

/*================= key frames form animation =====================*/

@keyframes circuit-pulse {
    0% {
        left: 0;
        opacity: 0.2;
    }
    50% {
        opacity: 0.6;
    }
    75% {
        opacity: 0.2;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}
@keyframes circuit-pulse1 {
    0% {
        right: 0;
        opacity: 0.2;
    }
    50% {
        opacity: 0.6;
    }
    75% {
        opacity: 0.2;
    }
    100% {
        right: 100%;
        opacity: 0;
    }
}
@keyframes shimmer {
    100% {
        left: 100%;
    }
}
@keyframes jump{
    0%,100%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-10px);
    }
}