@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&display=swap');

/* Your existing styles (kept) */
.dropdown-toggle::after { display:none !important; }    
.blog-body-section{ margin-top: 5% !important; margin-bottom: 5% !important; padding-left:10% !important; padding-right:10% !important; }
.blog-body-section .post-header { display:none !important }
.blog-body-section .hs-blog-social-share { display:none !important }
p { font-family: "Open Sans", sans-serif !important; line-height: 30px !important; }
.blog-details-page{ background-size: cover; box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5); }
.blog-title { color: #FFFFFF; font-family: "Oswald", Sans-serif !important; font-size: 90px !important; font-weight: 600 !important; letter-spacing: 0px !important; line-height: 1.4em !important; }
.white { color: white !important; }
.blog-breadcrumb, .blog-breadcrumb #hs_cos_wrapper_name { font-family: "Open Sans", sans-serif !important; font-style:italic !important; font-size:14px !important; text-align:bottom !important; }
.nav>li>a { padding: 1px 16px !important; font-size: 14px !important; font-weight: 500 !important; }
/* shows the dropdown menu on hover */

.dropdown-menu li { border-bottom: 1px solid #eee; }
.dropdown-menu li:hover { background-color: #1e73be; padding-left: 5px; }
.dropdown-menu li a { color: #555 !important; padding: 12px 25px 12px 22px; }
.dropdown-menu li a:hover { background-color: #f5f5f5 !important; }
.dropdown-item { white-space: normal !important; }
.nav-icon{ width: 17px !important; height: 17px !important; }
.navbar-toggler { border: 0px !important; }
.dropdown-toggle::after{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.button { border: none; color: white; padding: 1rem 2.4rem !important; text-align: center; text-decoration: none; display: inline-block; font-size: 12px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; }
.button-search { color: white; font-weight: 500; padding: 8px 18px; background: #1E73BE; background: linear-gradient(to left, #1E73BE 50%, #e3ce00 50%) right; background-size: 200%; transition: .5s ease-out; }
.button-search:hover { background-position: left; }
.dropdown-toggle::after { vertical-align: .200em !important; font-size: 20px !important; }
@media only screen and (max-width: 767px) {
  .navbar{ margin-top:0px !important; }
  .fixed-top { background-color: white !important; padding-top: 15px !important; }
  .blog-body-section{ margin-top: 5% !important; margin-bottom: 5% !important; padding-left:5% !important; padding-right:5% !important; }
  .blog-title { font-size: 30px !important; font-weight: 600 !important; letter-spacing: 0px !important; line-height: 1.4em !important; }
  .dropdown-toggle::after { display:inline-block !important; } 
  .nav>li>a { padding: 10px 16px !important; font-weight: 600; }
  .button-search { display: none !important; } 
  .sticky-body-padding { padding-top:50px; }
  .dropdown-menu li:hover { background-color: white; padding-left: 5px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .blog-body-section{ margin-top: 5% !important; margin-bottom: 5% !important; padding-left:3% !important; padding-right:3% !important; }
}
.button-blog { background-color: white; color: black; font-weight: 700; border: 2px solid #fce500; margin-top: -15px; margin-right: -25px; padding: 8px 25px; }
.apply-now-button { background-color: rgba(255, 255, 255, 1.0); border: 2px solid #fce500; color: #000000; font-size: 16px; font-style: normal; font-weight: 700; text-decoration: none; padding: 16px 24px; margin-top:15px; margin-bottom:10px; width: 200px; max-width: 100%; }
.apply-now-button:hover { background-color: #fce500; color: white; }
.button-blog:hover { background-color: #fce500; color: white; }
.hs-button { background-color: #1E73BE;; color: white !important; font-weight: 700; border: 2px solid #fce500; margin-top: 15px; padding: 8px 18px; text-decoration: none !important; font-weight: 600 !important; font-size: 18px !important; }
.hs-button:hover { background-color: #e3ce00; color: black; }
.hs-button:click { background-color: #50EED3; }
/* adds some margin below the link sets  */
.navbar .dropdown-menu div[class*="col"] { margin-bottom:1rem; }
/* breakpoint and up - mega dropdown styles */
@media screen and (min-width: 1200px) {
  @media (hover: hover) and (pointer: fine) {
  .navbar .dropdown:hover .dropdown-menu,
  .navbar .dropdown .dropdown-menu:hover {
    display:block;
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.3s linear;
    border: 0px 1px 1px 1px solid #ddd;
    box-shadow: 1px 1px 35px rgba(0, 0, 0, 0.08);
    min-width: 260px;
    top: 25px;
    border-radius: 0px 0px 5px 5px;
  }
}
  .navbar { padding-top:10px; padding-bottom:0px; background-color: white; border: 0px; }
  .navbar .nav-item { padding:.1rem .1rem; margin:0 .1rem; }
  .navbar .dropdown-menu { z-index: 9; left:0; right:0; display:block; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.3s linear; border: 0px solid rgba(0,0,0,.15); }
  .fixed-top .dropdown-menu { top:70px; }
}
.navbar { margin-top: 0px !important; margin-bottom: -2px !important; font-size: 16x !important; }
.navbar-default a { font-family: "Open Sans", sans-serif !important; text-decoration: none; display: block; font-size: 14x !important; font-weight: 500; color: black !important; padding-top: 8px; padding-bottom: 8px; padding-left: 8px; text-decoration: none !important; }
.hs-top-nav a { font-family: "Plus Jakarta Sans", sans-serif !important; text-decoration: none; display: block; font-size: 14px; font-weight: 500; color: white !important; padding-top: 2px; padding-bottom: 2px; padding-left: 0px; padding-right: 5px; text-decoration: none !important; }
.navbar-default a:hover { color: #009ca8  !important; background-color: white !important; }
.navbar-default .navbar-nav>a:focus, .navbar-default .navbar-nav>a:hover { background-color: white !important; }
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { background-color: white !important; }
@media (min-width: 1200px) { .container { min-width: 94% !important; margin-left: 3% !important; margin-right: 3% !important; } .navbar-expand-xl .navbar-collapse { margin-right: -1.9%; } }
@media (min-width: 1200px) { .navbar-header { float: left; } }
.dropdown-menu{ border-color: white !important; }
.hs-top-nav .fa { font-size: 18px; color: black !important: }
.hs-top-nav .fa: hover { font-size: 18px; color: red !important: }
.hs-top-nav a:hover { color:white !important; }
.container-fluid { margin-left: 0px !important; margin-right: 0px !important; padding-left: 0px !important; padding-right: 0px !important; }
.navbar-brand>img { display: block; width: 180px; }
.navbar-collapse { padding-right: 0px !important; padding-left: 0px !important; }
.navbar .dropdown-menu { font-size: 14px !important; }
.caret { width: 9px !important; height: 7px !important; }
@media only screen and (max-width: 1200px) {
  .desktop { display: none; }
  .mobile { display: block; }
  .button-search { margin-top: 0px; }
  .button-blog { margin-top: 0px; }
  .navbar-nav{ margin-top:15px !important; }
  .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header{ margin-left: 0px !important; margin-right: 0px !important; }
  .navbar-collapse.in{ overflow-y: inherit !important; }
  .navbar-brand>img { width: 180px; }
  .header-first-dropdown { padding-left: 0%; }
  h1 { font-family: "Open Sans", sans-serif !important; font-weight: 700 !important; line-height: 120% !important; }
  h2, h2 span, h2 strong { font-family: "Open Sans", sans-serif !important; font-size: 24px !important; font-style: normal !important; font-weight: 600 !important; line-height: 120% !important; }
  h3, h3 span, h3 strong { font-family: "Open Sans", sans-serif !important; color: #074450 !important; font-size: 20px !important; font-style: normal !important; font-weight: 600 !important; line-height: 120% !important; }
  h4, h4 span, h4 strong { font-family: "Open Sans", sans-serif !important; font-size: 18px !important; font-style: normal !important; font-weight: 600 !important; line-height: 120% !important; }  
  h5, h5 span, h5 strong { font-family: "Open Sans", sans-serif !important; font-size: 16px !important; font-style: normal !important; font-weight: 600 !important; line-height: 120% !important; }  
  h6, h6 span, h6 strong { font-family: "Open Sans", sans-serif !important; font-size: 14px !important; font-style: normal !important; font-weight: 600 !important; line-height: 120% !important; }    
  blockquote p,  blockquote p span,  blockquote p strong,  blockquote p li{ font-size: 18px !important; font-style: normal !important; font-weight: 500 !important; line-height: 160% !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  h1 { font-family: "Plus Jakarta Sans", sans-serif !important; font-size: 40px !important; font-weight: 700 !important; line-height: 120% !important; }
  h2, h2 span, h2 strong { font-family: "Open Sans", sans-serif !important; font-size: 36px !important; font-style: normal !important; font-weight: 700 !important; line-height: 120% !important; }
  h3, h3 span, h3 strong { font-family: "Open Sans", sans-serif !important; font-size: 24px !important; font-style: normal !important; font-weight: 700 !important; line-height: 120% !important; }
  h4, h4 span, h4 strong { font-family: "Open Sans", sans-serif !important; font-size: 22px !important; font-style: normal !important; font-weight: 700 !important; line-height: 120% !important; }  
  h5, h5 span, h5 strong { font-family: "Open Sans", sans-serif !important; font-size: 20px !important; font-style: normal !important; font-weight: 700 !important; line-height: 120% !important; }  
  h6, h6 span, h6 strong { font-family: "Open Sans", sans-serif !important; font-size: 18px !important; font-style: normal !important; font-weight: 700 !important; line-height: 120% !important; }  
}
@media only screen and (min-width: 1200px) {
  .desktop { display: block; }
  .mobile { display: none; }
  .header-first-dropdown { padding-left: 26% !important; }
  h1 { font-family: "Open Sans", sans-serif !important; font-weight: 700 !important; line-height: 120% !important; }
  h2, h2 span, h2 strong { font-family: "Open Sans", sans-serif !important; font-size: 36px !important; font-style: normal !important; line-height: 120% !important; font-weight: bold !important; }
  h3, h3 span, h3 strong { font-family: "Open Sans", sans-serif !important; font-size: 24px !important; font-style: normal !important; font-weight: bold !important; line-height: 120% !important; }
  h4, h4 span, h4 strong { font-family: "Open Sans", sans-serif !important; font-size: 22px !important; font-style: normal !important; font-weight: 700 !important; line-height: 120% !important; }  
  h5, h5 span, h5 strong { font-family: "Open Sans", sans-serif !important; font-size: 20px !important; font-style: normal !important; font-weight: 700 !important; line-height: 120% !important; }  
  h6, h6 span, h6 strong { font-family: "Open Sans", sans-serif !important; font-size: 18px !important; font-style: normal !important; font-weight: 700 !important; line-height: 120% !important; }   
  blockquote p,  blockquote p span,  blockquote p strong,  blockquote p li{ font-size: 24px !important; font-style: normal !important; font-weight: 500 !important; line-height: 160% !important; }
}

/* ==========================================
   SOLUTIONS SUBMENU — Desktop + Mobile slide
   ========================================== */
#blogmenu .solutions-menu .dropdown-submenu { position: relative; }
#blogmenu .solutions-menu .dropdown-submenu > .dropdown-menu{
  position: absolute; top: 0; left: 100%; margin-top: -1px; display: none; min-width: 260px;
}
#blogmenu .solutions-menu > .dropdown-menu { display: none; } /* keep hidden until hover */
@media (hover: hover) and (pointer: fine) {
  #blogmenu .solutions-menu:hover > .dropdown-menu { display: block; }
  #blogmenu .solutions-menu .dropdown-submenu:hover > .dropdown-menu { display: block; }
}
#blogmenu .solutions-menu .dropdown-menu.show { display:block; z-index:1050; }
@media (max-width: 991.98px){
  #blogmenu .solutions-menu .dropdown-submenu > .dropdown-menu{
    position: static; left:auto; top:auto; width:100%;
    margin:.25rem 0 .5rem 1rem; border:0; box-shadow:none; padding:.25rem 0;
    display:block; height:0; overflow:hidden; opacity:0; transition:height .25s ease, opacity .2s ease;
  }
  #blogmenu .solutions-menu .dropdown-submenu > .dropdown-menu.show{ height:auto; opacity:1; overflow:visible; }
  #blogmenu .solutions-menu .dropdown-submenu > .dropdown-menu.animating{ overflow:hidden; }
}

/* ==========================================
   MOBILE CHEVRONS — fixed position + rotate
   Applies to:
   - Main dropdown toggles (all menus)
   - Submenu triggers under SOLUTIONS
   ========================================== */
@media (max-width: 991.98px){
  /* Reserve space so icon does not shift */
  #blogmenu .dropdown > a.dropdown-toggle,
  #blogmenu .solutions-menu .dropdown-submenu > a {
    position: relative;
    padding-right: 2rem !important; /* space for chevron */
  }

  /* Override earlier "display:none !important" for main toggles */
  #blogmenu .dropdown > a.dropdown-toggle::after {
    display:block !important;
    content:"";
    position:absolute;
    right:14px; top:50%;
    width:12px; height:12px;
    transform: translateY(-50%) rotate(0deg);
    transition: transform .2s ease;
    background-repeat:no-repeat;
    background-size:12px 12px;
    /* chevron-down SVG */
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path fill='black' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6z'/></svg>");
  }
  #blogmenu .dropdown > a.dropdown-toggle[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(180deg);
  }

  /* Submenu chevrons (they’re not .dropdown-toggle, so no conflict) */
  #blogmenu .solutions-menu .dropdown-submenu > a::after {
    content:"";
    position:absolute;
    right:14px; top:50%;
    width:12px; height:12px;
    transform: translateY(-50%) rotate(0deg);
    transition: transform .2s ease;
    background-repeat:no-repeat;
    background-size:12px 12px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path fill='black' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6z'/></svg>");
  }
  #blogmenu .solutions-menu .dropdown-submenu > a[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(180deg);
  }
}








@media (min-width: 992px) {
  #blogmenu .solutions-menu .dropdown-submenu > a.dropdown-item {
    position: relative;
    padding-right: 1.8rem !important;
  }
  #blogmenu .solutions-menu .dropdown-submenu > a.dropdown-item::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'><path fill='black' d='M9.29 6.71L13.58 11L9.29 15.29L10.71 16.71L16.41 11L10.71 5.29z'/></svg>");
  }
 
}