/* You can add global styles to this file, and also import other style files */
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

@font-face {
    font-family: 'RupeeForadian';
    src: url('../fonts/RupeeForadian.eot');
    src: url('../fonts/RupeeForadian.eot') format('embedded-opentype'),
         url('../fonts/RupeeForadian.woff2') format('woff2'),
         url('../fonts/RupeeForadian.woff') format('woff'),
         url('../fonts/RupeeForadian.ttf') format('truetype'),
         url('../fonts/RupeeForadian.svg#Rupee_Foradian') format('svg');
}
 

:root { 
    --font-Rubik: 'Rubik',sans-serif,Arial,Helvetica; 
    --font-Rupee: 'RupeeForadian',sans-serif,Arial,Helvetica; 
    --color-white: #ffffff;
    --color-black: #000000;  
    --color-blue: #005DAC;  
    --color-sky-blue: #59BBED;  
    --color-gray: #303030;  
    --color-orange: #F05622;  
    --color-yellow: #FAA21B;  
}
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{	margin: 0; padding: 0; border: 0;}
html {-webkit-font-smoothing: antialiased; width: 100%; font-size: 20px;}
body { position: relative; width: 100%; font-size: 1rem;  /* overflow-x: hidden !important; */ }
html, body{ font-family: var(--font-Rubik); color: var(--color-gray); font-weight: 400; margin:0; padding:0; overflow-x: hidden!important; }
html.lenis,html.lenis body { height: auto;}
.lenis.lenis-smooth { scroll-behavior: auto !important;}
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain;}
.lenis.lenis-stopped { overflow: clip;}
.lenis.lenis-smooth iframe { pointer-events: none;}
figure{ position: relative; margin: 0;}
img{max-width:100%;height:auto; }
p{ font-size: 1rem; color: var(--color-gray); line-height: 1.5; margin: 0; padding: 10px 0;}
a{text-decoration:none;cursor:pointer;transition:.3s;-webkit-transition:.3s;-moz-transition:.3s}
a:hover,a:focus,.btn:hover,.btn:focus,button:focus{text-decoration:none;outline:none; box-shadow:none}
button:hover,button:focus,.accordion-button:focus{outline:none;box-shadow:none}
ul,li,ol{padding:0;margin:0}
img{ width: 100%; height: auto;}
ul li{list-style:none;} 
.no-scroll { height: 100%; overflow: scroll; overflow: hidden; position: fixed;}
 



/* input:read-only {
    background-color: #ececeb;
  } */

/*==============ANIMATIONS=================*/

*{ -webkit-tap-highlight-color: transparent; outline: none; text-decoration:none; outline:none; outline-color:none; }

/*==============PAGES CSS=================*/

 
#wrapper{ position: relative; width: 100%;}
.container{ position: relative;  width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 20px;}
.section{ position: relative; width: 100%; padding: 100px 0;}
h1{ font-size: 2.889rem; line-height: 1.1; font-weight: 500; padding: 0 0 10px 0; background: linear-gradient(90deg, #15499F 0%, #0087C6 75.96%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
h4{ font-size: 1rem; color: var(--color-blue); line-height: 1.5; font-weight: 600; padding: 20px 0 0px;}
.bg-cover{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;}
.rs{ font-family: var(--font-Rupee);}
.site-btn{ position: relative; display: inline-block; font-size: 1rem; color: var(--color-white); text-align: center; font-weight: 500; min-width: 160px; padding: 10px 20px 10px 20px; background: var(--color-blue); border: transparent 1px solid; border-radius: 10px; transition:all .2s ease-out;} 
.site-btn:hover{ background: var(--color-white); border: var(--color-blue) 1px solid;} 
.clr-blue{ color: var(--color-blue);}

header{ position: fixed; left: 0; top: 0; width: 100%; padding: 15px 50px; background: var(--color-white); z-index: 9999;}
header.sticky{ box-shadow: 0px 5px 13px -5px rgba(0, 0, 0, .75);}
header .nav-hld{ display: flex; flex-direction: row; align-items:  center; justify-content: space-between;}
header .logo{ width: 100%; max-width: 280px;}
header .right-nav{ display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; max-width: 260px;}
header .logo-finserv{ width: 100%; max-width: 120px;}
header .icon-download{ width:30px; height: 30px;}
header .icon-download svg{ width: 100%; height: 100%;}
/* header .icon-download:hover path{ fill: var(--color-black); transition:all .2s ease-out;} */

.nav-icon { position: relative; width: 50px; height: 25px; z-index: 9999; cursor: pointer; /* border: var(--color-black) 1px solid; */ }
.nav-icon span{ display: block; position: relative; width: 100%; height: 5px;  opacity: 1; left: 0px; transform: rotate(0deg); transition: .25s ease-in-out; background: var(--color-blue); border-radius: 100px;}
.nav-icon span:nth-child(1) { top: 0px;}
.nav-icon span:nth-child(2) { width: 80%; top: 5px;}
.nav-icon span:nth-child(3) { width: 60%; top: 10px;} 
.nav-icon.open span{ background: var(--color-white);}
.nav-icon.open span:nth-child(1) { top: 14px; transform: rotate(135deg);}
.nav-icon.open span:nth-child(2) { width: 100%; opacity: 0; left: 30px;}
.nav-icon.open span:nth-child(3) { width: 100%; top:4px; transform: rotate(-135deg);} 


header nav{ position: fixed; right: -400px; top: 0; width: 400px; height: 100vh; padding: 70px 0px 20px; background: var(--color-blue);}
header nav li a{ position: relative; display: block; font-size: 0.9rem; color: var(--color-white); line-height: 1.2; font-weight: 400; padding: 15px 0; border-bottom: #ffffff1f 1px solid;}
header nav li a::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: #004076; transition:all .2s ease-out;}
header nav li a:hover::after{ width: 100%; transition:all .2s ease-out;}
header .overlay{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: var(--color-black); opacity: 0.5; display: none;}
header nav figure{ width: 200px; margin: 20px auto 0;}
header .nav-con{ width: 100%; height: 100%; padding: 0 20px; overflow: hidden; overflow-y: scroll;}
header .nav-con::-webkit-scrollbar { width: 0; background: var(--color-white);}  
header .nav-con::-webkit-scrollbar-thumb { background: var(--color-blue); border-radius: 0px; }  
header .nav-con::-webkit-scrollbar-thumb:hover { background: var(--color-blue); }

.sect-tl{ padding: 0 0 0 0;}
.sect-tl h3{ font-size: 0.9rem; color: var(--color-black); font-weight: 500; text-transform: uppercase; padding-bottom: 15px;}
.sect-tl h2{ font-size: 2.6rem; color: var(--color-blue); line-height: 1.1; font-weight: 400; padding: 0 0 10px 0; }

.counter-panel{ width: 100%; }
.counter-hld{ padding: 0px 0 0 0;}
.counter-con{ position: relative; padding: 20px 0; }
.counter-con .count{ font-size: 2.3rem; color: var(--color-orange); font-weight: 400; line-height: 100%;}
.counter-con .unit{ font-size: 1.556rem; font-weight: 400;}
.counter-con p{ font-size: 0.9rem; font-weight: 400; padding: 10px 0 0;}
.counter-con p span{ display: block; line-height: 100%; font-style: italic;}
.counter-con .rs{ font-size: 2.3rem; font-weight: 400;}

.modal{ position: fixed; left: 0; top: 0; text-align: center; background: #0000008f; z-index: 99999;}
.modal:before { content: " "; display: inline-block; vertical-align: middle; height: 100%;}
.modal-dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)!important; width: 100%; max-width: 1000px; margin: 0; padding: 0 20px; text-align: left; vertical-align: middle;}
.modal-dialog .btn-close{ position: absolute; right: 40px; top: 30px; font-size: 24px; background: none; outline: none!important; border: none!important; box-shadow: none!important; opacity: 1;}
.modal-dialog .btn-close i{ transition:all .3s ease-out;}
.modal-dialog .btn-close:hover i{ rotate: 90deg; transition:all .3s ease-out;}
.modal-content{ padding: 70px 30px 30px; border-radius: 20px;}

.reveal-banner{ position: relative; width: 100%; overflow: hidden;}
.reveal-banner figure{ overflow: hidden;} 
.reveal-banner .reveal-overlay{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background:var(--color-blue); } 

footer{ width: 100%; font-size: 0.9rem; color: var(--color-white); padding: 20px; background: #0D3052;}
footer .stirrup-logo{ width: 20px;}

.back-to-top{ position: fixed; right: 20px; bottom: 50px; width: 50px; height: 50px; background: var(--color-sky-blue); border-radius: 10px; cursor: pointer; transition:all .3s ease-out; display: none;}
.back-to-top:hover{ background: var(--color-tl-blue); transition:all .3s ease-out;}
.back-to-top svg{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30px;}
 

#banner{ position: relative; width: 100%; height: 100vh; background: var(--color-tl-blue); overflow: hidden; }
#banner figure{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; }
#banner video{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%;}
#banner .banner-video-mob{ display: none;}

.orange-text{ color: var(--color-orange);}
.inner-pages{ padding: 85px 0 0px 0;}
.inner-pages h1{ font-size: 2.6rem; color: var(--color-blue); line-height: 1.1; font-weight: 500; text-transform: uppercase; padding-bottom: 30px;}
.inner-pages p{ padding: 10px 0;}

.about-counter{ padding-top: 30px;}
.about-counter .counter-hld{ text-align: center;}
.about-counter .count{ font-size: 3.7rem; color: var(--color-yellow); font-weight: 300;}
.about-counter .unit{ font-size: 2.2rem; font-weight: 300;} 
.about-counter p{ font-weight: 400;}

.about-banner{ width: 100%; max-width: 900px; margin: 0 auto; padding: 50px 0 0;}
.about-banner figure{ padding-bottom: 63.60%; }

.cmd-message{ background: #D6E7F7;}
.cmd-message figure{ padding-bottom: 60.30%; border-radius: 20px; overflow: hidden; }
.cmd-message .reveal-banner{ border-radius: 20px;}

.cfo-message{ background: #D6E7F7;}
.cfo-message figure{ padding-bottom: 80%; border-radius: 20px; overflow: hidden; }
.cfo-message .reveal-banner{ border-radius: 20px;}
.inner-pages p.bullet{ position: relative; padding-left: 20px; }
.inner-pages p.bullet::before{ content: ''; position: absolute; left: 0; top: 18px; width: 12px; height: 12px; background: url(../images/icon-bullet.png) no-repeat center center; background-size: cover;}

.banner-esg{ background: #D6E7F7;}
.banner-esg figure{ padding-bottom: 66.66%; border-radius: 20px; overflow: hidden; }
.banner-esg .reveal-banner{ border-radius: 20px;}

.focus-area-hld{ position: relative; padding: 26px 0;}
.focus-area-blurb{ width: 100%; min-height: 280px; padding: 35px 20px; /* border: 2px dashed #FAA21B; */ transition:all .3s ease-out; background:linear-gradient(90deg, #FAA21B 50%, transparent 0) repeat-x,
  linear-gradient(90deg, #FAA21B 50%, transparent 0) repeat-x,
  linear-gradient(0deg, #FAA21B 50%, transparent 0) repeat-y,
  linear-gradient(0deg, #FAA21B 50%, transparent 0) repeat-y;
  background-size: 8px 2px, 8px 2px, 2px 8px, 2px 8px;
  background-position: 0 0, 0 100%, 0 0, 100% 0; }
.focus-area-blurb:hover{ animation: linearGradientMove .3s infinite linear; box-shadow: 0px 3px 13px -3px rgba(0, 0, 0, 0.75);}
@keyframes linearGradientMove {
  100% {
      background-position: 8px 0, -8px 100%, 0 -8px, 100% 8px;
  }
} 
.focus-area-blurb .icon{ position: absolute; left: 0px; top: 0; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 100px; overflow: hidden;}
.focus-area-blurb .icon svg{ width: 35px;}
.focus-area-blurb h5{ font-size: 1.2rem; font-weight: 500;}
.focus-area-blurb p{ font-size: 18px; font-weight: 300; padding: 10px 0 0;} 
.blue-con h5{ color: var(--color-blue);}
.green-con h5{ color: #00C49F;}
.orange-con h5{ color: var(--color-orange);}
.sky-blue-con h5{ color: var(--color-sky-blue);}

.blue-con:first-child .icon svg{ width: 25px;}
.gr-bg-blue{ background: linear-gradient(153.19deg, #69BBF6 12.85%, #0566CC 89.03%); }
.gr-bg-green{ background: linear-gradient(153.19deg, #00DCA6 12.85%, #018C70 89.03%); }
.gr-bg-orange{ background: linear-gradient(153.19deg, #FD9506 12.85%, #FF6710 89.03%); }
.gr-bg-sky-blue{ background: linear-gradient(153.19deg, #ABE0FF 12.85%, #38B5FF 89.03%); }


.our-finserv{ padding: 50px 0 0;}
.our-finserv figure{ padding-bottom: 97.94%;}
.our-finserv .reveal-banner{ padding: 0 60px;}

.culture-pillers{ padding: 60px 0; background: #D6E7F7;}
.culture-pillers .table-hld{ padding: 30px 0;}
.culture-pillers table {  border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed; }

.culture-pillers table caption { font-size: 1.5em; margin: .5em 0 .75em; }

.culture-pillers table tr { border-bottom: 1px solid var(--color-sky-blue) ; }

.culture-pillers table th, .culture-pillers table td { padding: 15px 10px; vertical-align: text-top; }

.culture-pillers table th { font-size: 1rem; color: var(--color-blue); font-weight: 500;}
.culture-pillers table td { font-size: 0.9rem; font-weight: 400;}
.culture-pillers table td:first-child{ font-weight: 500;}

.highlights-hld{ padding: 30px 0;}
.highlights-hld .highlights-year-tl{ font-size: 1.2rem; font-weight: 600;}
.highlights-title{ position: relative; display: flex; flex-direction: row; align-items: center; font-size: 1.1rem; font-weight: 600; padding: 20px 0;} 
.highlights-title::before{ content: ''; position: absolute; left: 0; top: 52%; transform: translateY(-50%); width: 100%; height: 1px; border-top: var(--color-gray) 1px dashed;}
.highlights-title .icon{ position: relative; width: 52px; border-radius: 100px; overflow: hidden;}
.highlights-title span{ position: relative; padding: 0 30px 0 15px; background: var(--color-white); }
.highlights-title span span{ color: #bcc7e5; padding: 0; }

.initiatives-hld{ padding:5px 0;}
.initiatives-hld .init-blurb{ position: relative; height: 100%; padding: 20px;  border-radius: 20px; } 
.initiatives-hld .init-blurb label{ display: none; position: absolute; left: 20px; top: -18px; font-size: 0.9rem; color: var(--color-white); padding: 3px 5px;}
.initiatives-hld .init-blurb p{ position: relative; font-size: 0.9rem; color: var(--color-white); font-weight: 400; padding: 5px 0;}
.initiatives-hld .init-blurb li{ position: relative; line-height: 1.2; padding: 5px 0 5px 25px; }
.initiatives-hld .init-blurb li::before{ content: ''; position: absolute; left: 0; top: 10px; width: 12px; height: 12px; background: url(../images/icon-bullet.png) no-repeat center center; background-size: cover;}
.initiatives-hld .init-blurb hr{ margin: 5px 0;}

.highlights-hld.init-blue .highlights-title{ color: #0060cc;}
.initiatives-hld .init-blurb.color-blue{background: linear-gradient(280deg,rgba(255, 255, 255, 1) 0%, rgba(124, 204, 253, 1) 0%, rgba(0, 96, 204, 1) 52%);} 

.initiatives-hld .init-blurb.color-sky-blue{ background: linear-gradient(280deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(228, 241, 250, 1) 52%);}
.initiatives-hld .init-blurb.color-sky-blue p{ color: var(--color-black); }
.highlights-hld.init-blue .initiatives-hld .init-blurb label{  background: #0060cc;}  

.highlights-hld.init-green .highlights-title { color: #08c6a2;}
.initiatives-hld .init-blurb.color-green{background: linear-gradient(280deg, rgba(255, 255, 255, 1) 0%, rgba(0, 237, 177, 1) 0%, rgba(0, 147, 120, 0.8) 52%);}  
.highlights-hld.init-green .initiatives-hld .init-blurb label{ background: #009378;} 

.highlights-hld.init-orange .highlights-title { color: #f05522;}
.initiatives-hld .init-blurb.color-orange{background: linear-gradient(280deg,rgba(255, 255, 255, 1) 0%, rgba(253, 156, 2, 1) 0%, rgba(241, 90, 33, 1) 52%);}  
.highlights-hld.init-orange .initiatives-hld .init-blurb label{  background: #f15c20;}

.highlights-hld.init-purple .highlights-title { color: #762e91;}
.initiatives-hld .init-blurb.color-purple{background: linear-gradient(280deg,rgba(255, 255, 255, 1) 0%, rgba(219, 36, 143, 1) 0%, rgba(127, 46, 146, 1) 52%);}  
.highlights-hld.init-purple .initiatives-hld .init-blurb label{  background: #7a2f92;}

.introWrp:after, .focusWrp:before{ display: none!important;} 

.animDiv2{ /* height: 200px; */ padding-bottom: 17.4% !important;}
.animDiv3{ padding-bottom: 18% !important;overflow: hidden;}
.animDiv2 img, .animDiv3 img{ display: none;}
 
.svg-anim-hld{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; /* height: 100%; */ padding-bottom: 42.64%; pointer-events: none;}
.creative-obj-hld{ position: absolute; transform-origin: bottom center; transform: perspective(145px) rotatex(45deg) translateY(-30px); opacity: 0; z-index: 1; transition:all .5s ease-out; z-index: 99;}
.creative-obj-hld.animate{ opacity: 1; transform: perspective(145px) rotatex(0deg) translateY(0px); }

.creative-obj-hld svg{ width: 100%;}
.obj-01{ right: 10%; top: 20%; width: 7.55%;}
.obj-02{ left: 10%; top: 20.5%; width: 8.39%;}
.obj-03{ left: 10%; top: 1.5%; width: 12%;}
.obj-04{ left: 35%; top: 2%; width: 6%; }
.obj-05{ right: 10%; top: 9.4%; width: 7.60%; }
.obj-06{ right: 36.4%; top: 9%; width: 3.60%; } 
.obj-07{ left: 12.9%; top: 44%; width: 1.82%; } 
.obj-08{ left: 16.5%; top: 14%; width: 3.49%; } 
.obj-09{ left: 48.4%; top: 38%; width: 1.82%; background: #ffffff;} 
.obj-10{ right: 10%; top: 11%; width: 8.85%; } 


.svg-con { position: absolute; overflow: visible; margin-top: 0; z-index: 99;} 
.svg-con svg{ width: 100%;}
.svg-con path{ width: 100%;}
.svg-01{ width: 92.55%; left: 50%; top: 50%; transform: translate(-50%, -50%); } 
.svg-02{ left: 4%; top: 0; }  
.svg-03{ width: 100%; left:49.65%; top: 50%; transform: translate(-50%, -50%);} 
.svg-04{ right: 4.6%; top: -1px; }  
.svg-05{ width: 100%; left:49.65%; top: 50%; transform: translate(-50%, -50%);}  


.finserv-wheel-hld{ display: flex; align-items: center; justify-content: flex-end; position: relative; width: 100%; margin-top: 40px;}
/* .finserv-wheel-hld .wheel-con{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 50%;}
.finserv-wheel-hld .wheel-con figure{ padding-bottom: 56.25%;} */
.finserv-wheel-hld .wheel-con{ position: relative; width: 40%;}
.finserv-wheel-hld .wheel-con p{ position: absolute; left: -30%; bottom: 0;}
 
/* Responsive Code */
@media handheld, only screen and (max-width: 1680px){
  html{ font-size: 18px;}
  .container{ max-width: 1360px;}
  .focus-area-blurb{ min-height: 300px;}
  .inner-pages p.bullet::before{ top: 16px;}
  .initiatives-hld .init-blurb li::before{ top: 8px;}

  .animDiv2, .animDiv3{ padding-bottom: 19.4% !important;}
  .animDiv3{ padding-bottom: 17.4% !important;}
  .svg-anim-hld{padding-bottom: 45%;} 
  .svg-03, .svg-05{ width: calc(100% - 122px); left: 50%;  }
  .svg-03 svg{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} 
  .obj-01{ top: 19%;}
  .obj-02{ top: 19%;}
  .obj-05{ top: 4.4%;}
  .focus-area-blurb p{ font-size: 16px;}
}
@media handheld, only screen and (max-width: 1550px){ 
  .svg-anim-hld{padding-bottom: 46.64%;}
  .animDiv2{ padding-bottom: 17.4% !important;}
  .svg-anim-hld{padding-bottom: 45%;} 
  .svg-03{ width: calc(100% - 120px); left: 50%;  }
  .svg-03 svg{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
  .svg-04{ right: 3.95%;}

  .obj-03{ top: -4.5%;}
  .obj-04{ top: -5%;}
  .obj-05{ top: -1%;}
  .obj-06{ top: 4%;}

  .obj-08{ top: 8%;}
  .obj-10{ top: 5%;}
}
@media handheld, only screen and (max-width: 1440px){ 
  .container{ max-width: 1200px;}
  .focus-area-blurb{ min-height: 350px;}
  .initiatives-hld .init-blurb p{ line-height: 1.3;} 
  .svg-anim-hld { padding-bottom: 48%; }
  .svg-03, .svg-05 { width: calc(100% - 112px); left: 50%; }
  .animDiv2, .animDiv3 { padding-bottom: 18% !important; }
  .focus-area-blurb h5{ font-size: 1rem;}
  .focus-area-blurb { min-height: 274px; }
  .focusWrp .our-finserv{ padding: 80px;}  
  .focusWrp .sBtnR{ right: 30px;}
  .focusWrp .sBtnL{ left: 30px;}
} 

@media handheld, only screen and (max-width: 1400px){ 
  .svg-anim-hld { padding-bottom: 49%; }
  .animDiv2, .animDiv3{ padding-bottom:18.5% !important;}
  .svg-03, .svg-05 { width: calc(100% - 108px); }
  .focus-area-blurb { min-height: 275px!important; }
}

@media handheld, only screen and (max-width: 1300px){ 
  .svg-anim-hld { padding-bottom: 51%; }
  
}

@media handheld, only screen and (max-width: 1279px){ 
  .animDiv2, .animDiv3{ padding: 0 40px!important;}
.animDiv2 img, .animDiv3 img{ display: block;}
.animDiv2 .svg-con, .animDiv3 .svg-con, .animDiv2 .creative-obj-hld, .animDiv3 .creative-obj-hld, .svg-04, .svg-02{ display: none;}
.esgSliderWrp{ padding: 140px 0 80px;}
.focus-area-blurb { min-height: auto!important; }
}
 

@media handheld, only screen and (max-width: 991px){
  html{ font-size: 16px;}
  .section{ padding: 80px 0;} 
  .back-to-top{ display: none!important;} 
  header{ padding: 15px 20px;}
  #banner video{ width: 100%; height: auto;}
  #banner .banner-video-desk{ display: none;}
  #banner .banner-video-mob{ display: block;}
  .counter-con p br{ display: none;}
  .focus-area-blurb{ min-height: auto;}
  table { border: 0; }

  .culture-pillers table caption { font-size: 1.3em; } 
  .culture-pillers table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } 
  .culture-pillers table tr { display: block; margin-bottom: 20px; border-bottom: 1px solid var(--color-sky-blue);  } 
  .culture-pillers table td { border-bottom: 1px solid #ddd; display: block; }  
  .culture-pillers table td::before { content: attr(data-label); width: 50%; float: left; color: var(--color-blue); font-weight: bold; } 
  .culture-pillers table td:last-child { border-bottom: 0; }

  .inner-pages p.bullet::before{ top: 15px;} 
}

@media handheld, only screen and (max-width: 767px){
  .section{ padding: 60px 0;} 
  .sect-tl h2 br{ display: none;}
  header .logo{ width: 100%; max-width: 180px;}
  header .right-nav{ max-width: 170px;}
  header .logo-finserv{ max-width: 82px;}
  header .icon-download { width: 22px; height: 22px; }
  .nav-icon{ width: 35px; height: 20px;}
  .nav-icon span{ height: 3px;}
  .nav-icon.open span:nth-child(1){ top: 10px;}
  .focus-area-hld{ padding: 20px 0;}
  .initiatives-hld .init-blurb{ height: auto; margin-bottom: 20px;}
  .initiatives-hld .init-blurb label{ display: block; top: -12px;}
  footer{ text-align: center;}
 
}

@media handheld, only screen and (max-width: 575px){ 
 header .logo{ max-width: 134px;}
 header nav{ width: 100%; max-width: 100%; right: -100%;}
 .culture-pillers table td{ display: flex; flex-direction: column;}
 .culture-pillers table td::before{ width: 100%;}
} 
@media handheld, only screen and (max-width: 375px){
 
} 


 

@-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 233.18576049804688px;
    stroke-dasharray: 233.18576049804688px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 233.18576049804688px;
  }
}

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 233.18576049804688px;
    stroke-dasharray: 233.18576049804688px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 233.18576049804688px;
  }
}

.focus-area-hld.blue-con:nth-child(1):hover .svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
                       animate-svg-fill-1 0.2s linear 0.4s both;
          animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
               animate-svg-fill-1 0.2s linear 0.4s both;
}

@-webkit-keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 175.6278076171875px;
    stroke-dasharray: 175.6278076171875px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 175.6278076171875px;
  }
}

@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 175.6278076171875px;
    stroke-dasharray: 175.6278076171875px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 175.6278076171875px;
  }
}

@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.focus-area-hld.blue-con:nth-child(1):hover .svg-elem-2 {
  -webkit-animation: animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s both,
                       animate-svg-fill-2 0.2s linear 0.45s both;
          animation: animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s both,
               animate-svg-fill-2 0.2s linear 0.45s both;
}

/******************************************************/  

@-webkit-keyframes animate-svg-2-stroke-1 {
  0% {
    stroke-dashoffset: 56.93123245239258px;
    stroke-dasharray: 56.93123245239258px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 56.93123245239258px;
  }
}

@keyframes animate-svg-2-stroke-1 {
  0% {
    stroke-dashoffset: 56.93123245239258px;
    stroke-dasharray: 56.93123245239258px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 56.93123245239258px;
  }
}

.focus-area-hld.blue-con:nth-child(2):hover .svg-elem-1 {
  -webkit-animation: animate-svg-2-stroke-1 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
                       animate-svg-2-fill-1 0.2s linear 0.4s both;
          animation: animate-svg-2-stroke-1 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
               animate-svg-2-fill-1 0.2s linear 0.4s both;
}

@-webkit-keyframes animate-svg-2-stroke-2 {
  0% {
    stroke-dashoffset: 56.93117904663086px;
    stroke-dasharray: 56.93117904663086px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 56.93117904663086px;
  }
}

@keyframes animate-svg-2-stroke-2 {
  0% {
    stroke-dashoffset: 56.93117904663086px;
    stroke-dasharray: 56.93117904663086px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 56.93117904663086px;
  }
}

.focus-area-hld.blue-con:nth-child(2):hover .svg-elem-2 {
  -webkit-animation: animate-svg-2-stroke-2 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s both,
                       animate-svg-2-fill-2 0.2s linear 0.45s both;
          animation: animate-svg-2-stroke-2 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s both,
               animate-svg-2-fill-2 0.2s linear 0.45s both;
}

@-webkit-keyframes animate-svg-2-stroke-3 {
  0% {
    stroke-dashoffset: 38.82130813598633px;
    stroke-dasharray: 38.82130813598633px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 38.82130813598633px;
  }
}

@keyframes animate-svg-2-stroke-3 {
  0% {
    stroke-dashoffset: 38.82130813598633px;
    stroke-dasharray: 38.82130813598633px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 38.82130813598633px;
  }
}

.focus-area-hld.blue-con:nth-child(2):hover .svg-elem-3 {
  -webkit-animation: animate-svg-2-stroke-3 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s both,
                       animate-svg-2-fill-3 0.2s linear 0.5s both;
          animation: animate-svg-2-stroke-3 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s both,
               animate-svg-2-fill-3 0.2s linear 0.5s both;
}

@-webkit-keyframes animate-svg-2-stroke-4 {
  0% {
    stroke-dashoffset: 38.80914306640625px;
    stroke-dasharray: 38.80914306640625px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 38.80914306640625px;
  }
}

@keyframes animate-svg-2-stroke-4 {
  0% {
    stroke-dashoffset: 38.80914306640625px;
    stroke-dasharray: 38.80914306640625px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 38.80914306640625px;
  }
}

.focus-area-hld.blue-con:nth-child(2):hover .svg-elem-4 {
  -webkit-animation: animate-svg-2-stroke-4 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.30000000000000004s both,
                       animate-svg-2-fill-4 0.2s linear 0.55s both;
          animation: animate-svg-2-stroke-4 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.30000000000000004s both,
               animate-svg-2-fill-4 0.2s linear 0.55s both;
}

@-webkit-keyframes animate-svg-2-stroke-5 {
  0% {
    stroke-dashoffset: 40.13539505004883px;
    stroke-dasharray: 40.13539505004883px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 40.13539505004883px;
  }
}

@keyframes animate-svg-2-stroke-5 {
  0% {
    stroke-dashoffset: 40.13539505004883px;
    stroke-dasharray: 40.13539505004883px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 40.13539505004883px;
  }
}

.focus-area-hld.blue-con:nth-child(2):hover .svg-elem-5 {
  -webkit-animation: animate-svg-2-stroke-5 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s both,
                       animate-svg-2-fill-5 0.2s linear 0.6000000000000001s both;
          animation: animate-svg-2-stroke-5 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s both,
               animate-svg-2-fill-5 0.2s linear 0.6000000000000001s both;
}

@-webkit-keyframes animate-svg-2-stroke-6 {
  0% {
    stroke-dashoffset: 78.52322387695312px;
    stroke-dasharray: 78.52322387695312px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 78.52322387695312px;
  }
}

@keyframes animate-svg-2-stroke-6 {
  0% {
    stroke-dashoffset: 78.52322387695312px;
    stroke-dasharray: 78.52322387695312px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 78.52322387695312px;
  }
}

.focus-area-hld.blue-con:nth-child(2):hover .svg-elem-6 {
  -webkit-animation: animate-svg-2-stroke-6 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s both,
                       animate-svg-2-fill-6 0.2s linear 0.65s both;
          animation: animate-svg-2-stroke-6 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s both,
               animate-svg-2-fill-6 0.2s linear 0.65s both;
}

@-webkit-keyframes animate-svg-2-stroke-7 {
  0% {
    stroke-dashoffset: 190.06019592285156px;
    stroke-dasharray: 190.06019592285156px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 190.06019592285156px;
  }
}

@keyframes animate-svg-2-stroke-7 {
  0% {
    stroke-dashoffset: 190.06019592285156px;
    stroke-dasharray: 190.06019592285156px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 190.06019592285156px;
  }
}

@-webkit-keyframes animate-svg-2-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-2-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.focus-area-hld.blue-con:nth-child(2):hover .svg-elem-7 {
  -webkit-animation: animate-svg-2-stroke-7 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6000000000000001s both,
                       animate-svg-2-fill-7 0.2s linear 0.7000000000000001s both;
          animation: animate-svg-2-stroke-7 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6000000000000001s both,
               animate-svg-2-fill-7 0.2s linear 0.7000000000000001s both;
}




/* *************************************************** */
/* *************************************************** */
 

@-webkit-keyframes animate-svg-3-stroke-1 {
  0% {
    stroke-dashoffset: 331.4903259277344px;
    stroke-dasharray: 331.4903259277344px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 331.4903259277344px;
  }
}

@keyframes animate-svg-3-stroke-1 {
  0% {
    stroke-dashoffset: 331.4903259277344px;
    stroke-dasharray: 331.4903259277344px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 331.4903259277344px;
  }
}

.focus-area-hld.green-con:nth-child(1):hover .svg-elem-1 {
  -webkit-animation: animate-svg-3-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
                       animate-svg-3-fill-1 0.2s linear 0.4s both;
          animation: animate-svg-3-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
               animate-svg-3-fill-1 0.2s linear 0.4s both;
}

@-webkit-keyframes animate-svg-3-stroke-2 {
  0% {
    stroke-dashoffset: 216.6820068359375px;
    stroke-dasharray: 216.6820068359375px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 216.6820068359375px;
  }
}

@keyframes animate-svg-3-stroke-2 {
  0% {
    stroke-dashoffset: 216.6820068359375px;
    stroke-dasharray: 216.6820068359375px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 216.6820068359375px;
  }
}

@-webkit-keyframes animate-svg-3-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-3-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.focus-area-hld.green-con:nth-child(1):hover .svg-elem-2 {
  -webkit-animation: animate-svg-3-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s both,
                       animate-svg-3-fill-2 0.2s linear 0.45s both;
          animation: animate-svg-3-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s both,
               animate-svg-3-fill-2 0.2s linear 0.45s both;
}

/* *************************************************** */
/* *************************************************** */
 

@-webkit-keyframes animate-svg-4-stroke-1 {
  0% {
    stroke-dashoffset: 41.67866516113281px;
    stroke-dasharray: 41.67866516113281px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 41.67866516113281px;
  }
}

@keyframes animate-svg-4-stroke-1 {
  0% {
    stroke-dashoffset: 41.67866516113281px;
    stroke-dasharray: 41.67866516113281px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 41.67866516113281px;
  }
}

.focus-area-hld.green-con:nth-child(2):hover .svg-elem-1 {
  -webkit-animation: animate-svg-4-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
                       animate-svg-4-fill-1 0.2s linear 0.4s both;
          animation: animate-svg-4-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
               animate-svg-4-fill-1 0.2s linear 0.4s both;
}

@-webkit-keyframes animate-svg-4-stroke-2 {
  0% {
    stroke-dashoffset: 44.85367965698242px;
    stroke-dasharray: 44.85367965698242px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 44.85367965698242px;
  }
}

@keyframes animate-svg-4-stroke-2 {
  0% {
    stroke-dashoffset: 44.85367965698242px;
    stroke-dasharray: 44.85367965698242px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 44.85367965698242px;
  }
}

.focus-area-hld.green-con:nth-child(2):hover .svg-elem-2 {
  -webkit-animation: animate-svg-4-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s both,
                       animate-svg-4-fill-2 0.2s linear 0.45s both;
          animation: animate-svg-4-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s both,
               animate-svg-4-fill-2 0.2s linear 0.45s both;
}

@-webkit-keyframes animate-svg-4-stroke-3 {
  0% {
    stroke-dashoffset: 138.2350311279297px;
    stroke-dasharray: 138.2350311279297px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 138.2350311279297px;
  }
}

@keyframes animate-svg-4-stroke-3 {
  0% {
    stroke-dashoffset: 138.2350311279297px;
    stroke-dasharray: 138.2350311279297px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 138.2350311279297px;
  }
}

.focus-area-hld.green-con:nth-child(2):hover .svg-elem-3 {
  -webkit-animation: animate-svg-4-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s both,
                       animate-svg-4-fill-3 0.2s linear 0.5s both;
          animation: animate-svg-4-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s both,
               animate-svg-4-fill-3 0.2s linear 0.5s both;
}

@-webkit-keyframes animate-svg-4-stroke-4 {
  0% {
    stroke-dashoffset: 198.78799438476562px;
    stroke-dasharray: 198.78799438476562px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 198.78799438476562px;
  }
}

@keyframes animate-svg-4-stroke-4 {
  0% {
    stroke-dashoffset: 198.78799438476562px;
    stroke-dasharray: 198.78799438476562px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 198.78799438476562px;
  }
}

@-webkit-keyframes animate-svg-4-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-4-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.focus-area-hld.green-con:nth-child(2):hover .svg-elem-4 {
  -webkit-animation: animate-svg-4-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.30000000000000004s both,
                       animate-svg-4-fill-4 0.2s linear 0.55s both;
          animation: animate-svg-4-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.30000000000000004s both,
               animate-svg-4-fill-4 0.2s linear 0.55s both;
}


/****************************************************/
 

@-webkit-keyframes animate-svg-5-stroke-1 {
  0% {
    stroke-dashoffset: 209.5220947265625px;
    stroke-dasharray: 209.5220947265625px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 209.5220947265625px;
  }
}

@keyframes animate-svg-5-stroke-1 {
  0% {
    stroke-dashoffset: 209.5220947265625px;
    stroke-dasharray: 209.5220947265625px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 209.5220947265625px;
  }
}

.focus-area-hld.orange-con:nth-child(1):hover .svg-elem-1 {
  -webkit-animation: animate-svg-5-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
                       animate-svg-5-fill-1 0.2s linear 0.4s both;
          animation: animate-svg-5-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
               animate-svg-5-fill-1 0.2s linear 0.4s both;
}

@-webkit-keyframes animate-svg-5-stroke-2 {
  0% {
    stroke-dashoffset: 206.93038940429688px;
    stroke-dasharray: 206.93038940429688px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 206.93038940429688px;
  }
}

@keyframes animate-svg-5-stroke-2 {
  0% {
    stroke-dashoffset: 206.93038940429688px;
    stroke-dasharray: 206.93038940429688px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 206.93038940429688px;
  }
}

@-webkit-keyframes animate-svg-5-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-5-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.focus-area-hld.orange-con:nth-child(1):hover .svg-elem-2 {
  -webkit-animation: animate-svg-5-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s both,
                       animate-svg-5-fill-2 0.2s linear 0.45s both;
          animation: animate-svg-5-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s both,
               animate-svg-5-fill-2 0.2s linear 0.45s both;
}





/*************************************************************/

@-webkit-keyframes animate-svg-6-stroke-1 {
  0% {
    stroke-dashoffset: 54.87964630126953px;
    stroke-dasharray: 54.87964630126953px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 54.87964630126953px;
  }
}

@keyframes animate-svg-6-stroke-1 {
  0% {
    stroke-dashoffset: 54.87964630126953px;
    stroke-dasharray: 54.87964630126953px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 54.87964630126953px;
  }
}

.focus-area-hld.orange-con:nth-child(2):hover .svg-elem-1 {
  -webkit-animation: animate-svg-6-stroke-1 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
                       animate-svg-6-fill-1 0.2s linear 0.4s both;
          animation: animate-svg-6-stroke-1 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
               animate-svg-6-fill-1 0.2s linear 0.4s both;
}

@-webkit-keyframes animate-svg-6-stroke-2 {
  0% {
    stroke-dashoffset: 37.45636749267578px;
    stroke-dasharray: 37.45636749267578px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 37.45636749267578px;
  }
}

@keyframes animate-svg-6-stroke-2 {
  0% {
    stroke-dashoffset: 37.45636749267578px;
    stroke-dasharray: 37.45636749267578px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 37.45636749267578px;
  }
}

.focus-area-hld.orange-con:nth-child(2):hover .svg-elem-2 {
  -webkit-animation: animate-svg-6-stroke-2 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s both,
                       animate-svg-6-fill-2 0.2s linear 0.45s both;
          animation: animate-svg-6-stroke-2 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s both,
               animate-svg-6-fill-2 0.2s linear 0.45s both;
}

@-webkit-keyframes animate-svg-6-stroke-3 {
  0% {
    stroke-dashoffset: 54.87963104248047px;
    stroke-dasharray: 54.87963104248047px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 54.87963104248047px;
  }
}

@keyframes animate-svg-6-stroke-3 {
  0% {
    stroke-dashoffset: 54.87963104248047px;
    stroke-dasharray: 54.87963104248047px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 54.87963104248047px;
  }
}

.focus-area-hld.orange-con:nth-child(2):hover .svg-elem-3 {
  -webkit-animation: animate-svg-6-stroke-3 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s both,
                       animate-svg-6-fill-3 0.2s linear 0.5s both;
          animation: animate-svg-6-stroke-3 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s both,
               animate-svg-6-fill-3 0.2s linear 0.5s both;
}

@-webkit-keyframes animate-svg-6-stroke-4 {
  0% {
    stroke-dashoffset: 112.46268463134766px;
    stroke-dasharray: 112.46268463134766px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 112.46268463134766px;
  }
}

@keyframes animate-svg-6-stroke-4 {
  0% {
    stroke-dashoffset: 112.46268463134766px;
    stroke-dasharray: 112.46268463134766px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 112.46268463134766px;
  }
}

.focus-area-hld.orange-con:nth-child(2):hover .svg-elem-4 {
  -webkit-animation: animate-svg-6-stroke-4 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.30000000000000004s both,
                       animate-svg-6-fill-4 0.2s linear 0.55s both;
          animation: animate-svg-6-stroke-4 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.30000000000000004s both,
               animate-svg-6-fill-4 0.2s linear 0.55s both;
}

@-webkit-keyframes animate-svg-6-stroke-5 {
  0% {
    stroke-dashoffset: 187.6221923828125px;
    stroke-dasharray: 187.6221923828125px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 187.6221923828125px;
  }
}

@keyframes animate-svg-6-stroke-5 {
  0% {
    stroke-dashoffset: 187.6221923828125px;
    stroke-dasharray: 187.6221923828125px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 187.6221923828125px;
  }
}

@-webkit-keyframes animate-svg-6-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-6-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.focus-area-hld.orange-con:nth-child(2):hover .svg-elem-5 {
  -webkit-animation: animate-svg-6-stroke-5 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s both,
                       animate-svg-6-fill-5 0.2s linear 0.6000000000000001s both;
          animation: animate-svg-6-stroke-5 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s both,
               animate-svg-6-fill-5 0.2s linear 0.6000000000000001s both;
}


/*************************************************************/
 

@-webkit-keyframes animate-svg-7-stroke-1 {
  0% {
    stroke-dashoffset: 93.47948455810547px;
    stroke-dasharray: 93.47948455810547px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 93.47948455810547px;
  }
}

@keyframes animate-svg-7-stroke-1 {
  0% {
    stroke-dashoffset: 93.47948455810547px;
    stroke-dasharray: 93.47948455810547px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 93.47948455810547px;
  }
}

.focus-area-hld.sky-blue-con:nth-child(1):hover .svg-elem-1 {
  -webkit-animation: animate-svg-7-stroke-1 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
                       animate-svg-7-fill-1 0.2s linear 0.4s both;
          animation: animate-svg-7-stroke-1 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
               animate-svg-7-fill-1 0.2s linear 0.4s both;
}

@-webkit-keyframes animate-svg-7-stroke-2 {
  0% {
    stroke-dashoffset: 48.8791618347168px;
    stroke-dasharray: 48.8791618347168px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 48.8791618347168px;
  }
}

@keyframes animate-svg-7-stroke-2 {
  0% {
    stroke-dashoffset: 48.8791618347168px;
    stroke-dasharray: 48.8791618347168px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 48.8791618347168px;
  }
}

.focus-area-hld.sky-blue-con:nth-child(1):hover .svg-elem-2 {
  -webkit-animation: animate-svg-7-stroke-2 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s both,
                       animate-svg-7-fill-2 0.2s linear 0.45s both;
          animation: animate-svg-7-stroke-2 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s both,
               animate-svg-7-fill-2 0.2s linear 0.45s both;
}

@-webkit-keyframes animate-svg-7-stroke-3 {
  0% {
    stroke-dashoffset: 70.36971282958984px;
    stroke-dasharray: 70.36971282958984px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 70.36971282958984px;
  }
}

@keyframes animate-svg-7-stroke-3 {
  0% {
    stroke-dashoffset: 70.36971282958984px;
    stroke-dasharray: 70.36971282958984px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 70.36971282958984px;
  }
}

.focus-area-hld.sky-blue-con:nth-child(1):hover .svg-elem-3 {
  -webkit-animation: animate-svg-7-stroke-3 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s both,
                       animate-svg-7-fill-3 0.2s linear 0.5s both;
          animation: animate-svg-7-stroke-3 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s both,
               animate-svg-7-fill-3 0.2s linear 0.5s both;
}

@-webkit-keyframes animate-svg-7-stroke-4 {
  0% {
    stroke-dashoffset: 7.72325325012207px;
    stroke-dasharray: 7.72325325012207px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 7.72325325012207px;
  }
}

@keyframes animate-svg-7-stroke-4 {
  0% {
    stroke-dashoffset: 7.72325325012207px;
    stroke-dasharray: 7.72325325012207px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 7.72325325012207px;
  }
}

.focus-area-hld.sky-blue-con:nth-child(1):hover .svg-elem-4 {
  -webkit-animation: animate-svg-7-stroke-4 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.30000000000000004s both,
                       animate-svg-7-fill-4 0.2s linear 0.55s both;
          animation: animate-svg-7-stroke-4 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.30000000000000004s both,
               animate-svg-7-fill-4 0.2s linear 0.55s both;
}

@-webkit-keyframes animate-svg-7-stroke-5 {
  0% {
    stroke-dashoffset: 9.292895793914795px;
    stroke-dasharray: 9.292895793914795px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 9.292895793914795px;
  }
}

@keyframes animate-svg-7-stroke-5 {
  0% {
    stroke-dashoffset: 9.292895793914795px;
    stroke-dasharray: 9.292895793914795px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 9.292895793914795px;
  }
}

.focus-area-hld.sky-blue-con:nth-child(1):hover .svg-elem-5 {
  -webkit-animation: animate-svg-7-stroke-5 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s both,
                       animate-svg-7-fill-5 0.2s linear 0.6000000000000001s both;
          animation: animate-svg-7-stroke-5 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s both,
               animate-svg-7-fill-5 0.2s linear 0.6000000000000001s both;
}

@-webkit-keyframes animate-svg-7-stroke-6 {
  0% {
    stroke-dashoffset: 188.54879760742188px;
    stroke-dasharray: 188.54879760742188px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 188.54879760742188px;
  }
}

@keyframes animate-svg-7-stroke-6 {
  0% {
    stroke-dashoffset: 188.54879760742188px;
    stroke-dasharray: 188.54879760742188px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 188.54879760742188px;
  }
}

@-webkit-keyframes animate-svg-7-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-7-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.focus-area-hld.sky-blue-con:nth-child(1):hover .svg-elem-6 {
  -webkit-animation: animate-svg-7-stroke-6 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s both,
                       animate-svg-7-fill-6 0.2s linear 0.65s both;
          animation: animate-svg-7-stroke-6 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s both,
               animate-svg-7-fill-6 0.2s linear 0.65s both;
}

/*****************************************************************/
 

@-webkit-keyframes animate-svg-8-stroke-1 {
  0% {
    stroke-dashoffset: 257.0770721435547px;
    stroke-dasharray: 257.0770721435547px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 257.0770721435547px;
  }
}

@keyframes animate-svg-8-stroke-1 {
  0% {
    stroke-dashoffset: 257.0770721435547px;
    stroke-dasharray: 257.0770721435547px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 257.0770721435547px;
  }
}

.focus-area-hld.sky-blue-con:nth-child(2):hover .svg-elem-1 {
  -webkit-animation: animate-svg-8-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
                       animate-svg-8-fill-1 0.2s linear 0.4s both;
          animation: animate-svg-8-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
               animate-svg-8-fill-1 0.2s linear 0.4s both;
}

@-webkit-keyframes animate-svg-8-stroke-2 {
  0% {
    stroke-dashoffset: 199.90939331054688px;
    stroke-dasharray: 199.90939331054688px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 199.90939331054688px;
  }
}

@keyframes animate-svg-8-stroke-2 {
  0% {
    stroke-dashoffset: 199.90939331054688px;
    stroke-dasharray: 199.90939331054688px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 199.90939331054688px;
  }
}

@-webkit-keyframes animate-svg-8-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-8-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.focus-area-hld.sky-blue-con:nth-child(2):hover .svg-elem-2 {
  -webkit-animation: animate-svg-8-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s both,
                       animate-svg-8-fill-2 0.2s linear 0.45s both;
          animation: animate-svg-8-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s both,
               animate-svg-8-fill-2 0.2s linear 0.45s both;
}