:root {
  --styleThemeColor: rgb(13, 110, 253);
  --scrolledStyleThemeColor: rgb(83, 196, 241);
  --scrolledStyleThemeColorHover: rgb(83, 241, 215);
  --navLinkHLineColor: #08da13;
  --first-color: #139bbd;
  --second-color: hsl(244, 89%, 51%);
  --second-colorHr: hsl(239, 92%, 47%);
}

.navbar {
  z-index: 4;
}


.navbar {
  background: #f3e7e9;
  background: linear-gradient(
    to right,
    #f3e7e9,#e3eeffe5,#e3eeffea
  );
  transition: background-color 0.5s ease-in-out;
  box-shadow: 0px 11px 11px -10px rgba(7, 7, 7, 0.67);
  border-bottom: 1px solid rgba(192, 192, 192, 0.7);
}

.navbar.scrolled {
  border-bottom: 1px solid rgba(0, 0, 0, 0.01);
}

.navbarPre {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  user-select: auto;
  pointer-events: none;
}

.navbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(22.5deg, rgba(255, 255, 254, 0.884) 0%, rgba(255, 255, 252, 0.973) 11%);
  transition: opacity 0.3s ease-in-out; 
  z-index: -1; 
}

.navbar.scrolled {
  box-shadow: 0px 11px 11px -10px rgba(70, 125, 167, 0.67);
  background: linear-gradient(22.5deg, rgba(255, 255, 252, 0.884) 0%, rgba(0, 0, 0, 0.8) 11%);
}

.navbar.scrolled::before {
  background-color: rgba(0, 0, 0, 0.8); 
  opacity: 0; 
}


.navbar .nav-link {
  position: relative;
}

.navbar .nav-link::before {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 3px;
  background-color: #0d6efd;
  visibility: hidden;
  width: 0px;
  transition: all 0.3s ease-in-out 0s;
}

.navbar .nav-link:hover::before {
  visibility: visible;
  width: 25px;
}

.navbar.scrolled .navbar-nav .nav-link::before {
  background-color: var(--navLinkHLineColor);
}

.navbar .navbar-brand,
.navbar .navbar-toggler,
.navbar .navbar-nav .nav-link {
  color: #333333;
}

.navbar.scrolled .navbar-brand,
.navbar.scrolled .navbar-toggler,
.navbar.scrolled .navbar-nav .nav-link {
  color: var(--scrolledStyleThemeColor);
  border-color: var(--scrolledStyleThemeColor);
  transition: 0.7s;
}


.navbar.scrolled .nThD {
  background: var(--scrolledStyleThemeColor); 
  transition: 0.0s;
}

.navbar .navbar-toggler:focus {
  background-color: rgb(255, 255, 255);
}

.navbar.scrolled .navbar-toggler:focus {
  background-color: rgba(0, 0, 0, 0.8);
}

.navbar .navbar-brand:hover,
.navbar .navbar-toggler:hover,
.navbar .navbar-nav .nav-link:hover {
  color: var(--styleThemeColor);
  transition: 0.3s;

}

.navbar .navbar-toggler:hover .nThD {
  background: var(--styleThemeColor);
  transition: 0s;
}

.navbar .navbar-toggler:hover {
  background-color: rgba(255, 255, 255, 1);
}

.navbar.scrolled .navbar-brand:hover,
.navbar.scrolled .navbar-toggler:hover,
.navbar.scrolled .navbar-nav .nav-link:hover {
  color: var(--scrolledStyleThemeColorHover);
  transition: 0.7s;
}

.navbar.scrolled .navbar-toggler:hover .nThD {
  background: var(--scrolledStyleThemeColorHover); 
  transition: 0.7s;
  
}

.navbar.scrolled .navbar-toggler:hover {
  background-color: rgba(0, 0, 0, 1);
  transition: 0.7s;
}

.navbar .navbar-toggler {
  position: relative;
  box-sizing: border-box;
  transition: all 0.7s;
}

.navbar .navbar-toggler:after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border: 1px solid rgba(0, 0, 0, 0); 
  border-radius: 6px;
  opacity: 1; 
  transition: all 0.7s;
  z-index: -1;
}

.navbar.scrolled .navbar-toggler:after {
  border: 1px solid rgba(0, 0, 0, 0);
  z-index: 0;
  transition: all 0.7s;
}

.navbar button.navbar-toggler:hover::after,
.navbar button.navbar-toggler:active::after {
  border-color: var(--second-colorHr);
  animation: navbarTogglerColorChange 3.4s infinite ease-in-out;
  animation-delay: 2.7s;
}

.navbar.scrolled button.navbar-toggler:hover::after,
.navbar.scrolled button.navbar-toggler:active::after {
  border-color: var(--scrolledStyleThemeColorHover);
  animation: navbarTogglerColorChangeScrolled 3.4s infinite ease-in-out;
  animation-delay: 2.7s;
}

@keyframes navbarTogglerColorChange {
  0%,100% {
    border-color: var(--styleThemeColor);
  }
  75% {
    border-color: var(--second-color);
  }
  50% {
    border-color: var(--second-color);
  }
  25% {
    border-color: var(--second-color);
  }
}

@keyframes navbarTogglerColorChangeScrolled {
  0%, 100% {
    border-color: var(--scrolledStyleThemeColorHover);
  }
  75% {
    border-color: var(--second-color);
  }
  50% {
    border-color: var(--second-color);
  }
  25% {
    border-color: var(--second-color);
  }
}

button.navbar-toggler:hover,
button.navbar-toggler:active {
  box-shadow: 0 0 11px 3px var(--styleThemeColor), 0 0 27px 6px var(--second-colorHr);
  animation: navbarTogglerShadowPulse 3.4s infinite ease-in-out; 
  animation-delay: 2.7s;
  z-index: 0;
}


.navbar.scrolled button.navbar-toggler:hover,
.navbar.scrolled button.navbar-toggler:active {
  box-shadow: 0 0 11px 3px var(--scrolledStyleThemeColorHover), 0 0 27px 6px var(--scrolledStyleThemeColorHover);
  animation: navbarTogglerShadowPulseScrolled 3.4s infinite ease-in-out;
  animation-delay: 2.7s;
  z-index: 0;
}

@keyframes navbarTogglerShadowPulse {
  0%,100% {
    box-shadow: 0 0 11px 3px var(--styleThemeColor), 0 0 27px 6px var(--second-colorHr);
  }
  75% {
    box-shadow: 0 0 5px 1px var(--second-color), 0 0 19px 1px var(--second-color);
  }
  50% {
    box-shadow: 0 0 5px 1px var(--second-color), 0 0 19px 1px var(--first-color);
  }
  25% {
    box-shadow: 0 0 4px 1px var(--second-color), 0 0 10px 1px var(--first-color);
  }
}

@keyframes navbarTogglerShadowPulseScrolled {
  0%, 100% {
    box-shadow: 0 0 11px 3px var(--scrolledStyleThemeColorHover), 0 0 27px 6px var(--scrolledStyleThemeColorHover);
  }
  75% {
    box-shadow: 0 0 5px 1px var(--second-color), 0 0 19px 1px var(--second-color);
  }
  50% {
    box-shadow: 0 0 5px 1px var(--second-color), 0 0 19px 1px var(--second-color);
  }
  25% {
    box-shadow: 0 0 4px 1px var(--second-color), 0 0 10px 1px var(--scrolledStyleThemeColor);
  }
}

.navbar-toggler-icon {
  background-image: none;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  padding: 0;
  transform: scaleX(2);
  transition: transform 0.3s;
}


.navbar .navbar-toggler-icon.cd {
  box-sizing: content-box;
  padding: 0;
  transform: rotate(90deg);
  transform-origin: 50% 50%;
  transition: transform 0.56s;
  font-weight: bold;
  display: flex;
  margin: 0;
  justify-content: center;
}


.navbarTogglerhamburger {
  display: flex;
  align-self: center;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 7px;
  transition: 0.33s;
}

.navbarTogglerhamburger .nThD {
  align-self: flex-end;
  height: 2px;
  width: 100%;
  background: var(--bs-navbar-color); 
}

.navbarTogglerhamburger .hamburgerTop {
  height: 2px;
  margin: 0px;
  padding: 0px;
}

.navbarTogglerhamburger .hamburgerMid {
  width: 100%;
  transition: all 200ms ease-in-out;
  height: 2px;
  margin: 0px;
  padding: 0px;
}

.navbarTogglerhamburger .hamburgerBottom {
  width: 100%;
  height: 2px;
  margin: 0px;
  padding: 0px;
  transition: all 400ms ease-in-out;
}


button.navbar-toggler:hover .nThD {
  width: 100%;
}


button.navbar-toggler:hover .hamburgerTop {
  animation: hamburger-hover 0.69s infinite ease-in-out alternate;
}

button.navbar-toggler:hover .hamburgerMid {
  animation: hamburger-hover 0.69s infinite ease-in-out alternate forwards 200ms;
}

button.navbar-toggler:hover .hamburgerBottom {
  animation: hamburger-hover 0.69s infinite ease-in-out alternate forwards 400ms;
}

@keyframes hamburger-hover {
  0% {
    width: 100%;
  }

  50% {
    width: 50%;
  }

  100% {
    width: 100%;
  }
}

.myLogo {
  height: 40px;
  transition: filter 0.33s;
}

.navbar-brand:hover .myLogo {
  filter: hue-rotate(47deg);
}

.navbar-brand.scrolled-inverse:hover .myLogo {
  filter: hue-rotate(27deg);
}


.navbar::before,
.navbar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.63s ease-in-out;
  z-index: -1;
  background-size: cover; 
  background-position: center; 

}

.navbar.scrolled::before {
  opacity: 0;
}

.navbar.scrolled::after {
  opacity: 1;
}

.navbar::before {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1233%26quot%3b)' fill='none'%3e%3cpath d='M326.0419586699353 445.030760322925L315.1572974169842 548.5913944442568 418.71793153831607 559.4760556972079 429.60259279126717 455.9154215758761z' fill='rgba(16%2c 15%2c 15%2c 0.05)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M800.3261354933552 572.2130731050106L893.699580785996 504.37329411352516 825.8598017945104 410.9998488208844 732.4863565018697 478.8396278123699z' fill='rgba(16%2c 15%2c 15%2c 0.05)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M101.27841115711709 325.3831217201042L-40.81144344323593 379.92630664459125 13.731741481251134 522.0161612449443 155.82159608160416 467.47297632045724z' fill='rgba(16%2c 15%2c 15%2c 0.05)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M415.6985052576349 456.8069421548662L556.1793058874138 391.29966899745466 350.1912321002234 316.32614152508734z' fill='rgba(16%2c 15%2c 15%2c 0.05)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M953.6859501050504 46.67225227679142L882.7148016494154 30.287271610735196 893.6229048781486 144.9364846272157z' fill='rgba(16%2c 15%2c 15%2c 0.05)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1050.0595373340957 609.7559976697207L1099.261479516091 533.9916507520355 1023.4971325984056 484.7897085700403 974.2951904164105 560.5540554877256z' fill='rgba(16%2c 15%2c 15%2c 0.05)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M944.0644069306289 477.8309843837467L966.6186269949844 621.1163887013719 1066.5353991349057 543.0528507815045z' fill='rgba(16%2c 15%2c 15%2c 0.05)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1186.3279551238186 462.5904727932L1186.2291986646524 566.2150484651089 1265.4559408352854 522.2989481628123z' fill='rgba(16%2c 15%2c 15%2c 0.05)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1067.2964846102836 72.27658976036139L954.4641907782357 80.05854213580638 1008.3112791259074 162.9757868858146z' fill='rgba(16%2c 15%2c 15%2c 0.05)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1390.2207886769454 514.4985346190438L1301.3837560854174 419.05026974089765 1266.1607090239922 527.4556618109953z' fill='rgba(16%2c 15%2c 15%2c 0.05)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M345.44863526316277 210.71608923825414L436.77717584913034 215.5024152355258 398.2923945520541 76.11644135793864z' fill='rgba(16%2c 15%2c 15%2c 0.05)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M654.0691342651209 172.97922855849868L650.2689808011257 64.15707144958333 545.2469771562055 176.77938202249385z' fill='rgba(16%2c 15%2c 15%2c 0.05)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1488.5283779863148 444.26753035901305L1370.2710506173282 473.7523936134947 1518.0132412407966 562.5248577279997z' fill='rgba(16%2c 15%2c 15%2c 0.05)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1407.7313485366556 74.39657875098557L1464.5410491357484 9.044493958104852 1399.1889643428676-47.765206640987884 1342.3792637437748 17.586878151892833z' fill='rgba(16%2c 15%2c 15%2c 0.05)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1233'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
}

.navbar::after {
  background-image: linear-gradient(22.5deg, rgba(66, 66, 66, 0.02) 0%, rgba(66, 66, 66, 0.02) 11%,rgba(135, 135, 135, 0.02) 11%, rgba(135, 135, 135, 0.02) 24%,rgba(29, 29, 29, 0.02) 24%, rgba(29, 29, 29, 0.02) 38%,rgba(15, 15, 15, 0.02) 38%, rgba(15, 15, 15, 0.02) 50%,rgba(180, 180, 180, 0.02) 50%, rgba(180, 180, 180, 0.02) 77%,rgba(205, 205, 205, 0.02) 77%, rgba(205, 205, 205, 0.02) 100%),linear-gradient(67.5deg, rgba(10, 10, 10, 0.02) 0%, rgba(10, 10, 10, 0.02) 22%,rgba(52, 52, 52, 0.02) 22%, rgba(52, 52, 52, 0.02) 29%,rgba(203, 203, 203, 0.02) 29%, rgba(203, 203, 203, 0.02) 30%,rgba(69, 69, 69, 0.02) 30%, rgba(69, 69, 69, 0.02) 75%,rgba(231, 231, 231, 0.02) 75%, rgba(231, 231, 231, 0.02) 95%,rgba(138, 138, 138, 0.02) 95%, rgba(138, 138, 138, 0.02) 100%),linear-gradient(112.5deg, rgba(221, 221, 221, 0.02) 0%, rgba(221, 221, 221, 0.02) 17%,rgba(190, 190, 190, 0.02) 17%, rgba(190, 190, 190, 0.02) 39%,rgba(186, 186, 186, 0.02) 39%, rgba(186, 186, 186, 0.02) 66%,rgba(191, 191, 191, 0.02) 66%, rgba(191, 191, 191, 0.02) 68%,rgba(16, 16, 16, 0.02) 68%, rgba(16, 16, 16, 0.02) 70%,rgba(94, 94, 94, 0.02) 70%, rgba(94, 94, 94, 0.02) 100%),linear-gradient(90deg, rgba(255,255,255, 0),rgba(255,255,255, 0));

}