/* --- _var.globals.css --- */
/*inject start ->globals-- Start Define All*/
 /* Flow Global > Tokens > semantics > all---*/
/*Notes 
--GLOBAL-* Global data 
--t-* manin token forward
--*-* private consume the token data and deliver to the endpoint
--l-* local to file declaration
 everything 3 level of variants *-sm,*-md,*-lg
 */
 
/*_reset- Start*/
*,*::before,*::after {

  margin: 0;
  padding: 0;
  box-sizing:border-box;
  text-decoration: none; 
}
ul{
    list-style: none;
}
:root{
    
    /*--SCALE SYSTEM-- VERY MUCH DEPENDENT ON ALL SYSTEMS*/
    --BASE:1rem; /*16px -- MAIN BASE FOR FONT SYSTEM*/
    --STEP: calc(var(--BASE) / 2); /* currently 8px This can be divided more for 8px,4px,2px step */
    
/*SCALING */
    --GLOBAL-SCALE-4XS:calc(var(--STEP) / 4);                            /*2px*/
    --GLOBAL-SCALE-3XS:calc(var(--STEP) / 2);                            /*4px*/
    --GLOBAL-SCALE-2XS:var(--STEP);                                      /*8px --- MAIN BASE FOR 8 POINT GRID SYSTEM*/
    --GLOBAL-SCALE-XS:var(--BASE);                                       /*16px*/
    --GLOBAL-SCALE-SM:calc(var(--BASE) + var(--STEP));                  /*24px*/
    --GLOBAL-SCALE-MD:calc(var(--GLOBAL-SCALE-SM) + var(--STEP));        /*32px*/
    --GLOBAL-SCALE-LG:calc(var(--GLOBAL-SCALE-MD) + var(--STEP));        /*40px*/
    --GLOBAL-SCALE-XL:calc(var(--GLOBAL-SCALE-LG) + var(--STEP));        /*48px*/
    --GLOBAL-SCALE-2XL:calc(var(--GLOBAL-SCALE-XL) + var(--STEP));       /*56px*/
    --GLOBAL-SCALE-3XL:calc(var(--GLOBAL-SCALE-2XL) + var(--STEP));      /*64px*/
    --GLOBAL-SCALE-4XL:calc(var(--GLOBAL-SCALE-3XL) + var(--STEP));      /*72px*/
/*BORDERS*/
/*border width*/
    --GLOBAL-BORDER-WIDTH-SM:calc(var(--GLOBAL-SCALE-4XS)/2);  /*1px*/
    --GLOBAL-BORDER-WIDTH-MD:var(--GLOBAL-SCALE-4XS);          /*2px*/
    --GLOBAL-BORDER-WIDTH-LG:var(--GLOBAL-SCALE-3XS);          /*4px*/
/*border raduis*/
    --GLOBAL-BORDER-RADIUS-SM:var(--GLOBAL-SCALE-XS);/*16px*/
    --GLOBAL-BORDER-RADIUS-MD:var(--GLOBAL-SCALE-SM);/*24px*/
    --GLOBAL-BORDER-RADIUS-LG:var(--GLOBAL-SCALE-XL);/*48px*/
    --GLOBAL-BORDER-RADIUS-ROUND:50%;
    --GLOBAL-BORDER-RADIUS-PILL:999em;
/*FONT*/
    --GLOBAL-FONT-FAMILY-BODY:"Noto Sans", sans-serif;
    --GLOBAL-FONT-FAMILY-HEADINGS:"Cal Sans", sans-serif;
    --GLOBAL-FONT-LINEHEIGHT-HEADING:0.75;/*0.75 = tight , 1 = normal , 1.5 = loose , add 0.25 to create more if needed*/
    --GLOBAL-FONT-WEIGHT-EXLIGHT:200;
    --GLOBAL-FONT-WEIGHT-LIGHT:300;
    --GLOBAL-FONT-WEIGHT-REGULAR:400;
    --GLOBAL-FONT-WEIGHT-MEDIUM:600;
    --GLOBAL-FONT-WEIGHT-BOLD:700;
    --GLOBAL-FONT-WEIGHT-EXBOLD:800;
    --GLOBAL-FONT-SCALE-MODULAR-MAX:1.5; /*Prefect Fifth*/
    --GLOBAL-FONT-SCALE-MODULAR-MIN:1.250; /*Major Third*/
/*COLORS*/
    --GLOBAL-COLOR-PRIMARY:#1826A3;;
    --GLOBAL-COLOR-SECONDARY:#DED8C4;
    --GLOBAL-COLOR-ACCENT:#1DBA55;
/*SHADES*/    
    --GLOBAL-COLOR-PRIMARY-LIGHT:#2338F0;
    --GLOBAL-COLOR-PRIMARY-DARK:#0D1457;
    --GLOBAL-COLOR-SECONDARY-LIGHT:#F2EDDC;
    --GLOBAL-COLOR-SECONDARY-DARK:#948968;
    --GLOBAL-COLOR-ACCENT-LIGHT:#7CD69C;
    --GLOBAL-COLOR-ACCENT-DARK:#189945;
    --GLOBAL-COLOR-DARK-100:#000000;
    --GLOBAL-COLOR-DARK-80:#141414;
    --GLOBAL-COLOR-DARK-60:#292929;
    --GLOBAL-COLOR-DARK-40:#525252;
    --GLOBAL-COLOR-DARK-20:#A3A3A3;
    --GLOBAL-COLOR-DARK-0:#FFFFFF;

/*CONTAINERS*/   
    --GLOBAL-CONTAINER-SM:350; /*mobile small viewport <=425px*/
    --GLOBAL-CONTAINER-MD:720; /*Tablet viewport >=768px*/
    --GLOBAL-CONTAINER-LG:960; /*desktop-LG  viewport >=992px*/
    --GLOBAL-CONTAINER-XL:1140; /*desktop-XLG  viewport >=1400px to >=1200px */
    --GLOBAL-CONTAINER-FW-100:100vw; /*100 width*/
    --GLOBAL-CONTAINER-FW-90:90vw; /*90 width*/
    --GLOBAL-CONTAINER-FW-80:80vw; /*80 width*/
    --GLOBAL-CONTAINER-FH-100:100vh; /*full height*/   
/*FLUID CONTAINER RANGE*/    
    --GLOBAL-CONTAINER-FLUID-MIN:calc(var(--GLOBAL-CONTAINER-SM) / 16 * 1rem); /*px to rem conversion*/
    --GLOBAL-CONTAINER-FLUID-MAX:calc(var(--GLOBAL-CONTAINER-XL) / 16 * 1rem); /*px to rem conversion*/
    --GLOBAL-CONTAINER-FLUID-RANGE: calc(  (100vw - var(--GLOBAL-CONTAINER-FLUID-MIN)) /  (var(--GLOBAL-CONTAINER-FLUID-MAX) - var(--GLOBAL-CONTAINER-FLUID-MIN))); /*BASE FORMULA TO CALCULATE FLUID SYSTEM*/
    
}

/* --- _var.tokens.css --- */
/*injected --> tokens - These variables are consumed by semantic variables to be feed in layout */
:root{
/*color*/   
--t-color-primary:var(--GLOBAL-COLOR-PRIMARY);
--t-color-secondary:var(--GLOBAL-COLOR-SECONDARY);
--t-color-accent:var(--GLOBAL-COLOR-ACCENT);
--t-color-dark-100:var(--GLOBAL-COLOR-DARK-100);
--t-color-dark-80:var(--GLOBAL-COLOR-DARK-80);
--t-color-dark-60:var(--GLOBAL-COLOR-DARK-60);
--t-color-dark-40:var(--GLOBAL-COLOR-DARK-40);
/*Shades*/
--t-color-primary-dark:var(--GLOBAL-COLOR-PRIMARY-DARK);
--t-color-primary-light:var(--GLOBAL-COLOR-PRIMARY-LIGHT);
--t-color-secondary-dark:var(--GLOBAL-COLOR-SECONDARY-DARK);
--t-color-secondary-light:var(--GLOBAL-COLOR-SECONDARY-LIGHT);
--t-color-accent-dark:var(--GLOBAL-COLOR-ACCENT-DARK);
--t-color-accent-light:var(--GLOBAL-COLOR-ACCENT-LIGHT);

/*Font*/
--t-font-family-body:var(--GLOBAL-FONT-FAMILY-BODY);
--t-font-family-heading:var(--GLOBAL-FONT-FAMILY-HEADINGS);
--t-font-lineheight-heading:var(--GLOBAL-FONT-LINEHEIGHT-HEADING);
--t-font-lineheight-body:var(--GLOBAL-SCALE-MD);
--t-font-lineheight-small:var(--GLOBAL-SCALE-SM);
--t-font-weight-exlight:var(--GLOBAL-FONT-WEIGHT-EXLIGHT);
--t-font-weight-light:var(--GLOBAL-FONT-WEIGHT-LIGHT);
--t-font-weight-regular:var(--GLOBAL-FONT-WEIGHT-REGULAR);
--t-font-weight-medium:var(--GLOBAL-FONT-WEIGHT-MEDIUM);
--t-font-weight-bold:var(--GLOBAL-FONT-WEIGHT-BOLD);
--t-font-weight-exbold:var(--GLOBAL-FONT-WEIGHT-EXBOLD);
--t-font-size-body:var(--GLOBAL-SCALE-XS);
--t-font-scale-modular-max:var(--GLOBAL-FONT-SCALE-MODULAR-MAX);
--t-font-scale-modular-min:var(--GLOBAL-FONT-SCALE-MODULAR-MIN);
/*sizing*/
--t-size-sm:var(--GLOBAL-SCALE-2XL);/*56px*/
--t-size-md:var(--GLOBAL-SCALE-3XL);/*64px*/
--t-size-lg:var(--GLOBAL-SCALE-4XL);/*72px*/
/*component Base sizing and Space*/
--t-list-blt-size:var(--GLOBAL-SCALE-XS);/*16px*/

/*spacing*/
--t-space-sm:var(--GLOBAL-SCALE-2XS);/*8px*/
--t-space-md:var(--GLOBAL-SCALE-SM);/*24px*/
--t-space-lg:var(--GLOBAL-SCALE-LG);/*40px*/
/*borders - width - radii*/
--t-border-width-sm:var(--GLOBAL-BORDER-WIDTH-SM);/*1px*/
--t-border-width-md:var(--GLOBAL-BORDER-WIDTH-MD);/*2px*/
--t-border-width-lg:var(--GLOBAL-BORDER-WIDTH-LG);/*4px*/
--t-border-radius-sm:var(--GLOBAL-BORDER-RADIUS-SM); /*16px*/
--t-border-radius-md:var(--GLOBAL-BORDER-RADIUS-MD); /*24px*/
--t-border-radius-lg:var(--GLOBAL-BORDER-RADIUS-LG); /*48px*/
--t-border-radius-round:var(--GLOBAL-BORDER-RADIUS-ROUND);
--t-border-radius-pill:var(--GLOBAL-BORDER-RADIUS-PILL);
/*Media Size Ratios*/
--t-media-ratio-square:var(--GLOBAL-MEDIA-RATIO-SQUARE);
--t-media-ratio-landscape:var(--GLOBAL-MEDIA-RATIO-LANDSCAPE);
--t-media-ratio-potrait:var(--GLOBAL-MEDIA-RATIO-POTRAIT);

/*containers and viewports*/
--t-container-min:var(--GLOBAL-CONTAINER-SM);
--t-container-max:var(--GLOBAL-CONTAINER-XL);
--t-container-fw:var(--GLOBAL-CONTAINER-FW-90);
--t-container-fluid-range:var(--GLOBAL-CONTAINER-FLUID-RANGE);
}

/* --- _var.semantics.css --- */
/*injected -->semantics - These variables use for 90% of layout and general styling */
/*ui colors*/
body{
    --ui-color-bg:var(--t-color-dark-100);
    --ui-color-txt:var(--t-color-secondary);
}
.primary{
    --ui-color-bg:var(--t-color-primary);
    --ui-color-txt:var(--t-color-secondary);
}
.secondary{
    --ui-color-bg:var(--t-color-secondary);
    --ui-color-txt:var(--t-color-dark-60);
}
.accent{
    --ui-color-bg:var(--t-color-accent);
    --ui-color-txt:var(--t-color-dark-60);
}
.dark-100{
     --ui-color-bg:var(--t-color-dark-100);
     --ui-color-txt:var(--t-color-secondary);
}
.dark-80{
    --ui-color-bg:var(--t-color-dark-80);
    --ui-color-bdr:var(--t-color-dark-60);
}
.dark-60{
    --ui-color-bg:var(--t-color-dark-60);
    --ui-color-bdr:var(--t-color-dark-40);

}
.ptrn.primary{
    --media-pattern-color:var(--t-color-primary-light);
}

.ptrn.secondary{
    --media-pattern-color:var(--t-color-secondary-light);
}

.ptrn.accent{
    --media-pattern-color:var(--t-color-accent-light);
}
.ptrn.dark-100{
    --media-pattern-color:var(--t-color-dark-60);
}
.glow{
    --ui-color-box-shadow:var(--media-pattern-color, var(--t-color-accent));
}
/*ui sizing*/
.row{--ui-grid-gap:var(--t-space-lg);}
.container,.container-fluid{
    --ui-container-fluid-wd:var(--t-container-fw);
    --ui-container-wd:var(--t-container-max);

    --resp-container-wd:var(--ui-container-wd);
}
.sm{--ui-size:var(--t-size-sm);}
.md{--ui-size:var(--t-size-md);}
.lg{--ui-size:var(--t-size-lg);}

section{  
    --ui-border-rdi:var(--t-border-radius-lg);
    --ui-space:var(--t-space-lg);   
}
section.dark-60,section.dark-80{
        --ui-border-wd:var(--t-border-width-sm);
        --ui-border-style:solid;
}
.sub-section{
    --ui-border-rdi:var(--t-border-radius-md);
    --ui-border-wd:var(--t-border-width-sm);
    --ui-space:var(--t-space-md);
}
/*Cards*/
.service.card,.card{ /*first level card*/
    --comp-card-space:var(--t-space-lg);
    --comp-card-border-rdi:var(--t-border-radius-lg);
}
.list-group .card, .card .card{ /*two level card if nested*/
    --comp-card-space:var(--t-space-md);
    --comp-card-border-rdi:var(--t-border-radius-sm);
}
.card .card .card{/*three level card if nested*/
        --comp-card-space:var(--t-space-sm);
    --comp-card-border-rdi:var(--t-border-radius-sm);
}
/*Typo fluid Scaling powers*/
body{

    --ui-container-fluid-range:var(--t-container-fluid-range);
    
    --typo-font-family:var(--t-font-family-body);
    --typo-font-size:var(--t-font-size-body);
    --typo-font-weight:var(--t-font-weight-light);
    --typo-font-lineheight:var(--t-font-lineheight-body);
    --typo-font-space:var(--t-space-lg);
    --typo-font-scale-modular-max:var(--t-font-scale-modular-max);
    --typo-font-scale-modular-min:var(--t-font-scale-modular-min);
   
}
small{
    --typo-font-weight:var(--t-font-weight-light);
    --typo-font-lineheight:var(--t-font-lineheight-small);
    
    
}
h1,h2,h3,h4,h5,h6{
    --typo-font-family:var(--t-font-family-heading);
    --typo-font-weight:var(--t-font-weight-exbold);
    --typo-font-lineheight-heading:var(--t-font-lineheight-heading);
}
h1{--typo-scale-pow:6;}
h2{--typo-scale-pow:5;}
h3{--typo-scale-pow:4;}
h4{--typo-scale-pow:3;}
h5{--typo-scale-pow:2;}
h6{--typo-scale-pow:1;}




/*buttons*/
.btn{
    --comp-btn-color-bg:var(--ui-color-bg, var(--t-color-accent ));
    --comp-btn-color-txt:var(--ui-color-txt, var(--t-color-dark-60));
    --comp-btn-size:var(--ui-size, var(--t-size-md));
    --comp-btn-space:var(--t-space-md);
    --comp-btn-border-rdi:var(--t-border-radius-sm);
    --comp-btn-border-wd:var(--t-border-width-md);

    --resp-btn-size:var(--comp-btn-size);
    --typo-font-weight:var(--t-font-weight-medium);
}
/*tags*/
.tag{
    --comp-tag-space:var(--t-space-sm);
}
/*list*/
li{
    --comp-list-blt-size:var(--t-list-blt-size);
    
    --comp-list-blt-line-color:var(--t-color-dark-60);
    --comp-list-blt-space:var(--t-space-md);
    --comp-list-border-wd:var(--t-border-width-sm);

    --list-border-rdi:var(--t-border-radius-round);
}

/*media*/
.icon{
    --media-icon-size:var(--ui-size, var(--t-size-sm
    ));
    
}
img{
    --media-image-border-rdi:var(--t-border-radius-sm);
}



/*Shapes*/
.square,.round{--comp-shape-size:var(--ui-size, var(--t-size-md));}
.pill{--comp-shape-border-rdi:var(--t-border-radius-pill);}
.round{--comp-shape-border-rdi:var(--t-border-radius-round);}

/* --- _ui.css --- */
/*injected --> ui -- Basic layout grid system and fluid system for content using Mobile First Design*/
.sm,.md,.lg{height:var(--ui-size);}

body,.primary,.secondary,.accent,.dark-100,.dark-80,.dark-60{
    background-color:var(--ui-color-bg , unset);
    color:var(--ui-color-txt, unset);
    border:var(--ui-border-wd, unset) var(--ui-border-style , unset) var(--ui-color-bdr, unset);   
}
.glow{
     box-shadow: 0 0 50px var(--ui-color-box-shadow);
}

section{
    display:block;
    margin:var(--ui-space) auto;
    word-wrap: break-word;
    border-radius: var(--ui-border-rdi); 
    /* padding:var(--ui-space); */
    overflow: hidden;
}
section > *{
     padding:var(--ui-space);
}
#hero video{
    position:absolute;
    inset:0;
  width:100%;
    height:100%;
    z-index: -10;
    object-fit:cover;
}
#hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6); 
    z-index: -2; 
}

.container,.container-fluid{
    max-width: var(--ui-container-fluid-wd);
    margin-inline:auto;
}



#hero.sm-only{
    aspect-ratio:9/16;
}

/* ----------------------------- */
/* GRID SYSTEM MOBILE FIRST      */
/* ----------------------------- */
.row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:var(--ui-grid-gap);
    align-items: center; 
}
  .row:has(> .list-group){
    row-gap: 0;
  }

[class^="col-"] { grid-column: span 4;}

  .offset-1 { grid-column-start: 2; }
  .offset-2 { grid-column-start: 3; }
  .offset-3 { grid-column-start: 4; }
  
/* ----------------------------- */
/* FLEX GRID Content Level       */
/* ----------------------------- */

.flex{
    display:flex;
    flex-direction: var(--l-flex-direction, column);
    justify-content: var(--l-flex-justify-content , center);
    align-items: var(--l-flex-align-items, normal);
    flex-wrap: var(--l-flex-wrap, nowrap);
}


/*Utility Classes*/
.unset{
    background-color: unset!important;
    border: unset!important;
}
.utls{
    /*display-utlities*/
    display:var(--l-display,block);
    /*text-utlities*/
    text-align: var(--l-txt-align, left);
    float: var(--l-float,none);
    /*flex-utlities*/
    align-items: var(--l-flex-align-items, normal );
    justify-content: var(--l-flex-justify-content, flex-start);
    flex-direction: var(--l-flex-direction,column);
    flex-wrap: var(--l-flex-wrap,nowrap);

}
/*text-utilities-provider*/
.text-center{--l-txt-align: center;}
.text-right{--l-txt-align: right;}
.float-right{--l-float: right;}
.float-left{--l-float: left;}
/*flex-utilities-provider*/
.flx-d{--l-display:flex;}
.flx-row{--l-flex-direction:row;}
.flx-wrap{--l-flex-wrap:wrap;}

.flx-jc-center{--l-flex-justify-content:center;}
.flx-jc-start{--l-flex-justify-content:start;}
.flx-jc-end{--l-flex-justify-content:end;}
.flx-jc-left{--l-flex-justify-content:left;}
.flx-jc-right{--l-flex-justify-content:right;}
.flx-jc-fend{--l-flex-justify-content:flex-end;}
.flx-jc-space-btw{--l-flex-justify-content:space-between;}
.flx-jc-space-ard{--l-flex-justify-content:space-around;}
.flx-jc-space-evn{--l-flex-justify-content:space-evenly;}
.flx-jc-stretch{--l-flex-justify-content:stretch;}
.flx-jc-reverse{--l-flex-justify-content:revert;}

.flx-ai-center{--l-flex-align-items:center;}
.flx-ai-start{--l-flex-align-items:start;}
.flx-ai-end{--l-flex-align-items:end;}
.flx-ai-left{--l-flex-align-items:left;}
.flx-ai-right{--l-flex-align-items:right;}
.flx-ai-fend{--l-flex-align-items:flex-end;}
.flx-ai-space-btw{--l-flex-align-items:space-between;}
.flx-ai-space-ard{--l-flex-align-items:space-around;}
.flx-ai-space-evn{--l-flex-align-items:space-evenly;}
.flx-ai-stretch{--l-flex-align-items:stretch;}
.flx-ai-reverse{--l-flex-align-items:revert;}





.f-end{align-self: flex-end!important;float: inline-end;}

.f-wrap{--l-flex-wrap:wrap;}
.f-row{--l-flex-direction: row;}
.f-center-y{--l-flex-justify-content: center;}
.f-center-x{--l-flex-align-items:center;}

.row.reverse > :nth-child(1) { order: 12; }
.row.reverse > :nth-child(2) { order: 11; }
.row.reverse > :nth-child(3) { order: 10; }
.row.reverse > :nth-child(4) { order: 9; }
.row.reverse > :nth-child(5) { order: 8; }
.row.reverse > :nth-child(6) { order: 7; }
.row.reverse > :nth-child(7) { order: 6; }
.row.reverse > :nth-child(8) { order: 5; }
.row.reverse > :nth-child(9) { order: 4; }
.row.reverse > :nth-child(10) { order: 3; }
.row.reverse > :nth-child(11) { order: 2; }
.row.reverse > :nth-child(12) { order: 1; }



/* --- _typo.css --- */
/*injected --> _typo.css - Font Engine --THE MAIN TYPOGRAPHY SYSTEM- COVERS FLUID AND MODULAR SCALING and component font usage*/
h1,h2,h3,h4,h5,h6{
  /* Modular scale based on base font */
  --l-typo-scale-modular-max:calc( var(--typo-font-size) * pow(var(--typo-font-scale-modular-max) , var(--typo-scale-pow) )); 
  --l-typo-scale-modular-min:calc( var(--typo-font-size) * pow(var(--typo-font-scale-modular-min) , var(--typo-scale-pow) )); 
  /*Typo fluid Scaling System*/
  --l-typo-fluid-size-fluid:calc( var(--l-typo-scale-modular-min) + (var(--l-typo-scale-modular-max) - var(--l-typo-scale-modular-min)) * var(--ui-container-fluid-range)); 
  --l-typo-fluid-size:clamp(    var(--l-typo-scale-modular-min),var(--l-typo-fluid-size-fluid), var(--l-typo-scale-modular-max)    );
  --l-typo-fluid-lineheight:calc(var(--l-typo-fluid-size) * var(--typo-font-lineheight-heading) );
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--typo-font-family);
  font-weight: var(--typo-font-weight);
  text-transform: uppercase;
  font-style: normal;
  padding: var(--typo-font-space) 0;
  
  font-size:var(--l-typo-fluid-size);
  line-height:var(--l-typo-fluid-lineheight);
}

.btn{
  font-family: var(--typo-font-family);
  font-weight: var(--typo-font-weight);
  font-size: var(--typo-font-size);

  text-align: center;
  text-transform: uppercase;
  font-size: inherit;
}
p,small,.tag{
  font-family: var(--typo-font-family);
  font-weight: var(--typo-font-weight);
  font-size: var(--typo-font-size);

  line-height: var(--typo-font-lineheight);
  padding: var(--typo-font-space) 0;
}
small,.tag{
   line-height: var(--typo-font-lineheight);
  font-style: italic;
}
body{
  text-align: center;
}

/* --- _components.css --- */
/*injected --> components -- All available components*/
/* ----------------------------- */
/* Buttons  UIS                  */
/* ----------------------------- */
.btn{
  display:flex;
  align-items: center;
  justify-content: center;
  
  cursor: pointer; 
  padding-inline:calc(var(--comp-btn-space) / 2);
  margin-inline:auto;
  /* margin:var(--comp-btn-space) auto; */
  border-radius:var(--comp-btn-border-rdi);
  height:var(--comp-btn-size);
  color:var(--comp-btn-color-txt);
  background-color: var(--comp-btn-color-bg);
  width:-webkit-fill-available;
  
}
.btn-outline{
  border: var(--comp-btn-border-wd) var(--comp-btn-color-bg) solid;
  color:var(--comp-btn-color-bg)!important;
  background-color: transparent!important;
}

.btn-group-child {
    position: relative;
    display: inherit;
    flex: 1 1 0;
    color: inherit;
    height: inherit;
    justify-content: inherit;
    align-items: inherit;
}
.btn-group-child + .btn-group-child::before {
  position:absolute;
  content: "";
  left:calc(var(--comp-btn-border-wd) / -2); 
  top: 20%;
  height: 60%;
  width: var(--comp-btn-border-wd);
  background-color: currentColor;
}
/*Tags*/
.tag{
  padding:calc(var(--comp-tag-space)/2) var(--comp-tag-space);
}
/*Shapes and Spans*/
.block{width:100%!important;}
.round,.pill{border-radius: var(--comp-shape-border-rdi)!important;}
.square,.round{width:var(--comp-shape-size)!important;}
/*cards*/
.card{
  border-radius:var(--comp-card-border-rdi);
  padding:var(--comp-card-space);
  margin-bottom: var(--comp-card-space);
}
/*list*/
.list-group{
    display:flex;
    flex-direction:column;
    height: -webkit-fill-available;
    justify-content: center;
}
li {
  position: relative;
  margin-left: var(--comp-list-blt-space); /* Space for the bullet */   
}

li::after{
  top:50%;
  height:var(--comp-list-blt-size);
  width:var(--comp-list-blt-size);
   transform:translate(
   calc( calc( var(--comp-list-blt-size) /2 )*-1) ,
   calc( calc( var(--comp-list-blt-size) /2 )*-1)
   );
 z-index:1;
   } 
   
li + li::before,.list-group +.list-group > ul li:first-child::before{ 
     transform:translateY(
     calc(-50% - var(--comp-list-blt-size) )
      );
    content:"";
  height:calc(100% + var(--comp-list-blt-size));
  width:var(--comp-list-border-wd);
  background-color:var(--comp-list-blt-line-color);  
    
}
li::before,li::after{
  position:absolute;
  left:calc(var(--comp-list-blt-space)*-1);


}


/* --- _media.css --- */
/*injected -->media -- Media and icon assets and Library */
  :root{
    
  /*-----ICON LIBRARY----*/
    --l-media-icon-plus:url("../media/icons/icon-plus.svg");
    --l-media-icon-minus:url("../media/icons/icon-minus.svg");
    --l-media-icon-arrow:url("../media/icons/icon-arrow.svg");
    --l-media-icon-download:url("../media/icons/icon-download.svg");
    --l-media-icon-menu-2:url("../media/icons/icon-menu-2.svg");
    --i-media-icon-menu-3:url("../media/icons/icon-menu-3.svg");
  /*-----PATTERN LIBRARY----*/
    --l-media-pattern-circle:url("../media/patterns/pattern-circle.svg");
    --l-media-pattern-z:url("../media/patterns/pattern-z.svg");
  /*-----THEME LIBRARY----*/
    --l-media-theme-bullet:url("../media/theme/bullet.svg");
   /*MEDIA PLACE HOLDERS*/ 
    --l-media-src-square:url("../media/placeholders/img-square.svg");
    --l-media-src-landscape:url("../media/placeholders/img-landscape.svg");
    --l-media-src-potrait:url("../media/placeholders/img-potrait.svg");

  }
 /* ----------------------------- */
 /* icon Set                      */
 /* ----------------------------- */
.icon-plus {--l-media-icon:var(--l-media-icon-plus);}
.icon-close {--l-media-icon:var(--l-media-icon-plus);transform: rotate(90deg);}
.icon-minus {--l-media-icon:var(--l-media-icon-minus);}
.icon-pipe {--l-media-icon:var(--l-media-icon-minus);transform: rotate(90deg);}
.icon-menu-3 {--l-media-icon:var(--i-media-icon-menu-3);}
.icon-menu-2 {--l-media-icon:var(--l-media-icon-menu-2);}
.icon-arrow-right-corner {--l-media-icon:var(--l-media-icon-arrow);transform: rotate(45deg);}
.icon-arrow-right {--l-media-icon:var(--l-media-icon-arrow);}
.icon-arrow-up {--l-media-icon:var(--l-media-icon-arrow);transform: rotate(90deg);}
.icon-arrow-left-corner {--l-media-icon:var(--l-media-icon-arrow);transform: rotate(135deg);}
.icon-arrow-left {--l-media-icon:var(--l-media-icon-arrow);transform: rotate(180deg);}

.icon-arrow-down {--l-media-icon:var(--l-media-icon-arrow);transform: rotate(270deg);}
.icon-download {--l-media-icon:var(--l-media-icon-download);}
.icon {
  display:inline-flex;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  padding:inherit;
  height:var(--media-icon-size);
  width:var(--media-icon-size);
  aspect-ratio: 1/1;
 -webkit-mask-image: var(--l-media-icon);
  mask-image: var(--l-media-icon);
}
 /* ----------------------------- */
 /* Pattern Set                      */
 /* ----------------------------- */
.ptrn {
   position: relative;
  overflow: hidden;
  z-index: 0;
}
.ptrn::before {
  position: absolute;
  content: "";
  inset: 0;
    /* Use Masking to allow --media-pattern-color to work */
  -webkit-mask-image: var(--l-media-pattern);
  mask-image: var(--l-media-pattern);
  mask-position: center;
  mask-size: var(--l-media-size);
  mask-repeat: var(--l-media-repeat);
   /* This uses the color defined in your .pattern.primary etc. */
  background-color: var(--media-pattern-color);
  z-index: -1;
  
}
.ptrn-circle {
  --l-media-pattern:var(--l-media-pattern-circle);
  --l-media-repeat:no-repeat;
  --l-media-size:max(110%, 1000px);
}
.ptrn-z {
  --l-media-pattern:var(--l-media-pattern-z);
  --l-media-repeat:repeat;
  --l-media-size:max(20%, 400px);
}

/* #service.ptrn::before{
   transform:translateY(50%);
   mask-position: top;  

} */
li::after{
  content: var(--l-media-theme-bullet); 
 } 
/*Images and Media Place holders*/
img{
  width:100%;
  border-radius: var(--media-image-border-rdi);
}



.icon:hover {
  background-color: currentColor; /* Hover color change works! */
}

/* --- _animation.css --- */
/*injected --> animations -- all interactions and  ui animations*/
.btn,.icon,.btn-part{
    transition: all 0.2s ease-in-out;
}


/* --- _responsive.css --- */
/*injected --> responsive -- main responsive system using mobile first design approch*/
/*-----------------------------*/
/*    RESPONSIVE GRID          */
/*-----------------------------*/
/*Tablet*/
@media (min-width:426px) { 
  .btn{
  width:calc(var(--resp-btn-size)*4);
  max-width: -webkit-fill-available;
}

 body{text-align:left;}
  
  .row {
   grid-template-columns: repeat(8, 1fr);
   
  }
  .offset-4 { grid-column-start: 5; }
  .offset-5 { grid-column-start: 6; }
  .offset-6 { grid-column-start: 7; }
  .offset-7 { grid-column-start: 8; }
  [class^="col-"] { grid-column: span 8;}  

}
/*Desktop*/
@media (min-width: 769px) { 

.sm-only{
   display: none;
}

#hero.ptrn::before{
   transform:translateX(-50%);
   mask-position: right;   
}
#service > :first-child { order: 12; align-items:center; display:flex;}
  #service {
        align-items:stretch;
    }
/* #service.ptrn::before{
   transform:translateX(-50%);
   mask-position: right;  

} */
      .list-group +.list-group > ul li:first-child::before{
        display:none;
    }
  .row {
   grid-template-columns: repeat(12, 1fr);
   
  }
/* ----------------------------- */
/* 12-COL LOGIC                  */
/* ----------------------------- */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
/* ----------------------------- */
/* 12-COL OFFSET LOGIC           */
/* ----------------------------- */
  .offset-8 { grid-column-start: 9; }
  .offset-9 { grid-column-start: 10; }
  .offset-10 { grid-column-start: 11; }
  .offset-11 { grid-column-start: 12; }
}
/*-----------------------------*/
/*    RESPONSIVE CONTAINER     */
/*-----------------------------*/
/*Desktop-xlg*/
  @media (min-width: 1251px) {
 .container{max-width: calc(var(--resp-container-wd)*1px);width:100%; }

}
/*injection --> completed */