.leftSection,.rightSection{height:100%;width:100%}.tutorialList:hover,.tutorialsSubList a:hover{background-color:#3570de2e}.tutorialHeading a,.tutorialSmallBox a,.tutorialsSubList a{text-decoration:none}*{color:#222C3D}#tutorialsMainBody h1{font-size:42px;font-weight:500}#tutorialsMainBody h2{font-size:32px;font-weight:500}#tutorialsMainBody h3{font-size:22px;font-weight:500}.rightContentContainer p{font-weight:300;margin-bottom:10px}.container-fluid{padding-bottom:30px}.tutorialsBody{margin:0 50px}.row,.tutDetails p,label{margin:0}.leftSection{border-radius:10px;background-color:#f7f9fe;border:1px solid #70707030;padding:15px}.groupBigBox,.groupBox,.rightContentContainer,.tutorialList,.tutorialListBox,.tutorialListItems{display:flex;flex-direction:column}.tutorialHeading,.tutorialListHeading,.tutorialsItem{align-items:center;width:100%;cursor:pointer;display:flex}.tutorialListHeading{min-height:36px}.tutorialHeading{padding:0 10px;display:flex;align-items:center;justify-content:space-between}.tutorialHeading a{color:#1e1f21;width:calc(100% - 20px);height:36px;display:flex;align-items:center;font-size:14px}.breadcrumb-item,.tutorialsItem,.tutorialsSubList a{align-items:center;display:flex}.nextPreviousBox span a:hover,.tutorialHeading:hover a{color:var(--color-primary)}.tutorialList:focus-visible{background-color:#3570de2e}.tutorialsSubList a{color:#1e1f21;padding:0 10px;width:100%;font-size:14px}.tutorialsSubList a:hover{color:var(--color-primary)}.tutorialsSubList{display:flex;flex-direction:column;padding:5px 10px;background-color:#fff;height:auto;row-gap:10px;max-height:450px;overflow:auto}.tutorialsItem a{padding:5px}.arrowDown{height:24px;width:24px;background-color:transparent;border-radius:5px;display:flex;align-items:center;justify-content:center}.arrowDown:hover{background-color:#adc8f6}.arrowDown:hover path{stroke:var(--color-primary)}.active{background-color:#3570de2e;color:var(--color-primary)}.descriptionBox{font-size:14px;color:#6d6e6f}.rightSectionHeading{padding-top:10px}.tutorialSmallBox{width:100%;border-radius:10px;padding:15px 15px 0}.smalltutorialImageBox{height:auto;display:block;border-radius:10px;border:1px solid #e1e1e1;overflow:hidden}.tutorialImage{height:175px;width:100%;object-fit:cover;padding:3px;border-radius:10px}.smalltutorialImageBox:hover{box-shadow:0 0 10px 0 rgba(0,0,0,.1)}.smalltutorialDetails{justify-content:space-around;row-gap:20px;padding:8px 4px}.tutorialOverview{display:flex;flex-direction:column;row-gap:10px}.tutorialDescription,.tutorialTitle{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;width:100%}.tutorialTitle{color:#1f1f1f;font-size:16px;font-weight:600;-webkit-line-clamp:2;margin:0}.tutorialDescription{color:#74777f;-webkit-line-clamp:3;text-align:justify}.breadcrumb a{color:#6d6e6f;font-size:12px}.breadcrumb{padding:0;margin:0;background-color:transparent;display:flex;align-items:center}.breadcrumb .active{background-color:transparent;color:var(--color-primary)}.breadcrumb .active a{color:var(--color-primary);font-weight:500}.rightContentContainer h2{margin-top:20px;margin-bottom:0;padding-bottom: 5px;}.rightContentContainer h3{margin-top:30px;margin-bottom:0}.rightContentContainer img,.rightContentContainer p,.rightContentContainer ul{margin-top:15px}.tutorialImageBox{width:100%;height:430px;padding:10px;border-radius:10px}.tutorialImageBox img{width:100%;height:100%;object-fit:contain;border-radius:10px;image-orientation:none}.nextPreviousBox{justify-content:space-between;align-items:center;margin:20px 0}.nextPreviousBox span a{font-size:14px;color:#6d6e6f;text-decoration:none;display:flex;align-items:center;column-gap:5px}.nextPreviousBox a:hover svg{stroke:var(--color-primary)!important}.groupBigBox p{margin-top:5px}.WatchNowButton .watchNow{height:47px;color:#fff;padding:10px;display:flex;align-items:center;background-color:rgba(0,0,0,.818);width:170px;column-gap:10px;font-size:14px}.tutDetails{display:flex;flex-direction:column;background-color:#eff2f7;padding:10px}.rightContentContainer .groupBox ol,.rightContentContainer .groupBox ul{margin-left:20px;margin-right:20px}.tutDetails .tutTitle{font-size:14px;font-weight:600;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tutDetails .tutCategory{font-size:12px;font-weight:400}@media only screen and (max-width:767px){.leftSection{position:sticky;top:60px;z-index:1}}@media only screen and (min-width:768px){.leftSection{position:sticky;top:120px}}@media only screen and (max-width:667px){#tutorialsMainBody h2{font-size:22px}#tutorialsMainBody h3{font-size:18px;font-weight:500}}.groupBox ul li{margin-left:30px}
.leftSection,.rightSection{height:100%;width:100%}.tutorialList:hover,.tutorialsSubList a:hover{background-color:#3570de2e}.tutorialHeading a,.tutorialSmallBox a,.tutorialsSubList a{text-decoration:none}*{color:#222C3D}#tutorialsMainBody h1{font-size:42px;font-weight:500}#tutorialsMainBody h2{font-size:32px;font-weight:500}#tutorialsMainBody h3{font-size:22px;font-weight:500}.rightContentContainer p{font-weight:300;margin-bottom:10px}.container-fluid{padding-bottom:30px}.tutorialsBody{margin:0 50px}.row,.tutDetails p,label{margin:0}.leftSection{border-radius:10px;background-color:#f7f9fe;border:1px solid #70707030;padding:15px}.groupBigBox,.groupBox,.rightContentContainer,.tutorialList,.tutorialListBox,.tutorialListItems{display:flex;flex-direction:column}.tutorialHeading,.tutorialListHeading,.tutorialsItem{align-items:center;width:100%;cursor:pointer;display:flex}.tutorialListHeading{min-height:36px}.tutorialHeading{padding:0 10px;display:flex;align-items:center;justify-content:space-between}.tutorialHeading a{color:#1e1f21;width:calc(100% - 20px);height:36px;display:flex;align-items:center;font-size:14px}.breadcrumb-item,.tutorialsItem,.tutorialsSubList a{align-items:center;display:flex}.nextPreviousBox span a:hover,.tutorialHeading:hover a{color:var(--color-primary)}.tutorialList:focus-visible{background-color:#3570de2e}.tutorialsSubList a{color:#1e1f21;padding:0 10px;width:100%;font-size:14px}.tutorialsSubList a:hover{color:var(--color-primary)}.tutorialsSubList{display:flex;flex-direction:column;padding:5px 10px;background-color:#fff;height:auto;row-gap:10px;max-height:450px;overflow:auto}.tutorialsItem a{padding:5px}.arrowDown{height:24px;width:24px;background-color:transparent;border-radius:5px;display:flex;align-items:center;justify-content:center}.arrowDown:hover{background-color:#adc8f6}.arrowDown:hover path{stroke:var(--color-primary)}.active{background-color:#3570de2e;color:var(--color-primary)}.descriptionBox{font-size:14px;color:#6d6e6f}.rightSectionHeading{padding-top:10px}.tutorialSmallBox{width:100%;border-radius:10px;padding:15px 15px 0}.smalltutorialImageBox{height:auto;display:block;border-radius:10px;border:1px solid #e1e1e1;overflow:hidden}.tutorialImage{height:175px;width:100%;object-fit:cover;padding:3px;border-radius:10px}.smalltutorialImageBox:hover{box-shadow:0 0 10px 0 rgba(0,0,0,.1)}.smalltutorialDetails{justify-content:space-around;row-gap:20px;padding:8px 4px}.tutorialOverview{display:flex;flex-direction:column;row-gap:10px}.tutorialDescription,.tutorialTitle{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;width:100%}.tutorialTitle{color:#1f1f1f;font-size:16px;font-weight:600;-webkit-line-clamp:2;margin:0}.tutorialDescription{color:#74777f;-webkit-line-clamp:3;text-align:justify}.breadcrumb a{color:#6d6e6f;font-size:12px}.breadcrumb{padding:0;margin:0;background-color:transparent;display:flex;align-items:center}.breadcrumb .active{background-color:transparent;color:var(--color-primary)}.breadcrumb .active a{color:var(--color-primary);font-weight:500}.rightContentContainer h2{margin-top:20px;margin-bottom:0;padding-bottom: 5px;}.rightContentContainer h3{margin-top:30px;margin-bottom:0}.rightContentContainer img,.rightContentContainer p,.rightContentContainer ul{margin-top:15px}.tutorialImageBox{width:100%;height:430px;padding:10px;border-radius:10px}.tutorialImageBox img{width:100%;height:100%;object-fit:contain;border-radius:10px;image-orientation:none}.nextPreviousBox{justify-content:space-between;align-items:center;margin:20px 0}.nextPreviousBox span a{font-size:14px;color:#6d6e6f;text-decoration:none;display:flex;align-items:center;column-gap:5px}.nextPreviousBox a:hover svg{stroke:var(--color-primary)!important}.groupBigBox p{margin-top:5px}.WatchNowButton .watchNow{height:47px;color:#fff;padding:10px;display:flex;align-items:center;background-color:rgba(0,0,0,.818);width:170px;column-gap:10px;font-size:14px}.tutDetails{display:flex;flex-direction:column;background-color:#eff2f7;padding:10px}.rightContentContainer .groupBox ol,.rightContentContainer .groupBox ul{margin-left:20px;margin-right:20px}.tutDetails .tutTitle{font-size:14px;font-weight:600;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tutDetails .tutCategory{font-size:12px;font-weight:400}@media only screen and (max-width:767px){.leftSection{position:sticky;top:60px;z-index:1}}@media only screen and (min-width:768px){.leftSection{position:sticky;top:120px}}@media only screen and (max-width:667px){#tutorialsMainBody h2{font-size:22px}#tutorialsMainBody h3{font-size:18px;font-weight:500}}.groupBox ul li{margin-left:30px}
.search-container .search-box{
    width: 100% !important;
    border: 1px solid #CED0D5 !important;
    border-radius: 5px !important;
    height: 35px !important;
}
.text-color{
    color: var(--text-primary) !important;
}
/* Intro box styling */
.introBox{
    border: 1px solid #CED0D5;
    border-radius: 10px;
    background-color: #fff;
    padding: 30px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

/* Intro Header */
.intro-header {
    margin-bottom: 30px;
    text-align: center;
}

.intro-header h1 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--text-primary);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
}

.intro-subtitle {
    font-size: 18px;
    color: #666;
    font-weight: 400;
    margin-bottom: 0;
    line-height: 1.5;
}

/* Content Sections */
.intro-content {
    margin-bottom: 30px;
}

.tutorial-descriptions section{
    padding: 10px 0 !important;
}

.intro-content h2 {
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
    margin-top: 0;
}

.tutorialDescription section{
    padding: 10px 0;
}

.intro-content p {
    color: #444;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Tutorial Categories */
.tutorial-categories {
    margin-bottom: 40px;
}

.tutorial-categories h2 {
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
    margin-top: 0;
}

.tutorial-categories > p {
    color: #666;
    font-size: 16px;
    margin-bottom: 25px;
}

.tutorial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.tutorial-category {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    border-left: 4px solid var(--color-primary);
    transition: all 0.3s ease;
}

.tutorial-category:hover {
    background: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.tutorial-category h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
}

.tutorial-category h3 a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.tutorial-category h3 a:hover {
    color: #9630c6;
    text-decoration: underline;
}

.tutorial-category p {
    color: #555;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

/* Additional Resources */
.additional-resources {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 25px;
    border-top: 3px solid var(--color-primary);
}

.additional-resources h2 {
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    margin-top: 0;
}

.additional-resources p {
    color: #666;
    font-size: 16px;
    margin-bottom: 15px;
}

.resource-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.resource-links li {
    margin-bottom: 10px;
    color: #444;
    font-size: 15px;
    line-height: 1.5;
}

.resource-links a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.resource-links a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .introBox {
        padding: 20px;
    }
    
    .intro-header h1 {
        font-size: 24px;
    }
    
    .intro-subtitle {
        font-size: 16px;
    }
    
    .tutorial-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .tutorial-category {
        padding: 15px;
    }
    
    .additional-resources {
        padding: 20px;
    }
}
.middle-section-container{
    padding: 0 15px 0 15px;
}
/* Modern tutorial card enhancements */
.tutorialSmallBox{position:relative}
.tutorialSmallBox .tutorialLink{display:block; outline:none}
.tutorialSmallBox .tutorialLink:focus-visible .smalltutorialImageBox{box-shadow:0 10px 26px rgba(8,96,226,.26); transform:translateY(-4px)}

.smalltutorialImageBox{position:relative; overflow:hidden; border:1px solid #e9ecef; border-radius:12px; background:#fff; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; transform-style:preserve-3d}
.tutorialSmallBox:hover .smalltutorialImageBox{transform:translateY(-6px) perspective(600px) rotateX(0.5deg); box-shadow:0 16px 36px rgba(0,0,0,.12); border-color:#dfe4ea}

/* Subtle shine on hover */
.smalltutorialImageBox::after{content:""; position:absolute; top:-100%; left:-50%; width:60%; height:300%; background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%); transform:rotate(25deg); transition:transform .6s ease, opacity .6s ease; opacity:0; pointer-events:none}
.tutorialSmallBox:hover .smalltutorialImageBox::after{transform:translateX(250%) rotate(25deg); opacity:1}

/* Image */
.tutorialImage{display:block; width:100%; height:175px; object-fit:cover; border-radius:10px}

/* Details overlay reveal */
.tutDetails{position:absolute; left:0; bottom:0; width:100%; padding:10px 12px; background:linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,0) 100%); color:#fff; transform:translateY(40%); opacity:0; transition:transform .35s ease, opacity .35s ease}
.tutorialSmallBox:hover .tutDetails{transform:translateY(0); opacity:1}
.tutDetails .tutTitle{color:#fff; font-weight:700; font-size:15px; margin:0}
.tutDetails .tutCategory{color:#e6e6e6; font-size:12px; margin:4px 0 0 0}

/* CTA appears only on hover/focus */
.tutDetails::after{
  content:"Read Tutorial →";
  position:absolute; right:16px; bottom:14px; /* moved to bottom-right */
  background:rgba(8,96,226,.9);
  color:#fff; padding:6px 12px; border-radius:6px;
  font-size:12px; font-weight:700; letter-spacing:.2px;
  box-shadow:0 6px 16px rgba(8,96,226,.25);
  opacity:0; transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
}
.tutorialSmallBox:hover .tutDetails::after,
.tutorialSmallBox .tutorialLink:focus-visible .tutDetails::after{opacity:1; transform:translateY(0)}

/* Category section heading polish */
.groupBox > h2{font-size:26px; font-weight:700; color:var(--text-primary); margin:10px 0 12px}

/* Spacing tightening after redesign */
.rightSection{row-gap:26px}

/* Reduce card inner padding on small screens */
@media (max-width: 767px){
  .smalltutorialImageBox{border-radius:10px}
  .tutDetails{padding:10px}
}

/* Override: Blur image on hover and expand details without flip */
.tutorialSmallBox{perspective:1000px}
.smalltutorialImageBox{height:240px; position:relative}

/* Image front face - no flip, prepare for blur */
.smalltutorialImageBox .tutorialImage{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; background:#fff; border-radius:10px;
  transition:filter .35s ease, transform .35s ease, opacity .35s ease;
  opacity:1;
}

/* Details act as overlay: show compact title initially at top */
.tutDetails{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-start; /* top by default */
  padding:10px 12px; border-radius:10px; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 70%);
  color:#fff; max-height:72px; /* more room to always show title */
  overflow:hidden; transition:max-height .35s ease, padding .35s ease, justify-content .35s ease;
  z-index:2;
  opacity:1; /* ensure title is visible before hover */
  transform:none; /* reset initial transform so overlay isn't shifted */
}
.tutDetails .tutTitle{color:#fff; font-weight:700; font-size:15px; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.tutDetails .tutCategory{color:#eaeaea; font-size:12px; margin:4px 0 0 0; opacity:.9}

/* Hover state: blur image, expand details fully and move content to bottom */
.tutorialSmallBox:hover .tutorialImage{
  filter:blur(3px) brightness(0.85);
  transform:scale(1.03);
  opacity:1 !important;
}
.tutorialSmallBox:hover .tutDetails{
  max-height:100%; padding:16px; padding-bottom:56px; /* extra space for CTA */
  justify-content:flex-end; /* move content to bottom on hover */
}

/* Keyboard accessibility mirrors hover */
.tutorialSmallBox .tutorialLink:focus-visible .tutorialImage{filter:blur(3px) brightness(0.85); transform:scale(1.03)}
.tutorialSmallBox .tutorialLink:focus-visible .tutDetails{max-height:100%; padding:16px; padding-bottom:56px; justify-content:flex-end}

@media (max-width: 767px){
  .smalltutorialImageBox{height:220px}
}
/* Tutorial page UI polish: card-like steps, better headings, spacing, and links */
#tutorialsMainBody .rightSectionHeading h1{margin:0 0 8px 0; line-height:1.25; letter-spacing:.2px}
#tutorialsMainBody .descriptionBox{font-size:15px; color:#444; margin-top:8px}

/* Step groups as cards */
#tutorialsMainBody .groupBox{background:#fff; border:1px solid #e9ecef; border-radius:12px; padding:18px 18px 16px 18px; box-shadow:0 6px 16px rgba(0,0,0,.05)}
#tutorialsMainBody .groupBox h3{margin:0; padding-left:12px; border-left:4px solid var(--color-primary); line-height:1.35;padding-bottom: 5px;}

/* Images inside steps */
#tutorialsMainBody .tutorialImageBox{height:auto; padding:8px; background:#fff; border:1px solid #e9ecef; border-radius:10px}
#tutorialsMainBody .tutorialImageBox img{height:auto; max-height:520px}

/* FAQ section spacing */
#tutorialsMainBody .groupBigBox{row-gap:12px}
#tutorialsMainBody .groupBigBox > div{padding-top:10px}
#tutorialsMainBody .groupBigBox > div + div{border-top:1px solid #edf0f3}

/* Breadcrumb separators and hover */
#tutorialsMainBody .breadcrumb{gap:4px}
#tutorialsMainBody .breadcrumb a:hover{color:var(--color-primary)}
#tutorialsMainBody .breadcrumb-item + .breadcrumb-item::before{content:"/"; padding:0 6px; color:#a1a5ad}

/* Next/Previous emphasis */
#tutorialsMainBody .nextPreviousBox span a{font-weight:600}

/* Watch button hover/active/focus */
#tutorialsMainBody .WatchNowButton .watchNow{transition:background-color .25s ease, transform .2s ease, box-shadow .25s ease; border-radius:8px}
#tutorialsMainBody .WatchNowButton .watchNow:hover{background-color:rgba(8,96,226,.95); transform:translateY(-1px); box-shadow:0 8px 18px rgba(8,96,226,.25)}
#tutorialsMainBody .WatchNowButton a:focus-visible .watchNow{box-shadow:0 0 0 3px rgba(8,96,226,.35)}

/* Conclusion card and CTA */
#tutorialsMainBody .conclusionBox{border:1px solid #e6eefc;}
#tutorialsMainBody .conclusionCTA{margin-top:12px}
#tutorialsMainBody .conclusionCTA .ctaPrimary{display:inline-block; padding:10px 14px; background:var(--color-primary); color:#fff; border-radius:8px; font-weight:700; text-decoration:none; box-shadow:0 8px 18px rgba(8,96,226,.25); transition:transform .2s ease, box-shadow .25s ease}
#tutorialsMainBody .conclusionCTA .ctaPrimary:hover{transform:translateY(-1px); box-shadow:0 12px 26px rgba(8,96,226,.3)}
/* Next link hover polish */
#tutorialsMainBody .nextPreviousBox span a{position:relative; display:inline-flex; align-items:center; gap:6px; text-decoration:none}
#tutorialsMainBody .nextPreviousBox span a svg{transition:transform .2s ease, stroke .2s ease}
#tutorialsMainBody .nextPreviousBox span a:hover{color:var(--color-primary)}
#tutorialsMainBody .nextPreviousBox span a:hover svg{transform:translateX(3px); stroke:var(--color-primary)!important}
#tutorialsMainBody .nextPreviousBox span a:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(8,96,226,.25); border-radius:6px}

@media (max-width: 991px){
  #tutorialsMainBody .tutorialImageBox img{max-height:420px}
}
@media (max-width: 767px){
  #tutorialsMainBody .tutorialImageBox{padding:6px}
  #tutorialsMainBody .tutorialImageBox img{max-height:320px}
}
/* FAQ section professional styling */
#tutorialsMainBody .groupBigBox{margin-top:18px}
#tutorialsMainBody .groupBigBox h2{margin:0 0 10px 0; line-height:1.25}
#tutorialsMainBody .groupBigBox > div{background:#fff; border:1px solid #e9ecef; border-left:4px solid var(--color-primary); border-radius:12px; padding:14px 16px; box-shadow:0 6px 16px rgba(0,0,0,.05); transition:box-shadow .25s ease, transform .2s ease}
#tutorialsMainBody .groupBigBox > div + div{margin-top:12px}
#tutorialsMainBody .groupBigBox > div:hover{box-shadow:0 12px 28px rgba(0,0,0,.08); transform:translateY(-1px)}
#tutorialsMainBody .groupBigBox h3{margin:0 0 6px 0; font-size:18px; font-weight:700; color:var(--text-primary); line-height:1.35; position:relative; padding-left:28px}
#tutorialsMainBody .groupBigBox h3::before{content:"Q"; position:absolute; left:0; top:0; height:22px; min-width:22px; padding:0 6px; border-radius:6px; background:rgba(8,96,226,.1); color:var(--color-primary); font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center}
#tutorialsMainBody .groupBigBox p{margin:0; color:#444; line-height:1.7; position:relative; padding-left:28px}
#tutorialsMainBody .groupBigBox p::before{content:"A"; position:absolute; left:0; top:2px; height:22px; min-width:22px; padding:0 6px; border-radius:6px; background:#f1f4f9; color:#5b6270; font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center}
@media (max-width:767px){#tutorialsMainBody .groupBigBox > div{padding:12px 12px}#tutorialsMainBody .groupBigBox h3{padding-left:26px}#tutorialsMainBody .groupBigBox p{padding-left:26px}}
.backgroundColor{background-color:var(--color-primary) !important}
.groupBox h4{
    line-height: 1.35 !important;
    font-size: 20px !important;
    font-weight: 400 !important;
}
/* Mobile and Tablet Menu Toggle Button */
.tutorial-menu-toggle-btn{display:none;position:fixed;top:70px;left:0;right:0;z-index:1050;width:100%;justify-content:end;color:#fff;border:none;padding:12px 20px;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15);align-items:center;gap:8px;transition:all .3s ease}
.tutorial-menu-toggle-btn svg{width:20px;height:20px}
.tutorial-menu-toggle-btn[aria-expanded="true"]{}
@media (max-width:991.98px){#tutorialsMainBody .leftSection#accordion{position:fixed;top:140px;left:0;right:0;bottom:0;z-index:1040;background:#fff;transform:translateX(-100%);transition:transform .3s ease-in-out;overflow-y:auto;box-shadow:2px 0 10px rgba(0,0,0,.1);max-width:320px}#tutorialsMainBody .leftSection#accordion.is-visible{transform:translateX(0)}.tutorial-menu-toggle-btn{display:flex}.tutorial-menu-overlay{position:fixed;top:140px;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1035;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.tutorial-menu-overlay.is-visible{opacity:1;visibility:visible}}
@media (min-width:992px){.tutorial-menu-toggle-btn{display:none!important}#tutorialsMainBody .leftSection#accordion{position:sticky!important;transform:none!important;top:120px!important;left:auto!important;right:auto!important;bottom:auto!important;max-width:none!important;box-shadow:none!important;z-index:1!important;background-color:#F7F9FE!important;border:1px solid #70707030!important;border-radius:10px!important;padding:15px!important;height:fit-content!important}}