/* Akka Trust Center Styles */
:root {
    --akka-gray-900: #1a1a1a;
    --akka-gray-800: #2f2f2f;
    --akka-gray-700: #434343;
    --akka-gray-600: #606060;
    --akka-gray-500: #808080;
    --akka-gray-400: #adadad;
    --akka-gray-300: #c9c9c9;
    --akka-gray-200: #e5e5e5;
    --akka-gray-100: #f5f5f5;
    --akka-gray-50: #fafafa;
    --akka-blue: #00d8dd;
    --akka-green: #72d35b;
    --akka-yellow: #ffce4a;
    --akka-orange: #ff5400;
    --akka-blue-dkr: #02a4a7;
    --akka-green-dkr: #5aa547;
    --akka-yellow-dkr: #f5b60b;
    --akka-orange-dkr: #d84800;
    --akka-white: #ffffff;
    --akka-soft-white: #f1f1f1;
    --akka-body-white-darkmode: #e4e4e4;
    --akka-black: #000000;
    --akka-heavy-black: #0d0d0d;
    --akka-medium-black: #141414;
    --akka-soft-black: #1a1a1a;
    --akka-medium-gray: #4e4e4e;
    --akka-soft-gray: #a6a6a6;
    --akka-nav-border-color: #313131;
    --akka-border-radius: 12px;
  }

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Instrument Sans', sans-serif;
    line-height: 1.6;
    color: var(--akka-white);
    background-color: var(--akka-black);
    font-size: 18px;
}

a {
    color: var(--akka-blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Typography Boilerplate */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--akka-white);
}

h1 {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: 2px;
}

h2 {
    font-size: 1.5rem;
    color: var(--akka-yellow);
    margin-bottom: 1.5rem;
}

h3 {
    font-size: 1.25rem;
    color: var(--akka-yellow);
    margin-bottom: 1rem;
}

h4 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
}

h5 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

h6 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

p {
    margin-bottom: 1rem;
    line-height: 1.6;
    color: var(--akka-white);
}

/* Lists */
ul, ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
    color: var(--akka-yellow);
}

ul {
    list-style-type: disc;
}

ol {
    list-style-type: decimal;
}

li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

li:last-child {
    margin-bottom: 0;
}

/* Nested lists */
ul ul, ol ol, ul ol, ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    background: var(--akka-black);
    border-radius: var(--akka-border-radius);
    overflow: hidden;
}

th, td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 2px solid var(--akka-soft-black);
    color: var(--akka-white);
}

th {
    background: var(--akka-black);
    font-weight: 600;
    color: var(--akka-yellow);
}

tr:hover {
    background: var(--akka-medium-black);
}

/* Code and Pre */
code {
    background: var(--akka-medium-black);
    color: var(--akka-blue);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.875rem;
}

pre {
    background: var(--akka-medium-black);
    color: var(--akka-white);
    padding: 1rem;
    border-radius: var(--akka-border-radius);
    overflow-x: auto;
    margin-bottom: 1rem;
    border: 1px solid var(--akka-nav-border-color);
}

pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* Blockquotes */
blockquote {
    border-left: 4px solid var(--akka-blue);
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--akka-soft-gray);
    background: var(--akka-medium-black);
    padding: 1rem;
    border-radius: var(--akka-border-radius);
}

/* Horizontal Rule */
hr {
    border: none;
    height: 1px;
    background: var(--akka-nav-border-color);
    margin: 2rem 0;
}

/* Form Elements */
input, textarea, select {
    background: var(--akka-medium-black);
    border: 1px solid var(--akka-nav-border-color);
    color: var(--akka-white);
    padding: 0.75rem;
    border-radius: 4px;
    font-family: 'Instrument Sans', sans-serif;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--akka-blue);
    box-shadow: 0 0 0 2px rgba(0, 216, 221, 0.2);
}

/* Buttons */
button {
    background: var(--akka-blue);
    color: var(--akka-white);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background: var(--akka-blue-dkr);
}

button:disabled {
    background: var(--akka-medium-gray);
    cursor: not-allowed;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Strong and Em */
strong {
    font-weight: 600;
}

em {
    font-style: italic;}

/* Small text */
small {
    font-size: 0.875rem;
}

/* Mark/Highlight */
mark {
    background: var(--akka-yellow);
    color: var(--akka-black);
    padding: 0.125rem 0.25rem;
    border-radius: 2px;
}

header {
    background: var(--akka-black);
    color: var(--akka-white);
    padding: 2rem 2rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: 160px;
}
header .header-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
header .header-brand > span {
    color: var(--akka-yellow);
}

header .akka-logo {
    width: 140px;
    height: 50px;
}

header .header-content {
    background-image: url('img/banner-image.jpg');
    background-size: cover;
    background-position: center;
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
    
header h1 {
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 2px;
    margin: 0;
}

main {
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 2rem;
}

.legal-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    font-size: 12px;
    color: var(--akka-white);
    gap: 6px;
}
.legal-footer a {
    color: var(--akka-white);
    text-decoration: none;
    cursor: pointer;
}
.legal-footer a:hover {
    text-decoration: underline;
}

.footerBottomLogo {
    bottom: 0;
    left: 0;
    line-height: 0;
    margin: 0 auto;
    max-width: 1060px;
    position: relative;
    width: 100%
}

.footerBottomLine {
    animation: gradient 6s linear infinite;
    animation-direction: alternate;
    background-blend-mode: hard-light;
    background-size: cover;
    background: linear-gradient(90deg,#ffce4a,#04c4c5 50%,#d70023);
    background-size: 150% 100%;
    height: 6px;
    position: relative;
    width: 100%;
    z-index: 2
}

section {
    margin: 1.5rem 0;
    overflow: hidden;
    font-size: 14px;
}
section.panel {
    border-radius: var(--akka-border-radius);
    background: var(--akka-soft-black);
}
section.padded {
    padding: 2rem;
}

#intro p {
    margin-bottom: 1rem;
    font-size: 1rem;
}



summary {
    background: var(--akka-medium-black);
    padding: 1.5rem 2rem;
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--akka-white);
    transition: background-color 0.3s ease;
}

summary:hover {
    background: var(--akka-blue);
}
summary:hover h2 {
    color: var(--akka-black);
}
summary:hover::marker {
    color: var(--akka-black);
}
details[open] summary {
    background: var(--akka-yellow);
    color: var(--akka-black);
}
details[open] summary h2{
    color: var(--akka-black);
}
details[open] summary::marker {
    color: var(--akka-black);
}

summary h2 {
    margin: 0;
    display: inline;
}

summary::marker {
    color: var(--akka-yellow);
}

details > div {
    margin: 2rem;
}

/* Standards specific styling */
#standards-content div.icon-link a,
#standards-content div.icon-link span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--akka-white);
}

#standards-content img {
    margin-right: 0.5rem;
}

#standards-content a {
    color: var(--akka-blue);
    text-decoration: none;
}

#standards-content div.icon-link a:hover {
    text-decoration: underline;
    color: var(--akka-blue);
}

/* Policies specific styling */

.policies-content p {
    margin-bottom: .125rem;
}
.policies-content a{
    color: var(--akka-white);
    text-decoration: none;
}
.policies-content a:hover{
    text-decoration: underline;
    color: var(--akka-blue);
}
/* Subprocessors specific styling */
.subprocessors-content p {
    margin-bottom: .125rem;
}
.subprocessors-content a{
    color: var(--akka-white);
    text-decoration: none;
}
.subprocessors-content a:hover{
    text-decoration: underline;
    color: var(--akka-blue);
}
/* Resources styling */

.resources-content{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));    
    gap: 1rem;
    
}
.resources-content h3,
.resources-content h4 {
   border-bottom: 1px solid var(--akka-medium-gray);
   padding-bottom: .5rem;
   margin-bottom: .5rem;
}

.resources-content p {
    margin-bottom: .125rem;
}

/* Controls styling */
.controls-content details {
    background-color: transparent;
    margin: 1rem 0;
    
}
.controls-content details summary {
    border: 1px solid var(--akka-medium-gray);
    background-color: transparent;
    font-size: 1rem;
    padding: 1rem;
}
.controls-content details summary:hover {
    background: var(--akka-blue);
    color: var(--akka-black);
}
.controls-content details[open] summary {
    background: var(--akka-yellow) !important;
    color: var(--akka-black);
}
.controls-content details[open] summary:hover {
    background: var(--akka-yellow);
    color: var(--akka-black);
}


/* Responsive design */
@media (max-width: 768px) {
    header h1 {
        font-size: 2rem;
    }
    
    main {
        padding: 0 1rem;
    }
    
    details > div {
        padding: 1rem;
    }
    
    summary {
        padding: 1rem;
        font-size: 1.1rem;
    }
}


.d-flex{ display: flex; }
.d-none{ display: none; }
.d-block{ display: block; }
.d-grid,.grid { display: grid;}
.row{ display: flex; }
.flex-row{ flex-direction: row; }
.flex-col{ flex-direction: column; }
.col{ flex-direction: column; }
.flex-wrap{ flex-wrap: wrap; }
.flex-grow { flex-grow: 1; }
.flex-none { flex-grow: 0; }
.justify-content-start{ justify-content: start; }
.justify-content-end{ justify-content: end; }
.justify-content-center{ justify-content: center; }
.justify-content-between{ justify-content: between; }
.justify-content-around{ justify-content: around; }
.align-items-start{ align-items: start; }
.align-items-end{ align-items: end; }
.align-items-center{ align-items: center; }
.align-items-stretch { align-items: stretch; }
.row-reverse{ -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
.column-reverse{ -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
.w-full{ width: 100%; }
.h-full{ height: 100%; }
.columns-1 { columns: 1 auto; }
.columns-2 { columns: 2 auto; }
.columns-3 { columns: 3 auto; }
.columns-4 { columns: 4 auto; }
.columns-5 { columns: 5 auto; }
.columns-6 { columns: 6 auto; }
.columns-7 { columns: 7 auto; }
.columns-8 { columns: 8 auto; }
.columns-9 { columns: 9 auto; }
.columns-10 { columns: 10 auto; }
.columns-11 { columns: 11 auto; }
.columns-12 { columns: 12 auto; }

.gap-0 { gap: 0;}
.gap-025rem { gap: .25rem; }
.gap-05rem { gap: .5rem; }
.gap-075rem { gap: .75rem; }
.gap-1rem { gap: 1rem; }
.gap-2rem { gap: 2rem; }
.gap-3rem { gap: 3rem; }
.gap-4rem { gap: 4rem; }
.gap-5rem { gap: 5rem; }
.gap-6rem { gap: 6rem; }
.gap-8rem { gap: 8rem; }


.row-gap-0 { row-gap: 0; }
.row-gap-025rem { row-gap: .25rem; }
.row-gap-05rem { row-gap: .5rem; }
.row-gap-075rem { row-gap: .75rem; }
.row-gap-1rem { row-gap: 1rem; }
.row-gap-2rem { row-gap: 2rem; }
.row-gap-3rem { row-gap: 3rem; }
.row-gap-4rem { row-gap: 4rem; }
.row-gap-5rem { row-gap: 5rem; }
.row-gap-6rem { row-gap: 6rem; }
.row-gap-8rem { row-gap: 8rem; }
  
.col-gap-0 { column-gap: 0; }
.col-gap-025rem { column-gap: .25rem; }
.col-gap-05rem { column-gap: .5rem; }
.col-gap-075rem { column-gap: .75rem; }
.col-gap-1rem { column-gap: 1rem; }
.col-gap-2rem { column-gap: 2rem; }
.col-gap-3rem { column-gap: 3rem; }
.col-gap-4rem { column-gap: 4rem; }
.col-gap-5rem { column-gap: 5rem; }
.col-gap-6rem { column-gap: 6rem; }
.col-gap-8rem { column-gap: 8rem; }

.grid-cols-1	{grid-template-columns: repeat(1, minmax(0, 1fr));}
.grid-cols-2	{grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid-cols-3	{grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid-cols-4	{grid-template-columns: repeat(4, minmax(0, 1fr));}
.grid-cols-5	{grid-template-columns: repeat(5, minmax(0, 1fr));}
.grid-cols-6	{grid-template-columns: repeat(6, minmax(0, 1fr));}
.grid-cols-7	{grid-template-columns: repeat(7, minmax(0, 1fr));}
.grid-cols-8	{grid-template-columns: repeat(8, minmax(0, 1fr));}
.grid-cols-9	{grid-template-columns: repeat(9, minmax(0, 1fr));}
.grid-cols-10	{grid-template-columns: repeat(10, minmax(0, 1fr));}
.grid-cols-11	{grid-template-columns: repeat(11, minmax(0, 1fr));}
.grid-cols-12	{grid-template-columns: repeat(12, minmax(0, 1fr));}

.col-span-1	{grid-column: span 1 / span 1;}
.col-span-2	{grid-column: span 2 / span 2;}
.col-span-3	{grid-column: span 3 / span 3;}
.col-span-4	{grid-column: span 4 / span 4;}
.col-span-5	{grid-column: span 5 / span 5;}
.col-span-6	{grid-column: span 6 / span 6;}
.col-span-7	{grid-column: span 7 / span 7;}
.col-span-8	{grid-column: span 8 / span 8;}
.col-span-9	{grid-column: span 9 / span 9;}
.col-span-10 {grid-column: span 10 / span 10;}
.col-span-11 {grid-column: span 11 / span 11;}
.col-span-12 {grid-column: span 12 / span 12;}
.col-span-full {grid-column: 1 / -1;}


/* medium desktop */
@media(max-width: 1366px){
  .desk-md-columns-1 { columns: 1 auto; }
  .desk-md-columns-2 { columns: 2 auto; }
  .desk-md-columns-3 { columns: 3 auto; }
  .desk-md-columns-4 { columns: 4 auto; }
  .desk-md-columns-5 { columns: 5 auto; }
  .desk-md-columns-6 { columns: 6 auto; }
  .desk-md-columns-7 { columns: 7 auto; }
  .desk-md-columns-8 { columns: 8 auto; }
  .desk-md-columns-9 { columns: 9 auto; }
  .desk-md-columns-10 { columns: 10 auto; }
  .desk-md-columns-11 { columns: 11 auto; }
  .desk-md-columns-12 { columns: 12 auto; }

  .desk-md-grid-cols-1 {grid-template-columns: repeat(1, minmax(0, 1fr));}
  .desk-md-grid-cols-2	{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .desk-md-grid-cols-3	{grid-template-columns: repeat(3, minmax(0, 1fr));}
  .desk-md-grid-cols-4	{grid-template-columns: repeat(4, minmax(0, 1fr));}
  .desk-md-grid-cols-5	{grid-template-columns: repeat(5, minmax(0, 1fr));}
  .desk-md-grid-cols-6	{grid-template-columns: repeat(6, minmax(0, 1fr));}
  .desk-md-grid-cols-7	{grid-template-columns: repeat(7, minmax(0, 1fr));}
  .desk-md-grid-cols-8	{grid-template-columns: repeat(8, minmax(0, 1fr));}
  .desk-md-grid-cols-9	{grid-template-columns: repeat(9, minmax(0, 1fr));}
  .desk-md-grid-cols-10	{grid-template-columns: repeat(10, minmax(0, 1fr));}
  .desk-md-grid-cols-11	{grid-template-columns: repeat(11, minmax(0, 1fr));}
  .desk-md-grid-cols-12	{grid-template-columns: repeat(12, minmax(0, 1fr));}
  
  .desk-md-col-span-1	{grid-column: span 1 / span 1;}
  .desk-md-col-span-2	{grid-column: span 2 / span 2;}
  .desk-md-col-span-3	{grid-column: span 3 / span 3;}
  .desk-md-col-span-4	{grid-column: span 4 / span 4;}
  .desk-md-col-span-5	{grid-column: span 5 / span 5;}
  .desk-md-col-span-6	{grid-column: span 6 / span 6;}
  .desk-md-col-span-7	{grid-column: span 7 / span 7;}
  .desk-md-col-span-8	{grid-column: span 8 / span 8;}
  .desk-md-col-span-9	{grid-column: span 9 / span 9;}
  .desk-md-col-span-10 {grid-column: span 10 / span 10;}
  .desk-md-col-span-11 {grid-column: span 11 / span 11;}
  .desk-md-col-span-12 {grid-column: span 12 / span 12;}
  .desk-md-col-span-full {grid-column: 1 / -1;}
  
  .desk-md-columns-1 {columns: 1;}
  .desk-md-columns-2 {columns: 2;}
  .desk-md-columns-3 {columns: 3;}
  
  .desk-md-gap-0 { gap: 0;}
  .desk-md-gap-025rem { gap: .25rem; }
  .desk-md-gap-05rem { gap: .5rem; }
  .desk-md-gap-075rem { gap: .75rem; }
  .desk-md-gap-1rem { gap: 1rem; }
  .desk-md-gap-2rem { gap: 2rem; }
  .desk-md-gap-3rem { gap: 3rem; }
  .desk-md-gap-4rem { gap: 4rem; }
  .desk-md-gap-5rem { gap: 5rem; }
  .desk-md-gap-6rem { gap: 6rem; }
  .desk-md-gap-8rem { gap: 8rem; }
  
  .desk-md-row-gap-1rem { 	row-gap: 1rem; }
  .desk-md-row-gap-2rem { 	row-gap: 2rem; }
  .desk-md-row-gap-3rem { 	row-gap: 3rem; }
  .desk-md-row-gap-4rem { 	row-gap: 4rem; }
  .desk-md-row-gap-5rem { 	row-gap: 5rem; }
  .desk-md-row-gap-6rem { 	row-gap: 6rem; }
  .desk-md-row-gap-8rem { 	row-gap: 8rem; }
  
  .desk-md-col-gap-1rem { 	column-gap: 1rem; }
  .desk-md-col-gap-2rem { 	column-gap: 2rem; }
  .desk-md-col-gap-3rem { 	column-gap: 3rem; }
  .desk-md-col-gap-4rem { 	column-gap: 4rem; }
  .desk-md-col-gap-5rem { 	column-gap: 5rem; }
  .desk-md-col-gap-6rem { 	column-gap: 6rem; }
  .desk-md-col-gap-8rem { 	column-gap: 8rem; }
  
  .desk-md-row-reverse { flex-direction: row-reverse; }
  .desk-md-col-reverse { flex-direction: column-reverse; }
  .desk-md-flex-col{ flex-direction: column; }.flex-wrap{ flex-wrap: wrap; }
  .desk-md-justify-content-start{ justify-content: start; }
  .desk-md-justify-content-end{ justify-content: end; }
  .desk-md-justify-content-center{ justify-content: center; }
  .desk-md-justify-content-between{ justify-content: between; }
  .desk-md-justify-content-around{ justify-content: around; }
  .desk-md-align-items-start{ align-items: start; }
  .desk-md-align-items-end{ align-items: end; }
  .desk-md-align-items-center{ align-items: center; }
  .desk-md-row-reverse{ -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
  .desk-md-column-reverse{ -ms-flex-direction: column-reverse; flex-direction: column-reverse; }

}

/* small desktop */
@media(max-width: 1200px){
    .desk-sm-columns-1 { columns: 1 auto; }
    .desk-sm-columns-2 { columns: 2 auto; }
    .desk-sm-columns-3 { columns: 3 auto; }
    .desk-sm-columns-4 { columns: 4 auto; }
    .desk-sm-columns-5 { columns: 5 auto; }
    .desk-sm-columns-6 { columns: 6 auto; }
    .desk-sm-columns-7 { columns: 7 auto; }
    .desk-sm-columns-8 { columns: 8 auto; }
    .desk-sm-columns-9 { columns: 9 auto; }
    .desk-sm-columns-10 { columns: 10 auto; }
    .desk-sm-columns-11 { columns: 11 auto; }
    .desk-sm-columns-12 { columns: 12 auto; }
  .desk-sm-grid-cols-1  {grid-template-columns: repeat(1, minmax(0, 1fr));}
  .desk-sm-grid-cols-2	{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .desk-sm-grid-cols-3	{grid-template-columns: repeat(3, minmax(0, 1fr));}
  .desk-sm-grid-cols-4	{grid-template-columns: repeat(4, minmax(0, 1fr));}
  .desk-sm-grid-cols-5	{grid-template-columns: repeat(5, minmax(0, 1fr));}
  .desk-sm-grid-cols-6	{grid-template-columns: repeat(6, minmax(0, 1fr));}
  .desk-sm-grid-cols-7	{grid-template-columns: repeat(7, minmax(0, 1fr));}
  .desk-sm-grid-cols-8	{grid-template-columns: repeat(8, minmax(0, 1fr));}
  .desk-sm-grid-cols-9	{grid-template-columns: repeat(9, minmax(0, 1fr));}
  .desk-sm-grid-cols-10	{grid-template-columns: repeat(10, minmax(0, 1fr));}
  .desk-sm-grid-cols-11	{grid-template-columns: repeat(11, minmax(0, 1fr));}
  .desk-sm-grid-cols-12	{grid-template-columns: repeat(12, minmax(0, 1fr));}
  
  .desk-sm-col-span-1	{grid-column: span 1 / span 1;}
  .desk-sm-col-span-2	{grid-column: span 2 / span 2;}
  .desk-sm-col-span-3	{grid-column: span 3 / span 3;}
  .desk-sm-col-span-4	{grid-column: span 4 / span 4;}
  .desk-sm-col-span-5	{grid-column: span 5 / span 5;}
  .desk-sm-col-span-6	{grid-column: span 6 / span 6;}
  .desk-sm-col-span-7	{grid-column: span 7 / span 7;}
  .desk-sm-col-span-8	{grid-column: span 8 / span 8;}
  .desk-sm-col-span-9	{grid-column: span 9 / span 9;}
  .desk-sm-col-span-10 {grid-column: span 10 / span 10;}
  .desk-sm-col-span-11 {grid-column: span 11 / span 11;}
  .desk-sm-col-span-12 {grid-column: span 12 / span 12;}
  .desk-sm-col-span-full {grid-column: 1 / -1;}
  
  .desk-sm-columns-1 {columns: 1;}
  .desk-sm-columns-2 {columns: 2;}
  .desk-sm-columns-3 {columns: 3;}
  
  .desk-sm-gap-0 { gap: 0;}
  .desk-sm-gap-025rem { gap: .25rem; }
  .desk-sm-gap-05rem { gap: .5rem; }
  .desk-sm-gap-075rem { gap: .75rem; }
  .desk-sm-gap-1rem { gap: 1rem; }
  .desk-sm-gap-2rem { gap: 2rem; }
  .desk-sm-gap-3rem { gap: 3rem; }
  .desk-sm-gap-4rem { gap: 4rem; }
  .desk-sm-gap-5rem { gap: 5rem; }
  .desk-sm-gap-6rem { gap: 6rem; }
  .desk-sm-gap-8rem { gap: 8rem; }
  
  .desk-sm-row-gap-1rem { 	row-gap: 1rem; }
  .desk-sm-row-gap-2rem { 	row-gap: 2rem; }
  .desk-sm-row-gap-3rem { 	row-gap: 3rem; }
  .desk-sm-row-gap-4rem { 	row-gap: 4rem; }
  .desk-sm-row-gap-5rem { 	row-gap: 5rem; }
  .desk-sm-row-gap-6rem { 	row-gap: 6rem; }
  .desk-sm-row-gap-8rem { 	row-gap: 8rem; }
  
  .desk-sm-col-gap-1rem { 	column-gap: 1rem; }
  .desk-sm-col-gap-2rem { 	column-gap: 2rem; }
  .desk-sm-col-gap-3rem { 	column-gap: 3rem; }
  .desk-sm-col-gap-4rem { 	column-gap: 4rem; }
  .desk-sm-col-gap-5rem { 	column-gap: 5rem; }
  .desk-sm-col-gap-6rem { 	column-gap: 6rem; }
  .desk-sm-col-gap-8rem { 	column-gap: 8rem; }
  
  .desk-sm-row-reverse { flex-direction: row-reverse; }
  .desk-sm-col-reverse { flex-direction: column-reverse; }
  .desk-sm-flex-col{ flex-direction: column; }.flex-wrap{ flex-wrap: wrap; }
  .desk-sm-justify-content-start{ justify-content: start; }
  .desk-sm-justify-content-end{ justify-content: end; }
  .desk-sm-justify-content-center{ justify-content: center; }
  .desk-sm-justify-content-between{ justify-content: between; }
  .desk-sm-justify-content-around{ justify-content: around; }
  .desk-sm-align-items-start{ align-items: start; }
  .desk-sm-align-items-end{ align-items: end; }
  .desk-sm-align-items-center{ align-items: center; }
  .desk-sm-row-reverse{ -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
  .desk-sm-column-reverse{ -ms-flex-direction: column-reverse; flex-direction: column-reverse; }

}

/* large tablet */
@media(max-width: 1024px){

    .tab-lg-columns-1 { columns: 1 auto; }
    .tab-lg-columns-2 { columns: 2 auto; }
    .tab-lg-columns-3 { columns: 3 auto; }
    .tab-lg-columns-4 { columns: 4 auto; }
    .tab-lg-columns-5 { columns: 5 auto; }
    .tab-lg-columns-6 { columns: 6 auto; }
    .tab-lg-columns-7 { columns: 7 auto; }
    .tab-lg-columns-8 { columns: 8 auto; }
    .tab-lg-columns-9 { columns: 9 auto; }
    .tab-lg-columns-10 { columns: 10 auto; }
    .tab-lg-columns-11 { columns: 11 auto; }
    .tab-lg-columns-12 { columns: 12 auto; }
  
  .tab-lg-grid-cols-1 {grid-template-columns: repeat(1, minmax(0, 1fr));}
  .tab-lg-grid-cols-2	{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .tab-lg-grid-cols-3	{grid-template-columns: repeat(3, minmax(0, 1fr));}
  .tab-lg-grid-cols-4	{grid-template-columns: repeat(4, minmax(0, 1fr));}
  .tab-lg-grid-cols-5	{grid-template-columns: repeat(5, minmax(0, 1fr));}
  .tab-lg-grid-cols-6	{grid-template-columns: repeat(6, minmax(0, 1fr));}
  .tab-lg-grid-cols-7	{grid-template-columns: repeat(7, minmax(0, 1fr));}
  .tab-lg-grid-cols-8	{grid-template-columns: repeat(8, minmax(0, 1fr));}
  .tab-lg-grid-cols-9	{grid-template-columns: repeat(9, minmax(0, 1fr));}
  .tab-lg-grid-cols-10	{grid-template-columns: repeat(10, minmax(0, 1fr));}
  .tab-lg-grid-cols-11	{grid-template-columns: repeat(11, minmax(0, 1fr));}
  .tab-lg-grid-cols-12	{grid-template-columns: repeat(12, minmax(0, 1fr));}
  
  .tab-lg-col-span-1	{grid-column: span 1 / span 1;}
  .tab-lg-col-span-2	{grid-column: span 2 / span 2;}
  .tab-lg-col-span-3	{grid-column: span 3 / span 3;}
  .tab-lg-col-span-4	{grid-column: span 4 / span 4;}
  .tab-lg-col-span-5	{grid-column: span 5 / span 5;}
  .tab-lg-col-span-6	{grid-column: span 6 / span 6;}
  .tab-lg-col-span-7	{grid-column: span 7 / span 7;}
  .tab-lg-col-span-8	{grid-column: span 8 / span 8;}
  .tab-lg-col-span-9	{grid-column: span 9 / span 9;}
  .tab-lg-col-span-10 {grid-column: span 10 / span 10;}
  .tab-lg-col-span-11 {grid-column: span 11 / span 11;}
  .tab-lg-col-span-12 {grid-column: span 12 / span 12;}
  .tab-lg-col-span-full {grid-column: 1 / -1;}
  
  .tab-lg-columns-1 {columns: 1;}
  .tab-lg-columns-2 {columns: 2;}
  .tab-lg-columns-3 {columns: 3;}
  
  .tab-lg-gap-0 { gap: 0;}
  .tab-lg-gap-025rem { gap: .25rem; }
  .tab-lg-gap-05rem { gap: .5rem; }
  .tab-lg-gap-075rem { gap: .75rem; }
  .tab-lg-gap-1rem { gap: 1rem; }
  .tab-lg-gap-2rem { gap: 2rem; }
  .tab-lg-gap-3rem { gap: 3rem; }
  .tab-lg-gap-4rem { gap: 4rem; }
  .tab-lg-gap-5rem { gap: 5rem; }
  .tab-lg-gap-6rem { gap: 6rem; }
  .tab-lg-gap-8rem { gap: 8rem; }
  
  .tab-lg-row-gap-1rem { 	row-gap: 1rem; }
  .tab-lg-row-gap-2rem { 	row-gap: 2rem; }
  .tab-lg-row-gap-3rem { 	row-gap: 3rem; }
  .tab-lg-row-gap-4rem { 	row-gap: 4rem; }
  .tab-lg-row-gap-5rem { 	row-gap: 5rem; }
  .tab-lg-row-gap-6rem { 	row-gap: 6rem; }
  .tab-lg-row-gap-8rem { 	row-gap: 8rem; }
  
  .tab-lg-col-gap-1rem { 	column-gap: 1rem; }
  .tab-lg-col-gap-2rem { 	column-gap: 2rem; }
  .tab-lg-col-gap-3rem { 	column-gap: 3rem; }
  .tab-lg-col-gap-4rem { 	column-gap: 4rem; }
  .tab-lg-col-gap-5rem { 	column-gap: 5rem; }
  .tab-lg-col-gap-6rem { 	column-gap: 6rem; }
  .tab-lg-col-gap-8rem { 	column-gap: 8rem; }
  
  .tab-lg-row-reverse { flex-direction: row-reverse; }
  .tab-lg-col-reverse { flex-direction: column-reverse; }
  .tab-lg-flex-col{ flex-direction: column; }
  .tab-lg-flex-wrap{ flex-wrap: wrap; }
  .tab-lg-justify-content-start{ justify-content: start; }
  .tab-lg-justify-content-end{ justify-content: end; }
  .tab-lg-justify-content-center{ justify-content: center; }
  .tab-lg-justify-content-between{ justify-content: between; }
  .tab-lg-justify-content-around{ justify-content: around; }
  .tab-lg-align-items-start{ align-items: start; }
  .tab-lg-align-items-end{ align-items: end; }
  .tab-lg-align-items-center{ align-items: center; }
  .tab-lg-row-reverse{ -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
  .tab-lg-column-reverse{ -ms-flex-direction: column-reverse; flex-direction: column-reverse; }

}


@media(max-width: 991px){
    .tab-columns-1 { columns: 1 auto; }
    .tab-columns-2 { columns: 2 auto; }
    .tab-columns-3 { columns: 3 auto; }
    .tab-columns-4 { columns: 4 auto; }
    .tab-columns-5 { columns: 5 auto; }
    .tab-columns-6 { columns: 6 auto; }
    .tab-columns-7 { columns: 7 auto; }
    .tab-columns-8 { columns: 8 auto; }
    .tab-columns-9 { columns: 9 auto; }
    .tab-columns-10 { columns: 10 auto; }
    .tab-columns-11 { columns: 11 auto; }
    .tab-columns-12 { columns: 12 auto; }
    
  .tabgrid-cols-1 {grid-template-columns: repeat(1, minmax(0, 1fr));}
  .tabgrid-cols-2	{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .tabgrid-cols-3	{grid-template-columns: repeat(3, minmax(0, 1fr));}
  .tabgrid-cols-4	{grid-template-columns: repeat(4, minmax(0, 1fr));}
  .tabgrid-cols-5	{grid-template-columns: repeat(5, minmax(0, 1fr));}
  .tabgrid-cols-6	{grid-template-columns: repeat(6, minmax(0, 1fr));}
  .tabgrid-cols-7	{grid-template-columns: repeat(7, minmax(0, 1fr));}
  .tabgrid-cols-8	{grid-template-columns: repeat(8, minmax(0, 1fr));}
  .tabgrid-cols-9	{grid-template-columns: repeat(9, minmax(0, 1fr));}
  .tabgrid-cols-10	{grid-template-columns: repeat(10, minmax(0, 1fr));}
  .tabgrid-cols-11	{grid-template-columns: repeat(11, minmax(0, 1fr));}
  .tabgrid-cols-12	{grid-template-columns: repeat(12, minmax(0, 1fr));}
  
  .tabcol-span-1	{grid-column: span 1 / span 1;}
  .tabcol-span-2	{grid-column: span 2 / span 2;}
  .tabcol-span-3	{grid-column: span 3 / span 3;}
  .tabcol-span-4	{grid-column: span 4 / span 4;}
  .tabcol-span-5	{grid-column: span 5 / span 5;}
  .tabcol-span-6	{grid-column: span 6 / span 6;}
  .tabcol-span-7	{grid-column: span 7 / span 7;}
  .tabcol-span-8	{grid-column: span 8 / span 8;}
  .tabcol-span-9	{grid-column: span 9 / span 9;}
  .tabcol-span-10 {grid-column: span 10 / span 10;}
  .tabcol-span-11 {grid-column: span 11 / span 11;}
  .tabcol-span-12 {grid-column: span 12 / span 12;}
  .tabcol-span-full {grid-column: 1 / -1;}
  
  .tabcolumns-1 {columns: 1;}
  .tabcolumns-2 {columns: 2;}
  .tabcolumns-3 {columns: 3;}
  
  .tabgap-0 { gap: 0;}
  .tabgap-025rem { gap: .25rem; }
  .tabgap-05rem { gap: .5rem; }
  .tabgap-075rem { gap: .75rem; }
  .tabgap-1rem { gap: 1rem; }
  .tabgap-2rem { gap: 2rem; }
  .tabgap-3rem { gap: 3rem; }
  .tabgap-4rem { gap: 4rem; }
  .tabgap-5rem { gap: 5rem; }
  .tabgap-6rem { gap: 6rem; }
  .tabgap-8rem { gap: 8rem; }
  
  .tabrow-gap-1rem { 	row-gap: 1rem; }
  .tabrow-gap-2rem { 	row-gap: 2rem; }
  .tabrow-gap-3rem { 	row-gap: 3rem; }
  .tabrow-gap-4rem { 	row-gap: 4rem; }
  .tabrow-gap-5rem { 	row-gap: 5rem; }
  .tabrow-gap-6rem { 	row-gap: 6rem; }
  .tabrow-gap-8rem { 	row-gap: 8rem; }
  
  .tabcol-gap-1rem { 	column-gap: 1rem; }
  .tabcol-gap-2rem { 	column-gap: 2rem; }
  .tabcol-gap-3rem { 	column-gap: 3rem; }
  .tabcol-gap-4rem { 	column-gap: 4rem; }
  .tabcol-gap-5rem { 	column-gap: 5rem; }
  .tabcol-gap-6rem { 	column-gap: 6rem; }
  .tabcol-gap-8rem { 	column-gap: 8rem; }
  
  .tabrow-reverse { flex-direction: row-reverse; }
  .tabcol-reverse { flex-direction: column-reverse; }
  .tabflex-col{ flex-direction: column; }
  .tabflex-wrap{ flex-wrap: wrap; }
  .tabjustify-content-start{ justify-content: start; }
  .tabjustify-content-end{ justify-content: end; }
  .tabjustify-content-center{ justify-content: center; }
  .tabjustify-content-between{ justify-content: between; }
  .tabjustify-content-around{ justify-content: around; }
  .tabalign-items-start{ align-items: start; }
  .tabalign-items-end{ align-items: end; }
  .tabalign-items-center{ align-items: center; }
  .tabalign-items-stretch{ align-items: stretch; }
  .tabrow-reverse{ -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
  .tabcolumn-reverse{ -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
  
  .tab-w-full-override { width: 100% !important;}
  .tab-max-w-full-override { max-width: 100% !important;}
  
  .tab-d-block{ display: block; }
  
}

@media(max-width: 767px){
    .mob-columns-1 { columns: 1 auto; }
    .mob-columns-2 { columns: 2 auto; }
    .mob-columns-3 { columns: 3 auto; }
    .mob-columns-4 { columns: 4 auto; }
    .mob-columns-5 { columns: 5 auto; }
    .mob-columns-6 { columns: 6 auto; }
    .mob-columns-7 { columns: 7 auto; }
    .mob-columns-8 { columns: 8 auto; }
    .mob-columns-9 { columns: 9 auto; }
    .mob-columns-10 { columns: 10 auto; }
    .mob-columns-11 { columns: 11 auto; }
    .mob-columns-12 { columns: 12 auto; }
  .mobgrid-cols-1 {grid-template-columns: repeat(1, minmax(0, 1fr));}
  .mobgrid-cols-2	{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .mobgrid-cols-3	{grid-template-columns: repeat(3, minmax(0, 1fr));}
  .mobgrid-cols-4	{grid-template-columns: repeat(4, minmax(0, 1fr));}
  .mobgrid-cols-5	{grid-template-columns: repeat(5, minmax(0, 1fr));}
  .mobgrid-cols-6	{grid-template-columns: repeat(6, minmax(0, 1fr));}
  .mobgrid-cols-7	{grid-template-columns: repeat(7, minmax(0, 1fr));}
  .mobgrid-cols-8	{grid-template-columns: repeat(8, minmax(0, 1fr));}
  .mobgrid-cols-9	{grid-template-columns: repeat(9, minmax(0, 1fr));}
  .mobgrid-cols-10	{grid-template-columns: repeat(10, minmax(0, 1fr));}
  .mobgrid-cols-11	{grid-template-columns: repeat(11, minmax(0, 1fr));}
  .mobgrid-cols-12	{grid-template-columns: repeat(12, minmax(0, 1fr));}
  
  .mobcol-span-1	{grid-column: span 1 / span 1;}
  .mobcol-span-2	{grid-column: span 2 / span 2;}
  .mobcol-span-3	{grid-column: span 3 / span 3;}
  .mobcol-span-4	{grid-column: span 4 / span 4;}
  .mobcol-span-5	{grid-column: span 5 / span 5;}
  .mobcol-span-6	{grid-column: span 6 / span 6;}
  .mobcol-span-7	{grid-column: span 7 / span 7;}
  .mobcol-span-8	{grid-column: span 8 / span 8;}
  .mobcol-span-9	{grid-column: span 9 / span 9;}
  .mobcol-span-10 {grid-column: span 10 / span 10;}
  .mobcol-span-11 {grid-column: span 11 / span 11;}
  .mobcol-span-12 {grid-column: span 12 / span 12;}
  .mobcol-span-full {grid-column: 1 / -1;}
  
  .mobcolumns-1 {columns: 1;}
  .mobcolumns-2 {columns: 2;}
  .mobcolumns-3 {columns: 3;}
  
 
  
  .mobgap-0 { gap: 0;}
  .mobgap-025rem { gap: .25rem; }
  .mobgap-05rem { gap: .5rem; }
  .mobgap-075rem { gap: .75rem; }
  .mobgap-1rem { gap: 1rem; }
  .mobgap-2rem { gap: 2rem; }
  .mobgap-3rem { gap: 3rem; }
  .mobgap-4rem { gap: 4rem; }
  .mobgap-5rem { gap: 5rem; }
  .mobgap-6rem { gap: 6rem; }
  .mobgap-8rem { gap: 8rem; }
  
  .mobrow-gap-1rem { 	row-gap: 1rem; }
  .mobrow-gap-2rem { 	row-gap: 2rem; }
  .mobrow-gap-3rem { 	row-gap: 3rem; }
  .mobrow-gap-4rem { 	row-gap: 4rem; }
  .mobrow-gap-5rem { 	row-gap: 5rem; }
  .mobrow-gap-6rem { 	row-gap: 6rem; }
  .mobrow-gap-8rem { 	row-gap: 8rem; }
  
  .mobcol-gap-1rem { 	column-gap: 1rem; }
  .mobcol-gap-2rem { 	column-gap: 2rem; }
  .mobcol-gap-3rem { 	column-gap: 3rem; }
  .mobcol-gap-4rem { 	column-gap: 4rem; }
  .mobcol-gap-5rem { 	column-gap: 5rem; }
  .mobcol-gap-6rem { 	column-gap: 6rem; }
  .mobcol-gap-8rem { 	column-gap: 8rem; }
  
  .mobrow-only-gap-1rem { gap: 1rem 0 !important; }
  .mobrow-only-gap-2rem { gap: 2rem 0 !important; }
  .mobrow-only-gap-3rem { gap: 3rem 0 !important; }
  .mobrow-only-gap-4rem { gap: 4rem 0 !important; }
  .mobrow-only-gap-5rem { gap: 5rem 0 !important; }
  .mobrow-only-gap-6rem { gap: 6rem 0 !important; }
  .mobrow-only-gap-8rem { gap: 8rem 0 !important; }
  
  .mobrow-reverse { flex-direction: row-reverse; }
  .mobcol-reverse { flex-direction: column-reverse; }
  .mobflex-col{ flex-direction: column; }
  .mobflex-wrap{ flex-wrap: wrap; }
  .mobjustify-content-start{ justify-content: start; }
  .mobjustify-content-end{ justify-content: end; }
  .mobjustify-content-center{ justify-content: center; }
  .mobjustify-content-between{ justify-content: between; }
  .mobjustify-content-around{ justify-content: around; }
  .mobalign-items-start{ align-items: start; }
  .mobalign-items-end{ align-items: end; }
  .mobalign-items-center{ align-items: center; }
  .mobalign-items-stretch{ align-items: stretch; }
  .mobrow-reverse{ -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
  .mobcolumn-reverse{ -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
  
  .mob-w-full-override { width: 100% !important;}
  .mob-max-w-full-override { max-width: 100% !important;}
  
  .mob-flex-wrap{ flex-wrap: wrap; }
  .mob-gap-none{ gap: 0; }
  
  .mob-d-block{ display: block; }
  	
}