:root {
  --font-poppins: "Poppins", sans-serif;
  --primary-color: #0752C5;
  --secondary-color: #0B1B33;
  --tertiary-color: #F1F7FF;
  --muted-color: #F2F2F2;
  --border-color: #D0D0D0;
  --white: #fff;
  --black: #000;
  --spacing: .25rem;
}

a {
  color: var(--primary-color);
  transition: 0.3s all;
}

form input,
form select {
  border: 1px solid #ddd;
}

.search-form input {
  background: var(--white);
  color: var(--black);
  font-size: 17px;
}

.dropdown .dropdown:after,
.dropdown:after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%200.75%200.75%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M.375.5A.03.03%200%200%201%20.353.491L.165.303A.031.031%200%200%201%20.209.259l.165.166L.539.26a.031.031%200%200%201%20.044.044L.395.492a.03.03%200%200%201-.022.009%22%20data-name%3D%2216%22%20data-original%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E")
}

header ul .dropdown ul {
  background: var(--white);
  box-shadow: 0 0 30px rgba(127, 137, 161, .25);
}

.auth-btn svg,
.dropdown .dropdown:after,
.show-ul .dropdown:after {
  filter: invert(0) !important;
}

@media screen and (max-width: 1023px) {
  header nav ul {
    background-color: var(--white);
  }

  header ul li a {
    color: var(--black);
  }
}

@media screen and (max-width: 600px) {
  .search-form .search-btn {
    right: -20px;
  }
}

.contact-page input,
footer,
textarea {
  background-color: var(--muted-color);
  color: var(--color);
}

footer .h6 {
  border-bottom: 2px solid hsla(0, 0%, 85%, 0.3);
}

.copyright {
  border-top: 1px solid hsla(0, 0%, 85%, 0.3);
}

#myBtn {
  background: var(--primary-color);
  font-size: 18px;
}

.site-social-links ul li a {
  border: 1px solid rgba(0, 0, 0, .3);
}

.site-social-links ul li a:hover {
  background: var(--primary-color);
  /*     border: 2px solid transparent; */
}

.site-social-links ul li a:hover svg {
  fill: var(--white);
}

.hero-header {
  background: var(--secondary-color);
  color: var(--white);
  padding-top: 40px;
  padding-bottom: 76px;
}

.hero-title {
  font-size: clamp(1.875rem, 1.2054rem + 1.7857vw, 2.8125rem);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--black);
}

.btn {
  background-color: var(--primary-color);
  color: var(--white);
  border: 2px solid var(--primary-color);
}

.btn,
.btn>svg {
  transition: all 200ms ease-in;
}

.btn:hover {
  background-color: var(--white);
  color: var(--primary-color);
}

.btn:hover>svg>path {
  stroke: var(--primary-color);
}

.btn.secondary-btn {
  background: white;
  color: var(--primary-color);
}

.btn.secondary-btn:hover {
  background: var(--primary-color);
  color: var(--white) !important;
}

.btn.secondary-btn:hover>svg>path {
  stroke: var(--white);
}

.card {
  background-color: var(--white);
  border: 1px solid #80808033;
}

/* single post styles  */

.wp-block-table.is-style-stripes {
  border-bottom: 1px solid #f0f0f0;
}

.wp-block-table.is-style-stripes {
  background-color: initial;
  border-collapse: inherit;
  border-spacing: 0;
}

.wp-block-table {
  overflow-x: auto;
}

.wp-block-table table {
  border-collapse: collapse;
  width: 100%;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: #f0f0f0;
}

.wp-block-table.is-style-stripes td,
.wp-block-table.is-style-stripes th {
  border-color: var(--black)0;
}

.wp-block-table td,
.wp-block-table th {
  border: 1px solid;
  padding: .5em;
}

.all-page ul li:not(.tableofcontent ul li, .site-social-links ul li):before,
.play:before {
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2217%22%20height%3D%2217%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%230752C5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m6.415%2012.858%204-4-4-4%22%2F%3E%3C%2Fsvg%3E") no-repeat;
}

.all-page ul li:not(.tableofcontent ul li, .site-social-links ul li):before {
  background-size: cover;
  content: "";
  height: 16px;
  left: -25px;
  position: absolute;
  top: 5px;
  width: 16px;
}

.all-page :is(p, li, h2, h3, h4, h5, h6, summary):not(#breadcrumbs, .tableofcontent ul li, .site-social-links ul li) a {
  color: var(--hover-1);
  font-weight: 600;
  transition: .3s;
}

.toc-header {
  background: var(--gradient);
}

.toc-header span {
  color: var(--white);
  font-weight: 400;
}

/* page styles  */

.page .blog-header,
.single-post .blog-header {
  background-color: #e3f8ff;
  padding-block: 25px;
}

/* contact us page  */
.contact-page :is(input, footer, textarea) {
  background-color: #c7c5c52b;
  color: var(--black);
}