/* -------------------------------- 

File#: _2_side-navigation-v3
Title: Side Navigation v3
Descr: A primary navigation located in the sidebar
Usage: codyhouse.co/license

-------------------------------- */
/* reset */
*, *::after, *::before {
    box-sizing: border-box;
  }
  
  * {
    font: inherit;
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  body {
    background-color: hsl(0, 0%, 100%);
    font-family: 'Roboto', sans-serif !important;
    color: hsl(230, 7%, 23%);
    font-size: 1rem;
    width:100%;
    overflow:hidden;
  }
  
  h1, h2, h3, h4 {
    line-height: 1.2;
    color: hsl(230, 13%, 9%);
    font-weight: 700;
  }
  
  h1 {
    font-size: 2.0736rem;
  }
  
  h2 {
    font-size: 1.728rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  h4 {
    font-size: 1.2rem;
  }
  
  ol, ul, menu {
    list-style: none;
  }
  
  button, input, textarea, select {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    appearance: none;
  }
  
  textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top;
  }
  
  a {
    color: hsl(250, 84%, 54%);
  }

  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  

  
  @media (min-width: 64rem) {
    body {
      font-size: 1.25rem;
    }
  
    h1 {
      font-size: 3.051rem;
    }
  
      h2 {
      font-size: 2.44rem;
    }
  
      h3 {
      font-size: 1.75rem;
    }
  
      h4 {
      font-size: 1.5625rem;
    }
  }
  
  :root {
    /* colors */
    --sb4-color-primary-hsl: 250, 84%, 54%;
    --sb4-color-bg-hsl: 0, 0%, 100%;
    --sb4-color-contrast-high-hsl: 230, 7%, 23%;
    --sb4-color-contrast-higher-hsl: 230, 13%, 9%;
    --sb4-color-contrast-lower-hsl: 240, 4%, 85%;
    --sb4-color-bg-light-hsl: 0, 0%, 100%;
    --sb4-color-bg-dark-hsl: 240, 4%, 95%;
    --sb4-color-bg-lighter-hsl: 0, 0%, 100%;
    --sb4-color-white-hsl: 0, 0%, 100%;
    --sb4-color-black-hsl: 230, 13%, 9%;
    --sb4-color-accent-hsl: 342, 89%, 48%;
  
    /* spacing */
    --sb4-space-3xs: 0.25rem;
    --sb4-space-sm: 0.75rem;
    --sb4-space-md: 1.25rem;
    --sb4-space-lg: 2rem;
    --sb4-space-2xs: 0.375rem;
    --sb4-space-xs: 0.5rem;
  
    /* typography */
    --sb4-text-base: 1rem;
    --sb4-text-sm: 0.833rem;
  }
  
  @media(min-width: 64rem){
    :root {
      /* spacing */
      --sb4-space-3xs: 0.375rem;
      --sb4-space-sm: 1.125rem;
      --sb4-space-md: 2rem;
      --sb4-space-lg: 3.125rem;
      --sb4-space-2xs: 0.5625rem;
      --sb4-space-xs: 0.75rem;
  
      /* typography */
      --sb4-text-base: 1.25rem;
      --sb4-text-sm: 1rem;
    }
  }
  
  /* buttons */
  .sb4-btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    white-space: nowrap;
    text-decoration: none;
    background: hsl(var(--sb4-color-bg-dark-hsl));
    color: hsl(var(--sb4-color-contrast-higher-hsl));
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: all 0.2s ease;
    will-change: transform;
    padding: var(--sb4-space-2xs) var(--sb4-space-sm);
    border-radius: 0.25em;
  }
  
  .sb4-btn:focus-visible {
    box-shadow: 0px 0px 0px 2px hsl(var(--sb4-color-bg-hsl)), 0px 0px 0px 4px hsla(var(--sb4-color-contrast-higher-hsl), 0.15);
    outline: none;
  }
  
  .sb4-btn:active {
    transform: translateY(2px);
  }
  
  .sb4-btn--subtle {
    background: hsl(var(--sb4-color-bg-lighter-hsl));
    color: hsl(var(--sb4-color-contrast-higher-hsl));
    box-shadow: inset 0px 1px 0px hsla(var(--sb4-color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--sb4-color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--sb4-color-black-hsl), 0.2), 0 0.3px 0.4px rgba(0, 0, 0, 0.025),0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
  }
  
  .sb4-btn--subtle:hover {
    background: hsl(var(--sb4-color-bg-light-hsl));
    box-shadow: inset 0px 1px 0px hsla(var(--sb4-color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--sb4-color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--sb4-color-black-hsl), 0.2), 0 0.1px 0.3px rgba(0, 0, 0, 0.06),0 1px 2px rgba(0, 0, 0, 0.12);
  }
  
  .sb4-btn--subtle:focus {
    box-shadow: inset 0px 1px 0px hsla(var(--sb4-color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--sb4-color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--sb4-color-black-hsl), 0.2), 0 0.1px 0.3px rgba(0, 0, 0, 0.06),0 1px 2px rgba(0, 0, 0, 0.12), 0px 0px 0px 2px hsl(var(--sb4-color-bg-hsl)), 0px 0px 0px 4px hsl(var(--sb4-color-contrast-high-hsl));
  }
  
  /* icons */
  .sb4-icon {
    height: var(--sb4-size, 1em);
    width: var(--sb4-size, 1em);
    display: inline-block;
    color: inherit;
    fill: currentColor;
    line-height: 1;
    flex-shrink: 0;
    max-width: initial;
  }
  
  .sb4-icon--xs {
    --sb4-size: 16px;
  }
  .sb4-text-component {
    width:80%;
    margin: 0 auto;
  }
  .sb4-text-component>div{
    display:flex;
    justify-content: center;
  }
  .sb4-text-component>div>h1,
  .sb4-text-component>div>span{
    display:inline-block;
  }

  .sb4-text-component>div>h1{
    color:#030E07;
    font-size:2.1em;
text-align: left;
  }

  .sb4-text-component>div>span{
    align-self:center;
    transform: translateY(-6px);
  }

  /* Additional CSS */

  
 
  #logoseprater {
    border: 1px black solid;
    transform: translateX(-3.75em) translateY(1em);
    border-color: #9F9F9F;
    width: 125%;
  }
  #logoseprater2 {
    border: 1px black solid;
    transform: translateX(0.5em) translateY(-0.5em);
    border-color: #9F9F9F;
    width: 112%;
  }


  /* font colors */ 

  .exsidenav__list span,
  .exsidenav_pop-link,
  .exsidenav__pop-nav span,
  .sb4-text-base,
  li>.exsidenav__link{
    color:#3d3d3d;
    text-align: left;
  }
  
  .shapea { 
    display:none;
  }

  div>.logolink{
    width:auto;
  }

 .sb4-container>div>#sidenav-v3{
  overflow: hidden auto;
  height:unset;
  position:sticky;
  max-height:100vh;  
  box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.1), inset -3px 0 5px rgba(0, 0, 0, 0.05); /* Inner shadow on the right */
 }  


 .sb4-container>div>main {
  width:100%;
  padding: unset !important;
  height:100vh;
  overflow-y:scroll;

 }

 ::-webkit-scrollbar {
  width: 4px;
}
 
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: #bababa;
}

::-webkit-scrollbar-thumb {
  background: #4f674f;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4f674f;
}
 .sb4-container>div>main>.sb4-text-component{

    height: 100%;
    width: 90%;
    margin-left: 2em;
    margin-right: 5em;
    padding-top:var(--sb4-space-sm);
  
 }

 .sb4-container>div>#sidenav-v3>.sidebar__panel{
  width:85%;
  margin-left: 1.5em;
  margin-right: 2em;
 }
 .sidebar__panel .sb4-position-relative {
  padding-right: 0;
 }

 /* Main content */

 .sb4-container > div > main > .sb4-text-component {
  margin: 0 auto;
  width:60%;
  height:auto;
  margin-top:1.5em;
}



main p {

    margin-top: 1.5em;
    line-height: 1.6em;
    font-size:0.895em;
    letter-spacing: 0.02rem;
}

main .footer p {
  margin-top: unset;
} 

.aca-p-on-dark {
  color: #D8D8D8 !important;
  font-size: 1rem;
}


main .ourmission p{
  font-size:0.8em;

}

.ourmissionwrapper.secondwrapper.thirdwrapper .ourmission a {
  color: #030E07 !important;
  font-weight: 600;
}
.ourmission{
  width:68%;
  margin: 0 auto;
}
.ourmission>div {
  display:flex;
  flex-direction:column;
  align-items:center;
}

.ourmission>div>span {
  height:6em;
}
.ourmission>div>span>img {
  height:inherit;
}

.ourmissionwrapper {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  background-color: #EEF5F0;
}
.ourmissionwrapper h2,
.ourmissionwrapper {
  color: #FFFFFF;
}

.ourmissionwrapper h2 {
  color: #030E07; 
  font-weight: 500;
  font-size: 2rem;
}
.ourmissionwrapper #imagewrapper1{

  display:inline-block;
  transform:translateY(-2.5em);
  height:2rem;
}

.ourmissionwrapper #imagewrapper1 img {
  height:6rem;
}

.ourmissionwrapper #imagewrapper2 {
  
  height:5rem;
  align-self:flex-start;
  transform:translateY(-21px)
}
.ourmissionwrapper #imagewrapper2 img {
  height:9rem;
}

.ourmissionwrapper.secondwrapper {
display:flex;
flex-direction:row;
align-items:center;
background-color:white;
margin-top:3rem;
}
.ourmissionwrapper.secondwrapper.thirdwrapper{
  height:31.91rem;
  max-height: 31.91rem;
  margin-top: 0;
}

.ourmissionwrapper.secondwrapper.thirdwrapper h2 {

    transform: translateX(34px);
    font-size: 1.4em;
    font-weight: 600;
}

.contatuscontainer > div:nth-child(1) > div:nth-child(1) {
  display:flex;
  flex-direction:row;
  justify-content:center;
  transform:translateY(-1.3rem) translateX(0.3rem)
}
.ourmissionwrapper.secondwrapper.thirdwrapper span {

	transform: translateY(-1.3rem) translateX(0.3rem);
	height: 4.5rem;

}

.triangledecoration {
  width:50%;
  height:100%;
  display: inline-block;  
  align-self:flex-end;
}
.triangledecoration img {
 transform:translateY(1px);
 width:100%;
 height:100%;
}


.ourmissionwrapper.secondwrapper.thirdwrapper p {
  margin-top:0;
}

.triangledecoration {
  height: 75%;
  margin-top:0;
}

 /* End of Main content */

  /* Academy Navbar */
  #footer-3 { 
    background-color: #223422 !important;
      width: auto;
      background-size: cover;

  }

  #footer-3 img {
    width:7rem;
  }
  

  /* End of Academy Navbar*/



@media(min-width:989px){
  .contatuscontainer > div:nth-child(1) > div:nth-child(1) {
  transform:translateY(0)
}
}
@media(width < 1632px){
  .triangledecoration{
    width:75%;
  }
}

@media(width < 1443px){
  .triangledecoration{
    height:75%;
  }
  .contatuscontainer{
    align-self:flex-end;
    margin-bottom:9rem;
  }
  .ourmissionwrapper.secondwrapper.thirdwrapper {
    margin-top:0;
  }

  .ourmissionwrapper.secondwrapper.thirdwrapper h2{
    font-size:1.3em;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1370px) {
  .ourmissionwrapper.secondwrapper.thirdwrapper .ourmission {
    width:75%;
  }


}

.ourmissionwrapper.secondwrapper>div>div>h2,
.ourmissionwrapper.secondwrapper>div>div>div>h2
{
  color:#313131;
  }

  .ourmissionwrapper.secondwrapper>div>p,
  .ourmissionwrapper.secondwrapper>div>div>p {
    color:#525252;
  }
/* Psuedo Elements */
.contatuscontainer{
  width:50%;
}

.exsidenav__pop-link:hover {
  color: #467756 !important;
}
.exsidenav__link.tabnavmainsite:hover,
.exsidenav__pop-link.tabnavmainsite:hover {
  color:unset !important;
}

.exsidenav__pop-link:hover svg path {
  fill: #000000;
}

.exsidenav__pop-link.tabnavmainsite:hover svg path{
  fill:black !important;
}

.circle {

    position: absolute;
    width: 25px;
    height: 26px;
    border-radius: 50%;
    background-color: #B1D3BC;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -10;
    transform: translateX(-5px);

}
.exsidenav__pop-link:hover .circle {

  opacity:1;
}


.exsidenav__control:hover {
  color: #467756 !important;
}
.exsidenav__link:hover {
  color: #467756 !important;

}



  /* component */
  :root {
    --side-template-mobile-header-height: 50px;
  }
  .side-template-v3{
    
  }
  @media not all and (min-width: 64rem) {
    .side-template-v3 .sidebar {
      --space-unit: 1.2rem;
      --text-unit: 1rem;
      font-size: var(--text-unit);
    }
  }
  
  /* mobile header - hidden on bigger screens */
  .side-template-v3__mobile-header {
    position: sticky;
    width:100%;
    top:0;
    background: hsl(var(--sb4-color-bg-light-hsl));
    height: var(--side-template-mobile-header-height);
    box-shadow: 0 0.1px 0.3px rgba(0, 0, 0, 0.06),0 1px 2px rgba(0, 0, 0, 0.12), 0 0.3px 0.4px rgba(0, 0, 0, 0.025),0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
    z-index: 3;
    height:4rem;
  }
  
  .side-template-v3__logo {
    display: block;
    width: 104px;
    flex-shrink: 0;
    text-decoration: none;
  }
  .side-template-v3__logo svg, .side-template-v3__logo img {
    display: block;
    width: inherit;
  }
  
  /* main */
  .side-template-v3__main {
    background-color: hsl(var(--sb4-color-bg-hsl));
  }


  
  @media (min-width: 64rem) {
    .side-template-v3 {
      background: linear-gradient(to right, hsla(var(--sb4-color-contrast-lower-hsl), 0.3) 50%, hsl(var(--sb4-color-bg-hsl)) 50%);
    }
  
    .side-template-v3__mobile-header {
      display: none;
    }
  
    .side-template-v3__main {
      /* min-height: 100vh; */
      min-height: unset;
    }
  }
  
  /* utility classes */
  .sb4-text-component :where(h1, h2, h3, h4) {
    line-height: var(--sb4-heading-line-height, 1.2);
    margin-top: calc(var(--sb4-space-md) * var(--sb4-space-multiplier, 1));
    margin-bottom: calc(var(--sb4-space-sm) * var(--sb4-space-multiplier, 1));
  }
  
  .sb4-text-component :where(p, blockquote, ul li, ol li) {
    line-height: var(--sb4-body-line-height, 1.4);
  }
  
  .sb4-text-component :where(ul, ol, p, blockquote, .sb4-text-component__block) {
    margin-bottom: calc(var(--sb4-space-sm) * var(--sb4-space-multiplier, 1));
  }
  
  .sb4-text-component :where(ul, ol) {
    padding-left: 1.25em;
  }
  
  .sb4-text-component ul :where(ul, ol), .sb4-text-component ol :where(ul, ol) {
    padding-left: 1em;
    margin-bottom: 0;
  }
  
  .sb4-text-component ul {
    list-style-type: disc;
  }
  
  .sb4-text-component ol {
    list-style-type: decimal;
  }
  
  .sb4-text-component img {
    display: block;
    margin: 0 auto;
  }
  
  .sb4-text-component figcaption {
    margin-top: calc(var(--sb4-space-xs) * var(--sb4-space-multiplier, 1));
    font-size: var(--sb4-text-sm);
    text-align: center;}
  
  .sb4-text-component em {
    font-style: italic;
  }
  
  .sb4-text-component strong {
    font-weight: bold;
  }
  
  .sb4-text-component s {
    text-decoration: line-through;
  }
  
  .sb4-text-component u {
    text-decoration: underline;
  }
  
  .sb4-text-component mark {
    background-color: hsla(var(--sb4-color-accent-hsl), 0.2);
    color: inherit;
  }
  
  .sb4-text-component blockquote {
    padding-left: 1em;
    border-left: 4px solid hsl(var(--sb4-color-contrast-lower-hsl));
    font-style: italic;
  }
  
  .sb4-text-component hr {
    margin: calc(var(--sb4-space-md) * var(--sb4-space-multiplier, 1)) auto;
    background: hsl(var(--sb4-color-contrast-lower-hsl));
    height: 1px;
  }
  
  .sb4-text-component > *:first-child {
    margin-top: 0;
  }
  
  .sb4-text-component > *:last-child {
    margin-bottom: 0;
    text-align: left;
  }
  
  .sb4-text-component.sb4-line-height-xs {
    --sb4-heading-line-height: 1;
    --sb4-body-line-height: 1.1;
  }
  
  .sb4-text-component.sb4-line-height-sm {
    --sb4-heading-line-height: 1.1;
    --sb4-body-line-height: 1.2;
  }
  
  .sb4-text-component.sb4-line-height-md {
    --sb4-heading-line-height: 1.15;
    --sb4-body-line-height: 1.4;
  }
  
  .sb4-text-component.sb4-line-height-lg {
    --sb4-heading-line-height: 1.22;
    --sb4-body-line-height: 1.58;
  }
  
  .sb4-text-component.sb4-line-height-xl {
    --sb4-heading-line-height: 1.3;
    --sb4-body-line-height: 1.72;
  }
  
  .sb4-padding-y-sm {
    padding-top: var(--sb4-space-sm);
    padding-bottom: var(--sb4-space-sm);
  }
  
  .sb4-flex-grow {
    flex-grow: 1;
  }
  
  .sb4-z-index-1 {
    z-index: 1;
  }
  
  .sb4-position-relative {
    position: relative;
  }
  
  @media not all and (min-width: 64rem) {
    .sb4-display\@md {
      display:none !important;
    }
  }
  
  .sb4-margin-left-3xs {
    margin-left: var(--sb4-space-3xs);
  }
  
  .sb4-margin-bottom-lg {
    margin-bottom: var(--sb4-space-lg);
  }
  
  .sb4-padding-sm {
    padding: var(--sb4-space-sm);
  }
  
  .sb4-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .sb4-font-medium {
    font-weight: 500;
  }
  
  .headerwrapper>.sb4-text-bas { 
    align-self:end;
  }
  .sb4-text-base {
    font-size: var(--sb4-text-base);
  }
  
  .sb4-z-index-2 {
    z-index: 2;
  }
  
  .sb4-border-bottom {
    --sb4-border-o: 1;
    border-bottom: var(--sb4-border-width, 1px) var(--sb4-border-style, solid) hsla(var(--sb4-color-contrast-lower-hsl), var(--sb4-border-o, 1));
  }
  
  .sb4-bg {
    --sb4-bg-o: 1;
    background-color: hsla(var(--sb4-color-bg-hsl), var(--sb4-bg-o, 1));
  }
  
  .sb4-max-width-4xs {
    max-width: 20rem;
  }
  
  .sb4-width-100\% {
    width: 100%;
  }
  
  .sb4-max-width-lg {
    max-width: 2000px;
    margin:0 auto;
  }
  

  
  .sb4-justify-between {
    justify-content: space-between;
  }
  
  .sb4-items-center {
    align-items: center;
  }
  
  .sb4-flex {
    display: flex;
  }
  
  .sb4-height-100\% {
    height: 100%;
  }
  
  @media(min-width: 64rem){
    .sb4-padding-left-sm\@md {
      padding-left: var(--sb4-space-sm);
    }
  
    .sb4-padding-left-0\@md {
      padding-left: 0;
    }
  
    .sb4-flex\@md {
      display: flex;
    }

    .academystructuretopwrapper>div {
      max-height:unset !important;
    }

  }

/* First Part Ends */


  /* Second Part Statrts */

  /* -------------------------------- 

File#: _1_responsive-sidebar
Title: Responsive Sidebar
Descr: Responsive sidebar container
Usage: codyhouse.co/license

-------------------------------- */
/* reset */
*, *::after, *::before {
    box-sizing: border-box;
  }
  
  * {
    font: inherit;
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  body {
    background-color: hsl(0, 0%, 100%);
    font-family: 'Roboto', sans-serif !important;
    color: hsl(230, 7%, 23%);
    font-size: 1rem;
  }
  
  h1, h2, h3, h4 {
    text-align:center;
    line-height: 1.2;
    color: hsl(230, 13%, 9%);
    font-weight: 700;
  }
  
  h1 {
    font-size: 2.0736rem;
  }
  
  h2 {
    font-size: 1.728rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  h4 {
    font-size: 1.2rem;
  }
  
  ol, ul, menu {
    list-style: none;
  }
  
  button, input, textarea, select {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    appearance: none;
  }
  
  textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top;
  }
  
  a {
    color: hsl(250, 84%, 54%);
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  

  
  @media (min-width: 64rem) {
    body {
      font-size: 1.25rem;
    }
  
    h1 {
      font-size: 3.051rem;
    }
  
      h2 {
      font-size: 2.44rem;
    }
  
      h3 {
      font-size: 1.75rem;
    }
  
      h4 {
      font-size: 1.5625rem;
    }
  }
  
  /* variables */
  :root {
    /* colors */
    --rz4-color-primary-hsl: 250, 84%, 54%;
    --rz4-color-bg-hsl: 0, 0%, 100%;
    --rz4-color-contrast-high-hsl: 230, 7%, 23%;
    --rz4-color-contrast-higher-hsl: 230, 13%, 9%;
    --rz4-color-bg-light-hsl: 0, 0%, 100%;
    --rz4-color-bg-lighter-hsl: 0, 0%, 100%;
    --rz4-color-black-hsl: 230, 13%, 9%;
    --rz4-color-bg-dark-hsl: 240, 4%, 95%;
    --rz4-color-white-hsl: 0, 0%, 100%;
    --rz4-color-primary-darker-hsl: 250, 84%, 38%;
    --rz4-color-primary-light-hsl: 250, 84%, 60%;
    --rz4-color-accent-hsl: 342, 89%, 48%;
    --rz4-color-contrast-lower-hsl: 240, 4%, 85%;
  
    /* spacing */
    --rz4-space-sm: 0.75rem;
    --rz4-space-md: 1.25rem;
    --rz4-space-lg: 2rem;
    --rz4-space-xl: 3.25rem;
    --rz4-space-2xs: 0.375rem;
    --rz4-space-xs: 0.5rem;
  
    /* typography */
    --rz4-text-md: 1.2rem;
    --rz4-text-sm: 0.833rem;
  }
  
  @media(min-width: 64rem){
    :root {
      /* spacing */
      --rz4-space-sm: 1.125rem;
      --rz4-space-md: 2rem;
      --rz4-space-lg: 3.125rem;
      --rz4-space-xl: 5.125rem;
      --rz4-space-2xs: 0.5625rem;
      --rz4-space-xs: 0.75rem;
  
      /* typography */
      --rz4-text-md: 1.5625rem;
      --rz4-text-sm: 1rem;
    }
  }
  
  /* buttons */
  .rz4-btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    white-space: nowrap;
    text-decoration: none;
    background: hsl(var(--rz4-color-bg-dark-hsl));
    color: hsl(var(--rz4-color-contrast-higher-hsl));
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: all 0.2s ease;
    will-change: transform;
    padding: var(--rz4-space-2xs) var(--rz4-space-sm);
    border-radius: 0.25em;
  }
  
  .rz4-btn:focus-visible {
    box-shadow: 0px 0px 0px 2px hsl(var(--rz4-color-bg-hsl)), 0px 0px 0px 4px hsla(var(--rz4-color-contrast-higher-hsl), 0.15);
    outline: none;
  }
  
  .rz4-btn:active {
    transform: translateY(2px);
  }
  
  .rz4-btn--primary {
    background: hsl(var(--rz4-color-primary-hsl));
    color: hsl(var(--rz4-color-white-hsl));
    box-shadow: inset 0px 1px 0px hsla(var(--rz4-color-white-hsl), 0.15), 0px 1px 3px hsla(var(--rz4-color-primary-darker-hsl), 0.25), 0px 2px 6px hsla(var(--rz4-color-primary-darker-hsl), 0.1), 0px 6px 10px -2px hsla(var(--rz4-color-primary-darker-hsl), 0.25);
  }
  
  .rz4-btn--primary:hover {
    background: hsl(var(--rz4-color-primary-light-hsl));
    box-shadow: inset 0px 1px 0px hsla(var(--rz4-color-white-hsl), 0.15), 0px 1px 2px hsla(var(--rz4-color-primary-darker-hsl), 0.25), 0px 1px 4px hsla(var(--rz4-color-primary-darker-hsl), 0.1), 0px 3px 6px -2px hsla(var(--rz4-color-primary-darker-hsl), 0.25);
  }
  
  .rz4-btn--primary:focus {
    box-shadow: inset 0px 1px 0px hsla(var(--rz4-color-white-hsl), 0.15), 0px 1px 2px hsla(var(--rz4-color-primary-darker-hsl), 0.25), 0px 1px 4px hsla(var(--rz4-color-primary-darker-hsl), 0.1), 0px 3px 6px -2px hsla(var(--rz4-color-primary-darker-hsl), 0.25), 0px 0px 0px 2px hsl(var(--rz4-color-bg-hsl)), 0px 0px 0px 4px hsl(var(--rz4-color-primary-hsl));
  }
  
  /* icons */
  .rz4-icon {
    height: var(--rz4-size, 1em);
    width: var(--rz4-size, 1em);
    display: inline-block;
    color: inherit;
    fill: currentColor;
    line-height: 1;
    flex-shrink: 0;
    max-width: initial;
  }
  
  .rz4-icon--xs {
    --rz4-size: 16px;
  }
  
  /* component */
  /* mobile version only (--default) 👇 */
  .sidebar:not(.sidebar--static) {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    visibility: hidden;
    transition: visibility 0s 0.3s;
  }
  .sidebar:not(.sidebar--static)::after {
    /* overlay layer */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(var(--rz4-color-black-hsl), 0);
    transition: background-color 0.3s;
    z-index: 1;
  }
  .sidebar:not(.sidebar--static) .sidebar__panel {
    /* content */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    max-width: 380px;
    height: 100%;
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
    background-color: hsl(var(--rz4-color-bg-hsl));
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    transition: box-shadow 0.3s, -webkit-transform 0.3s;
    transition: box-shadow 0.3s, transform 0.3s;
    transition: box-shadow 0.3s, transform 0.3s, -webkit-transform 0.3s;
  }
  .sidebar:not(.sidebar--static).sidebar--right-on-mobile .sidebar__panel {
    left: auto;
    right: 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  .sidebar:not(.sidebar--static).sidebar--is-visible {
    visibility: visible;
    transition: none;
  }
  .sidebar:not(.sidebar--static).sidebar--is-visible::after {
    background-color: hsla(var(--rz4-color-black-hsl), 0.85);
  }
  .sidebar:not(.sidebar--static).sidebar--is-visible .sidebar__panel {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    box-shadow: 0 0.9px 1.5px rgba(0, 0, 0, 0.03),0 3.1px 5.5px rgba(0, 0, 0, 0.08),0 14px 25px rgba(0, 0, 0, 0.12);
  }
  
  /* end mobile version */
  .sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
  
  .sidebar__close-btn {
    --rz4-size: 32px;
    width: var(--rz4-size);
    height: var(--rz4-size);
    display: flex;
    border-radius: 50%;
    background-color: hsl(var(--rz4-color-bg-light-hsl));
    box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 0.3px 0.4px rgba(0, 0, 0, 0.025),0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
    transition: 0.2s;
    flex-shrink: 0;
  }
  .sidebar__close-btn svg {
    display: block;
    margin: auto;
  }
  .sidebar__close-btn:hover {
    background-color: hsl(var(--rz4-color-bg-lighter-hsl));
    box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 0.9px 1.5px rgba(0, 0, 0, 0.03),0 3.1px 5.5px rgba(0, 0, 0, 0.08),0 14px 25px rgba(0, 0, 0, 0.12);
  }
  
  /* desktop version only (--static) 👇 */
  .sidebar--static {
    flex-shrink: 0;
    flex-grow: 1;
  }
  .sidebar--static .sidebar__header {
    display: none;
  }
  
  .sidebar--sticky-on-desktop {
    position: -webkit-sticky;
    position: sticky;
    top: var(--rz4-space-sm);
    max-height: calc(100vh - var(--rz4-space-sm));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* end desktop version */
  .sidebar, .sidebar-loaded\:show {
    opacity: 0;
    /* hide sidebar - or other elements using the .sidebar-loaded:show class - while it is initialized in JS */
  }
  
  .sidebar--loaded {
    opacity: 1;
  }
  
  /* detect when the sidebar needs to switch from the mobile layout to a static one - used in JS */
  [class*=sidebar--static]::before {
    display: none;
  }
  
  .sidebar--static::before {
    content: "static";
  }
  
  .sidebar--static\@xs::before {
    content: "mobile";
  }
  @media (min-width: 32rem) {
    .sidebar--static\@xs::before {
      content: "static";
    }
  }
  
  .sidebar--static\@sm::before {
    content: "mobile";
  }
  @media (min-width: 48rem) {
    .sidebar--static\@sm::before {
      content: "static";
    }
  }
  
  .sidebar--static\@md::before {
    content: "mobile";
  }
  @media (min-width: 64rem) {
    .sidebar--static\@md::before {
      content: "static";
    }
  }
  
  .sidebar--static\@lg::before {
    content: "mobile";
  }
  @media (min-width: 80rem) {
    .sidebar--static\@lg::before {
      content: "static";
    }
  }
  
  .sidebar--static\@xl::before {
    content: "mobile";
  }
  @media (min-width: 90rem) {
    .sidebar--static\@xl::before {
      content: "static";
    }
  }
  
  /* utility classes */
  .rz4-padding-md {
    padding: var(--rz4-space-md);
  }
  
  .rz4-text-component :where(h1, h2, h3, h4) {
    line-height: var(--rz4-heading-line-height, 1.2);
    margin-top: calc(var(--rz4-space-md) * var(--rz4-space-multiplier, 1));
    margin-bottom: calc(var(--rz4-space-sm) * var(--rz4-space-multiplier, 1));
  }
  
  .rz4-text-component :where(p, blockquote, ul li, ol li) {
    line-height: var(--rz4-body-line-height, 1.4);
  }
  
  .rz4-text-component :where(ul, ol, p, blockquote, .rz4-text-component__block) {
    margin-bottom: calc(var(--rz4-space-sm) * var(--rz4-space-multiplier, 1));
  }
  
  .rz4-text-component :where(ul, ol) {
    padding-left: 1.25em;
  }
  
  .rz4-text-component ul :where(ul, ol), .rz4-text-component ol :where(ul, ol) {
    padding-left: 1em;
    margin-bottom: 0;
  }
  
  .rz4-text-component ul {
    list-style-type: disc;
  }
  
  .rz4-text-component ol {
    list-style-type: decimal;
  }
  
  .rz4-text-component img {
    display: block;
    margin: 0 auto;
  }
  
  .rz4-text-component figcaption {
    margin-top: calc(var(--rz4-space-xs) * var(--rz4-space-multiplier, 1));
    font-size: var(--rz4-text-sm);
    text-align: center;}
  
  .rz4-text-component em {
    font-style: italic;
  }
  
  .rz4-text-component strong {
    font-weight: bold;
  }
  
  .rz4-text-component s {
    text-decoration: line-through;
  }
  
  .rz4-text-component u {
    text-decoration: underline;
  }
  
  .rz4-text-component mark {
    background-color: hsla(var(--rz4-color-accent-hsl), 0.2);
    color: inherit;
  }
  
  .rz4-text-component blockquote {
    padding-left: 1em;
    border-left: 4px solid hsl(var(--rz4-color-contrast-lower-hsl));
    font-style: italic;
  }
  
  .rz4-text-component hr {
    margin: calc(var(--rz4-space-md) * var(--rz4-space-multiplier, 1)) auto;
    background: hsl(var(--rz4-color-contrast-lower-hsl));
    height: 1px;
  }
  
  .rz4-text-component > *:first-child {
    margin-top: 0;
  }
  
  .rz4-text-component > *:last-child {
    margin-bottom: 0;
  }
  
  .rz4-text-component.rz4-line-height-xs {
    --rz4-heading-line-height: 1;
    --rz4-body-line-height: 1.1;
  }
  
  .rz4-text-component.rz4-line-height-sm {
    --rz4-heading-line-height: 1.1;
    --rz4-body-line-height: 1.2;
  }
  
  .rz4-text-component.rz4-line-height-md {
    --rz4-heading-line-height: 1.15;
    --rz4-body-line-height: 1.4;
  }
  
  .rz4-text-component.rz4-line-height-lg {
    --rz4-heading-line-height: 1.22;
    --rz4-body-line-height: 1.58;
  }
  
  .rz4-text-component.rz4-line-height-xl {
    --rz4-heading-line-height: 1.3;
    --rz4-body-line-height: 1.72;
  }
  
  .rz4-height-100vh {
    height: 100vh;
  }
  
  .rz4-flex-grow {
    flex-grow: 1;
  }
  
  .rz4-z-index-1 {
    z-index: 1;
  }
  
  .rz4-position-relative {
    position: relative;
  }
  
  .rz4-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .rz4-text-md {
    font-size: var(--rz4-text-md);
  }
  
  .rz4-z-index-2 {
    z-index: 2;
  }
  
  .rz4-border-bottom {
    --rz4-border-o: 1;
    border-bottom: var(--rz4-border-width, 1px) var(--rz4-border-style, solid) hsla(var(--rz4-color-contrast-lower-hsl), var(--rz4-border-o, 1));
  }
  
  .rz4-padding-x-md {
    padding-left: var(--rz4-space-md);
    padding-right: var(--rz4-space-md);
  }
  
  .rz4-padding-y-sm {
    padding-top: var(--rz4-space-sm);
    padding-bottom: var(--rz4-space-sm);
  }
  
  .rz4-bg {
    --rz4-bg-o: 1;
    background-color: hsla(var(--rz4-color-bg-hsl), var(--rz4-bg-o, 1));
  }
  
  .rz4-border-right {
    --rz4-border-o: 1;
    border-right: var(--rz4-border-width, 1px) var(--rz4-border-style, solid) hsla(var(--rz4-color-contrast-lower-hsl), var(--rz4-border-o, 1));
  }
  
  .rz4-max-width-4xs {
    max-width: 20rem;
  }
  
  .rz4-width-100\% {
    width: 100%;
  }
  
  .rz4-padding-y-md {
    padding-top: var(--rz4-space-md);
    padding-bottom: var(--rz4-space-md);
  }
  
  .rz4-bg-contrast-higher {
    --rz4-bg-o: 1;
    background-color: hsla(var(--rz4-color-contrast-higher-hsl), var(--rz4-bg-o, 1));
  }
  
  .rz4-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  
  .rz4-grid > * {
    min-width: 0;
    grid-column-end: span 12;
  }
  
  .rz4-margin-bottom-lg {
    margin-bottom: var(--rz4-space-lg);
  }
  
  .rz4-text-center {
    text-align: center;
  }
  
  .rz4-max-width-lg {
    max-width: 80rem;
  }
  
  .rz4-container {
    width: calc(100% - 2*var(--rz4-space-md));
    margin-left: auto;
    margin-right: auto;
  }
  
  .rz4-padding-y-xl {
    padding-top: var(--rz4-space-xl);
    padding-bottom: var(--rz4-space-xl);
  }
  
  .rz4-border-left {
    --rz4-border-o: 1;
    border-left: var(--rz4-border-width, 1px) var(--rz4-border-style, solid) hsla(var(--rz4-color-contrast-lower-hsl), var(--rz4-border-o, 1));
  }
  
  .rz4-bg-opacity-10\% {
    --rz4-bg-o: 0.1;
  }
  
  .rz4-hide {
    display: none !important;
  }
  
  @media(min-width: 64rem){
    .rz4-flex\@md {
      display: flex;
    }
  
    .rz4-hide\@md {
      display: none !important;
    }
  
    .rz4-padding-0\@md {
      padding: 0;
    }
  
    .rz4-items-start\@md {
      align-items: flex-start;
    }
  
    .rz4-gap-md\@md {
      gap: var(--rz4-space-md);
    }
  
    .rz4-flex-row-reverse\@md {
      flex-direction: row-reverse;
    }
  
    .rz4-col-3\@md {
      grid-column-end: span 3;
    }
  
    .rz4-col-9\@md {
      grid-column-end: span 9;
    }
  }

  /* Second part ends  */


  /* Third Part Starts */

  /* -------------------------------- 

File#: _1_expandable-side-navigation
Title: Expandable Side Navigation
Descr: A side navigation with expandable sub-lists and popular links
Usage: codyhouse.co/license

-------------------------------- */
/* reset */
*, *::after, *::before {
    box-sizing: border-box;
  }
  
  * {
    font: inherit;
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  body {
    background-color: hsl(0, 0%, 100%);
    font-family: 'Roboto', sans-serif !important;
    color: #525252;
    font-size: 1rem;
  }
  
  h1, h2, h3, h4 {
    line-height: 1.2;
    color: hsl(230, 13%, 9%);
    font-weight: 700;
  }
  
  h1 {
    font-size: 2.0736rem;
  }
  
  h2 {
    font-size: 1.728rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  h4 {
    font-size: 1.2rem;
  }
  
  ol, ul, menu {
    list-style: none;
  }
  
  button, input, textarea, select {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    appearance: none;
  }
  
  textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top;
  }
  
  a {
    color: hsl(250, 84%, 54%);
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  

  
  @media (min-width: 64rem) {
    body {
      font-size: 1.25rem;
    }
  
    h1 {
      font-size: 3.051rem;
    }
  
      h2 {
      font-size: 2.44rem;
    }
  
      h3 {
      font-size: 1.75rem;
    }
  
      h4 {
      font-size: 1.5625rem;
    }
  }
  
  /* variables */
  :root {
    /* colors */
    --ey9-color-primary-hsl: 250, 84%, 54%;
    --ey9-color-bg-hsl: 0, 0%, 100%;
    --ey9-color-contrast-high-hsl: 230, 7%, 23%;
    --ey9-color-contrast-higher-hsl: 230, 13%, 9%;
    --ey9-color-contrast-lower-hsl: 240, 4%, 85%;
    --ey9-color-contrast-low-hsl: 240, 4%, 65%;
  
    /* spacing */
    --ey9-space-4xs: 0.125rem;
    --ey9-space-3xs: 0.25rem;
    --ey9-space-2xs: 0.375rem;
    --ey9-space-xs: 0.5rem;
    --ey9-space-md: 1.25rem;
  
    /* typography */
    --ey9-text-sm: 0.833rem;
    --ey9-text-xs: 0.694rem;
  }

  /* variables */
:root {
  /* colors */
  --ns0-color-primary-hsl: 250, 84%, 54%;
  --ns0-color-bg-hsl: 0, 0%, 100%;
  --ns0-color-contrast-high-hsl: 230, 7%, 23%;
  --ns0-color-contrast-higher-hsl: 230, 13%, 9%;
  --ns0-color-success-hsl: 170, 78%, 36%;
  --ns0-color-warning-dark-hsl: 35, 79%, 56%;
  --ns0-color-warning-hsl: 35, 79%, 66%;
  --ns0-color-error-hsl: 342, 89%, 48%;
  --ns0-color-bg-light-hsl: 0, 0%, 100%;
  --ns0-color-accent-hsl: 342, 89%, 48%;
  --ns0-color-contrast-lower-hsl: 240, 4%, 85%;
  /* spacing */
  --ns0-space-3xs: 0.25rem;
  --ns0-space-sm: 0.75rem;
  --ns0-space-md: 1.25rem;
  --ns0-space-xs: 0.5rem;
  /* typography */
  --ns0-text-sm: 0.833rem;
}
  
  @media(min-width: 64rem){
    :root {
      /* spacing */
      --ey9-space-4xs: 0.1875rem;
      --ey9-space-3xs: 0.375rem;
      --ey9-space-2xs: 0.5625rem;
      --ey9-space-xs: 0.75rem;
      --ey9-space-md: 2rem;
  
      /* typography */
      --ey9-text-sm: 0.8rem;
      --ey9-text-xs: 0.8rem;
    }
  }
  
  /* icons */
  .ey9-icon {
    height: var(--ey9-size, 1em);
    width: var(--ey9-size, 1em);
    display: inline-block;
    color: inherit;
    fill: currentColor;
    line-height: 1;
    flex-shrink: 0;
    max-width: initial;
  }
  
  /* component */
  .exsidenav__pop-nav {
    margin-bottom: var(--ey9-space-md);
  }
  nav>ul>li>.exsidenav__pop-link.tabnavmainsite,
  .tabnavmainsite{
   background-color:#CADFD2; 
   border-radius: 10px;
  }
  .exsidenav__pop-link>span{
    margin-left:0.8em;
  }
  
  #wcag {
    font-size:0.75em;
  }
  
  .exsidenav__pop-link,
  .exsidenav__link,
  .exsidenav__control {
    display: flex;
    align-items: center;
    width: 100%;
    color: hsl(var(--ey9-color-contrast-high-hsl));
    text-decoration: none;
    line-height: 1;
    padding: var(--ey9-space-2xs);
    cursor: pointer;
    transition: 0.2s;
  }
  .exsidenav__pop-link:hover,
  .exsidenav__link:hover,
  .exsidenav__control:hover {
    color: hsl(var(--ey9-color-primary-hsl));
  }
  
  /* popular links */
  .exsidenav__pop-link .exsidenav__icon {
    --ey9-size: 16px;
    margin-right: var(--ey9-space-2xs);
    opacity: 0.5;
    transition: opacity 0.2s;
  }
  .exsidenav__pop-link:hover .exsidenav__icon {
    opacity: 1;
  }
  /* .exsidenav__pop-link[aria-current=page] {
    color: hsl(var(--ey9-color-primary-hsl));
    background-color: hsla(var(--ey9-color-primary-hsl), 0.15);
    border-radius: 0.25em;
  } */
  .exsidenav__pop-link[aria-current=page] .exsidenav__icon {
    opacity: 1;
  }
  
  /* main links */
  .exsidenav__link {
    position: relative;
  }
  .exsidenav__list .exsidenav__list .exsidenav__link::before {
    /* left mark */
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    height: 100%;
    width: 1px;
  }
  .exsidenav__link[aria-current=page] {
    color: hsl(var(--ey9-color-primary-hsl));
  }
  .exsidenav__link[aria-current=page]::before {
    background-color: hsl(var(--ey9-color-primary-hsl));
  }
  
  /* list label */
  .exsidenav__label-wrapper {
    margin: var(--ey9-space-md) 0 var(--ey9-space-2xs) var(--ey9-space-2xs);
  }
  .exsidenav__list .exsidenav__list .exsidenav__label-wrapper {
    margin: var(--ey9-space-xs) 0 var(--ey9-space-3xs) var(--ey9-space-2xs);
  }
  
  .exsidenav__label {
    color: hsl(var(--ey9-color-contrast-low-hsl));
    font-size: var(--ey9-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  
  /* button controlling sub navigations */
  .exsidenav__control {
    font-weight: 600;
  }
  .exsidenav__control .exsidenav__icon {
    --ey9-size: 16px;
    display: block;
    margin-left: auto;
  }
  .exsidenav__control .icon__group {
    will-change: transform;
    -webkit-transform-origin: 8px 8px;
            transform-origin: 8px 8px;
    transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .exsidenav__control .icon__group > * {
    -webkit-transform-origin: 8px 8px;
            transform-origin: 8px 8px;
    stroke-dasharray: 17;
    -webkit-transform: translateY(3px);
            transform: translateY(3px);
    transition: stroke-dashoffset 0.3s, -webkit-transform 0.3s;
    transition: transform 0.3s, stroke-dashoffset 0.3s;
    transition: transform 0.3s, stroke-dashoffset 0.3s, -webkit-transform 0.3s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .exsidenav__control .icon__group > *:first-child {
    stroke-dashoffset: 10;
  }
  .exsidenav__control .icon__group > *:last-child {
    stroke-dashoffset: 10;
  }
  .exsidenav__control[aria-expanded=true] + .exsidenav__list {
    display: block;
    /* show the subnavigation */
  }
  .exsidenav__control[aria-expanded=true] + .exsidenav__list > * {
    -webkit-animation: exsidenav-entry-animation 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
            animation: exsidenav-entry-animation 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
            margin-left: 0.8em;
    /* animate list items */
  }
  .exsidenav__control[aria-expanded=true] .icon__group {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  .exsidenav__control[aria-expanded=true] .icon__group > *:first-child, .exsidenav__control[aria-expanded=true] .icon__group *:last-child {
    stroke-dashoffset: 0;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  
  .exsidenav__list .exsidenav__list {
    display: none;
    border-left: 1px solid #000000;
    margin: var(--ey9-space-4xs) 0 0 var(--ey9-space-2xs);
  }
  
  @-webkit-keyframes exsidenav-entry-animation {
    from {
      opacity: 0;
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
    }
    to {
      opacity: 1;
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
    }
  }
  
  @keyframes exsidenav-entry-animation {
    from {
      opacity: 0;
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
    }
    to {
      opacity: 1;
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
    }
  }
  @media (min-width: 64rem) {
    .exsidenav__pop-link,
  .exsidenav__link,
  .exsidenav__control {
      font-size: var(--ey9-text-sm);
    }
  }

  /* Third Part Ends  */


  /* Mobile Version: */

  @media (min-width: 768px) and (max-width: 991px) {
    .sidebar__panel {font-size:1.2em;};
    .headerwrapper>a{font-size:0.817em};
    .exsidenav__list li{
      margin-bottom:0.2em;
    }

    .side-template-v3__mobile-header {

      height:5rem;
    }
    
  }    
   


@media(max-width: 592px){
  .ourmissionwrapper.secondwrapper.thirdwrapper {
  flex-direction:column;
  align-items:center;
  max-height:unset;
  height:auto;
  }

  .ourmissionwrapper.secondwrapper.thirdwrapper.maxwidthstructure.gotonextsc {
    flex-direction:row;
  }
  .contatuscontainer{
    align-self: center;
    margin-top:5.5em;
    width:85%;
  }

}

@media(max-width:454px) {
  .sb4-text-component > div:nth-child(1) > span:nth-child(2) > svg:nth-child(1) {
       width:23px;
  }
} 


@media (max-width: 517px) {
  div main p, div main section p { 
    font-size: 1.1em;
  }

  .sb4-container > div > main > .sb4-text-component {
    width:90%;
  }


  section.ourmissionwrapper.secondwrapper.thirdwrapper h2{
    text-wrap:nowrap;
    }

 


}
  @media (min-width: 517px) and (max-width: 695px) {

    .sb4-container > div > main > .sb4-text-component {
      width:90%;
    }

    
  }

  @media (min-width: 510px) and (max-width: 610px) {

    main section.sb4-text-component > div > h1 {
      font-size:2.4em;
    }

    
  }

  
  @media (min-width: 410px) and (max-width: 510px) {

    main section.sb4-text-component > div > h1 {
      font-size:2.2em;
    }  
  }

  @media (min-width: 310px) and (max-width: 456px) {

    main section.sb4-text-component > div > h1 {
      font-size:1.8em;
    }
    section div.ourmission h2,
    main section.ourmissionwrapper.secondwrapper.thirdwrapper h2 {
      font-size:1.6em;
    }
    
  }

  @media (min-width: 210px) and (max-width: 385px) {

    main section.sb4-text-component > div > h1 {
      font-size:1.5em;
    }

    section div.ourmission h2,
    main section.ourmissionwrapper.secondwrapper.thirdwrapper h2 {
      font-size:1.3em;
    }

    
  }
  
@media (width < 824px){
  div.ourmission {
    width:85%;
  }
}

@media (width < 768px){
  main section.sb4-text-component > div > h1 {
    text-wrap:nowrap;
  }
}
@media (width < 597px){
  main section.sb4-container > div > main > .sb4-text-component {
    width:65%;
  }
}


@media (width < 989px){
  section div.contatuscontainer > div:nth-child(1) > div:nth-child(1) {
    transform: none;
  }
}
 @media (width < 1024px){
  

  #logoseprater2 {

    transform: translateY(0px) translateX(-2em);
    width:126%;

  }
  section.sb4-text-component > div > h1{
    font-size:2.7em;
  }

  div main p {
    font-size:1em;
  }

  div.ourmission h2{
    font-size:1.9em;
  } 
  section.ourmissionwrapper.secondwrapper.thirdwrapper h2 {
    font-size:1.8em;
  }


  main div.ourmission p {
    font-size: 1.1em;
  }
  div.sb4-container:nth-child(1) {
    margin-inline: 2.5rem;
  }

  .sb4-container > div > #sidenav-v3 > .sidebar__panel {
    margin-left:auto;
  }
  #menubtn{
    
    display: inline-block;
    padding: 5px 24px;
    background-color: #ffffff;
    color: black;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2); /* Box shadow for slight stand-out effect */
    transition: box-shadow 0.3s; /* Smooth transition on hover */

  }
  
  
  .side-template-v3__main{
    margin-top:1.5rem;
  }

  .sb4-container > div > main {
    max-width:unset;
    margin:0 auto;
  }

  .sb4-container > div > #sidenav-v3 {    
    max-height:1000px;
    height:auto;
    max-width: unset;
  }

  .active-nav {
    height:100vh !important;
  }
  .sidebar__panel{
    overflow:hidden;
  }

  .sb4-padding-sm {
    padding:0;
  }

  .sidebar__header{
    
      height: 3em;
  }

  .headerwrapper {

      display: flex;
      justify-content: inherit;
      width: 80%;
      margin: 0 auto;
      align-items:center;
    
  }
  .sidebar__panel .sb4-position-relative{
    width:80%;
    margin:0 auto;
    padding-bottom:150px;
  }

  #sidenav-v3 .sidebar_panel {
    color: #030E07;
  }
  .sb4-margin-bottom-lg.logo-container{
    opacity:0;
  }

  .exsidenav__pop-link{
    margin-bottom:0.5em;
  }



  .tabnavmainsite {
   
      transform: translateX(-0.4em);
      width: 98%;
      padding-left: 0.6em;
      padding-top: 0.4em;
      padding-bottom: 0.4em;
      border-radius: 0.4em;
    
  }

  .sb4-container > div > #sidenav-v3 > .sidebar__panel {
    background-color: #F2F2F2;
  }

 }
 .ourmissionwrapper.secondwrapper.overview.marginoverview h2 {
  text-align:left;
 }
 

 /* Heading adjustments */
/* Lower Paper adjustment: */

  @media(max-width:818px){ 
    section.ourmissionwrapper #imagewrapper2 img{
    height: 7rem;

  }
  section.ourmissionwrapper #imagewrapper2{
    transform:unset;
  }
}
 @media (min-width: 593px) and (max-width: 629px) {
  section.ourmissionwrapper.secondwrapper.thirdwrapper h2 {
    text-wrap:nowrap;
  }
 }

 @media (min-width: 1442px) and (max-width: 1493px){
  .ourmissionwrapper.secondwrapper.thirdwrapper {
  margin-top:0;
}
 } 
@media (min-width: 1015px) and (max-width: 1493px) {
  .ourmissionwrapper.secondwrapper.thirdwrapper{
    height:47.57rem;
  }
  .triangledecoration {
    height:60%;
  }

  .contatuscontainer {
      align-self: flex-end;
      margin-bottom: 10rem;

  }
  
}

 @media(max-width: 1493px){

  
  .sb4-text-component > div > h1{
    font-size:1.7em;
  }

  .ourmissionwrapper h2 {
    font-size: 1.3em;
  }
  main .ourmission p {
    font-size:0.7em;
  }
main p {
  font-size:0.8em;

}





 }
 @media (min-width: 1024px) and (max-width: 1493px){

  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard .mainheading a {
    font-size:0.6em;
  }

  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard .mainheading p {
    font-size:0.7em
  }

  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard .mainheading h3 {
    font-size:1.1em;
  }


  .sb4-container > div > main {
          min-height:unset;
  }

  .triangledecoration {
    height:80%;    
  }
  .ourmissionwrapper.secondwrapper.thirdwrapper {
    height:28.57rem;
  }

 } 
  

 /* Academy Structure  Starts Here*/

 /* header starts*/

 #about_academy #footer-3 {
  margin-top:0;
}

 .sb4-container > div > main > .sb4-text-component.mainheading {
    padding-top: 0;
    width:100%;
    margin-top:unset;
    height: 218px;

 }
 .sb4-text-component.mainheading.topheader>div{
  border-radius: 0 0 3rem 0;
 }


 .sb4-text-component.mainheading>div{
    
    justify-content: start;
    width: 100%;
    text-align: center;
    color: white;
    background-color: #223422 !important;
    width: auto;
    background-size: cover;
    border-radius: 0.7rem 0.7rem 6rem 0.7rem;

 }
 .sb4-text-component.mainheading>div>div:nth-of-type(1) {
  display:flex;
  width:75%;
  margin:0 auto;
  padding-bottom:1.5rem;
 }
 .sb4-text-component.mainheading>div>div:nth-of-type(2) {
    align-self: end;
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    

 }
  .sb4-text-component.mainheading>div>div:nth-of-type(2) img {
    width:7.5em;
    height:7.5em;
    
 }
 .sb4-text-component.mainheading>div>div>h1{
  color: white;
  font-size:2.1em;
  display:inline-block;

 }
 
 .sb4-text-component.mainheading>div>div>span{

   align-self:center;
   transform: translateY(-9px) translateX(11px);
 }
 /* header ends*/


 .paragraphwrapper {
  width:75%;
  margin:0 auto;
  margin-top:2.5em;
  margin-bottom:2.5em;
 }
 .paragraphwrapper p {
  text-align:start;
  margin-top:0;
  margin-bottom:0;

 }
 
 .ourmissionwrapper.generalstructure {
  margin-top:2em;
  padding-top: 6em;
  padding-bottom: 6em;
  border-radius: 7rem 0 0 0;
  background-color: #B1D3BC;
 }

 .ourmissionwrapper.generalstructure .ourmission {
	width: 75%;
	margin: 0 auto;
}

.ourmissionwrapper.generalstructure .ourmission  div {
  display:flex;
  flex-direction:row;

}

.ourmissionwrapper.generalstructure .ourmission  div h2{
  color:#030E07;

}
main .ourmissionwrapper.generalstructure .ourmission p {
  text-align:start;
  color:#030E07;
}


.ourmissionwrapper.secondwrapper.overview {
 
    width: 75%;
    flex-direction:row;
    margin: 0 auto;
    margin-top: 3rem;
    padding-bottom:1rem;
  
}

.ourmissionwrapper.secondwrapper.overview>div{
 
    width: auto;
    margin: unset;
    /* width: 90%; */
    margin-right: auto;

}

.ourmissionwrapper.secondwrapper.overview>div>div {
  flex-direction:row;
}

.ourmissionwrapper.secondwrapper.overview>div>p {
    text-align:start;
}

.overviewlist .item {
  display: flex;
  flex-direction: row;
  flex-wrap:nowrap;
 }
 .overviewlist .item ul{
  width:100%;
 }
 .overviewlist .item h3,
 .overviewlist .item p {     
     color:#525252;
     display:inline-block;
     margin:0;
     text-align:start;
 }
 .overviewlist .item p:first-of-type {     
  margin-top:-0.2em;
}

 .overviewlist .item > div {
  display:inline-block;
 }

 /* .integration-step-circle {

    width: 26px;
    height: 26px;
    min-width:26px;
    min-height:26px;
    background-color: #B1D3BC;
    color: #030E07;
    text-align: center;
    border-radius: 50%;
    margin-left: 10px;
    font-size: 14px;
    font-weight:600;
    display: inline-flex;
    align-items:center;
    justify-content:center;
    position: relative;
    left: -10px;

  } */

  .p-page-s {
    font-size: 0.8em !important;
  }

  .integration-step-circle {
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    font-weight: 500;
    width: 40px;
    height: 40px;
    margin-right: 1rem;
    margin-left: 20px;
    position: relative;
    background-color: #EEF5F0;
    color: #030E07;
    top: -.1em;
    font-size: 0.8em;
    margin-left: 0;
  }

  .overviewlist .item {
        align-items:baseline;
  }

/* responsive for dots */

/* Small screens */
@media (max-width: 600px) {
  .p-page-s {
      font-size: 1.1em !important;
  }
  .integration-step-circle {
      width: 30px;
      height: 30px;
      font-size: 0.9em;
  }
}

/* Medium screens */
@media (min-width: 601px) and (max-width: 1023px) {
  .p-page-s {
      font-size: 1.1em !important;
  }
  .integration-step-circle {
      width: 35px;
      height: 35px;
      font-size: 1.2em;
  }
}



  .overviewlist .item {
    margin-top:0.9rem;
  }

  .maxwidthstructure,
  .marginoverview div {
    max-width:55.925rem;
  }

  .maxwidthstructure h3 {
    color:white;
    text-align:start;
  }
  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard.maxwidthstructure {
    margin-bottom:4rem;
  }
  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard .mainheading {
       width:75%;
  }

  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard .mainheading p {
    font-size:0.8em;
    color:white;
    text-align:start;
  }

  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard .mainheading a {
    font-size: 0.7em;
    padding: 0.1rem 0.6rem;
    border-radius: 0.3rem;
    color: #030E07;
    text-align: start;
    border: 1px solid white;
    background-color: white;
    font-weight: 500;
    margin-top: 0.3rem;
  }
  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard .mainheading a>span {
      margin:0 1.2em;
      margin-right:0.3em;
  }
  .sb4-text-component.mainheading > div .readytobegindirectwrapper{
         
      flex-direction: column;
      align-items: start;
  }

  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard .mainheading > div {
    height:14rem;
  }

  section.ourmissionwrapper:nth-child(5) > div:nth-child(1) > img:nth-child(1) {
    width: 82%;
    height: 59%;
    position: absolute;
    z-index: -1;
    left: -2rem;
    bottom: 6rem;
  }
  

 .ourmissionwrapper.generalstructure h2 {
  font-size:1.4em;
  text-align:start;
 }


 .ourmissionwrapper.secondwrapper.thirdwrapper.maxwidthstructure.gotonextsc > .mainheading {
  background-image: url('/HTML/Staging/ejs-result/images/deco-no-shadow.png')
 }

 .ourmissionwrapper.secondwrapper.thirdwrapper.maxwidthstructure.gotonextsc  {
  width:75%;
  margin: 0 auto;
}

.ourmissionwrapper.secondwrapper.thirdwrapper.maxwidthstructure.gotonextsc .sb4-text-component.mainheading  {
  height:15rem;
  margin: 0;
}

.ourmissionwrapper.secondwrapper.thirdwrapper.maxwidthstructure.gotonextsc .sb4-text-component.mainheading > div {
  height:95%;
}
.list--ol > li, [class*="text-component"] .list--ol > li {
  counter-increment: list-items;
  padding-left: 32px;
  color: #525252;
}
.list--ol ol, [class*="text-component"] .list--ol ol {
  counter-reset: list-items;
}

.list--ol > li::before, [class*="text-component"] .list--ol > li::before {
  content: counter(list-items);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  position: relative;
  top: -0.1em;
  font-size: var(--list-bullet-font-size, 14px);
  background-color: #edf5ef;
  color: black;
  line-height: 1;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-weight:600;
  margin-left: -26px;
  left: -11px;
}
.list--ol ol > li::before, [class*="text-component"] .list--ol ol > li::before {
  background-color: transparent;
  box-shadow: inset 0 0 0 2px hsl(var(--ls4-color-contrast-lower-hsl));
}

 ol li strong  {
  font-size: 1rem;
  color: #313131;
}
.list.list--ol {
  padding:0;
}

.marg-news:last-of-type  {
  margin-bottom:4rem;
}

.wcag-news-margin {
  margin-left:130px!important;
}

@media(min-width: 1650px){

  body section.ourmissionwrapper:nth-child(5) > div:nth-child(1) > img:nth-child(1) {
    width: 82%;
    height: 59%;
    position: absolute;
    z-index: -1;
    left: -2rem;
    bottom: 6rem;
  }
  

  .ourmissionwrapper.generalstructure .ourmission.maxwidthstructure,
  .ourmissionwrapper.secondwrapper.overview > div.maxwidthstructure,
  .sb4-text-component.mainheading > div > div:nth-of-type(1).maxwidthstructure,
  .maxwidthstructure,
  .ourmissionwrapper.secondwrapper.overview.marginoverview,
  .ourmissionwrapper.secondwrapper.thirdwrapper.maxwidthstructure.gotonextsc,
  .maxwidthstructure.cs-nextpage-section
    {
    margin-left:7.7rem;
    } 
  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard .mainheading { 
    margin:0;
  } 


  .scexamples article{
        /* margin-right:10.7rem; */
  }
}
@media (min-width: 1493px){ 

  section.ourmissionwrapper:nth-child(5) > div:nth-child(1) > img:nth-child(1) {
    width:82%;
    left:4.95rem;
  }
  .overviewlist .item h3 {
    font-size:0.8em !important;
   }
   .overviewlist .item > div {
    display:flex;
    flex-direction: column;
  }

}

@media (min-width: 1024px) and (max-width: 1493px){
  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard .mainheading >div {
    max-width:31.828rem;

  }
  section.ourmissionwrapper:nth-child(5) > div:nth-child(1) > img:nth-child(1) {

      left: 3.7rem;
      max-width: 34.228rem;
      bottom: 4.5rem;
      height: 18.7rem;

  }
  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard.maxwidthstructure{
    max-width: 41.6rem;
  }
  }
  .overviewlist .item h3 {
    font-size:0.7em;
  }

  .overviewlist .item > div {
    display:flex;
    flex-direction: column;
  }



 @media (max-width:1023px){

  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard.maxwidthstructure {
    max-width:55.925rem;
  }
  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard .mainheading >div {
    max-width:47.828rem

  }
  section.ourmissionwrapper:nth-child(5) > div:nth-child(1) > img:nth-child(1) {

      left: 5rem;
      max-width: 47.228rem;
      bottom: 5.95rem;
      height: 18.7rem;


  }
  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard .mainheading p {
    margin-top: 1em;
  }

  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard .mainheading a {
    margin-top: 1em;
    padding: 0.2em 1.2em;
    font-weight: 600;
    font-size: 0.8em;
  }
  .overviewlist .item h3 {
    font-size:1.1em;
  }
  .sb4-text-component.mainheading>div>div:nth-of-type(1) {
         padding-top:1rem;
   }
   .sb4-text-component.mainheading>div>div:nth-of-type(1) span svg {
           width: 17px;    
           height:34px;    
   }

   .sb4-text-component.mainheading>div>div:nth-of-type(2) img {
    width:7.5em;
    height:8.3em;
    
 }

 .sb4-text-component.mainheading > div > div > h1 {
  text-wrap: nowrap;
 }
 .structurefooter {
  margin-top: 4rem;
}

.list--ol > li, [class*="text-component"] .list--ol > li {
  font-size: 1.2em;
}


 }

 
 @media(max-width:767px){

  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard .mainheading a {
    padding:0.1em 0.8em;
  }
  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard.maxwidthstructure {
    max-width:35.925rem;
  }
  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard .mainheading > div {
    width:31rem;
    max-width:31rem;
  }

  section.ourmissionwrapper:nth-child(5) > div:nth-child(1) > img:nth-child(1) {
    left: 3rem;
    max-width: 47.228rem;
    bottom: 6.2rem;
    height: 18.7rem;
    width: 34rem;
  }

  
  .paragraphwrapper p {
   font-size: 1em;
  
   }
   .overviewlist .item {
    height:auto;
   }

   .overviewlist .item p{
     text-align:start;

   }

   .paragraphwrapper.scparagraphwrapper p {
     font-size:1.15em;
   }

   .integration-step-circle {
    font-size:1em;
   }

 }

 @media(max-width:592px){
  

  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard.maxwidthstructure {
      max-width: 29.925rem;
      margin-top: 8rem;
     }
  main .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard .mainheading > div {
    width:26rem;
    max-width:26rem
  }

  section.ourmissionwrapper:nth-child(5) > div:nth-child(1) > img:nth-child(1) {

      left: 2.46rem;
      max-width: 38.228rem;
      bottom: -2.8rem;
      height: 18.7rem;
      width: 28.6rem;

  }

  .sb4-text-component.mainheading > div .readytobegindirectwrapper {

      flex-direction: column;
      align-items: start;
      justify-content: space-between;
  
  }

  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard .mainheading a {
    font-size:0.9em;
  }
 }

 @media(max-width:508px){

  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard.maxwidthstructure {

      max-width: 21.2rem;
      margin-top: 8rem;
  
  }

  section.ourmissionwrapper:nth-child(5) > div:nth-child(1) > img:nth-child(1) {
    left: 1.8rem;
    max-width: 38.228rem;
    bottom: -2.8rem;
    height: 18.7rem;
    width: 18.6rem;
  }

  main .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard .mainheading > div {
    width: 17rem;
    max-width: 26rem;
  }


  .sb4-text-component.mainheading.topheader > div > div:nth-of-type(1) {
    width:75%;
    margin: 0 auto;

  }
  .sb4-text-component.mainheading > div > div:nth-of-type(1) {
    display: flex;
    width: 90%;
    margin: 0 auto;
    padding-bottom: 1.5rem;
    padding-top: 1rem;
    margin-left: 1rem;
    margin-right: 2.7rem;
  }

  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard .mainheading a {
    font-size:0.78em;
  }



 }
 
 @media (min-width: 388px) and (max-width: 508px){
  .ourmissionwrapper.secondwrapper.thirdwrapper.readytobegincard.maxwidthstructure {
    margin-left:1rem;
  }
 }
 @media(max-width: 480px){
  .sb4-text-component.mainheading > div > div > h1 {
    font-size:1.8em;
  }

  .sb4-text-component.mainheading div h2,
  .ourmissionwrapper.generalstructure .ourmission  div h2,
  .ourmissionwrapper.secondwrapper > div > div > h2,
  section div.ourmission h2, main section.ourmissionwrapper.secondwrapper.thirdwrapper h2 {
    font-size:1.4em;
  }

  .sb4-text-component > div:nth-child(1) > div:nth-child(1) > span:nth-child(2) > svg:nth-child(1) {
    width:28px;
    height:36px;
    
 }

 .sb4-text-component.mainheading>div>div:nth-of-type(2) img {
  width:7.5em;
  height:8em;
  
}

.paragraphwrapper {
  width:85%;
  margin:0 auto;
  margin-top:2.5em;
  margin-bottom:2.5em;
 }

 .sb4-text-component.mainheading.topheader > div > div:nth-of-type(1),
 .paragraphwrapper,
 .ourmissionwrapper.generalstructure .ourmission,
 .ourmissionwrapper.secondwrapper.overview.marginoverview,
 .maxwidthstructure.cs-nextpage-section
 {
  width: 90%;
 }

.ourmission.maxwidthstructure>div {
  margin-top:1rem;
}


 }


 @media(max-width: 380px) {
  .sb4-text-component.mainheading > div > div > h1 {
    font-size:1.45em;
  }

  .sb4-text-component.mainheading div h2,
  .ourmissionwrapper.generalstructure .ourmission  div h2,
  .ourmissionwrapper.secondwrapper > div > div > h2,
  section div.ourmission h2, main section.ourmissionwrapper.secondwrapper.thirdwrapper h2 {
    font-size:1.3em;
    text-align:left;
  }

  .sb4-text-component.mainheading > div > div:nth-of-type(2) img {
    height:7.5em;
  }

  main .ourmissionwrapper.generalstructure .ourmission p {
    text-align:left;
    font-size:0.98em;
  }
 }

 /* Academy Structure  Ends Here*/









 /* Academy News Starts  */

 .news-block {
  padding: 20px;
  margin: 20px;
  border-radius: 30px;
  background-color: #F2F2F2;
  text-align: left;
  position: relative;
  box-sizing: border-box;
  width: 75%;
  margin: 0 auto;
}

.news-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
}

.news-title {
  font-size: 0.9em !important;
  margin-bottom: 10px;
  flex: 1;
  text-align: left;
  padding-right: 10px;
  box-sizing: border-box;
  padding: 10px;
}

.news-subtitle {
  font-size: 0.7em;
  margin-bottom: 10px;
  color: #666;
  flex: 1;
  padding-left: 10px;
  box-sizing: border-box;
}

.news-line-container {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin-left: -20px;  /* Adjusting to cover the padding */
  margin-right: -20px; /* Adjusting to cover the padding */
}

.news-line {
  width: calc(100% + 40px); /* Ensures line stretches across the container including padding */
  height: 8px;
  background: linear-gradient(to right, #030E07, #258246);
  margin-bottom: 20px;
  box-sizing: border-box;
}

.news-image {
  position: absolute;
  right: -85px;
  top: 0; /* Align the image to the top */
  width: 100px; /* Adjust the size of the image here */
  height: auto;
  transform: translateY(-50%); /* Move the image up to be on top of the line */
  transition: transform 0.5s ease; /* Ensure smooth transition */
}

.news-paragraph {
  font-size: 0.7em;
  line-height: 1.6;
  color: #030E07;
  text-align: left;
  padding: 10px;
  box-sizing: border-box;
  font-weight: 400;
}

@media (max-width: 600px) {

  .news-block {

      padding: 10px;
  }

  .news-header {
      flex-direction: column;
      align-items: flex-start;
  }

  .news-title {
      font-size: 1em;
      margin-bottom: 0;
      padding-right: 0;
  }

  .news-subtitle {
      font-size: 0.7em;
      text-align: left;
      margin-top: 10px;
      padding-left: 5px;
  }

  .news-line-container {
      margin-left: -10px;  /* Adjusting to cover the reduced padding */
      margin-right: -10px; /* Adjusting to cover the reduced padding */
  }

  .news-paragraph {
      font-size: 0.8em;
      padding: 10px;
  }
}

.news-links  {
  color: #030E07; /* Change to desired color */
  text-decoration: underline;
  font-weight: 500;
}

.news-links:hover {
  color: #467756 !important; /* Change to desired color */
  transition: 5ms !important;
}
/* 


/* 1 styles */
@media (min-width: 601px) and (max-width: 1023px) {
  .news-title {
      font-size: 22px !important;
  }

  .news-subtitle {
      font-size: 16px !important;
  }

  .news-paragraph {
      font-size: 16px !important;
      line-height: 1.7rem !important;
  }

  /* .news-image {
      width: 90%;
  } */
}

/* 2 styles */
@media (min-width: 200px) and (max-width: 601px) {
  .news-title {
      font-size: 20px !important;
  }

  .news-subtitle {
      font-size: 14px !important;
  }

  .news-paragraph {
      font-size: 14px !important;
      line-height: 1.7rem !important;
  }

  .news-image {
    position: absolute;
    right: -63px !important;
    top: 0;
    width: 90px;
    height: auto;
    transform: translateY(-50%);
    transition: transform 0.5s ease; /* Ensure smooth transition */
}

.news-block {
  width: 80%;

}

}


.marg-news {
  margin-top: 3rem !important;
}

.ourmissionwrapper {
  position: relative;

}

.ourmissionwrapper:hover .news-image {
  transform: translate(10px, -50%); /* Move the image to the right slightly while keeping it vertically centered */
}


 /* Academy News Ends  */



 /* ///nextpage start  */

 .cs-nextpage-section {
  width:75%;
  margin: 4rem auto;
  margin-bottom: 6rem;
}

.cs-nextpage-container {
  position: relative;
  background-color: #d0dad2;
  /* background: linear-gradient(to top left, #467756, #69AA7F); */
  padding: 20px;
  border-radius: 20px;
  max-width: 42rem;
  color: #d8d8d8 ;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.cs-nextpage-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 91%;
  background-color: #223422;
  z-index: 1;
  border-radius: 7px 7px 70px 20px;
}

.cs-nextpage-title, .cs-nextpage-paragraph {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: left;

}

.cs-nextpage-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #fff;
  text-align: left;
}

.cs-nextpage-paragraph {
  font-size: 17px;
  margin-bottom: 20px;
}

.cs-nextpage-link {
  display: inline-flex; /* Ensure the link does not spread from side to side */
  align-items: center;
  text-decoration: none;
  color: #000; /* Text color changed to black */
  background-color: #fff; /* Background color changed to white */
  padding: 7px 17px;
  border-radius: 7px;
  transition: background-color 0.3s;
  margin-bottom: 20px;
  align-self: flex-start; /* Align the link to the left */
}

.cs-nextpage-link:hover {
  background-color: #fff;
  color: black !important; /* Text color remains black on hover */
}

.cs-nextpage-link-text {
  margin-right: 10px;
  font-size: 15px;
  font-weight: 500;
}

.cs-nextpage-arrow {
  width: 24px;
  height: 24px;
}

@media (max-width: 768px) {
  .cs-nextpage-container {
      padding: 15px;
  }

  .cs-nextpage-title {
      font-size: 20px;
  }

  .cs-nextpage-paragraph {
      font-size: 16px;
  }

  .cs-nextpage-link {
      padding: 8px 16px;
  }

  .cs-nextpage-link-text {
      font-size: 14px;
  }

  .cs-nextpage-arrow {
      width: 20px;
      height: 20px;
  }
}

.next-sc-wrapper {
  padding: 20px;
  position: relative;
  z-index: 2;
  width: 100%;
}



  /* ///nextpage end  */

  /* success criterion page starts*/



  .successcriterionmainpagewrapper {
    max-height:unset !important;
  }
  .scheaderdeco {
    align-self: unset;
    z-index: unset;
    position: unset;
    background: #d0dad2;

  }

  .sb4-text-component.mainheading.scheaderdeco > div > div > h1 {
    text-align:start;
    font-size:1.5em;
    text-wrap:unset;
  }

  .sb4-text-component.mainheading.scheaderdeco > div > div > h1 .heading-description{
     margin-top:0.7rem;
     font-size:0.6em;
     font-weight:400;
  }
   
  .overviewlist p {
    text-align: start;
  }

  .ourmissionwrapper.generalstructure .ourmission div.bestpractices_academy {
    display:unset;
  }
  .ourmissionwrapper.generalstructure .ourmission div.bestpractices_academy h2,
   main .ourmissionwrapper.generalstructure .ourmission div.bestpractices_academy p{
    color:#313131;
  }

  .ourmissionwrapper.generalstructure.bestpractices_wrapper {
    /* background-image: url(../images/roxo-aca-main-bg-darker.png) !important; */
    background-color: #EDF5EF;
  width: auto;
  background-size: cover;
  }

  .ourmissionwrapper.generalstructure.bestpractices_wrapper {
    border-radius: 0;
  }
  .bestpractices_academy .item {
    gap:0.5rem;
    margin-top: 1.6rem;
  }
  .checksc {
    display:flex;
  }

  .ourmissionwrapper.generalstructure .ourmission div.bestpractices_academy p{
    align-self: center;
  }


    .ourmissionwrapper.secondwrapper.overview > div > div.benefitswrapper {
     margin-bottom:2.2rem;
  }
  
  main .ourmission .item p {
    font-size:0.7em;
  }

  .ourmissionwrapper.generalstructure .ourmission div.bestpractices_academy h2 {

    font-weight: 500 !important;
    font-size: 2rem;
      transform: translateX(7px);
      margin-bottom: 1.3rem;
  
  }

  .ourmissionwrapper.generalstructure .ourmission .bestpractices_academy .item div {
     
    align-self:start;
    margin-top:0.3rem;
  }

  .ourmissionwrapper.secondwrapper.overview.marginoverview h2{
    font-weight: 500;
    font-size: 2rem;
  }

  .scmainelement .ourmissionwrapper.secondwrapper.overview.marginoverview{
    margin-top:1rem;
  }  

  .ourmissionwrapper.generalstructure.bestpractices_wrapper {
    margin-top:4rem;
  }

  #academy_structure .ourmissionwrapper.secondwrapper.overview {
    padding-bottom:0;
  }
  /* Snippet Code Starts  */

  

@media(min-width: 64rem){
  :root {
    /* spacing */
    --ns0-space-3xs: 0.375rem;
    --ns0-space-sm: 1.125rem;
    --ns0-space-md: 2rem;
    --ns0-space-xs: 0.75rem;
    /* typography */
    --ns0-text-sm: 1rem;
  }
}
/* icons */
.ns0-icon {
  height: var(--ns0-size, 1em);
  width: var(--ns0-size, 1em);
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}
.ns0-icon--md {
  --ns0-size: 32px;
}
/* component */
.note {
  background-color: hsl(var(--ns0-color-bg-light-hsl));
  border-left: 3px solid #E70D4F;
  box-shadow: 0 0.3px 0.4px rgba(0, 0, 0, 0.025),0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
  /* :point_down: you can ovveride this padding using the padding utility classes */
}
.note:not([class^=padding-]):not([class*=" padding-"]) {
  padding: var(--ns0-space-sm);
}
.note--warning {
  border-left-color: hsl(var(--ns0-color-warning-hsl));
}
.note--error {
  border-left-color: hsl(var(--ns0-color-error-hsl));
}
.note--success {
  border-left-color: hsl(var(--ns0-color-success-hsl));
}
.ns0-text-component {
  /* reset in case the component is used inside a .ns0-text-component */
}
.ns0-text-component .note__content > *:last-child {
  margin-bottom: 0;
}
.ns0-text-component .note__title {
  margin-bottom: 0;
}
/* utility classes */
.ns0-text-component :where(h1, h2, h3, h4) {
  line-height: var(--ns0-heading-line-height, 1.2);
  margin-top: calc(var(--ns0-space-md) * var(--ns0-space-multiplier, 1));
  margin-bottom: calc(var(--ns0-space-sm) * var(--ns0-space-multiplier, 1));
}
.ns0-text-component :where(p, blockquote, ul li, ol li) {
  line-height: var(--ns0-body-line-height, 1.4);
}
.ns0-text-component :where(ul, ol, p, blockquote, .ns0-text-component__block) {
  margin-bottom: calc(var(--ns0-space-sm) * var(--ns0-space-multiplier, 1));
}
.ns0-text-component :where(ul, ol) {
  padding-left: 1.25em;
}
.ns0-text-component ul :where(ul, ol), .ns0-text-component ol :where(ul, ol) {
  padding-left: 1em;
  margin-bottom: 0;
}
.ns0-text-component ul {
  list-style-type: disc;
}
.ns0-text-component ol {
  list-style-type: decimal;
}
.ns0-text-component img {
  display: block;
  margin: 0 auto;
}
.ns0-text-component figcaption {
  margin-top: calc(var(--ns0-space-xs) * var(--ns0-space-multiplier, 1));
  font-size: var(--ns0-text-sm);
  text-align: center;}
.ns0-text-component em {
  font-style: italic;
}
.ns0-text-component strong {
  font-weight: bold;
}
.ns0-text-component s {
  text-decoration: line-through;
}
.ns0-text-component u {
  text-decoration: underline;
}
.ns0-text-component mark {
  background-color: hsla(var(--ns0-color-accent-hsl), 0.2);
  color: inherit;
}
.ns0-text-component blockquote {
  padding-left: 1em;
  border-left: 4px solid hsl(var(--ns0-color-contrast-lower-hsl));
  font-style: italic;
}
.ns0-text-component hr {
  margin: calc(var(--ns0-space-md) * var(--ns0-space-multiplier, 1)) auto;
  background: hsl(var(--ns0-color-contrast-lower-hsl));
  height: 1px;
}
.ns0-text-component > *:first-child {
  margin-top: 0;
}
.ns0-text-component > *:last-child {
  margin-bottom: 0;
}
.ns0-text-component.ns0-line-height-xs {
  --ns0-heading-line-height: 1;
  --ns0-body-line-height: 1.1;
}
.ns0-text-component.ns0-line-height-sm {
  --ns0-heading-line-height: 1.1;
  --ns0-body-line-height: 1.2;
}
.ns0-text-component.ns0-line-height-md {
  --ns0-heading-line-height: 1.15;
  --ns0-body-line-height: 1.4;
}
.ns0-text-component.ns0-line-height-lg {
  --ns0-heading-line-height: 1.22;
  --ns0-body-line-height: 1.58;
}
.ns0-text-component.ns0-line-height-xl {
  --ns0-heading-line-height: 1.3;
  --ns0-body-line-height: 1.72;
}
.ns0-margin-right-sm {
  margin-right: var(--ns0-space-sm);
}
.ns0-margin-top-3xs {
  margin-top: var(--ns0-space-3xs);
}
.ns0-flex {
  display: flex;
}
.ns0-color-contrast-higher {
  --ns0-color-o: 1;
  color: #313131;
}
.ns0-items-center {
  align-items: center;
}

.ourmissionwrapper.secondwrapper.overview.marginoverview.scexamples {
  flex-direction:column;
}
.note__title.ns0-color-contrast-higher {
  font-size:0.75em;
  font-weight:500;
}
.ns0-margin-right-sm {
  margin-right:0.45rem;
}



/* Container for the code block and header */
.code-container {
  background: #232323;
  color: #fff;
  border-radius: 0.5rem;
  width: 100%;
  margin: 2rem 0;
}

/* HTML Header */
.html {
  background: #E70D4F;
  color:white;
  margin: 0;
  padding: 0.25rem 2rem;
  border-top-right-radius: 0.5rem;
  border-top-left-radius: 0.5rem;
  text-align:start;
}

.html_header {
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.html_header > h4{
    font-size:0.8em;
    color:white;
}

              /* pre code start  */

              .code-block {
                padding: 1rem 3rem;
                font-size: 1.09rem;
                
              }
              
              .tag {
                color: #ab875d;
              }
              
              .class {
                color: #dfc48c;
              }
              
              .attr {
                color: #8f9c6c;
              }
              
              .text {
                color: #eee;
              }
              
              .prop {
                color: #9b869c;
              }
              
              .value {
                color: #cd6a51;
              }
              
              .var {
                color: #809bbd;
              }
              
              .obj {
                color: #96b38a;
              }
              
              /* New colors gpt */
              .tag {
                color: #ab875d;
              }
              
              .text {
                color: #eee;
                font-size: 0.8em;
              }
              
              .attr-name {
                color: #dfc48c;
              }
              
              .attr-value {
                color: #8f9c6c;
              }
              
              .indent-half {
                padding: 0 1rem;
              }
              .pre-container{

              }
            
              .indent-1 {
                padding: 0 2rem;
              }
              
              .indent-2 {
                padding: 0 4rem;
              }

              .indent-3 {
                padding: 0 6rem;              
              }

              .indent-4 {
                padding: 0 8rem;              
              }

              .plain-indent-1{
                padding-left:2rem;

              }
              .plain-indent-2{
                padding-left:4rem;
              }
              .plain-indent-3{
                padding-left:6rem;
              }
              .plain-indent-4{
                padding-left:8rem;
              }

              .lead {
                margin-bottom: 2rem;
              }
              
              .code-block p,
              .code-block .coderow {
                margin: 0;
                text-align: start;
                margin-top: unset;
                line-height: 1.2; /* Adjust the line-height to minimize spacing */
                font-size: 0.8em;
                display: block;
              }
              
              pre {
                overflow: auto;
              }
              


              /* pre code end  */


.marginoverview .note  div.ns0-flex.ns0-margin-top-3xs {
  flex-direction:column;
}
section article {
  width:100%;
}
article strong {
  color: #E70D4F;
  margin-right:0.5rem;
}
article p {
  color:#525252;
  text-align:start;
}

article h3.note__title.ns0-color-contrast-higher {
font-size:0.9em;
margin-left:0.3rem;
font-weight:700;
}

.note.shouldbedone {
  margin-top: 2.5rem;
  border-left-color:#467756;
}

.note.shouldbedone .html.html_header {
  background-color: #467756;
}
.note.shouldbedone strong {
  color:#467756;
}

  /* Snippet Code Ends */
  
  @media(max-width:1263px){
    
  .sb4-text-component.mainheading.scheaderdeco > div > div > h1 {
    text-align:start;
    font-size:1.25em;
  }

  .sb4-text-component.mainheading.scheaderdeco > div > div > h1 .heading-description{
     margin-top:0.3rem;
     font-size:0.7em;
     font-weight:400;
  }

  #academy_sc.sc_no_code article div h4 {
    font-size:0.9em;
  }

  }
  @media(max-width:1024px){

    .sb4-text-component.mainheading.scheaderdeco > div > div > h1 {
      text-align:start;
      font-size:1.55em;
    }
  
    .sb4-text-component.mainheading.scheaderdeco > div > div > h1 .heading-description{
       margin-top:0.3rem;
       font-size:0.9em;
       font-weight:400;
    }
    .ourmissionwrapper.generalstructure .ourmission div.bestpractices_academy h2 {
      font-size:1.3em;
    }
      
    main .ourmission .item p {
      font-size:1em;
    }
    #academy_sc article h3.note__title.ns0-color-contrast-higher{
      font-size:1.2em;
 }

 #academy_sc.sc_no_code article div h4 {
  font-size:1.3em;
}

  }

    @media(max-width:991px){
      #academy_sc.sc_no_code article div h4 {
        font-size:1.4em;
      }
      .sb4-text-component.mainheading.scheaderdeco > div > div > h1 {
        text-align:start;
        font-size:1.9em;
      }
    
      .sb4-text-component.mainheading.scheaderdeco > div > div > h1 .heading-description{
        margin-top: 0.3rem;
        font-size: 1.3rem;
        font-weight: 400;
      }
      .ourmissionwrapper.generalstructure .ourmission div.bestpractices_academy h2 {
        font-size:1.5em;
        font-weight: 500 !important;
      }

      #academy_sc article h3.note__title.ns0-color-contrast-higher{
        font-size:1.2em;
   }
      }
      @media(max-width:767px){
        .sb4-text-component.mainheading.scheaderdeco > div > div > h1 {
          text-align:start;
          font-size:1.5em;
        }
      
        .sb4-text-component.mainheading.scheaderdeco > div > div > h1 .heading-description{
          margin-top: 1rem;
          font-size: 0.9rem;
          font-weight: 400;
        }
      }

      .heading-description {
        color: #C2C2C2;
      }

    /* success criterion page ends*/

    /* success criterion no code starts  */


    #academy_sc.sc_no_code .note:not([class^="padding-"]):not([class*=" padding-"]) {
     
        padding: 0 2rem;
        margin-top: 3rem;

    }

    #academy_sc.sc_no_code .exclamationmark {
        position: absolute;
        left: 9px;
    }
    #academy_sc.sc_no_code article h3.note__title.ns0-color-contrast-higher {
      margin-left: 0;
    }

    #academy_sc.sc_no_code article h4 {

        font-size: 0.9em;
        text-align: start;
        font-weight: 500;
        text-decoration: underline;
 
    }

    #academy_sc.sc_no_code article p {
      font-size: 0.85
    }

    #academy_sc.sc_no_code .ourmissionwrapper.secondwrapper.overview.marginoverview.scexamples p{
      font-size: 0.9em;
    }
    #academy_sc.sc_no_code article p:first-of-type {
        margin-top: 0.2rem;
    } 
    #academy_sc.sc_no_code article p {
      margin-top:2rem;
    }

    #academy_sc.sc_no_code .marginoverview .note div.ns0-flex.ns0-margin-top-3xs {

       margin-top:1rem;
    }

    @media(max-width:1263px){ 
      #academy_sc.sc_no_code .note:not([class^="padding-"]):not([class*=" padding-"]) {
        padding: 0 2.3rem;
      }
    }
    @media(max-width:1024px){
      #academy_sc article h3.note__title.ns0-color-contrast-higher{
        font-size:1.1em;
   }

   #academy_sc.sc_no_code article div h4 {
    font-size:1.1em;
   }

   #academy_sc.sc_no_code .ourmissionwrapper.secondwrapper.overview.marginoverview.scexamples p {
    font-size:0.95em;
   }

   
    }

      @media(max-width:991px){ 
        #academy_sc.sc_no_code .note:not([class^="padding-"]):not([class*=" padding-"]) {
          padding: 0 2.7rem;
        }
        #academy_sc.sc_no_code .ourmissionwrapper.secondwrapper.overview.marginoverview.scexamples p {
            font-size:1.1em;
        }

        .ourmissionwrapper.secondwrapper.overview.marginoverview h2 {
          font-size:1.5em;
        }
        #academy_sc.sc_no_code .ourmissionwrapper.secondwrapper.overview.marginoverview.scexamples p {
          font-size:1.1em;
        }

        #academy_sc.sc_no_code article h3.note__title.ns0-color-contrast-higher {
          font-size:1.3em;
        }
        #academy_sc.sc_no_code article div h4 {
          font-size: 1.2em;
          font-weight: 500;
        }

        #academy_sc.sc_no_code .ourmissionwrapper.secondwrapper.overview.marginoverview.scexamples p {
          font-size:1.1em;
        }
      }
      @media(max-width:767px){
          #academy_sc.sc_no_code .note:not([class^="padding-"]):not([class*=" padding-"]) {
            padding: 0 2.4rem;
          }
          #academy_sc.sc_no_code article h3.note__title.ns0-color-contrast-higher {
            text-wrap:nowrap;
          }
      }
      @media(max-width:345px){ 
          #academy_sc.sc_no_code .exclamationmark {
            left:6px;
          }
      }
    
    /* success criterion no code ends */
/* Above 1473px */
@media screen and (min-width: 1473px) {
  #font-best-sc {
    font-size: 1rem !important;
  }
}

/* Above 1400px */
@media screen and (min-width: 1400px) {
  #font-best-sc main p {
    font-size: 1rem !important;
  }
}

/* Between 1000px and 1400px */
@media screen and (min-width: 1000px) and (max-width: 1399px) {
  #font-best-sc main p {
    font-size: 1rem !important;
  }
}

/* Between 600px and 999px */
@media screen and (min-width: 600px) and (max-width: 999px) {
  #font-best-sc main p {
    font-size: 1rem !important;
  }
}

/* Less than 400px (Mobile) */
@media screen and (max-width: 399px) {
  #font-best-sc main p {
    font-size: 1rem !important;
  }
}


/* Content sc size responsive */

/* Large screens above 1473px */
@media screen and (min-width: 1473px) {
  .content-sc {
    font-size: 1.3rem !important;
  }
}

/* Larger screens above 1400px */
@media screen and (min-width: 1400px) {
  .content-sc {
    font-size: 1rem !important;
  }
}

/* Medium to large screens between 1000px and 1399px */
@media screen and (min-width: 1000px) and (max-width: 1399px) {
  .content-sc {
    font-size: 1rem !important;
  }
}

/* Small to medium screens between 600px and 999px */
@media screen and (min-width: 600px) and (max-width: 999px) {
  .content-sc {
    font-size: 1rem !important;
  }
}

/* Mobile screens less than 400px */
@media screen and (max-width: 399px) {
  .content-sc {
    font-size: 1.1rem !important;
  }
}

@media screen and (max-width: 420px) {
  .marginoverview div {
    /* max-width: 270px; */
  }
  .note.shouldbedone ,
  .note.shouldbeavoided {
    width:100%;
    margin-right:auto;
  }

}

/* Content sc size responsive end */

.no-code-ex-sc {
  text-decoration: underline;
  text-align: left;
  font-weight: 400;
  margin-top: 15px;
}

.content-sc.marja {
  margin-top: 0.2em !important;
}
li.content-sc{
  margin-bottom: 0.75rem;
}
.under-the-best {
  text-decoration: underline;
  color: #313131;
}



/* Full-page loader */
/* Full-page loader */
#pageLoader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* White background */
  z-index: 99999999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 0.7s ease-in-out; /* ✅ Smooth fade-out */
}

/* Lottie animation container (Updated to 220px) */
#mahajna-animation-container {
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Smooth fade-out transition when loading is complete */
.page-loaded #pageLoader {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease-in-out;
}



/* loader start */

/* 
#pageLoader {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fefefe;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.loading {
  width: 60px;
  height: 60px;
  position: relative;
}

.d1, .d2 {
  border: 5px solid #258246a8;
  border-radius: 50px;
}

.loading .d1 {
  width: 55px;
  height: 55px;
  position: absolute;
  border-left-color: transparent;
  animation: load161 1s linear infinite;
}

.loading .d2 {
  width: 40px;
  height: 40px;
  border-top-color: transparent;
  border-right-color: transparent;
  margin: 7.5px;
  animation: load2812 1.5s linear infinite;
}

@keyframes load161 {
  0% {
      transform: rotate(0);
  }
  100% {
      transform: rotate(360deg);
  }
}

@keyframes load2812 {
  0% {
      transform: rotate(0);
  }
  100% {
      transform: rotate(-360deg);
  }
}

.page-transition {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.page-loaded {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
} */


/* loader end */

.strong-black {
  color: #030E07 !important;
}

.marg-para-sc {
  margin-top: 20px !important;
}


.h1-main-aca {
  font-size: 2.5rem;
  color: white !important;
}
.main-aca-sec {
  padding:  100px 0;
}
.aca-h1-cola-bti {
  color: #313131 !important;
}
.aca-n-bg {
background-color: #223422;
}
.main-aca-sec {
  background-image: url(../images/roxo-aca-main-bg.png) !important;
  width: auto;
  background-size: cover;
  }

  .aca-main-sec-ped {
      padding: 94px 100px !important;
      text-align: center;
  }


  .aca-icon-title {
    position: relative;
    display: inline-block;
  }

  .aca-icon-pic {
    position: absolute;
    top: 19px;
    left: 104%;
    transform: translateX(-50%) translateY(-100%);
    width: 34px;
    height: auto;
  }

  .aca-p-on-bright {
    color: #525252;
    font-size: 1rem !important;

  }

  .aligned-center-aca {
    text-align: center !important;
  }

  .aligned-left-aca  {
    text-align: left !important;
  }

.p-main-max-w {
  width: 68%;
  margin: 32px auto;
}

#aca-call-2-bg {
  background-image: url(../images/roxo-aca-main-bg.png) !important;
  width: auto;
  background-size: cover;
}


.call-2-aca-sec {
  padding-top: 140px;
}

@media (max-width: 756px) {
  .aca-main-sec-ped {
    padding: 94px 40px !important;
}

.h1-main-aca {
  font-size: 2rem;
}
.aca-icon-pic {
  position: absolute;
  top: 19px;
  left: 104%;
  transform: translateX(-50%) translateY(-100%);
  width: 28px;
  height: auto;
}
.p-main-max-w {
  width: 99%;
  margin: 32px auto;
}
}


@media (max-width: 413px) {
  .aca-main-sec-ped {
    padding: 94px 40px !important;
}

.h1-main-aca {
  font-size: 2.5rem;
}
.aca-icon-pic {
  position: absolute;
  top: 74px;
  left: 82%;
  transform: translateX(-50%) translateY(-100%);
  width: 24px;
  height: auto;
}
.aca-icon-title {
  position: relative;
  display: inline-block;
}
.p-main-max-w {
  width: 99%;
  margin: 32px auto;
}
}

@media (max-width: 383px) {

.aca-icon-pic {
  position: absolute;
  top: 82px;
  left: 88%;
  transform: translateX(-50%) translateY(-100%);
  width: 28px;
  height: auto;

}
.aca-icon-title {
  position: relative;
  display: inline-block;
}

}

.general-aca-sec {
padding: 100px 30px!important;
text-align: left !important;
}

#bright-aca-bg {
  background-color: #EEF5F0;
}

.marg-l-sec-aca {
  margin-left: 5.9rem;
}

.left-aca-strac-h1 {
  margin: 32px auto;
}

.aca-structure-sec-ped {
  padding: 100px 100px !important;
}

.sec-content-struc {
  margin-left: 39px;
}



.struc-general-aca-sec {
  padding: 115px 30px !important;
  text-align: left !important;
}

.special-contact-aca-wra {
  max-width: 640px;
}


/* book flow */

.main-book-aca-sec {
  position: relative;
}

.struc-book-pic {
  position: absolute;
  top: -112px;
  right: 131px;
  width: 325px;
  height: auto;
  z-index: 9999;
}

.struc-book-pic-section {
  position: relative;
  z-index: 999;
}


/* structure h1 */
.marg-t-p-struc {
  margin-top: 0;
}  
.aca-icon-struc-diva {
  position: relative;
  display: inline-block;
}

.structure-h1 {
  position: relative;
  display: inline-block;
  padding-right: 50px; /* Space for the icon */
  margin: 0; /* Reset margin */
}

.struc-icon-pic {
  position: absolute;
  top: -10px; /* Adjust this value to place the icon correctly */
  right: 0;
  width: 34px;
  height: auto;
}

/* Adjustments for smaller screens */
@media (max-width: 1200px) {
  .structure-h1 {
    padding-right: 40px; /* Adjust the space for the icon */
  }
  
  .struc-icon-pic {
    width: 30px; /* Adjust the width */
    top: -8px; /* Adjust the top position */
  }
}

@media (max-width: 992px) {
  .structure-h1 {
    padding-right: 30px; /* Further adjust the space for the icon */
  }
  
  .struc-icon-pic {
    width: 28px; /* Further adjust the width */
    top: -6px; /* Further adjust the top position */
  }
}

@media (max-width: 768px) {
  .structure-h1 {
    padding-right: 20px; /* Further adjust the space for the icon */
    font-size: 2.2rem;
  }

}


.max-width-p-struc {
  max-width: 965px;
}

.bg-back-aca-bright {
  background-color: #EEF5F0;
}

.aca-h2-on-bright {
  font-weight: 500;
  font-size: 2rem;
  color: #313131;
}

@media (max-width: 1017px) {
  .aca-structure-sec-ped {
    padding: 80px 31px !important;
}
.struc-icon-pic {
  position: absolute;
  top: -10px; /* Adjust this value to place the icon correctly */
  right: -12px;
  width: 34px;
  height: auto;
}
}

@media (max-width: 767px) {
.struc-icon-pic {
  position: absolute;
  top: -10px; /* Adjust this value to place the icon correctly */
  right: -21px;
  width: 34px;
  height: auto;
}
}

@media (max-width: 425px) {
  .struc-icon-pic {
    position: absolute;
    top: -10px; /* Adjust this value to place the icon correctly */
    right: -21px;
    width: 30px;
    height: auto;
  }

  .structure-h1 {
    font-size: 2rem;
  }
  .aca-h2-on-bright {
    font-size: 1.3rem !important;
}

  }

  @media (max-width: 1024px) {
    .marg-l-sec-aca {
      margin-left: 39px;
  }
  
.aca-h2-on-bright {
font-size: 1.8rem;
}
  }

  @media (max-width: 495px) {
    .aca-structure-sec-ped {
      padding: 50px 10px !important;
    }
}
@media (max-width: 1597px) {
.struc-book-pic {
  position: absolute;
  top: -112px;
  right: 49px;
  width: 295px;
  height: auto;
  z-index: 9999;
}
}

@media (max-width: 1367px) {
  .struc-book-pic {
    position: absolute;
    top: -112px;
    right: 11px;
    width: 255px;
    height: auto;
    z-index: 9999;
  }
  }

  @media (max-width: 765px) {
    .struc-book-pic {
      position: absolute;
      top: -112px;
      right: 11px;
      width: 205px;
      height: auto;
      z-index: 9999;
    }
    }

    @media (max-width: 765px) {
      .struc-book-pic {
        position: absolute;
        top: -112px;
        right: 11px;
        width: 205px;
        height: auto;
        z-index: 9999;
      }
      }

      @media (max-width: 530px) {
        .push-res-for-book {
           margin-top: 90px;
        }
        .struc-book-pic {
          position: absolute;
          top: -82px;
          right: 113px;
          width: 205px;
          height: auto;
          z-index: 9999;
        }
        .marg-l-sec-aca {
          margin-left: 17px;
      }
      .sec-content-struc {
        margin-left: 17px;
    }
        }

        
      @media (max-width: 411px) {
        .struc-book-pic {
          position: absolute;
          top: -82px;
          right: 94px;
          width: 205px;
          height: auto;
          z-index: 9999;
        }
        }

        /* sc roxo */
  
    .sc-top-sec-h {
      height: 200px;
    }

    .sc-h1-marg {
      margin-top: 40px;
    }

    @media (max-width: 1023px) {
      .sc-h1-marg {
        margin-top: 37px;
      }
    }

    b, strong {
      font-weight: bolder;
      color: #313131;
  }

  .bestpractices_academy .overviewlist .item p {
    color: #525252 !important;
  }

.less-marg-t-ob {
  margin-top: 10px;
}

.roxo-mid-h3 {
  color: #05120a !important;
}

.aca-footer-flexa {
  --bs-gutter-x: 0.2rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1* var(--bs-gutter-y));
  margin-right: calc(-.5* var(--bs-gutter-x));
  margin-left: 94px;
  justify-content: space-between;
  max-width: 1200px;
}
@media (max-width: 1400px) {
  .aca-footer-flexa {
    margin-left: 50px;
  }
}
@media (max-width: 1073px) {
  .aca-footer-flexa {
    margin-left: 30px;
  }
}

.under-p-line {
  text-decoration: underline;
}

.push-ux-sec-aca{
  margin-top: 20px;
}
.link-black-aca {
  font-size: 0.9rem;
  color: #030E07;
  text-decoration: underline;
}
.link-black-aca:hover {
  font-size: 0.9rem;
  color: #030E07 !important;
  text-decoration: underline;
}

.roxo-ul-aca {
  list-style-type: none;
  padding-left: 0;
}

.roxo-ul-aca .aca-bullet-point {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  color: #525252;
  font-size: 1rem;
}

.roxo-ul-aca .aca-bullet-point::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #525252;
  font-size: 1.2em; /* Adjust the size of the bullet point as needed */
}

.marg-p-t-aca {
  margin-top: 20px !important;
}
.new-aca-mag-np {
  margin-bottom: 0px !important;
}
.roxo-aca-logo {
  height: 45px;
}
  /* new code block */

  .roxo-code-container {
    display: flex;
    justify-content: left;
    align-items: flex-start;
  }
  
  .roxo-code-block {
    background-color: #232323;
    color: #d2d2d2;
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    line-height: 1.5;
    font-family: 'Roboto', sans-serif !important;
    margin-bottom: 0rem;
    font-size: 0.9rem;
    word-wrap: break-word; 
    word-break: break-word;
  }
  
  .roxo-code-block code {
    display: block;
    padding-left: 20px;
    text-indent: 0;
    margin-left: 0;
  }
  
  .roxo-code-block .roxo-tag {
    color: #ab875d;
  }
  
  .roxo-code-block .roxo-attribute {
    color: #dfc48c;
  }
  
  .roxo-code-block .roxo-value {
    color: #8f9c6c;
  }
  
  .roxo-code-block .roxo-text {
    color: #ffffff;
  }
  
  .roxo-code-block .roxo-class {
    color: #5688d7;
  }
  
  .roxo-code-block .roxo-keyword {
    color: #5688d7;
  }
  
  .roxo-code-block .roxo-variable {
    color: #8f9c6c;
  }
  
  .roxo-code-block .roxo-function {
    color: #dfc48c;
  }
  


  /* Pause, Stop, Hide 2.2.2  */
  .roxo-aca-pause-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
    border: 1px solid #ccc;
  }
  
  .roxo-aca-pause-content {
    display: inline-block;
    white-space: nowrap;
    animation: scroll 10s linear infinite;
    animation-play-state: running;
  }
  
  .roxo-aca-pause-toggle {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: #467756;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }
  
  @keyframes scroll {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }


  /* img-of-text example */

  .roxo-aca-img-of-text-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
    border: 1px solid #ccc;
  }
  
  .roxo-aca-img-of-text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
  }
  
  .roxo-aca-img-of-text-img {
    max-width: 20%;
    margin-bottom: 10px;
  }
  
  .roxo-aca-img-of-text-toggle {
    background-color: #467756;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }

  /* real text img of text  */ 
  .roxo-aca-realtext-container-final {
    width: 100%;
    min-height: 250px; /* Ensure the height is enough to show button */
    overflow: hidden;
    position: relative;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .roxo-aca-realtext-section-final {
    text-align: center;
    margin-bottom: 20px; /* Add margin to ensure button is below text */
  }
  
  .roxo-aca-realtext-toggle-final {
    background-color: #467756;
    color: white;
    padding: 10px 15px; /* Adjusted padding for better visibility */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }
  
  .roxo-not-found-realtext-section-final {
    padding: 2rem 1rem;
  }
  
  .roxo-not-found-realtext-error-final {
    font-size: 60px;
    color: #8c59d9;
    text-shadow: 
      1px 1px 1px #623e99,    
      2px 2px 1px #623e99,
      3px 3px 1px #623e99,
      4px 4px 1px #623e99,
      5px 5px 1px #623e99;

  }
  
  
  .roxo-not-found-realtext-error-final-off {
    font-size: 60px;
  }
  @media (max-width: 900px) {
    .roxo-aca-img-of-text-img {
      max-width: 30%;
      margin-bottom: 10px;
  }
  }
  @media (max-width: 587px) {
    .roxo-aca-img-of-text-img {
      max-width: 40%;
      margin-bottom: 10px;
  }
  }
  @media (max-width: 481px) {
    .roxo-aca-img-of-text-img {
      max-width: 50%;
      margin-bottom: 10px;
  }
  }



             /* acada */
             .acada-container {
              background-color: #EFF5F1;
              display: flex;
              justify-content: center;
              padding: 80px 20px;
              width: 100%;
              box-sizing: border-box;
          }
          
          .acada-content-wrapper {
              max-width: 1200px; /* Set a max-width */
              width: 100%;
              padding: 0 20px; /* Add padding to keep space from the sides */
              display: flex;
              flex-direction: column;
              align-items: flex-start; /* Align content to the left */
              box-sizing: border-box;
          }
          
          .acada-heading {
              color: #313131;
              font-size: 2.4rem;
              font-weight: 600;
              margin-bottom: 20px;
              text-align:left;
          }
          
          .acada-emoji {
              font-size: 2rem;
              display: inline-block;
          }
          
          .acada-paragraph {
              color: #525252;
              font-size: 0.9rem;
              max-width: 800px;
              margin-bottom: 30px;
              line-height: 1.6;
          }
          
          .acada-image-wrapper {
              max-width: 800px;
              width: 100%;
              margin-top: 30px;
          }
          
          .acada-image {
              width: 100%;
              height: auto;
              display: block;
              margin: 0 auto;
          }
          
          @media (max-width: 481px) {
              .acada-heading {
                  font-size: 2rem;
                  margin-bottom: 20px;
      
              }
          }
          
          @media (max-width: 1653px) {
            .acada-content-wrapper {
              padding-left: 60px;
            }
        }

        @media (max-width: 755px) {
          .acada-content-wrapper{
            padding-left: 0px;
          }
          .acada-structure-content-wrapper{
            padding: 0 0px !important;
          }
      }
      
        .acada-stra-section {
          margin-top: 40px;
        }

          .acada-meet-section {
            background-color: #FFFFFF;
            display: flex;
            justify-content: center;
            padding: 50px 20px;
            width: 100%; /* Make sure the section spans the full width */
            box-sizing: border-box;
            margin-top: 50px;
        }
        
        .acada-meet-content-wrapper {
            max-width: 1200px; /* Set a fixed max-width */
            width: 100%;
            padding: 0 20px; /* Ensure padding on the sides */
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            box-sizing: border-box;
        }
        
        .acada-meet-title {
            color: #313131;
            font-size: 1.8rem;
            font-weight: 600;
            margin-bottom: 10px;
            text-align: left;
        }
        
        .acada-meet-subtitle {
            color: #313131;
            font-size: 0.9rem;
            font-weight: 500;
            margin-top: 20px;
        }
        
        .acada-meet-description {
            color: #3e3e3e;
            font-size: 0.8rem;
            line-height: 1.6;
            max-width: 800px;
            margin-bottom: 30px;
            margin-top: 10px;
        }
        
        .acada-meet-button {
            display: inline-flex;
            align-items: center;
            padding: 8px 20px;
            background-color: #467756;
            border-radius: 6px;
            color: #FFFFFF;
            font-weight: 500;
            font-size: 0.8rem;
            text-decoration: none;
            letter-spacing: 0.02rem;
        }

        .acada-meet-button:hover {
          color: #FFFFFF !important;
      }
        
        .acada-meet-arrow {
            margin-left: 10px;
            width: 20px;
            height: 20px;
        }
        
        .acada-meet-image-wrapper {
            max-width: 800px;
            width: 100%;
            margin-top: 30px;
        }
        
        .acada-meet-image {
            width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
        

        /* structure */
        .acada-structure-section {
          background-color: #FFFFFF;
          display: flex;
          justify-content: center;
          padding: 50px 20px;
          width: 100%;
          box-sizing: border-box;
      }
      
      .acada-structure-content-wrapper {
          max-width: 1200px;
          width: 100%;
          display: flex;
          flex-direction: row-reverse;
          align-items: center;
          padding: 0 20px;
      }
      
      .acada-structure-image-wrapper {
          flex: 1;
          max-width: 500px; /* Make the image smaller */
      }
      
      .acada-structure-image {
          width: 85%;
          height: auto;
          display: block;
      }
      
      .acada-structure-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
      }
      
      .acada-structure-title {
          color: #313131;
          font-size: 1.8rem;
          font-weight: 600;
          margin-bottom: 10px;
          max-width: 400px; 
          text-align: left;
      }
      
      .acada-structure-description {
          color: #3e3e3e;
          font-size: 0.8rem;
          line-height: 1.6;
          max-width: 400px; /* Limit the paragraph width */
          margin-bottom: 20px;
          margin-top: 10px;
      }
      
      .acada-structure-link {
          display: inline-flex;
          align-items: center;
          color: #467756;
          font-weight: 500;
          font-size: 0.8rem;
          text-decoration: none;
      }
      .acada-structure-link:hover {
        color: #467756 !important;

    }
      
      .acada-structure-arrow {
          margin-left: 10px;
          width: 20px;
          height: 20px;
      }
      
      .side-template-v3__mobile-header {
        transition: opacity 0.3s ease, visibility 0.3s ease;
      }
      /* Make the content come first and image go below on small screens */
      @media (max-width: 768px) {
          .acada-structure-content-wrapper {
              flex-direction: column;
          }
      
          .acada-structure-image-wrapper {
              order: 2; /* Image comes second */
              max-width: 100%;
          }
      
          .acada-structure-content {
              order: 1; /* Content comes first */
              margin-bottom: 20px;
          }
      }