/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

:root {
  --ltGreen: #edfcf3;
  --green: #1aa47a;
  --cyan: #60daaa;
  --yellow: #fbca67;
  --blue: #6584ac;
  --ltblue: #f1f6ff;
  --dkBlue: #102855;
}

html,
body {
  scroll-behavior: smooth;
}

.home .entry-header {
  position: absolute;
  left: -9999px;
}

ul {
  margin-left: 0;
}

#circle-section {
  position: absolute;
  right: 0;
  top: 0;
  width: 480px;
  height: 480px;
}

.anim-img {
  background: none;
  border: 0;
  box-sizing: border-box;
  /* margin: 1em; */
  padding: 1em;

  box-shadow: inset 0 0 0 4px transparent;

  font-size: inherit;
  font-weight: 700;

  position: relative;
  vertical-align: middle;
  border-radius: 40px;
}

.anim-img img {
  margin-bottom: -7px;
}

.anim-img::before,
.anim-img::after {
  box-sizing: inherit;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}

.draw {
  transition: color 0.25s;
}

.draw::before,
.draw::after {
  /* Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts*/
  border: 4px solid transparent !important;
  opacity: 0;
  border-radius: 0;
  width: 0;
  height: 0;
}

/* This covers the top & right borders (expands right, then down)*/
.draw::before {
  top: 0;
  left: 0;
}
/* 
  // And this the bottom & left borders (expands left, then up) */
.draw::after {
  bottom: 0;
  right: 0;
}

/* .draw:hover {
  color: var(--cyan);
} */

.draw.in-view::before,
.draw.in-view::after {
  width: 100%;
  height: 100%;
  opacity: 1;
  border-radius: 40px;
}

.draw.in-view::before {
  border-top-color: var(--blue) !important;
  border-right-color: var(--blue) !important;
  transition: border-radius 0.25s ease-out 0.65s, opacity 0.025s linear 0.5s,
    width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

.draw.in-view::after {
  border-bottom-color: var(--blue) !important;
  border-left-color: var(--blue) !important;
  transition: border-radius 0.25s ease-out 0.65s, border-color 0s ease-out 0.75s,
    width 0.25s ease-out 1s, height 0.25s ease-out 1.25s;
}

.mel-dev .home-top-review .kt-testimonial-item-wrap .kt-testimonial-text-wrap,
.mel-dev .home-top-review .kt-testimonial-item-wrap {
  max-width: initial;
}

.underline {
  position: relative;
  display: inline-block;
}

.underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  border-radius: 5px;
  width: 0;
  background: #bac3d3; /* change to your preferred color */
  transition: width 0.4s ease 0.2s;
}

.underline-dark::after {
  background-color: var(--dkBlue);
}

/* Active state when in view */
.underline.in-view::after {
  width: 100%;
}

/* Wrapper & image */
.circular {
  position: relative;
  display: inline-block;
  border-radius: 50%;
}
.circular img {
  display: block;
  border-radius: 50%;
}

/* SVG overlay */
.circular .circle-border {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.circular .circle-border svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* start at top (12 o'clock) */
}
.circular .circle-border circle {
  fill: none;
  stroke: var(--blue); /* <-- border color */
  stroke-width: 3; /* <-- border thickness */
  transition: stroke-dashoffset 1.1s ease 0.2s; /* <-- animation timing */
}

/* When in view, the dash offset goes to 0 (fully drawn) */
.circular.in-view .circle-border circle {
  stroke-dashoffset: 0 !important;
}

input[type='submit'] {
  border-radius: 35px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 1rem 1.5rem !important;
}

input[type='submit']:hover {
  background-color: var(--dkBlue) !important;
  color: #fff !important;
}

.gform-theme--framework
  .gform-field-label
  > .gfield_required:where(
    :not(.gform-theme__disable):not(.gform-theme__disable *):not(
        .gform-theme__disable-framework
      ):not(.gform-theme__disable-framework *)
  ),
.gform-theme--framework.gform_editor
  legend.gform-field-label
  > span
  > .gfield_required:where(
    :not(.gform-theme__disable):not(.gform-theme__disable *):not(
        .gform-theme__disable-framework
      ):not(.gform-theme__disable-framework *)
  ) {
  color: var(--ltblue) !important;
}

.gform_title {
  color: #fff !important;
}

/*===responsive=======*/

@media only screen and (max-width: 1400px) {
  .alignfull.padding-adjust > .kt-row-column-wrap {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .alignfull.padding-adjust > .kt-row-column-wrap {
    padding-left: 30px;
    padding-right: 30px;
  }
}