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

----------------------------------------*/
/*--------------------------------------
          TABLE OF CONTENTS
----------------------------------------
    1. STYLESHEET
        1.1. BODY
        1.2. TYPOGRAPHY
        1.3. COMPONENT
    2. PAGE LOADER
    3. SECTION STRUCTURE
    4. CONTAINER STRUCTURE
    5. HEADER
        5.1. NAV
        5.2. SIDE NAV
    6. ABOUT
        6.1. PROFILE
        6.2. INTRO
        6.3. BUTTON (CV DOWNLOAD & CONTACT)
    7. TIMELINE - EXPERIENCE AND EDUCATION TIMELINE
        7.1. HEADING
        7.2. SUMMERY
    8. SKILLS
        8.1. SKILL HEADLINE
        8.2. SKILL PROGRESS
    9. SERVICES
        9.1. SERVICE ICON
        9.2. SERVICES TITLE
        9.3. SERVICES INFO
    10. PORTFOLIO
        10.1. FILTER OPTIONS
        10.2. FILTER CONTAINER
            10.2.1. PORTFOLIO
            10.2.2. PORTFOLIO IMAGE
            10.2.3. PORTFOLIO TITLE
        10.3. MODAL
            10.3.1. MODAL IMAGE
            10.3.2. LIVE DEMO BUTTON
            10.3.3. MODAL CONTENT
    11. ACHIEVEMENT
        11.1. ACHIEVEMENT HEADING
        11.2. ACHIEVEMENT ICON & DATE
        11.3. ACHIEVEMENT CONTENT
    12. PUBLICATIONS
        12.1. ICON
        12.2. TITLE
        12.3. INFO
        12.4. READ BUTTON
    13. BLOG
        13.1. BLOG IMAGE
        13.2. BLOG TITLE
        13.3. TIME AND FAVORITE
        13.4. READ MORE BUTTON
        13.5. BLOG ARTICLE DEMO
        13.5. VISIT BLOG BUTTON
    14. CLIENTS
        14.1.  CLIENTS SLIDER
            14.1.1.  CLIENTS REFERENCE
        14.3.  CLIENTS LOGO
    15. PRICING TABLE
        15.1. MONTHLY AND YEARLY BUTTON
        15.2. MONTHLY AND YEARLY PRICING
    16. INTEREST
        16.1. INTEREST CONTENT
        16.1. INTEREST ICON & NAME
    17. CONTACT
        17.1. INFORMATION
        17.2. CONTACT FORM
        17.3. LOCATION MAP
    18. FULL BLOG
        18.1. BLOG HEADER
        18.2. BLOG PAGE
            18.2.1. POST WRAPPER
                  18.2.1.1. BLOG POST ITEM
                  18.2.1.1. PAGINATION
            18.2.1. BLOG SIDEBAR
                18.2.1.1. SEARCH
                18.2.1.2. CATEGORY
                18.2.1.3. RECENT POST
                18.2.1.4. POPULAR POST
                18.2.1.5. POPULAR POST
                18.2.1.6. ABOUT AUTHOR
                18.2.1.7. FOLLOW
    19. SINGLE POST
        19.1. POST WRAPPER
              19.1.1. FULL POST
              19.1.2. COMMENT BOX
              19.1.3. POSTED COMMENT
    20. FOOTER
----------------------------------------*/
/* ------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------- */
/*---------------------------------------- Used Colors ----------------------------------------*/
/* Now You Can Directly Change Colors By Replacing From .CSS file*/
.colors-shadow {
  primary-color: #424242;
  primary-color-dark: #0f1a35;
  primary-color-light: #4f4f4f;
  accent-color: #3F75C5;
  accent-color-dark: #f22314;
  accent-color-light: #3F75C5;
  overlay: rgba(0, 0, 0, 0.5);
  body-color: #f4f6fb;
  divider-color: #dddddd;
  font-color-light: #d5d5d5;
  font-color-dark: #606060;
  p-color: #606060;
  hover-box-shadow: 0 15px 25px 0 rgba(0, 0, 0, 0.16), 0 10px 15px 0 rgba(0, 0, 0, 0.12);
  navigation-box-shadow: 0px 0px 3px 1px #0f1a35;
  box-shadow: 0px 1px 5px 2px #7d7d7d;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.29);
  card-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }
/*---------------------------------------- Used Colors ----------------------------------------*/
/* ------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------- */
/*---------------BODY-------------------*/
html, body {
  margin: 0;
  padding: 0;
  outline: 0;
  display: block;
  font-family: 'Abadi', 'Century Gothic', 'Nunito', 'Calibri', 'Trebuchet MS', sans-serif;
  font-size: 15px;
  background-color: #f4f6fb;
  color: #2d3a5a;
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-text-stroke: 1px transparent;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-rendering: optimizelegibility; }
/*-------------TYPOGRAPHY----------------*/
h1, h2, h3, h4, h5, h6, p, a, li {
  font-family: 'Abadi', 'Century Gothic', 'Nunito', 'Calibri', 'Trebuchet MS', sans-serif; }
h1, h2, h3, h4, h5, h6 {
  font-weight: 500; }
p, a, li {
  font-weight: 400; }
h4 {
  font-size: 2em; }
h6 {
  font-size: 1.4em; }
p, blockquote {
  color: #606060;
  font-weight: 300; }
/*---------------COMPONENTS--------------*/
.shadow {
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.15), 0 3px 10px 0 rgba(0, 0, 0, 0.15); }
a {
  color: #3F75C5; }
  a:hover, a:active, a:focus {
    color: #3F75C5;
    text-decoration: none;
    outline: 0; }
.swiper-container {
  width: 100%;
  height: auto; }
  .swiper-container .swiper-slide {
    padding-bottom: 35px; }
  .swiper-container .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    bottom: 0;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: 0.2;
    margin-top: 20px; }
  .swiper-container .swiper-pagination-bullet-active {
    opacity: 1;
    background: #424242; }
.active-cat {
  color: #ffffff;
  border-bottom: 2px solid #3F75C5; }
.custom-btn {
  background-color: #3F75C5 !important; }
  .custom-btn:hover {
    color: #fff;
    outline: 0;
    background-color: #f22314 !important; }
  .custom-btn:focus {
    color: #fff;
    outline: 0;
    background-color: #3F75C5 !important; }
  .custom-btn:active {
    color: #fff;
    outline: 0;
    background-color: #3F75C5 !important; }
    .custom-btn:active:hover {
      color: #fff;
      outline: 0;
      background-color: #3F75C5 !important; }
    .custom-btn:active:focus {
      color: #fff;
      outline: 0;
      background-color: #3F75C5 !important; }
.back-to-top {
  border-radius: 50%;
  text-align: center;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }
  .back-to-top.back-to-top-is-visible {
    visibility: visible;
    opacity: 1; }
@keyframes blink {
  0% {
    opacity: 1.0; }
  50% {
    opacity: 0.0; }
  100% {
    opacity: 1.0; } }
@-webkit-keyframes blink {
  0% {
    opacity: 1.0; }
  50% {
    opacity: 0.0; }
  100% {
    opacity: 1.0; } }
.selectedText {
  display: none; }
/*---------------PAGE LOADER-------------------*/
#page-loader {
  background-color: #0f1a35;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 6000;
  margin-top: 0px;
  top: 0px; }
  #page-loader .text-div {
    width: 100%;
    position: absolute;
    top: 270px;
    color: #ffffff; }
    #page-loader .text-div p, #page-loader .text-div h6 {
      margin: 0;
      display: block;
      color: #ffffff;
      font-size: .9em;
      letter-spacing: 1px;
      font-weight: 300;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.29); }
    #page-loader .text-div h6 {
      margin-top: 5px;
      font-size: 1.3em; }
.spinner {
  width: 50px;
  height: 50px;
  background-color: #3F75C5;
  margin: 200px auto;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out; }
@-webkit-keyframes rotateplane {
  0% {
    -webkit-transform: perspective(120px); }
  50% {
    -webkit-transform: perspective(120px) rotateY(180deg); }
  100% {
    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } }
@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
/*---------------SECTION STRUCTURE-------------------*/
.section {
  padding: 30px 0;
  background-color: transparent; }
  .section .section-title {
    font-size: 1.5em;
    position: relative;
    margin-bottom: 50px;
    font-weight: 700; }
    .section .section-title:before {
      content: "";
      position: absolute;
      width: 170px;
      margin-left: -85px;
      left: 50%;
      bottom: -20px;
      height: 1px;
      border-bottom: 3px solid #3F75C5; }
  .section .section-description {
    font-weight: 300;
    margin: 20px 0;
    padding: 0 10%;
    line-height: 1.3; }
.content-wrapper {
  width: 100%;
  height: auto;
  padding: 25px 20px; }
/*---------------CONTAINER STRUCTURE-------------------*/
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto; }
@media (min-width: 768px) {
  .container {
    width: 750px; } }
@media (min-width: 992px) {
  .container {
    width: 970px; } }
@media (min-width: 1200px) {
  .container {
    width: 1100px; } }
/*---------------HEADER-------------------*/
#header {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  background: url("../images/blog-header.jpg") no-repeat center center fixed;
  background-size: cover;
  border-radius: 0 0 24px 24px;
  overflow: hidden;
  /*---------------NAV-------------------*/ }
  #header nav {
    position: fixed;
    z-index: 5000;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: transparent;
    box-shadow: none;
    -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
    -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
    transition: background .5s ease-in-out,padding .5s ease-in-out;
    /*---------------SIDE NAV-------------------*/ }
    #header nav .button-collapse {
      cursor: pointer; }
    #header nav ul li {
      line-height: 50px;
      height: 50px;
      color: #ffffff; }
      #header nav ul li a {
        color: #ffffff;
        font-size: 15px;
        padding: 0;
        padding: 0 20px; }
        #header nav ul li a:hover, #header nav ul li a:active, #header nav ul li a:focus {
          background-color: rgba(0, 0, 0, 0.2);
          color: #3F75C5;
          text-decoration: none; }
    #header nav .nav-icon:hover, #header nav .nav-icon:active, #header nav .nav-icon:focus {
      color: #ffffff;
      text-decoration: none; }
    #header nav .nav-icon i {
      font-size: 30px;
      line-height: 50px; }
    #header nav #side-nav {
      position: fixed;
      width: 240px;
      z-index: 4;
      bottom: 0;
      top: 0;
      left: -240px;
      background-color: #ffffff;
      overflow-y: auto;
      -webkit-overflow-y: auto;
      transition: all 300ms;
      -webkit-overflow-scrolling: touch; }
      #header nav #side-nav #nav-header {
        width: 100%;
        height: auto;
        padding: 10px;
        background-color: #424242; }
        #header nav #side-nav #nav-header #nav-profile {
          position: relative;
          top: 10px;
          margin-bottom: 20px;
          width: 70px;
          height: 70px;
          border-radius: 50%; }
          #header nav #side-nav #nav-header #nav-profile img {
            width: 100%;
            height: 100%;
            border-radius: 50%; }
        #header nav #side-nav #nav-header h6 {
          position: relative;
          margin: 10px 0;
          color: #ffffff;
          font-size: 1.2em;
          font-weight: 300;
          line-height: 25px; }
      #header nav #side-nav #nav-link-wrapper {
        width: 100%;
        margin-top: 15px;
        padding-bottom: 25px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; }
        #header nav #side-nav #nav-link-wrapper ul li {
          line-height: 40px;
          width: 100%;
          height: 40px;
          padding: 0; }
          #header nav #side-nav #nav-link-wrapper ul li a {
            height: 40px;
            line-height: 40px;
            color: #606060;
            padding: 0;
            padding: 0 20px; }
            #header nav #side-nav #nav-link-wrapper ul li a:hover, #header nav #side-nav #nav-link-wrapper ul li a:active, #header nav #side-nav #nav-link-wrapper ul li a:focus {
              background: none;
              color: #3F75C5;
              text-decoration: none; }
    #header nav #side-nav-mask {
      position: fixed;
      height: 100%;
      width: 100%;
      background: rgba(0, 0, 0, 0.5);
      left: 0;
      top: 0;
      opacity: .1;
      visibility: hidden;
      z-index: 2;
      transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
      transform: translateZ(0);
      -webkit-transform: translateZ(0); }
      #header nav #side-nav-mask.visible {
        visibility: visible;
        opacity: 1; }
  #header .top-nav-collapse {
    background: linear-gradient(135deg, #0a1229 0%, #1F2F5D 100%);
    box-shadow: 0px 2px 8px rgba(31, 47, 93, 0.5); }
    #header .overlay {
      width: 100%;
      height: 340px;
      padding-top: 70px;
      padding-bottom: 60px;
      background: linear-gradient(135deg, #0a1229 0%, #1F2F5D 60%, #162548 100%);
      position: relative;
      overflow: hidden;
      border-radius: 0 0 24px 24px;
  	}
    /* Neon grid overlay effect */
    #header .overlay::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: 
        linear-gradient(rgba(63, 117, 197, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(63, 117, 197, 0.06) 1px, transparent 1px);
      background-size: 30px 30px;
      background-position: center;
      pointer-events: none;
    }
    /* Faint glowing background nodes */
    #header .overlay::after {
      content: '';
      position: absolute;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(168, 85, 247, 0.06) 0%, transparent 70%);
      top: -50px;
      right: 10%;
      pointer-events: none;
    }
  #header h5 {
    font-weight: 500;
    margin-top: 90px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.29);
    color: #ffffff;
    font-size: 1.3em; }
  #header h1 {
    font-weight: 700;
    margin-top: 10px;
    font-size: 3em;
    color: #ffffff;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.29); }
  #header h4 {
    margin-top: -15px;
    font-size: 1.3em;
    line-height: 1.5;
    font-weight: 500;
    color: #fff;
    margin-bottom: 110px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.29); }
/*---------------ABOUT-------------------*/
#about {
  position: relative;
  padding: 0 5%;
  margin-top: 10px;
  height: auto;
  background-color: transparent; }
  #about #profile {
    animation-delay: 500ms;
    animation-duration: 1000ms;
    position: absolute;
    width: 180px;
    height: 180px;
    top: -97px;
    left: 50%;
    margin-left: -90px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 50%;
    background: #3F75C5;
    padding: 4px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 176, 255, 0.25); }
    #about #profile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%; }
  #about #intro-div {
    padding: 30px 0;
    border-radius: 24px !important;
    overflow: hidden;
  }
    #about #intro-div ul {
      padding: 0 5px;
      margin-top: 85px; }
      #about #intro-div ul li a i {
        font-size: 25px;
        color: #424242;
        opacity: .5;
        margin: 0 5px; }
        #about #intro-div ul li a i:hover {
          color: #424242;
          opacity: 1; }
    #about #intro-div p {
      padding: 0 5%;
      margin: 32px 0;
      text-align: left;
      font-size: 16px;
      line-height: 1.8; }
    #about #intro-div .btn {
      width: 200px;
      height: auto;
      margin: 10px 10px; }
/*---------------TIMELINE - EXPERIENCE AND EDUCATION TIMELINE-------------------*/
.timeline {
  margin-top: 70px;
  padding-left: 0; }
.workDetails {
  margin-bottom: 0; }
  .workDetails .rightArea {
    border-left: dashed 1px #606060;
    padding-bottom: 40px; }
  .workDetails:last-child .rightArea {
    padding-bottom: 0px; }
  .workDetails:last-child .rightArea .timeline-container p:last-child {
    padding-bottom: 0; }
.year {
  font-size: 1em;
  color: #fff;
  line-height: 40px; }
  .year span {
    display: block;
    font-size: 1em;
    padding: 0 20px;
    white-space: nowrap;
    float: right;
    margin-bottom: 2px;
    margin-right: 30px;
    font-weight: 500; }
  .year .prevY {
    background-color: #3F75C5; }
  .year .afterY {
    background-color: #4f4f4f; }
  .year .education-year {
    margin-top: 22px; }
.circle-icon {
  position: absolute;
  left: 0;
  top: 30px;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-radius: 50%;
  background: #f4f6fb;
  border: 5px solid #0f1a35; }
.timeline-container {
  width: auto;
  padding: 0 50px 10px 50px;
  margin-left: 0;
  text-align: left; }
  .timeline-container .ref-logo {
    width: 160px;
    margin-bottom: 20px; }
  .timeline-container p {
    line-height: 1.5; }
  .timeline-container h4 {
    padding-bottom: 1px;
    margin-top: -8px;
    font-size: 1.5em;
    font-weight: 400; }
  .timeline-container h5 {
    margin-top: -7px;
    padding-bottom: 7px;
    font-weight: 300;
    font-size: 1.2em; }
@media only screen and (max-width: 767px) {
  .timeline {
    padding-left: 15px; }
  .workDetails {
    margin-bottom: 0; }
    .workDetails .rightArea {
      border-left: none;
      padding-bottom: 40px; }
    .workDetails:last-child .rightArea {
      padding-bottom: 0px; }
    .workDetails:last-child .rightArea .timeline-container p:last-child {
      padding-bottom: 0; }
  .circle-icon {
    display: none; }
  .year span {
    width: 100%;
    margin-right: 0; }
  .timeline-container {
    margin-top: 30px;
    padding: 0; } }
/*---------------SKILLS-------------------*/
.skill {
  padding: 20px 20px;
  color: #ffffff; }
.skill-title {
  margin-top: 20px;
  margin-bottom: 40px; }
.chart {
  position: relative;
  text-align: center;
  margin-top: 30px; }
  .chart span {
    position: absolute;
    text-align: center;
    line-height: 160px;
    font-size: 1.5em;
    width: 46px;
    left: 50%;
    margin-left: -23px;
    font-weight: 300;
    color: #3F75C5; }
.skill-container h6 {
  font-weight: 400;
  margin: 20px 0; }
.skill-container p {
  text-align: center; }
#services ul {
  margin-bottom: 0; }
#services .service-item {
  background-color: #ffffff;
  padding: 20px 20px 30px 20px; }
  #services .service-item i {
    font-size: 70px;
    color: #424242; }
  #services .service-item h6 {
    margin: 0;
    line-height: 1.4;
    font-size: 1.25em;
    font-weight: 400;
    color: #606060;
    padding-bottom: 20px; }
  #services .service-item p {
    color: #606060; }
#services li:nth-child(even) .service-item {
  background-color: #424242;
  color: #ffffff; }
  #services li:nth-child(even) .service-item i {
    color: #ffffff; }
  #services li:nth-child(even) .service-item h6, #services li:nth-child(even) .service-item p {
    color: #ffffff; }
/*---------------PORTFOLIO-------------------*/
#portfolios {
  display: none;
  width: 100%;
  height: auto; }
  #portfolios ul li {
    color: #424242;
    cursor: pointer;
    display: inline-block;
    text-transform: uppercase;
    padding: 10px 10px; }
    #portfolios ul li a {
      color: #424242;
      font-weight: 500; }
  #portfolios .filtr-container {
    width: 100%; }
    #portfolios .filtr-container .filtr-item {
      padding-left: 0;
      padding-right: 0;
      clear: both; }
    #portfolios .filtr-container .portfolio {
      width: 100%;
      position: relative; }
      #portfolios .filtr-container .portfolio:hover {
        box-shadow: 0 15px 25px 0 rgba(0, 0, 0, 0.16), 0 10px 15px 0 rgba(0, 0, 0, 0.12); }
      #portfolios .filtr-container .portfolio img {
        width: 100%;
        height: auto;
        -webkit-transition: 0.5s ease;
        -moz-transition: 0.5s ease;
        transition: 0.5s ease 0s; }
      #portfolios .filtr-container .portfolio figure {
        position: relative;
        overflow: hidden;
        margin: 0;
        width: 100%;
        height: auto;
        text-align: center;
        cursor: pointer; }
        #portfolios .filtr-container .portfolio figure figcaption {
          position: absolute;
          top: 0;
          width: 100%;
          left: 0;
          height: 100%;
          padding: 20px;
          text-align: center;
          font-weight: 400;
          color: #ffffff; }
          #portfolios .filtr-container .portfolio figure figcaption span {
            position: absolute;
            width: 200px;
            margin-left: -100px;
            left: 50%;
            top: 50%; }
        #portfolios .filtr-container .portfolio figure.hover-effect figcaption {
          background: rgba(66, 66, 66, 0.5);
          opacity: 0;
          -webkit-transition: 1s ease 0.15s;
          -moz-transition: 1s ease 0.15s;
          -o-transition: 1s ease 0.15s;
          transition: 1s ease 0.15s; }
          #portfolios .filtr-container .portfolio figure.hover-effect figcaption:hover {
            opacity: 1; }
        #portfolios .filtr-container .portfolio figure.hover-effect:hover img {
          -webkit-transform: scale3d(1.2, 1.2, 1.5);
          -moz-transform: scale3d(1.2, 1.2, 1.5);
          transform: scale3d(1.3, 1.3, 1); }
      #portfolios .filtr-container .portfolio h6 {
        line-height: 30px;
        padding: 10px 10px;
        padding-bottom: 20px;
        font-size: 1.2em;
        font-weight: 400;
        color: #606060; }
.modal-content {
  position: relative;
  padding: 50px 30px 30px 30px;
  background-color: #ffffff;
  width: 100%;
  top: 50px;
  margin-bottom: 30px;
  border-radius: 16px;
  overflow: hidden; }
  .modal-content h3 {
    margin: 0;
    margin-bottom: 20px;
    line-height: 1.3;
    font-size: 1.5em;
    font-weight: 400;
    padding: 0;
    text-align: left; }
  @media screen and (max-width: 991px) {
    .modal-content img {
      padding: 0;
      margin-bottom: 20px; } 
	  .one-row {
    display: block !important;
}
	  }
  @media screen and (max-width: 991px) {
    .modal-content .content {
      padding: 0; } }
  .modal-content .content p {
    line-height: 1.3; }
    .modal-content .content p span {
      font-weight: 500; }
  .modal-content .content .modal-btn {
    margin-bottom: 20px;
    margin-top: 5px; }
  .modal-content .content .close-btn {
    margin-top: 10px; }
.modal-overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  transition: all 1000ms cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0);
  -webkit-transform: translateZ(0); }
  .modal-overlay.visible {
    visibility: visible;
    opacity: 1; }
/*---------------ACHIEVEMENT-------------------*/
.achievement {
  position: relative;
  margin: 10px 0 30px 0;
  width: 100%;
  height: auto; }
  .achievement .achievement-top-bar {
    position: relative;
    width: 100%;
    height: auto;
    background-color: #424242;
    padding: 6px 6px; }
    .achievement .achievement-top-bar h5 {
      position: relative;
      top: 0;
      margin: 0;
      line-height: 30px;
      font-size: 1.2em;
      font-weight: 400;
      color: #ffffff;
      padding: 5px 5px; }
  .achievement .achievement-inner {
    position: relative;
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }
    .achievement .achievement-inner .achievement-header {
      display: block;
      width: 100%;
      height: 200px;
      background-color: #ffffff;
      overflow: hidden; }
      .achievement .achievement-inner .achievement-header .achievement-heading {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        height: 200px;
        overflow: hidden;
        background-color: #ffffff;
        z-index: 1; }
        .achievement .achievement-inner .achievement-header .achievement-heading i {
          position: absolute;
          color: #424242;
          width: 100%;
          top: 18%;
          font-size: 70px; }
        .achievement .achievement-inner .achievement-header .achievement-heading h6 {
          position: absolute;
          width: 100%;
          top: 60%;
          padding: 0 15px;
          font-size: 1.1em;
          font-weight: 400; }
      .achievement .achievement-inner .achievement-header .achievement-more-btn {
        position: absolute;
        top: 170px;
        left: 70%;
        background-color: #3F75C5; }
    .achievement .achievement-inner .achievement-content {
      position: relative;
      top: 0;
      display: none;
      width: 100%;
      height: auto;
      background-color: #424242; }
      .achievement .achievement-inner .achievement-content p {
        padding: 30px 30px;
        color: #fff; }
#publications .publication {
  padding: 30px 20px;
  margin-top: 60px; }
  #publications .publication .icon-div {
    position: absolute;
    width: 70px;
    height: 70px;
    top: -35px;
    left: 50%;
    margin-left: -35px;
    border-radius: 50%;
    background-color: #424242; }
    #publications .publication .icon-div i {
      color: #ffffff;
      font-size: 30px;
      vertical-align: middle;
      line-height: 70px; }
  #publications .publication h6 {
    margin: 0;
    line-height: 1.4;
    font-size: 1.25em;
    font-weight: 400;
    color: #606060;
    padding: 25px 20px 15px 20px;
    border-bottom: 1px solid #dddddd; }
  #publications .publication ul {
    margin: 20px 0 0 0; }
    #publications .publication ul li {
      margin-bottom: 10px;
      margin-right: 20px; }
      #publications .publication ul li i {
        color: #424242;
        font-size: 20px;
        vertical-align: middle;
        margin-right: 10px; }
  #publications .publication p {
    margin: 10px 0; }
  #publications .publication .btn {
    margin-top: 20px; }
/*---------------BLOG-------------------*/
.blog {
  margin-bottom: 25px;
  width: 100%;
  height: auto; }
  .blog:hover {
    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, 0.16), 0 10px 15px 0 rgba(0, 0, 0, 0.12); }
  .blog .blog-content {
    padding: 0 20px 0 20px; }
  .blog .blog-title {
    position: relative;
    border-bottom: 1px solid #dddddd; }
    .blog .blog-title h6 {
      margin: 0;
      line-height: 1.4;
      font-size: 1.25em;
      font-weight: 400;
      color: #606060;
      padding: 20px 0; }
    .blog .blog-title ul li {
      display: inline-block;
      color: #606060;
      margin-right: 20px; }
      .blog .blog-title ul li i {
        color: #424242;
        font-size: 20px;
        vertical-align: middle;
        margin-right: 10px; }
    .blog .blog-title .more-btn {
      position: absolute;
      background-color: #3F75C5;
      bottom: -28px;
      left: 100%;
      margin-left: -56px;
      overflow: hidden;
      -webkit-overflow: hidden; }
  .blog p {
    padding: 30px 0;
    margin: 0; }
.visit-blog {
  width: 200px;
  padding: 0px 50px;
  margin: 30px;
  color: #ffffff; }
/*---------------CLIENTS-------------------*/
#clients .clients-ref {
  margin-top: 60px; }
  #clients .clients-ref .client-photo {
    position: absolute;
    width: 100%;
    margin-top: -50px; }
    #clients .clients-ref .client-photo img {
      height: 100px;
      width: 100px;
      border-radius: 50%; }
#clients h5 {
  margin-bottom: 30px;
  line-height: 1.2;
  font-weight: 400; }
#clients ul {
  margin: 0; }
  #clients ul li {
    display: inline-block;
    padding: 0 20px;
    margin-bottom: 20px; }
    @media only screen and (max-width: 767px) {
      #clients ul li {
        padding: 0 10px; } }
    #clients ul li img {
      width: 100%;
      opacity: .5;
      -webkit-filter: grayscale(100%);
      /* Chrome, Safari, Opera */
      -moz-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%); }
      #clients ul li img:hover {
        opacity: 1;
        -webkit-filter: grayscale(0);
        /* Chrome, Safari, Opera */
        -moz-filter: grayscale(0);
        -o-filter: grayscale(0);
        filter: grayscale(0); }
blockquote {
  padding: 70px 35px 15px;
  font-style: italic;
  text-align: left;
  border-left: none;
  font-size: 1em;
  border-top: 5px solid #3F75C5; }
  blockquote cite {
    display: block;
    margin: 15px 0;
    font-size: 1em;
    font-weight: 500; }
  blockquote blockquote:before {
    display: none; }
/*---------------PRICING TABLE-------------------*/
#pricing .period-btn li {
  color: #424242;
  cursor: pointer;
  display: inline-block;
  text-transform: uppercase;
  padding: 10px 10px; }
  #pricing .period-btn li a {
    color: #424242;
    font-weight: 500; }
.period-type {
  width: 100%;
  height: auto;
  margin-top: 20px; }
  .period-type .pricing-table {
    margin: 0;
    margin-bottom: 25px;
    width: 100%;
    height: auto;
    background-color: #ffffff;
    color: #2d3a5a;
    padding: 30px 30px; }
    .period-type .pricing-table:hover {
      box-shadow: 0 15px 25px 0 rgba(0, 0, 0, 0.16), 0 10px 15px 0 rgba(0, 0, 0, 0.12); }
    .period-type .pricing-table h3 {
      margin: 0;
      margin-top: 10px;
      font-size: 1.2em;
      font-weight: 500;
      color: #424242; }
    .period-type .pricing-table h4 {
      margin: 30px 0; }
    .period-type .pricing-table .dollar {
      font-size: .7em;
      font-weight: 300;
      vertical-align: top;
      position: relative;
      bottom: 6px; }
    .period-type .pricing-table .amount {
      font-weight: 500;
      vertical-align: middle;
      font-size: 1.6em; }
    .period-type .pricing-table .period {
      font-size: .7em;
      font-weight: 300;
      vertical-align: bottom;
      position: relative;
      top: 9px; }
    .period-type .pricing-table ul {
      margin-bottom: 30px; }
      .period-type .pricing-table ul li {
        line-height: 2.5;
        font-weight: 300;
        border-top: 1px solid #dddddd; }
      .period-type .pricing-table ul li:nth-child(1) {
        border-top: none; }
/*---------------INTEREST-------------------*/
.interest {
  padding: 30px 20px 20px 20px; 
      overflow: auto;
}
  }
  .interest p {
    width: 100%;
    height: auto;
    padding: 0 80px;
    margin: 20px 0; }
    @media only screen and (max-width: 640px) {
      .interest p {
        padding: 0;
        margin-top: 0; } }
  .interest .interest-topic {
    margin: 10px 15px; }
    .interest .interest-topic i {
      display: block;
      font-size: 35px;
      padding: 0;
      color: #424242; }
    .interest .interest-topic span {
      display: block; }
/*---------------CONTACT-------------------*/
/*---------------INFORMATION-------------------*/
.info {
  width: 100%;
  min-height: 480px;
  height: auto;
  background: url("../images/contact-background.png") no-repeat;
  background-size: cover; }
  .info .contact-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    /*background-color: rgba(0, 0, 0, 0.7);*/
    background-color: #3F75C5;
    padding: 80px 20px; }
  .info ul {
    display: block; }
    .info ul li {
      margin-bottom: 15px;
      letter-spacing: 1px;
      display: block;
      color: #ffffff;
      font-size: 1em;
      font-weight: 300;
      display: block; }
      .info ul li i {
        color: #ffffff;
        font-size: 30px; }
@media only screen and (max-width: 767px) {
  .info {
    min-height: auto; }
    .info ul {
      padding: 40px 20px; } }
/*---------------CONTACT FORM-------------------*/
.contact {
  width: 100%;
  min-height: 480px;
  height: auto;
  /* Snackbar
  -------------------------------------------------*/
  /* Show the snackbar when clicking on a button (class added with JavaScript) */
  /* Animations to fade the snackbar in and out */ }
  .contact form {
    padding: 20px 40px; }
    @media screen and (max-width: 767px) {
      .contact form {
        padding: 20px 20px; } }
    .contact form button {
      width: 150px;
      top: 20px;
      margin-bottom: 25px; }
      .contact form button i {
        margin-right: 10px;
        vertical-align: middle; }
  .contact .progress {
    position: relative;
    height: 3px;
    display: block;
    width: 100%;
    background-color: #424242;
    border-radius: 0;
    margin: 0;
    top: 0; }
  .contact .is-hidden {
    visibility: hidden; }
  .contact #snackbar, .contact #fail-snackbar {
    visibility: hidden;
    min-width: 300px;
    margin-left: -150px;
    font-weight: 300;
    background-color: #424242;
    color: #fff;
    text-align: center;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px; }
  .contact .show {
    visibility: visible !important;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s; }
@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0; }
  to {
    bottom: 30px;
    opacity: 1; } }
@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0; }
  to {
    bottom: 30px;
    opacity: 1; } }
@-webkit-keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1; }
  to {
    bottom: 0;
    opacity: 0; } }
@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1; }
  to {
    bottom: 0;
    opacity: 0; } }
/*---------------LOCATION MAP-------------------*/
#google-map {
  position: relative;
  width: 100%;
  height: 400px; }
  #google-map #map-container {
    position: relative;
    width: 100%;
    height: 400px; }
  #google-map #cd-zoom-in, #google-map #cd-zoom-out {
    height: 32px;
    width: 32px;
    cursor: pointer;
    margin-left: 50px;
    background-color: #3F75C5;
    background-repeat: no-repeat;
    background-size: 32px 64px; }
    #google-map #cd-zoom-in i, #google-map #cd-zoom-out i {
      color: #ffffff;
      font-size: 20px;
      padding: 6px 6px;
      vertical-align: middle;
      text-align: center; }
  #google-map .no-touch #cd-zoom-in:hover, #google-map .no-touch #cd-zoom-out:hover {
    background-color: #3F75C5; }
  #google-map #cd-zoom-in {
    background-position: 50% 0;
    margin-top: 50px;
    margin-bottom: 1px; }
  #google-map #cd-zoom-out {
    background-position: 50% -32px; }
  #google-map address {
    position: absolute;
    width: 100%;
    min-height: 50px;
    height: auto;
    top: 350px;
    left: 0;
    padding: 10px 10px;
    background-color: #ffffff;
    font-size: 1.1em;
    line-height: 30px;
    font-weight: 300;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    margin-bottom: 50px; }
@media only screen and (max-width: 767px) {
  #google-map {
    position: relative;
    width: 100%;
    height: 300px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }
    #google-map #map-container {
      height: 300px; }
    #google-map address {
      top: 250px; }
    #google-map #cd-zoom-in, #google-map #cd-zoom-out {
      margin-left: 20px; }
    #google-map #cd-zoom-in {
      margin-top: 20px; }
    #google-map #back-to-top {
      right: 20px; } }
::-webkit-input-placeholder {
  color: #d1d1d1;
  font-weight: 500; }
:-moz-placeholder {
  /* Firefox 18- */
  color: #d1d1d1;
  font-weight: 500; }
::-moz-placeholder {
  /* Firefox 19+ */
  color: #d1d1d1;
  font-weight: 500; }
:-ms-input-placeholder {
  color: #d1d1d1;
  font-weight: 500; }
input:not([type]),
input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=time],
input[type=date],
input[type=datetime-local],
input[type=tel],
input[type=number],
input[type=search],
textarea.materialize-textarea {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #9e9e9e;
  border-radius: 0;
  outline: none;
  height: 3rem;
  width: 100%;
  font-size: 1rem;
  margin: 0 0 15px 0;
  padding: 0;
  box-shadow: none;
  box-sizing: content-box;
  transition: all .3s; }
input:not([type]):disabled, input:not([type])[readonly="readonly"],
input[type=text]:disabled,
input[type=text][readonly="readonly"],
input[type=password]:disabled,
input[type=password][readonly="readonly"],
input[type=email]:disabled,
input[type=email][readonly="readonly"],
input[type=url]:disabled,
input[type=url][readonly="readonly"],
input[type=time]:disabled,
input[type=time][readonly="readonly"],
input[type=date]:disabled,
input[type=date][readonly="readonly"],
input[type=datetime-local]:disabled,
input[type=datetime-local][readonly="readonly"],
input[type=tel]:disabled,
input[type=tel][readonly="readonly"],
input[type=number]:disabled,
input[type=number][readonly="readonly"],
input[type=search]:disabled,
input[type=search][readonly="readonly"],
textarea.materialize-textarea:disabled,
textarea.materialize-textarea[readonly="readonly"] {
  color: rgba(0, 0, 0, 0.26);
  border-bottom: 1px dotted rgba(0, 0, 0, 0.26); }
input:not([type]):disabled + label, input:not([type])[readonly="readonly"] + label,
input[type=text]:disabled + label,
input[type=text][readonly="readonly"] + label,
input[type=password]:disabled + label,
input[type=password][readonly="readonly"] + label,
input[type=email]:disabled + label,
input[type=email][readonly="readonly"] + label,
input[type=url]:disabled + label,
input[type=url][readonly="readonly"] + label,
input[type=time]:disabled + label,
input[type=time][readonly="readonly"] + label,
input[type=date]:disabled + label,
input[type=date][readonly="readonly"] + label,
input[type=datetime-local]:disabled + label,
input[type=datetime-local][readonly="readonly"] + label,
input[type=tel]:disabled + label,
input[type=tel][readonly="readonly"] + label,
input[type=number]:disabled + label,
input[type=number][readonly="readonly"] + label,
input[type=search]:disabled + label,
input[type=search][readonly="readonly"] + label,
textarea.materialize-textarea:disabled + label,
textarea.materialize-textarea[readonly="readonly"] + label {
  color: rgba(0, 0, 0, 0.26); }
input:not([type]):focus:not([readonly]),
input[type=text]:focus:not([readonly]),
input[type=password]:focus:not([readonly]),
input[type=email]:focus:not([readonly]),
input[type=url]:focus:not([readonly]),
input[type=time]:focus:not([readonly]),
input[type=date]:focus:not([readonly]),
input[type=datetime-local]:focus:not([readonly]),
input[type=tel]:focus:not([readonly]),
input[type=number]:focus:not([readonly]),
input[type=search]:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 1px solid #3F75C5;
  box-shadow: 0 1px 0 0 #f22314; }
input:not([type]):focus:not([readonly]) + label,
input[type=text]:focus:not([readonly]) + label,
input[type=password]:focus:not([readonly]) + label,
input[type=email]:focus:not([readonly]) + label,
input[type=url]:focus:not([readonly]) + label,
input[type=time]:focus:not([readonly]) + label,
input[type=date]:focus:not([readonly]) + label,
input[type=datetime-local]:focus:not([readonly]) + label,
input[type=tel]:focus:not([readonly]) + label,
input[type=number]:focus:not([readonly]) + label,
input[type=search]:focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label {
  color: #3F75C5; }
input:not([type]).valid, input:not([type]):focus.valid,
input[type=text].valid,
input[type=text]:focus.valid,
input[type=password].valid,
input[type=password]:focus.valid,
input[type=email].valid,
input[type=email]:focus.valid,
input[type=url].valid,
input[type=url]:focus.valid,
input[type=time].valid,
input[type=time]:focus.valid,
input[type=date].valid,
input[type=date]:focus.valid,
input[type=datetime-local].valid,
input[type=datetime-local]:focus.valid,
input[type=tel].valid,
input[type=tel]:focus.valid,
input[type=number].valid,
input[type=number]:focus.valid,
input[type=search].valid,
input[type=search]:focus.valid,
textarea.materialize-textarea.valid,
textarea.materialize-textarea:focus.valid {
  border-bottom: 1px solid #4CAF50;
  box-shadow: 0 1px 0 0 #4CAF50; }
input:not([type]).valid + label:after,
input:not([type]):focus.valid + label:after,
input[type=text].valid + label:after,
input[type=text]:focus.valid + label:after,
input[type=password].valid + label:after,
input[type=password]:focus.valid + label:after,
input[type=email].valid + label:after,
input[type=email]:focus.valid + label:after,
input[type=url].valid + label:after,
input[type=url]:focus.valid + label:after,
input[type=time].valid + label:after,
input[type=time]:focus.valid + label:after,
input[type=date].valid + label:after,
input[type=date]:focus.valid + label:after,
input[type=datetime-local].valid + label:after,
input[type=datetime-local]:focus.valid + label:after,
input[type=tel].valid + label:after,
input[type=tel]:focus.valid + label:after,
input[type=number].valid + label:after,
input[type=number]:focus.valid + label:after,
input[type=search].valid + label:after,
input[type=search]:focus.valid + label:after,
textarea.materialize-textarea.valid + label:after,
textarea.materialize-textarea:focus.valid + label:after {
  content: attr(data-success);
  color: #4CAF50;
  opacity: 1; }
input:not([type]).invalid, input:not([type]):focus.invalid,
input[type=text].invalid,
input[type=text]:focus.invalid,
input[type=password].invalid,
input[type=password]:focus.invalid,
input[type=email].invalid,
input[type=email]:focus.invalid,
input[type=url].invalid,
input[type=url]:focus.invalid,
input[type=time].invalid,
input[type=time]:focus.invalid,
input[type=date].invalid,
input[type=date]:focus.invalid,
input[type=datetime-local].invalid,
input[type=datetime-local]:focus.invalid,
input[type=tel].invalid,
input[type=tel]:focus.invalid,
input[type=number].invalid,
input[type=number]:focus.invalid,
input[type=search].invalid,
input[type=search]:focus.invalid,
textarea.materialize-textarea.invalid,
textarea.materialize-textarea:focus.invalid {
  border-bottom: 1px solid #3F75C5;
  box-shadow: 0 1px 0 0 #3F75C5; }
input:not([type]).invalid + label:after,
input:not([type]):focus.invalid + label:after,
input[type=text].invalid + label:after,
input[type=text]:focus.invalid + label:after,
input[type=password].invalid + label:after,
input[type=password]:focus.invalid + label:after,
input[type=email].invalid + label:after,
input[type=email]:focus.invalid + label:after,
input[type=url].invalid + label:after,
input[type=url]:focus.invalid + label:after,
input[type=time].invalid + label:after,
input[type=time]:focus.invalid + label:after,
input[type=date].invalid + label:after,
input[type=date]:focus.invalid + label:after,
input[type=datetime-local].invalid + label:after,
input[type=datetime-local]:focus.invalid + label:after,
input[type=tel].invalid + label:after,
input[type=tel]:focus.invalid + label:after,
input[type=number].invalid + label:after,
input[type=number]:focus.invalid + label:after,
input[type=search].invalid + label:after,
input[type=search]:focus.invalid + label:after,
textarea.materialize-textarea.invalid + label:after,
textarea.materialize-textarea:focus.invalid + label:after {
  content: attr(data-error);
  color: #3F75C5;
  opacity: 1; }
input:not([type]) + label:after,
input[type=text] + label:after,
input[type=password] + label:after,
input[type=email] + label:after,
input[type=url] + label:after,
input[type=time] + label:after,
input[type=date] + label:after,
input[type=datetime-local] + label:after,
input[type=tel] + label:after,
input[type=number] + label:after,
input[type=search] + label:after,
textarea.materialize-textarea + label:after {
  display: block;
  content: "";
  position: absolute;
  top: 65px;
  opacity: 0;
  transition: .2s opacity ease-out, .2s color ease-out; }
.input-field {
  position: relative;
  margin-top: 1rem; }
.input-field label {
  color: #9e9e9e;
  position: absolute;
  top: 0.8rem;
  left: 0.75rem;
  font-size: 1rem;
  cursor: text;
  transition: .2s ease-out;
  font-weight: 400; }
.input-field label.active {
  font-size: 0.8rem;
  font-weight: 500;
  -webkit-transform: translateY(-140%);
  transform: translateY(-140%); }
.input-field .prefix {
  position: absolute;
  width: 3rem;
  font-size: 2rem;
  transition: color .2s; }
.input-field .prefix.active {
  color: #26a69a; }
.input-field .prefix ~ input,
.input-field .prefix ~ textarea {
  margin-left: 3rem;
  width: 92%;
  width: calc(100% - 3rem); }
.input-field .prefix ~ textarea {
  padding-top: .8rem; }
.input-field .prefix ~ label {
  margin-left: 3rem; }
@media only screen and (max-width: 992px) {
  .input-field .prefix ~ input {
    width: 86%;
    width: calc(100% - 3rem); } }
@media only screen and (max-width: 600px) {
  .input-field .prefix ~ input {
    width: 80%;
    width: calc(100% - 3rem); } }
.input-field input[type=search] {
  display: block;
  line-height: inherit;
  padding-left: 4rem;
  width: calc(100% - 4rem); }
.input-field input[type=search]:focus {
  background-color: #fff;
  border: 0;
  box-shadow: none;
  color: #444; }
.input-field input[type=search]:focus + label i,
.input-field input[type=search]:focus ~ .mdi-navigation-close,
.input-field input[type=search]:focus ~ .material-icons {
  color: #444; }
.input-field input[type=search] + label {
  left: 1rem; }
.input-field input[type=search] ~ .mdi-navigation-close,
.input-field input[type=search] ~ .material-icons {
  position: absolute;
  top: 0;
  right: 1rem;
  color: transparent;
  cursor: pointer;
  font-size: 2rem;
  transition: .3s color; }
textarea {
  width: 100%;
  height: 3rem;
  background-color: transparent; }
textarea.materialize-textarea {
  overflow-y: hidden;
  /* prevents scroll bar flash */
  padding: 1.6rem 0;
  /* prevents text jump on Enter keypress */
  resize: none;
  min-height: 3rem; }
.hiddendiv {
  display: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* future version of deprecated 'word-wrap' */
  padding-top: 1.2rem;
  /* prevents text jump on Enter keypress */ }
/*---------------FOOTER-------------------*/
footer {
  width: 100%;
  height: auto;
  background: linear-gradient(135deg, #0a1229 0%, #1F2F5D 100%);
  color: #94a3b8;
  border-top: 1px solid rgba(63, 117, 197, 0.3); }
  footer p {
    margin: 10px 0;
    line-height: 30px; }
#blog-header {
  width: 100%;
  height: 300px;
  position: relative;
  display: block;
  background: url("../images/blog-header.jpg") no-repeat center center fixed;
  background-size: cover; }
  #blog-header .overlay {
    width: 100%;
    height: 300px;
    background-color: rgba(66, 66, 66, 0.6); }
    #blog-header .overlay h1 {
      margin-top: 120px;
      font-size: 3em;
      font-weight: 500;
      color: #ffffff; }
  #blog-header .home-btn {
    width: 40px;
    position: fixed;
    left: 0;
    top: 125px;
    height: 40px;
    cursor: pointer;
    padding-top: 3px; }
    #blog-header .home-btn i {
      color: #ffffff;
      font-size: 25px; }
.blog-page {
  margin-top: 20px; }
  .blog-page .blog-posts-wrapper {
    margin-top: -8px; }
  .blog-page .pagination {
    margin: 30px 0 30px 0; }
  .blog-page .pagination li {
    display: inline-block;
    font-size: 1rem;
    font-weight: 300;
    padding: 0 10px;
    line-height: 30px;
    text-align: center; }
  .blog-page .pagination li a {
    color: #2d3a5a; }
  .blog-page .pagination li.active a {
    color: #fff; }
  .blog-page .pagination li.active {
    background-color: #3F75C5; }
  .blog-page .pagination li.disabled a {
    cursor: default;
    color: #999; }
  .blog-page .pagination li i {
    font-size: 2.2rem;
    vertical-align: middle; }
  .blog-page .pagination li.pages ul li {
    display: inline-block;
    float: none; }
  @media only screen and (max-width: 992px) {
    .blog-page .pagination {
      width: 100%; }
    .blog-page .pagination li.prev,
    .blog-page .pagination li.next {
      width: 10%; }
    .blog-page .pagination li.pages {
      width: 80%;
      overflow: hidden;
      white-space: nowrap; } }
  .blog-page .sidebar {
    width: 100%;
    background-color: transparent;
    position: relative; }
    @media screen and (max-width: 991px) {
      .blog-page .sidebar {
        margin-top: 30px; } }
    .blog-page .sidebar .card {
      padding: 15px 15px;
      margin: 0 0 20px 0; }
    .blog-page .sidebar .search {
      width: 100%;
      height: auto;
      background-color: #ffffff; }
      .blog-page .sidebar .search form .search-btn {
        background-color: #3F75C5;
        z-index: 0; }
        .blog-page .sidebar .search form .search-btn i {
          font-size: 20px; }
    .blog-page .sidebar .title {
      width: 100%;
      height: auto;
      margin: 0;
      padding: 15px 15px;
      font-weight: 400;
      color: #ffffff;
      background-color: #424242;
      line-height: 30px;
      font-size: 1.2em; }
    .blog-page .sidebar .category {
      padding-top: 15px; }
      .blog-page .sidebar .category li {
        display: inline-block;
        background-color: #ffffff;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        padding: 6px 14px;
        margin: 0 10px 15px 0; }
        .blog-page .sidebar .category li a {
          font-weight: 300;
          color: #2d3a5a; }
    .blog-page .sidebar .sidebar-post a {
      color: #2d3a5a; }
      .blog-page .sidebar .sidebar-post a h6 {
        margin-left: -15px;
        line-height: 1.3;
        font-weight: 400;
        font-size: 1em; }
      .blog-page .sidebar .sidebar-post a:hover {
        text-decoration: underline;
        color: #3F75C5; }
    .blog-page .sidebar .sidebar-post p {
      margin-left: -15px;
      font-weight: 300;
      font-size: 1em;
      line-height: 1.3; }
    .blog-page .sidebar .sidebar-post .author-profile {
      margin-top: 20px;
      margin-bottom: 30px; }
    .blog-page .sidebar .sidebar-post .author-info {
      margin: 0;
      padding-bottom: 10px; }
    .blog-page .sidebar .sidebar-post .visit-profile {
      padding: 0px 30px;
      margin: 28px 0;
      color: #ffffff; }
      .blog-page .sidebar .sidebar-post .visit-profile:hover {
        color: #ffffff;
        text-decoration: none; }
    .blog-page .sidebar .sidebar-post .follow-social {
      margin: 10px 10px;
      color: #424242;
      font-size: 30px; }
      .blog-page .sidebar .sidebar-post .follow-social:hover {
        color: #3F75C5; }
.full-post {
  padding-bottom: 30px; }
  .full-post:hover {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }
  .full-post .full-post-p {
    margin-top: 15px;
    padding: 0; }
  .full-post .post-title h5 {
    margin: 0;
    line-height: 1.5;
    font-size: 2em;
    font-weight: 400;
    color: #2d3a5a;
    padding: 20px 0; }
  .full-post .post-subtitle {
    margin: 10px 0 -10px 0;
    line-height: 1.5;
    font-size: 1.25em;
    font-weight: 400;
    color: #2d3a5a; }
  .full-post .post-list {
    margin-top: 15px;
    padding-left: 15px; }
    .full-post .post-list li {
      list-style: circle;
      font-weight: 300; }
  .full-post .tags {
    padding-left: 20px; }
    .full-post .tags i {
      font-size: 25px;
      padding-top: 5px;
      vertical-align: middle; }
    .full-post .tags span {
      font-weight: 400;
      font-size: 1em;
      margin-left: 20px; }
.comment-box, .posted-comment {
  padding: 20px 20px;
  font-weight: 300;
  color: #2d3a5a;
  height: auto; }
  .comment-box h6, .posted-comment h6 {
    font-weight: 400;
    color: #2d3a5a; }
.posted-comment .media-body {
  padding-left: 10px; }
  .posted-comment .media-body span {
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 1px; }
  .posted-comment .media-body .comment-icons li {
    margin-right: 10px; }
    .posted-comment .media-body .comment-icons li i {
      color: #2d3a5a;
      font-size: 20px; }
      .posted-comment .media-body .comment-icons li i:hover {
        color: #3F75C5; }
/*# sourceMappingURL=style.css.map */



.one-row {display:flex}

.hero-flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
}
.hero-left-col {
  flex: 1.5;
  min-width: 320px;
  text-align: left;
}
.hero-right-col {
  flex: 1;
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: flex-end;
  min-width: 320px;
  flex-wrap: nowrap;
}
.hero-left-col h1 {
  font-weight: 800;
  margin: 0 0 12px 0 !important;
  font-size: 2.1em !important;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.3px;
  white-space: nowrap;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  /* Stop subpixel jitter on this element */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hero-left-col h4 {
  margin: 0 0 10px 0 !important;
  font-size: 1.3em !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
.hero-left-col #typist-element {
  font-weight: 300 !important;
  font-size: 1.15em !important;
  margin: 0 !important;
  background: linear-gradient(90deg, #3F75C5 0%, #00b0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
  /* Lock height so text changes don't cause vertical reflow/shake */
  min-height: 2.1em;
  display: block;
  overflow: hidden;
  /* Isolate layout changes to this element only */
  contain: layout style;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hero-glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 16px 24px;
  display: flex;
  gap: 15px;
  align-items: center;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}
.hero-glass-card:hover {
  border-color: rgba(0, 176, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(0, 176, 255, 0.05);
  transform: translateY(-2px);
}
.header-badge {
  width: 115px;
  height: 115px;
  object-fit: cover;
  display: inline-block;
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.header-badge:hover {
  transform: scale(1.06);
}

@media only screen and (max-width: 991px) {
  .hero-left-col {
    flex: 1 1 100%;
    text-align: center;
  }
  .hero-right-col {
    flex: 1 1 100%;
    justify-content: center;
    margin-top: 15px;
  }
}
@media only screen and (max-width: 767px) {
  #header .overlay {
    height: auto !important;
    min-height: 480px !important;
    padding-bottom: 120px !important;
  }
  .hero-left-col h1 {
    font-size: 1.8em !important;
    white-space: normal !important;
  }
  .header-badge {
    width: 80px;
    height: 80px;
  }
}
@media only screen and (max-width: 480px) {
  .hero-left-col h1 {
    font-size: 1.6em !important;
  }
}

/* ==========================================================================
   AI LAB & AIOPS ADDITIONAL STYLES
   ========================================================================== */

/* Glassmorphism Cards */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 25px;
  transition: all 0.3s ease;
  margin-bottom: 25px;
  height: calc(100% - 25px); /* Ensure equal heights in row */
}
.glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(31, 47, 93, 0.2);
  border-color: rgba(63, 117, 197, 0.3);
}

/* Gradient Text */
.gradient-text {
  background: linear-gradient(135deg, #3F75C5 0%, #00b0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* Terminal Console Widget (Dark Theme) */
.terminal-console {
  background-color: #1a1a1a;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  font-family: 'Consolas', 'Courier New', Courier, monospace;
  overflow: hidden;
  margin-top: 20px;
  border: 1px solid #2d2d2d;
  width: 100%;
}
.terminal-header {
  background-color: #2b2b2b;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #333333;
}
.terminal-buttons {
  display: flex;
  gap: 6px;
}
.terminal-btn {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.terminal-btn.red { background-color: #ff5f56; }
.terminal-btn.yellow { background-color: #ffbd2e; }
.terminal-btn.green { background-color: #27c93f; }
.terminal-title {
  color: #8c8c8c;
  font-size: 11px;
  margin: 0 auto;
  font-family: inherit;
}
.terminal-body {
  padding: 15px;
  height: 220px;
  overflow-y: auto;
  color: #39ff14; /* Neon Green */
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
}
.terminal-input-line {
  color: #ffffff;
  margin-top: 8px;
}
.terminal-cursor {
  display: inline-block;
  width: 6px;
  height: 13px;
  background-color: #39ff14;
  vertical-align: middle;
  margin-left: 2px;
  animation: blink-cursor 1s step-end infinite;
}
@keyframes blink-cursor {
  from, to { background-color: transparent }
  50% { background-color: #39ff14 }
}

/* Terminal presets styling */
.terminal-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
  justify-content: center;
}
.suggestion-chip {
  background-color: #f0f0f0;
  border: 1px solid #e0e0e0;
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #424242;
  font-weight: 500;
  outline: none;
}
.suggestion-chip:hover {
  background-color: #3F75C5;
  color: #ffffff;
  border-color: #3F75C5;
  transform: translateY(-2px);
}
.suggestion-chip:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* AIOps Status Grid & Glow Effects */
.status-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 15px;
}
.status-card {
  flex: 1 1 calc(50% - 8px);
  background: #ffffff;
  border-radius: 8px;
  padding: 15px;
  border: 1px solid #eeeeee;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
@media only screen and (max-width: 480px) {
  .status-card {
    flex: 1 1 100%;
  }
}
.glow-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.glow-dot {
  width: 8px;
  height: 8px;
  background-color: #2ec866;
  border-radius: 50%;
  box-shadow: 0 0 6px #2ec866;
  position: relative;
  z-index: 2;
}
.glow-pulse {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #2ec866;
  opacity: 0.35;
  border-radius: 50%;
  animation: pulse-ring 2s infinite ease-out;
  z-index: 1;
}
.glow-dot.blue {
  background-color: #3F75C5;
  box-shadow: 0 0 6px #3F75C5;
}
.glow-pulse.blue {
  background-color: #3F75C5;
}
@keyframes pulse-ring {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
.status-info {
  text-align: left;
}
.status-info h5 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #333333;
}
.status-info p {
  margin: 1px 0 0 0;
  font-size: 12px;
  color: #777777;
}

/* SLM Cost Savings Simulator Card */
.simulator-card {
  height: 100%;
}
.simulator-control {
  margin-bottom: 20px;
  text-align: left;
}
.simulator-control label {
  font-size: 13px;
  color: #555555;
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
}
.simulator-control input[type="range"] {
  width: 100%;
  accent-color: #3F75C5;
  background: #e0e0e0;
  height: 6px;
  border-radius: 3px;
  outline: none;
  border: none;
  cursor: pointer;
}
.simulator-results {
  background-color: #f5f8fa;
  border-radius: 8px;
  padding: 15px;
  margin-top: 15px;
  border: 1px solid #e6ecf0;
}
.result-metric {
  text-align: center;
}
.result-metric .metric-val {
  font-size: 24px;
  font-weight: 700;
  color: #3F75C5;
  margin-bottom: 2px;
}
.result-metric .metric-label {
  font-size: 11px;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.compliance-badge {
  background: #d4edda;
  color: #155724;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
  margin-top: 10px;
}

/* Equal height columns on desktop screens */
@media (min-width: 992px) {
  .flex-row {
    display: flex;
    flex-wrap: wrap;
  }
  .flex-row > div {
    display: flex;
  }
  .flex-row .glass-card {
    width: 100%;
    height: 100%;
    margin-bottom: 0;
  }
}

/*==================================================
                 AI CHATBOT WIDGET
====================================================*/
#ai-chat-widget {
  position: fixed;
  bottom: 30px;
  left: 30px;
  z-index: 9999;
  font-family: 'Roboto', sans-serif;
}
#chat-toggle-btn {
  background-color: #3F75C5;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 129, 201, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#chat-toggle-btn:hover {
  background-color: #00b0ff;
  transform: scale(1.05);
}
#chat-toggle-btn i {
  font-size: 28px;
  color: #ffffff;
  line-height: 60px;
  margin: 0;
}
#chat-window {
  position: absolute;
  bottom: 80px;
  left: 0;
  width: 360px;
  height: 500px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: bottom left;
}
#ai-chat-widget.chat-closed #chat-window {
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}
#ai-chat-widget.chat-open #chat-window {
  transform: scale(1);
  opacity: 1;
  pointer-events: all;
}
#chat-header {
  background-color: #1a1a1a;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.chat-title-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-status-dot {
  width: 8px;
  height: 8px;
  background-color: #00e676;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px #00e676;
  animation: pulse-green 2s infinite;
}
.chat-title-text {
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
}
.chat-mode-selector {
  display: flex;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.mode-btn {
  background: none;
  border: none;
  color: #888888;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.mode-btn.active {
  background-color: #3F75C5;
  color: #ffffff;
}
#chat-messages-container {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(245, 247, 250, 0.5);
}
.chat-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  word-wrap: break-word;
}
.chat-msg.bot {
  background-color: #ffffff;
  color: #333333;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.chat-msg.user {
  background-color: #3F75C5;
  color: #ffffff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 129, 201, 0.15);
}
.chat-msg.system-error {
  background-color: #ffebee;
  color: #c62828;
  align-self: center;
  font-size: 12px;
  text-align: center;
  border-radius: 8px;
  max-width: 90%;
  border: 1px solid #ffcdd2;
}
.chat-msg.typing {
  background-color: #ffffff;
  color: #888888;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 18px;
}
.typing-dot {
  width: 6px;
  height: 6px;
  background-color: #888888;
  border-radius: 50%;
  animation: typing-bounce 1.4s infinite ease-in-out both;
}
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

#chat-input-container {
  padding: 12px;
  background-color: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  gap: 8px;
  align-items: center;
}
#chat-user-input {
  flex: 1;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  background-color: #f9f9f9 !important;
  border-radius: 20px !important;
  padding: 0 15px !important;
  height: 38px !important;
  font-size: 13px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
#chat-user-input:focus {
  border-color: #3F75C5 !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
}
#chat-send-btn {
  background-color: #3F75C5;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease;
}
#chat-send-btn:hover {
  background-color: #00b0ff;
}
#chat-send-btn i {
  color: #ffffff;
  font-size: 16px;
  line-height: 38px;
  margin: 0;
}

@keyframes typing-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1.0); }
}

@keyframes pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.4); }
  70% { box-shadow: 0 0 0 8px rgba(0, 230, 118, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); }
}

@media (max-width: 480px) {
  #ai-chat-widget {
    bottom: 20px;
    left: 20px;
  }
  #chat-window {
    width: calc(100vw - 40px);
    height: 450px;
  }
}

/* ====================================================
                 AIOPS SVG FLOWCHART STYLES
====================================================*/
.flowchart-svg-container svg {
  overflow: visible;
}
.flow-line {
  stroke-dasharray: 6, 4;
  animation: flow-dash 12s linear infinite;
}
@keyframes flow-dash {
  to {
    stroke-dashoffset: -100;
  }
}
.flow-node rect {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  fill: #ffffff;
}
.flow-node:hover rect {
  fill: rgba(0, 129, 201, 0.04);
  transform: translateY(-2px);
  filter: drop-shadow(0 4px 10px rgba(0, 129, 201, 0.15));
}
.flow-node[data-step="security"]:hover rect {
  fill: rgba(255, 189, 46, 0.04);
  filter: drop-shadow(0 4px 10px rgba(255, 189, 46, 0.15));
}
.flow-node[data-step="audit"]:hover rect {
  fill: rgba(0, 230, 118, 0.04);
  filter: drop-shadow(0 4px 10px rgba(0, 230, 118, 0.15));
}
.flow-node text {
  transition: all 0.3s ease;
}
.flow-node:hover text {
  transform: translateY(-1px);
}
/* ====================================================
             ROI METRIC CARDS
==================================================== */
.roi-metric-card {
  background: #f8fafc;
  border: 1px solid #e8edf2;
  border-radius: 12px;
  padding: 10px 8px 8px;
  text-align: center;
  transition: box-shadow 0.2s ease;
}
.roi-metric-card:hover {
  box-shadow: 0 4px 12px rgba(0,129,201,0.12);
}
.roi-metric-icon {
  font-size: 18px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}

/* ====================================================
             AI AGENT CHAT BUTTON STYLES
==================================================== */
#chat-toggle-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
#chat-toggle-btn {
  background: linear-gradient(135deg, #1F2F5D 0%, #3F75C5 60%, #00b4d8 100%) !important;
  box-shadow: 0 4px 20px rgba(0, 180, 216, 0.45) !important;
  position: relative;
  z-index: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: visible !important;
}
/* Pulse ring - perfectly centred via ::before on the button */
#chat-toggle-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(0, 229, 255, 0.75);
  animation: ai-pulse-ring 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes ai-pulse-ring {
  0%   { transform: scale(1);   opacity: 0.85; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
#chat-toggle-btn:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 28px rgba(0, 180, 216, 0.65), 0 0 18px rgba(0, 229, 255, 0.3) !important;
}
#chat-toggle-btn svg {
  display: block;
  margin: auto;
  filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.8));
}
.ai-agent-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #3F75C5;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,129,201,0.25);
  border-radius: 20px;
  padding: 2px 8px;
  box-shadow: 0 2px 8px rgba(0,129,201,0.15);
  white-space: nowrap;
}


/* ====================================================
             v1.2.0 - TECH STACK GRID & HERO TAGLINE
==================================================== */
.hero-tagline {
  font-size: 15px;
  color: rgba(255,255,255,0.88);
  margin-top: 12px;
  letter-spacing: 0.3px;
}
.hero-tagline strong { color: #00e5ff; font-weight: 700; }

.tech-stack-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  height: 100%;
}
.tech-stack-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.13);
}
.tech-stack-header {
  padding: 18px 16px 14px;
  text-align: center;
  color: #fff;
}
.tech-stack-icon {
  font-size: 28px;
  display: block;
  margin-bottom: 6px;
}
.tech-stack-header h6 {
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.tech-tag-list {
  list-style: none;
  padding: 14px 16px;
  margin: 0;
}
.tech-tag-list li {
  font-size: 13px;
  color: #444;
  padding: 5px 0;
  border-bottom: 1px solid #f0f4f8;
  display: flex;
  align-items: center;
}
.tech-tag-list li:last-child { border-bottom: none; }
.tech-tag-list li::before {
  content: '\203A';
  color: #3F75C5;
  font-size: 14px;
  font-weight: 600;
  margin-right: 7px;
  flex-shrink: 0;
}

/* ====================================================
             v1.2.1 - ABOUT STATS ROW & CONTACT PILLS
==================================================== */
.about-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 20px auto 24px;
  background: #f5f8fb;
  border: 1px solid #e6ecf2;
  border-radius: 12px;
  padding: 18px 10px;
  max-width: 520px;
}
.about-stat-item {
  flex: 1;
  text-align: center;
}
.about-stat-num {
  font-size: 26px;
  font-weight: 800;
  color: #3F75C5;
  line-height: 1.1;
}
.about-stat-label {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 4px;
}
.about-stat-divider {
  width: 1px;
  height: 40px;
  background: #dce6ef;
  flex-shrink: 0;
}

/* Contact pills */
.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f5f8fa;
  border: 1px solid #dde6ef;
  border-radius: 30px;
  padding: 11px 24px;
  text-decoration: none;
  color: #333;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
}
.contact-pill:hover {
  background: #e8f0f8;
  color: #3F75C5;
  border-color: #b3cfe8;
  text-decoration: none;
}
.contact-pill-blue {
  background: #0077b5;
  border-color: #0077b5;
  color: #fff !important;
}
.contact-pill-blue:hover {
  background: #005f8e;
  border-color: #005f8e;
  color: #fff !important;
}
.contact-pill-gradient {
  background: linear-gradient(135deg, #3F75C5, #00b4d8);
  border-color: transparent;
  color: #fff !important;
}
.contact-pill-gradient:hover {
  background: linear-gradient(135deg, #1F2F5D, #3F75C5);
  color: #fff !important;
}
.contact-pill i, .contact-pill-blue i, .contact-pill-gradient i {
  font-size: 16px;
}

@media (min-width: 992px) {
  #flowchart-detail-panel {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}



/* ============================================================
   STICKY HORIZONTAL NAV BAR (appears on scroll)
   ============================================================ */
.sticky-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  height: 54px;
}
.sticky-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.sticky-nav-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #3F75C5;
  object-fit: cover;
}
.sticky-nav-name {
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95em;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.sticky-nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
  flex-wrap: nowrap;
}
.sticky-nav-links li a {
  color: rgba(255,255,255,0.85);
  font-size: 0.82em;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 4px;
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.sticky-nav-links li a:hover {
  color: #ffffff;
  background: rgba(63, 117, 197, 0.25);
}
.sticky-nav-burger {
  display: none;
  color: #ffffff;
  font-size: 24px;
  cursor: pointer;
}
@media only screen and (max-width: 860px) {
  .sticky-nav-links { display: none; }
  .sticky-nav-burger { display: block; }
}


/* Curve all buttons and input wrappers for a premium modern feel */
.btn, .custom-btn {
  border-radius: 8px !important;
}