@import url('https://fonts.googleapis.com/css2?family=K2D:wght@100;200;300;400;500;600;700;800&display=swap');

@import "../node_modules/bootstrap/scss/mixins/banner";

@include bsBanner("");

// -- Prefix for :root CSS variables
$variable-prefix: blg- !default;

// -- Custom colors
$blg-oxford-blue: hsla(222, 47%, 11%, 1);
$blg-oxford-blue-2: hsla(222, 47%, 11%, 1);
$blg-bg-oxford-blue-2: hsla(222, 47%, 11%, 1);
$blg-skyblue:#0bd1d1;
$blg-gray: #808080;
$blg-lightpurple: #65338E;
$blg-lightblue: #1B93BC;
$blg-naviblue: #000033;
$blg-dimblue: #385A6D;
$blg-darkpurple: #8E3C84;
$blg-graytext: #777777;
$blg-lightgray: #f7f7f7;
$blg-white: #FFFFFF;
$blg-black:#000000;
// link-color
$blg-wild-blue-yonder: hsla(216, 33%, 68%, 1);
$blg-carolina-blue: hsla(199, 89%, 49%, 1);
// radius
$blg-radius-6: 6px;
$blg-radius-8: 8px;
$blg-radius-16: 16px;
$blg-radius-48: 48px;
$blg-radius-circle: 50%;
$blg-radius-pill: 200px;
  /** Border colors */
  $blg-border-wild-blue-yonder: hsla(216, 33%, 68%, 1);
  $blg-border-prussian-blue: hsla(216, 33%, 20%, 1);
  $blg-border-white: hsl(0, 0%, 100%);
  $blg-border-white-alpha-15: hsla(0, 0%, 100%, 0.15);

// gradient-color
$blg-gradient-1: linear-gradient(90deg, #0ea5ea, #0bd1d1 51%);
$blg-gradient-2: linear-gradient(90deg, #0ea5ea, #0bd1d1 51%, #0ea5ea);
$blg-gradient-3: linear-gradient(0deg, #000d1a, transparent);
// body-color
$blg-body-color: hsl(222deg 47% 11%);
// box-shadow
$blg-shadow-1: 0 8px 20px 0 hsla(0, 0%, 0%, 0.05);
$blg-shadow-2: 0px 3px 20px hsla(180, 90%, 43%, 0.2);
// custom-variable
  /** Text colors */
    /** Text colors */
  $blg-text-white: hsla(0, 0%, 100%, 1);
  $blg-text-alice-blue: hsla(216, 100%, 95%, 1);
  $blg-text-columbia-blue: hsla(199, 69%, 84%, 1);
  $blg-text-wild-blue-yonder: hsla(216, 33%, 68%, 1);
  $blg-text-carolina-blue: hsla(199, 89%, 49%, 1);
  $blg-text-shadow-blue: hsla(217, 24%, 59%, 1);
  $blg-text-slate-gray:hsla(217, 17%, 48%, 1);
  $blg-text-alice-blue: hsla(216, 100%, 95%, 1);
  $blg-text-columbia-blue: hsla(199, 69%, 84%, 1);
  $blg-text-wild-blue-yonder: hsla(216, 33%, 68%, 1);
  $blg-text-carolina-blue: hsla(199, 89%, 49%, 1);
  $blg-text-shadow-blue: hsla(217, 24%, 59%, 1);
  $blg-text-slate-gray: hsla(217, 17%, 48%, 1);
 /** Font size */
 $blg-fontSize-1: 2.9rem;
 $blg-fontSize-2: 2.0rem;
 $blg-fontSize-3: 1.8rem;
 $blg-fontSize-4: 1.6rem;
 $blg-fontSize-5: 1.5rem;
 $blg-fontSize-6: 1.4rem;
 $blg-fontSize-7: 1.2rem;
 $blg-fontSize-8: 1.3rem;

 /** Font weight */
 $blg-weight-medium: 500;
 $blg-weight-semiBold: 600;
 $blg-weight-bold: 700;
 $blg-weight-extraBold: 800;
//  transition
$blg-transition-1: 0.25s ease;
$blg-transition-2: 0.5s ease;
$blg-cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
$blg-cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97);

 /** Line height */
 $blg-lineHeight-1: 1.3;
 $blg-lineHeight-2: 1.5;
 $blg-lineHeight-4: 1.5;
$colors: (
  "blue":       $blg-oxford-blue,
  "gray":	        $blg-graytext,
  "lightgray":      $blg-lightgray,
  "white":          $blg-white,
  "black":          $blg-black
) !default;

$primary_colors: (
  "primary":       $blg-carolina-blue,
  "secondary":     $blg-skyblue,
  "tertiary":      $blg-lightpurple
);

// -- Overwrite ../node_modules/bootstrap/scss variables
$font-family-sans-serif: 'K2D', sans-serif;
$headings-font-family: 'K2D', sans-serif;

// -- BORDER RADIUS
$border-radius:4px;
$border-color:#E7E7E7;
$main-border-radius: 4px;
$tile-border-radius: 4px;

// -- UTILITIES
// $base-transition: all 0.3s ease-in-out;
$base-transition: all 0.2s ease;

// -- ICONOGRAPHY
$icon-arrow-right-green: url('data:image/svg+xml;utf8,<svg width="auto" height="auto" viewBox="0 0 20 20" fill="%2300BDAC" xmlns="http://www.w3.org/2000/svg"><path d="M4.16671 10.8333H14.05L11.025 14.4667C10.955 14.5509 10.9022 14.6482 10.8698 14.7528C10.8373 14.8575 10.8258 14.9675 10.8359 15.0766C10.8562 15.297 10.9632 15.5002 11.1334 15.6417C11.3036 15.7831 11.523 15.8512 11.7433 15.8309C11.9637 15.8105 12.1669 15.7035 12.3084 15.5333L16.475 10.5333C16.5031 10.4936 16.5281 10.4518 16.55 10.4083C16.55 10.3667 16.5917 10.3417 16.6084 10.3C16.6461 10.2045 16.6659 10.1027 16.6667 10C16.6659 9.89726 16.6461 9.79555 16.6084 9.7C16.6084 9.65833 16.5667 9.63333 16.55 9.59167C16.5281 9.54822 16.5031 9.50644 16.475 9.46667L12.3084 4.46667C12.23 4.3726 12.1319 4.29695 12.021 4.2451C11.9101 4.19325 11.7891 4.16647 11.6667 4.16667C11.472 4.16629 11.2833 4.2341 11.1334 4.35833C11.049 4.42829 10.9792 4.51421 10.9281 4.61116C10.877 4.70812 10.8455 4.81421 10.8354 4.92336C10.8254 5.0325 10.8369 5.14256 10.8695 5.24723C10.902 5.3519 10.9549 5.44913 11.025 5.53333L14.05 9.16667H4.16671C3.94569 9.16667 3.73373 9.25446 3.57745 9.41074C3.42117 9.56702 3.33337 9.77899 3.33337 10C3.33337 10.221 3.42117 10.433 3.57745 10.5893C3.73373 10.7455 3.94569 10.8333 4.16671 10.8333Z"/></svg>');
$icon-arrow-right-white: url('data:image/svg+xml;utf8,<svg width="auto" height="auto" viewBox="0 0 20 20" fill="%23FFFFFF" xmlns="http://www.w3.org/2000/svg"><path d="M4.16671 10.8333H14.05L11.025 14.4667C10.955 14.5509 10.9022 14.6482 10.8698 14.7528C10.8373 14.8575 10.8258 14.9675 10.8359 15.0766C10.8562 15.297 10.9632 15.5002 11.1334 15.6417C11.3036 15.7831 11.523 15.8512 11.7433 15.8309C11.9637 15.8105 12.1669 15.7035 12.3084 15.5333L16.475 10.5333C16.5031 10.4936 16.5281 10.4518 16.55 10.4083C16.55 10.3667 16.5917 10.3417 16.6084 10.3C16.6461 10.2045 16.6659 10.1027 16.6667 10C16.6659 9.89726 16.6461 9.79555 16.6084 9.7C16.6084 9.65833 16.5667 9.63333 16.55 9.59167C16.5281 9.54822 16.5031 9.50644 16.475 9.46667L12.3084 4.46667C12.23 4.3726 12.1319 4.29695 12.021 4.2451C11.9101 4.19325 11.7891 4.16647 11.6667 4.16667C11.472 4.16629 11.2833 4.2341 11.1334 4.35833C11.049 4.42829 10.9792 4.51421 10.9281 4.61116C10.877 4.70812 10.8455 4.81421 10.8354 4.92336C10.8254 5.0325 10.8369 5.14256 10.8695 5.24723C10.902 5.3519 10.9549 5.44913 11.025 5.53333L14.05 9.16667H4.16671C3.94569 9.16667 3.73373 9.25446 3.57745 9.41074C3.42117 9.56702 3.33337 9.77899 3.33337 10C3.33337 10.221 3.42117 10.433 3.57745 10.5893C3.73373 10.7455 3.94569 10.8333 4.16671 10.8333Z"/></svg>');
$icon-dropdown-caret: url('data:image/svg+xml;utf8,<svg width="auto" height="auto" viewBox="0 0 10 7" fill="%23ef3f3c" xmlns="http://www.w3.org/2000/svg"><path d="M4.99987 6.33333C4.78664 6.33333 4.57331 6.25195 4.41081 6.08919L0.244141 1.92253C-0.0813802 1.59701 -0.0813802 1.06966 0.244141 0.744141C0.569661 0.41862 1.09701 0.41862 1.42253 0.744141L4.99987 4.32292L8.57799 0.744792C8.90351 0.419271 9.43086 0.419271 9.75638 0.744792C10.0819 1.07031 10.0819 1.59766 9.75638 1.92318L5.58971 6.08984C5.42695 6.2526 5.21341 6.33333 4.99987 6.33333Z"/></svg>');

// Configuration
$headings-line-height: 1.125;

$headings-font-weight: 400;
$min-contrast-ratio: 2;

$btn-border-radius: 4px;
// form 
$input-border-radius: 4px;
$input-bg: $blg-white;
$input-color:$blg-skyblue;
$input-border-color:$blg-text-white;
$input-focus-box-shadow:0 0 0 0.25rem rgb(255 20 5 / 18%);
$form-select-color:#808080;
$form-check-input-checked-bg-color:$blg-skyblue;
$form-check-input-checked-border-color:$blg-skyblue;

$btn-padding-y: 0.45rem;
$input-btn-padding-y: 0.5625rem;
$input-btn-padding-x: 1.25rem;
$input-btn-padding-y-sm: .375rem;
$input-btn-padding-x-sm: 1.25rem;
$input-btn-padding-y-lg: .75rem;
$input-btn-padding-x-lg: 1.25rem;

$breadcrumb-font-size: 0.875rem;
$form-select-padding-y:0.35rem;
// carousel

// accordion-border-color 
$accordion-button-active-color:$blg-skyblue;
$accordion-active-bg:$blg-white;
$accordion-border-color:#F0F0F0;
$accordion-button-focus-box-shadow: 0 0 0 0.25rem rgb(29 191 115 / 14%);
$accordion-button-focus-border-color: #F0F0F0;
$accordion-active-bg:#1dbf7326;

$card-border-color:rgb(14 209 209 / 29%);

// navlink
$navbar-nav-link-padding-x:1rem;

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

// -- Customize ../node_modules/bootstrap/scss maps here
$theme-colors: map-merge($theme-colors, $primary_colors);

$font-size-sm: $font-size-base * 0.875;
$font-size-xs: $font-size-base * 0.75;

// css-grid 
$enable-cssgrid: true;

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/utilities";

// -- Customize Utilities here
// Layout & components
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/tables";
@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/dropdown";
@import "../node_modules/bootstrap/scss/button-group";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/accordion";
@import "../node_modules/bootstrap/scss/breadcrumb";
@import "../node_modules/bootstrap/scss/pagination";
@import "../node_modules/bootstrap/scss/badge";
@import "../node_modules/bootstrap/scss/alert";
@import "../node_modules/bootstrap/scss/progress";
@import "../node_modules/bootstrap/scss/list-group";
@import "../node_modules/bootstrap/scss/close";
@import "../node_modules/bootstrap/scss/toasts";
@import "../node_modules/bootstrap/scss/modal";
@import "../node_modules/bootstrap/scss/tooltip";
@import "../node_modules/bootstrap/scss/popover";
@import "../node_modules/bootstrap/scss/carousel";
@import "../node_modules/bootstrap/scss/spinners";
@import "../node_modules/bootstrap/scss/offcanvas";
@import "../node_modules/bootstrap/scss/placeholders";

// Helpers
@import "../node_modules/bootstrap/scss/helpers";

// Utilities
@import "../node_modules/bootstrap/scss/utilities/api";

/* Custom CSS rules come here */
// -- Global Rules
@each $name, $value in $colors {
    .#{$prefix}bg-#{$name} {
        background-color: var(--#{$prefix}#{$name}) !important;
    }
}

@each $name, $value in $colors {
    .#{$prefix}text-#{$name} {
        color: var(--#{$prefix}#{$name}) !important;
    }
}
// -- Global Rules
@each $name, $value in $colors {
  .#{$prefix}bg-#{$name} {
      background-color: var(--#{$prefix}#{$name}) !important;
  }
}

@each $name, $value in $colors {
  .#{$prefix}text-#{$name} {
      color: var(--#{$prefix}#{$name}) !important;
  }
}

a {
  color: $blg-carolina-blue;
  text-decoration: none;
  transition: $base-transition;
  &:hover{
    color: $blg-skyblue;
  }
}
ul{
  list-style: none!important;
}
body{
  background-color:#FFFFFF;
  color:#575757;
}
.btn {
  font-size: (14/16)+rem;
}

.btn,
a {
  .i {
      width: (14/16)+rem;
      vertical-align: middle;
      transition: $base-transition;
      margin-left: 0.5rem;

      &.large {
          width: 2rem;
      }
  }

  &:hover {
      .i {
          margin-left: 0.4rem;
          margin-right: 0.1rem;
      }
  }
}

.btn {
  box-shadow: 0px 0.375rem 0.625rem rgba(var(--hj-btn-shadow), 0.25);

  &:hover {
      box-shadow: 0px 0.375rem 0.625rem rgba(var(--hj-btn-hover-shadow), 0.25);
  }
}

.btn-primary,
.btn-outline-primary {
  --hj-btn-hover-color: var(--hj-white);
  --hj-btn-hover-bg: var(--hj-darkblue);
  --hj-btn-hover-border-color: var(--hj-darkblue);
  --hj-btn-active-color: var(--hj-white);
  --hj-btn-active-bg: var(--hj-darkblue);
  --hj-btn-active-border-color: var(--hj-darkblue);
  --hj-btn-shadow: #{to-rgb($blg-skyblue)};
  --hj-btn-hover-shadow: #{to-rgb($blg-gray)};
}

.btn-secondary,
.btn-outline-secondary {
  --hj-btn-hover-color: var(--hj-white);
  --hj-btn-hover-bg: var(--hj-green);
  --hj-btn-hover-border-color: var(--hj-green);
  --hj-btn-active-color: var(--hj-white);
  --hj-btn-active-bg: var(--hj-green);
  --hj-btn-active-border-color: var(--hj-green);
  --hj-btn-shadow: #{to-rgb($blg-gray)};
  --hj-btn-hover-shadow: #{to-rgb($blg-skyblue)};
}

.btn-tertiary,
.btn-outline-tertiary {
  --hj-btn-hover-color: var(--hj-white);
  --hj-btn-hover-bg: var(--hj-green);
  --hj-btn-hover-border-color: var(--hj-green);
  --hj-btn-active-color: var(--hj-white);
  --hj-btn-active-bg: var(--hj-green);
  --hj-btn-active-border-color: var(--hj-green);
  --hj-btn-shadow: #{to-rgb($blg-lightpurple)};
  --hj-btn-hover-shadow: #{to-rgb($blg-skyblue)};
}

.btn-dark,
.btn-outline-dark {
  --hj-btn-hover-color: var(--hj-white);
  --hj-btn-hover-bg: var(--hj-green);
  --hj-btn-hover-border-color: var(--hj-green);
  --hj-btn-active-color: var(--hj-white);
  --hj-btn-active-bg: var(--hj-green);
  --hj-btn-active-border-color: var(--hj-green);
  --hj-btn-shadow: #{to-rgb($blg-naviblue)};
  --hj-btn-hover-shadow: #{to-rgb($blg-skyblue)};
}

.btn-light,
.btn-outline-light {
  --hj-btn-hover-color: var(--hj-white);
  --hj-btn-hover-bg: var(--hj-green);
  --hj-btn-hover-border-color: var(--hj-green);
  --hj-btn-active-color: var(--hj-white);
  --hj-btn-active-bg: var(--hj-green);
  --hj-btn-active-border-color: var(--hj-green);
  --hj-btn-shadow: #{to-rgb($blg-white)};
  --hj-btn-hover-shadow: #{to-rgb($blg-skyblue)};
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-tertiary,
.btn-outline-dark,
.btn-outline-light {
  --hj-btn-shadow: none;
}
.btn{
    &:hover svg{
        // padding-left: 5px;
        transition: $base-transition;
    }
}
img,
svg {
  max-width: 100%;
}

.modal-backdrop.show {
  opacity: 0.95;
}

.list_with_check {
  list-style-type: none;
  padding-left: 30/16+rem;
  > li {
      position: relative;
      &:not(last-child) {
          margin-bottom: 0.5rem;
      }
      &::before {
          content: url('data:image/svg+xml;utf8,<svg width="auto" height="auto" viewBox="0 0 512 512" fill="%23FFFFFF" xmlns="http://www.w3.org/2000/svg"><path d="M243.8 339.8C232.9 350.7 215.1 350.7 204.2 339.8L140.2 275.8C129.3 264.9 129.3 247.1 140.2 236.2C151.1 225.3 168.9 225.3 179.8 236.2L224 280.4L332.2 172.2C343.1 161.3 360.9 161.3 371.8 172.2C382.7 183.1 382.7 200.9 371.8 211.8L243.8 339.8zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"/></svg>');
          width: 1rem;
          height: 1rem;
          display: block;
          position: absolute;
          top: 2px;
          left: -30/16 + rem;
      }
  }
}
img,
svg {
    max-width: 100%;
}

.modal-backdrop.show {
    opacity: 0.95;
}

.list_with_check {
    list-style-type: none;
    // padding-left: math.div(-30, 16);
    > li {
        position: relative;
        &:not(last-child) {
            margin-bottom: 0.5rem;
        }
        &::before {
            content: url('data:image/svg+xml;utf8,<svg width="auto" height="auto" viewBox="0 0 512 512" fill="%23FFFFFF" xmlns="http://www.w3.org/2000/svg"><path d="M243.8 339.8C232.9 350.7 215.1 350.7 204.2 339.8L140.2 275.8C129.3 264.9 129.3 247.1 140.2 236.2C151.1 225.3 168.9 225.3 179.8 236.2L224 280.4L332.2 172.2C343.1 161.3 360.9 161.3 371.8 172.2C382.7 183.1 382.7 200.9 371.8 211.8L243.8 339.8zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"/></svg>');
            width: 1rem;
            height: 1rem;
            display: block;
            position: absolute;
            top: 2px;
            left: -30/16+rem;
        }
    }
}
// header-css


.navbar-toggler {
  border: none;
  padding: 0;
  font-size: inherit;
  position: relative;
  color: $blg-white;
  z-index: 1;

  &:focus {
      box-shadow: none;
  }

  &.main::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba($blg-gray, 0.95);
      display: none;
      z-index: -1;
  }
}

.navbar-toggler-icon {
  width: 2em;
  height: 1.25em;
  border-bottom: 2px solid;
  position: relative;
  transition: $base-transition;
  background: none;

  &::before,
  &::after {
      content: '';
      display: block;
      border-top: 2px solid;
      position: absolute;
      right: 0;
      width: 100%;
      transition: $base-transition;
  }

  &::before {
      top: 0%;
  }

  &::after {
      top: 50%;
  }
}

.navbar-toggler[aria-expanded=true] {
  &.main::before {
      display: block;
  }

  .navbar-toggler-icon {
      border-color: transparent;
      transform: rotate(45deg);

      &:before {
          transform: rotateZ(90deg);
      }

      &:after {
          width: 100%;
          transform: rotateZ(0deg);
      }

      &:before,
          &:after {
          top: 50%;
      }
  }
}
// slider 
.slide-height{
  height:600px;
  object-fit: cover;
}



.hj-logo {
  font-size: 1rem;
  color: $blg-white;
  font-family: $font-family-sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  transition: $base-transition;
  display: inline-flex;
  align-items: center;
  font-weight: 300;
  gap: 1rem;

  .logo-icon {
      width: 2.5rem;
  }

  &:hover {
      opacity: 0.8;
  }
}

.navbar {
  .nav {
  .nav-link {
    padding: 0.25rem 0;
          
  }
}

  .nav-link {
      color: $blg-white;
      font-size: 1.25rem;
      font-weight: unset;
      text-transform: capitalize;
      padding:0.5rem 0.45rem;
      &:hover {
          color: $blg-black;
      }
      &.active{
          color:$blg-black;
      }
  }
  
  // .nav-item {
  //     &:hover {
  //         > .nav-link {
  //             color: $blg-skyblue;
  //         }
  //     }
  // }

  .dropdown {
      &:hover {
          .dropdown-menu {
              position: absolute;
              opacity: 1;
              visibility: visible;
              transform: translateY(0%);
          }
      }
  }

  .dropdown-menu {
      min-width: 16rem;
      padding: 1.5rem 1.5rem;
      position: absolute;
      display: block;
      left: 0;
      right: 0;
      opacity: 0;
      visibility: hidden;
      transition: $base-transition;
      transform: translateY(-10%);
      background: linear-gradient( to right, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.449) );
      backdrop-filter: blur(4px);
      box-shadow: 0 0 20px #000;
      // border-bottom: 1px solid #454545;

      &.show {
          position: absolute;
          opacity: 1;
          visibility: visible;
          transform: translateY(0%);
      }
  }

  .dropdown-item {
      margin: 0.25rem 0;
      background: transparent;
      padding-left: 0;
      padding-right: 0;
      font-size: 1rem;
      color: $blg-white;

      &:hover {
          color: $blg-skyblue;
      }
  }

  .mobile_links {
      margin-top: 2rem;

      hr {
          margin-bottom: 2rem;
          color: rgba($blg-naviblue, 0.2);
      }
  }

}

.dropdown-toggle {
  &::after {
      border: none;
      background-image: $icon-dropdown-caret;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: contain;
      height: (6/16)+em;
      width: (10/16)+em;
      margin-left: (3/16)+rem;
      vertical-align: 0.05em;
      transition: $base-transition;
  }
  &:hover::after{
      transform: rotate(180deg);
  }

}
@media (min-width: 576px){
  .gap-sm-4 {
      gap: 1.5rem !important;
  }
}
@media (min-width: 1200px) {
h1, .h1 {
    font-size: $font-size-base * 2.75;
}

h2, .h2 {
    font-size: $font-size-base * 1.75;
}

h3, .h3 {
    font-size: $font-size-base * 1.5;
}

h4, .h4 {
    font-size: $font-size-base * 1.25;
}

h5, .h5 {
    font-size: $font-size-base * 1.15;
}

h6, .h6 {
    font-size: $font-size-base * 1.11;
}

.navbar {
  //   .dropdown-menu {
  //       left: auto;

  //       &.show {
  //           position: absolute;
  //       }
  //   }

    .dropdown {
        &:hover {
            .dropdown-menu {
                top: 100%;
                position: absolute;
            }
        }
    }
}
}

@media (min-width: 1400px) {
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    max-width: 1140px;
}
}
// my-css 

@media (max-width: 991px) {
.navbar{
    .navbar-collapse {
        position: absolute;
        top: 68px;
        left: 1rem;
        right: 1rem;
        background: rgba( 14, 209, 209, 0.25 );
        box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
        backdrop-filter: blur( 4px );
        -webkit-backdrop-filter: blur( 4px );
        // border-radius: 10px;
        border: 1px solid rgba( 255, 255, 255, 0.18 );
        border-radius: (20/16)+rem;
        z-index: 99;
        padding:20px;

     

        .navbar-toggler {
            color: $blg-naviblue;
            position: absolute;
            top: 1.5rem;
            right: 1rem;
        }
      }

    .dropdown-toggle::after {
        filter: invert(1);
    }

    .nav-link {
        color: $blg-black;

        &:hover {
            color: $blg-skyblue;
        }
        &.active{
          color: $blg-skyblue;
        }
    }
}
}

// blog components
@media (min-width: 992px) {
  

  .blog_grid_container {
      grid-auto-rows: 1fr;
      grid-template-columns: 1fr 30%;
      > .blog_grid_container__list {
          grid-row: span 2;
          order: -1;
      }
  }

  .block-blog_filter {
      margin-bottom: 40/16+rem;
  }

  .block-sidebar_menu {
      // margin-bottom: 1.5rem;
      .sidebar_links {
          padding-inline-start: 3rem;
      }
  }
  
  .sidebar_menu_toggle {
      pointer-events: none;
      margin-bottom: 0.5rem;
      + .dropdown-menu {
          display: block;
          position: relative !important;
          border: none;
          padding: 0;
          transform: none !important;
      }
  }

  .sidebar_ad_link {
      width: 100%;
  }
}

@media (min-width: 1200px) {
  h1, .h1 {
      font-size: $font-size-base * 2.75;
  }
  
  h2, .h2 {
      font-size: $font-size-base * 2;
  }
  
  h3, .h3 {
      font-size: $font-size-base * 1.75;
  }
  
  h4, .h4 {
      font-size: $font-size-base * 1.5;
  }
  
  h5, .h5 {
      font-size: $font-size-base * 1.25;
  }
  
  h6, .h6 {
      font-size: $font-size-base * 1.125;
  }

  .navbar.primary_menu {
      .dropdown-menu {
          left: auto;

          &.show {
              position: absolute;
          }
      }

      .dropdown {
          &:hover {
              .dropdown-menu {
                  top: 100%;
                  position: absolute;
              }
          }
      }
  }
}

@media (min-width: 1400px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
      max-width: 1140px;
  }
}

.section_hero {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
  position: relative;
  z-index: 1;
}
main > section {
  padding: 1.5rem 0;
}

.section_page_title {
  padding: 280/16+rem 0 120/16+rem;
  text-align: center;
  background: linear-gradient(45deg, $blg-skyblue, $blg-lightblue);
  color: $blg-skyblue;
  border-radius: 0 0 60/16+rem 60/16+rem;
  .page_title:not(:last-child) {
      margin-bottom: 2rem;
  }
  a{
    color: $blg-white;
  }
}
@media (max-width: 768px){
  .section_page_title {
    padding: 7.5rem 0 7.5rem;
  }
}

.section-blog {
}

.blog_grid_container {
  display: grid;
  grid-auto-columns: 1fr;
  gap: 3rem;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}


.block-blog_filter {
  margin-bottom: 1.5rem;
}

.blog_list_wrapper {
  display: grid;
  grid-auto-columns: 1fr;
  gap: 40/16+rem;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}
@media (min-width: 768px){

  .blog_list_wrapper {
      grid-template-columns: 1fr 1fr;
  }
}


.blog_post_item {
}

.blog_link--is_thumb {
  display: block;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
  transition: $base-transition;
  > img {
      width: 100%;
  }
  &:hover {
      opacity: 0.8;
  }
}

.blog_link--is_author {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12/16+rem;
  color: $blg-skyblue;
  margin-bottom: 1rem;
  transition: $base-transition;
  .author_img {
      width: 38/16+rem;
      height: 38/16+rem;
      border-radius: 50%;
  }
  .author_name {
      text-transform: uppercase;
  }
  .post_date {
      color: #90A2AA;
  }
}

.blog_post__category {
  font-size: 12/16+rem;
  margin-bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  a{
      text-transform: uppercase;
  }
}

.blog_link--is_title {
  display: block;
  color: $blg-dimblue;
  margin-bottom: 1rem;
  .blog_title {
      line-height: 1.25;
  }
}

.blog_post__content {
  margin-bottom: 1rem;
}

.blog_list_wrapper + .divider {
  margin-top: 40/16+rem;
  margin-bottom: 30/16+rem;
  border-top: 2px solid $blg-lightgray;
  opacity: 1;
}

.block-pagination {
  > .btn {
      display: block;
      padding: 7/16+rem 13/16+rem;
      border-radius: 50%;
      font-size: 1rem;
      min-width: 2.5rem;
      text-align: center;
      .icon {
          display: block;
          height: 1.5em;
          width: 0.75em;
      }
  }
}

.block-sidebar_menu {
  .sidebar_links {
      margin-bottom: 0;
      padding-inline-start: 1rem;
      ul {
          padding-inline-start: 1.25rem;
      }
      li {
          margin: 6/16+rem 0;
          list-style-type: disc;
          &::marker {
              color: $blg-black;
          }
          a {
              &:hover {
                  padding-left: 0.25rem;
              }
          }
      }
  }
}

.sidebar_menu_toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 18/16+rem;
  color: $blg-dimblue;
  background-color: $blg-lightgray;
  padding-left: 30/16+rem;
  border: none;
  &.dropdown-toggle::after {
      display: none;
  }
  &:focus, 
  &:hover {
      background-color: darken($blg-lightgray, 5);
  }
  &.show {
      .i {
          transform: rotate(180deg);
      }
  }
  + .dropdown-menu {
      padding: 0.5rem 1rem;
  }
}

.sidebar_ad_link {
  display: block;
  max-width: 21rem;
  margin: auto;
  transition: $base-transition;
  > img {
      width: 100%;
  }
  &:hover {
      opacity: 0.8;
  }
}

.section_cta_subscribe {

}

.cta_subscribe__wrapper {
  background-color: $blg-lightpurple;
  color: $blg-white;
  border-radius: 1rem;
  padding: 4rem 2rem;
  text-align: center;
  .content {
      margin-bottom: 2rem;
  }
}

// Blog detail page
.section_blog_content {
  padding: 1.5rem 0;
}

.post_content_wrapper {
  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
      color: $blg-dimblue;
      margin-bottom: 1rem;
  }

  img, figure {
      display: block;
      margin-bottom: 1rem;
  }

  blockquote {
      border-left: 4px solid $blg-lightblue;
      padding-left: 20/16+rem;
      font-family: serif;
      cite {
          &::before {
              content: '- ';
          }
      }
  }
}

.block-social_share {
  font-size: 14/16+rem;
  padding: 1rem 0;
  border-top: 1px solid $blg-lightgray;
  border-bottom: 1px solid $blg-lightgray;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1rem;
  .social_links {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;

      a {
          color: $blg-dimblue;

          &:hover {
              color: $blg-black;
          }

          > .icon {
              width: 1.25rem;
              height: 1.25rem;
          }
      }
  }
}

.section_404 {
  text-align: center;
  display: flex;
  align-items: center;
  padding: 4rem 0;
  height: 90vh;
  .heading__404 {
      color: $blg-skyblue;
      font-size: 80/16+rem;
      font-weight: 500;
  }
  .content__404 {
      margin-bottom: 112/16+rem;
  }
  > img {
      width: 100%;
  }
}

//
.section-title {
  margin-block-end: 10px;
  font-weight: 700;
}
.headline .span {
  background-image: $blg-gradient-1;
  display: inline-block;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.section-text {
  color: $blg-text-slate-gray;
  margin-block-end: 40px;
}

.headline-2 {
  font-size: $blg-fontSize-2;
}
.headline {
  color: $blg-text-columbia-blue;
  line-height: $blg-lineHeight-1;
}
.bx {
  background-color: $blg-oxford-blue;
  color:$blg-text-slate-gray;
  border: 1px solid $blg-border-prussian-blue;
}
.feature-card {
	padding: 15px;
	border-radius: 4px;
	transition: $blg-transition-1;
  aspect-ratio: 1/1;
	&:is(:hover) {
		transform: translateY(-5px);
	}
	.card-banner {
		border-radius: $blg-radius-16;
	}
  .headline {
    color: $blg-text-columbia-blue;
    line-height: $blg-lineHeight-1;
  }
	.card-wrapper {
		margin-block-start: 24px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    font-size: var(--fontSize-6);
    margin-block: 20px;
		&:last-child {
			font-size: 1.4rem;
			margin-block-end: 0;
		}
	}
}
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
//  
.feature {
	.profile-card {
    display: flex;
    align-items: center;
    gap: 10px;
    .profile-banner{
      border-radius: $blg-radius-circle;
      width:50px;
      height:50px;
    }
		.card-title {
			color: $blg-text-slate-gray;
      font-size: 17px;
      font-weight:$blg-weight-bold;
		}
		.card-title {
			font-weight: 400;
		}
		.card-subtitle {
			font-size: 12px;
		}
	}
//   .feature .profile-card .card-subtitle, .feature .card-wrapper .card-btn {
//     font-size: $blg-fontSize-6;
// }
	.card-wrapper {
		.card-btn {
			font-size:1rem;
			position: relative;
			color: $blg-black;
			z-index: 1;
			&::before {
				content: "";
				position: absolute;
				top: -13px;
				left: -20px;
				width: 48px;
				height: 48px;
				background-color: $blg-skyblue;
				border-radius: $blg-radius-circle;
				z-index: -1;
			}
		}
	}
	.btn {
		margin-inline: auto;
		margin-block-start: 30px;
	}
}
.card-subtitle {
	color: $blg-text-slate-gray;
}
#header{
background: #0bd1d1;
}

.sticky{
  background-color: #000000;
}
input.form-control::placeholder {
  color: #10c4cd;
  font-size:20px;
}

.widget_block {
  list-style: none;
  margin-bottom: 1rem;
}
.wp-block-heading{
  color:#0ed1d1;
}