/*Spinner*/

#loader {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow: hidden;
}

.spinner-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  z-index: 999999;
}

.spinner {
  animation: Rotate 2.4s both infinite linear;
}

.path {
  animation: DrawLine 1.6s both infinite alternate linear;
  fill: none;
  stroke: #8d5a0d;
  stroke-width: 50;
}

@keyframes Rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes DrawLine {
  0% {
    stroke-dasharray: 0 126;
  }
  100% {
    stroke-dasharray: 126 126;
  }
}

/*Whatsapp Icon*/
.whatsapp_anchor_link {
  text-decoration:none;
}
.whatsapp_floating_btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  z-index: 1000;
}

@keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

.whatsapp_contact_icon {
  background-color: #42db87;
  color: #fff;
  width: 60px;
  height: 60px;
  font-size:30px;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translatey(0px);
  animation: pulse 1.5s infinite;
  box-shadow: 0 0 0 0 #42db87;
  -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  font-weight: normal;
  font-family: sans-serif;
  text-decoration: none !important;
  transition: all 300ms ease-in-out;
}

.whatsapp_text_icon {
  margin-top: 8px;
  color: #707070;
  font-size: 13px;
}

/*Pattern Controls*/
  .utu-msimbo-media-card-a {
    --s: 120px; /* control the size*/
    --c1: #fa6900;
    --c2: #d95b43;
    --c3: #ecd078;
  
    background:
      conic-gradient(from 150deg at 50% 33%,#0000,var(--c1) .5deg 60deg,#0000 60.5deg) 
      calc(var(--s)/2) calc(var(--s)/sqrt(2)),
      conic-gradient(from -30deg at 50% 66%,#0000,var(--c2) .5deg 60deg,var(--c3) 60.5deg);
    background-size: var(--s) calc(.5*var(--s)/tan(30deg));
  }

  .utu-msimbo-media-card-b {
    --s: 150px; /* control the size*/
    --c1: #f7d2a1;
    --c2: #05057e;
    --_g: 
      var(--c1) 0%  5% ,var(--c2) 6%  15%,var(--c1) 16% 25%,var(--c2) 26% 35%,var(--c1) 36% 45%,
      var(--c2) 46% 55%,var(--c1) 56% 65%,var(--c2) 66% 75%,var(--c1) 76% 85%,var(--c2) 86% 95%,#0000 96%;

    background:
      radial-gradient(50% 50% at 100% 0,var(--_g)),
      radial-gradient(50% 50% at 0 100%,var(--_g)),
      radial-gradient(50% 50%,var(--_g)),
      radial-gradient(50% 50%,var(--_g)) calc(var(--s)/2) calc(var(--s)/2)
      var(--c1);
    background-size: var(--s) var(--s);
  }

  .utu-msimbo-media-card-c {
    --s: 100px; /* control the size*/
    --c1: #80bca3;
    --c2: #655643;
  
    background:
      radial-gradient(var(--c2) 15%,
      #0000 17% 20%,var(--c2) 22% 25%,
      #0000 27% 30%,var(--c2) 32% 35%,
      #0000 37% 40%,var(--c2) 42% 45%,
      #0000 47% 50%,var(--c2) 52% 55%, var(--c1) 57%)
     calc(var(--s)/2) 0/var(--s) var(--s),
    repeating-conic-gradient(var(--c2) 0 25%,var(--c1) 0 50%)
     0 0/calc(2*var(--s)) calc(2*var(--s));
  }

  .utu-msimbo-media-card-d{
  --s: 76px; /* control the size*/
  --c1: #1a144a;
  --c2: #2eb044;
  --_g: conic-gradient(var(--c1) 25%,#0000 0) 0 0;

    background:
      var(--_g)/calc(2*var(--s)) calc(var(--s)/9.5),
      var(--_g)/calc(var(--s)/9.5) calc(2*var(--s)),
      repeating-conic-gradient(#0000 0 25%,var(--c1) 0 50%) 
      var(--s) 0 /calc(2*var(--s)) calc(2*var(--s)),
      radial-gradient(50% 50%,var(--c2) 98%,var(--c1)) 0 0/var(--s) var(--s);
  }

  .utu-msimbo-media-card-e {
    --s: 100px; /* control the size*/
    --c1: #f8b195;
    --c2: #355c7d;
    --_g: var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
     var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
    background:
      radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#0008 96%,#0000),
      radial-gradient(100% 100% at 0 100%,#0000, #0008 4%,var(--_g),var(--c1) 96%) var(--c1);
    background-size: var(--s) var(--s);
  }

  .utu-msimbo-media-card-f {
    --s: 50px; /* control the size*/
    --c1: #f2f26f;
    --c2: #a0c55f;
    --c:#0000 79%,var(--c1) 81% 99%,var(--c2) 101% 150%,#0000 0;
    background:
    radial-gradient(var(--s) at 100% 100%,var(--c)),
    radial-gradient(var(--s) at 100% 0   ,var(--c)) calc(3*var(--s)/2) 0,
    radial-gradient(var(--s) at 0    100%,var(--c)) calc(  var(--s)/2) 0,
    radial-gradient(var(--s) at 0    0   ,var(--c)) calc(2*var(--s)) 0,
    repeating-linear-gradient(90deg,
      var(--c1) 0 calc(20%/3),#0000 0 calc(70%/3),
      var(--c1) 0 30%,#0000 0 50%) calc(var(--s)/-5) 0 var(--c2);
    background-size: calc(3*var(--s)) calc(5*var(--s)/2);
  }
  .utu-blur-effect {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 5px 15px;
  }
  
  .utu-blur-effect-price {
    --border-radius: 5rem;
    background-color: white;
    border-radius: var(--border-radius) 0 var(--border-radius) 0;
  }

/*pricing cards*/
.price-titles {
  text-align: center;
  font-size: 1.5rem; 
  font-weight: bold;
}

ul.product-plans {
        width: 100%;
        margin-inline: auto;
        display: flex;
        row-gap: 2rem;
        flex-wrap: wrap;
        justify-content: center;
        list-style: none;
        padding: 0 5px;
        }
ul.product-plans li.product-plan:nth-child(1) { --accent-color: #fa0038 }
ul.product-plans li.product-plan:nth-child(2) { --accent-color: #164fa9 }
ul.product-plans li.product-plan:nth-child(3) { --accent-color: #1a9b8b }
ul.product-plans li.product-plan:nth-child(4) { --accent-color: #ffa700 }

ul.product-plans li.product-plan {
  --overlap-size: 1.5rem;
  --border-radius: 5rem;
  width: 100%;
  margin-inline: var(--overlap-size);
  padding-block: 2rem;
  display: grid;
  grid-template-rows: max-content max-content 1fr max-content;
  gap: 0.5rem;
  border-radius: var(--border-radius) 0 var(--border-radius) 0;
  box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
}

ul.product-plans li.product-plan .title {
  font-size: 2rem;
  color: var(--accent-color);
  text-align: center;
}

ul.product-plans li.product-plan .price {
  margin-right: calc(var(--overlap-size) * -1);
  justify-self: end;
  padding-block: 0.25rem;
  padding-inline: var(--overlap-size);
  background-color: var(--accent-color);
  color: white;
  position: relative;
}
ul.product-plans li.product-plan .price::after {
  content: "";
  position: absolute;
  height: var(--overlap-size);
  width: var(--overlap-size);
  right: 0;
  top: 100%;
  background-color: inherit;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

ul.product-plans li.product-plan .btn {
  justify-self: start;
  margin-left: calc(var(--overlap-size) * -1);
  padding-block: 0.5rem;
  padding-inline: 2.5rem;

  border: none;
  font-family: inherit;
  color: white;
  font-size: 1.1rem;

  background-color: var(--accent-color);
  background-image: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.25) 0);
  background-size: 100% 200%;
  transition: background-position 100ms ease;

  position: relative;
  cursor: pointer;
}
ul.product-plans li.product-plan .btn:focus-visible {
  outline-offset: 5px;
  outline: 2px solid var(--accent-color);
  background-position: 0 100%;
}

ul.product-plans li.product-plan .btn:hover {
  background-position: 0 100%;
}

ul.product-plans li.product-plan .btn::after {
  content: "";
  position: absolute;
  height: var(--overlap-size);
  width: var(--overlap-size);
  left: 0;
  bottom: 100%;
  background-color: inherit;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

ul.product-plans li.product-plan .btn:active {
  transform: scale(0.95);
}
ul.product-plans li.product-plan .btn:active::after {
  transform-origin: left bottom;
  transform: scale(0.9);
}

ul.product-plans li.product-plan .features {
  align-self: flex-start;
  list-style: none;
  padding-inline: 2rem;
  display: grid;
}

ul.product-plans li.product-plan .features li:not(:first-child) {
  border-top: 1px solid rgb(200, 200, 200);
}
ul.product-plans li.product-plan .features li {
  padding: 0.5rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1rem 1fr;
}

ul.product-plans li.product-plan .features li::before {
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  display: grid;
  place-items: center;
}
ul.product-plans li.product-plan .features li.check::before {
  content: "⋓";
}

@import url(https://fonts.googleapis.com/css?family=Oswald:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);



/* Helpers */
/**************************/
.margin-top-10 {padding-top:10px;}
.margin-bot-10 {padding-bottom:10px;}
/* Typography */
/**************************/
#parallax-world-of-ugg h1 {font-family:'Oswald', sans-serif; font-size:24px; font-weight:400; text-transform: uppercase; color:rgb(0, 0, 0); padding:0; margin:0;}
#parallax-world-of-ugg h2 {font-family:'Oswald', sans-serif; font-size:45px; letter-spacing:10px; text-align:center; color:white; font-weight:400; text-transform:uppercase; z-index:10; opacity:.9;}
#parallax-world-of-ugg h3 {font-family:'Oswald', sans-serif; font-size:14px; line-height:0; font-weight:400; letter-spacing:8px; text-transform: uppercase; color:black;}
#parallax-world-of-ugg p {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:14px; line-height:24px;}
.first-character {font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Source Sans Pro', sans-serif;}

.sc {color: #3b8595;}
.ny {color: #3d3c3a;}
.atw {color: #c48660;}

/* Section - Title */
/**************************/
#parallax-world-of-ugg .title {background: white; padding: 60px; margin:0 auto; text-align:center;}
#parallax-world-of-ugg .title h1 {font-size:35px; letter-spacing:8px;}

/* Section - Block */
/**************************/
#parallax-world-of-ugg .block {background: white; padding: 60px; width:auto; margin:0 45px; text-align:justify;}
#parallax-world-of-ugg .block-gray {background: #f2f2f2;padding: 60px;}
#parallax-world-of-ugg .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.70;}

/* Extras */
/**************************/
#parallax-world-of-ugg .line-break {border-bottom:1px solid black; width: 150px; margin:0 auto;}

/* Media Queries */
/**************************/
@media screen and (max-width: 959px) and (min-width: 768px) {
  #parallax-world-of-ugg .block {padding: 40px; margin: 0 35px;}
}
@media screen and (max-width: 767px) {
  #parallax-world-of-ugg .block {padding: 30px; margin: 0 25px;}
  #parallax-world-of-ugg h2 {font-size:30px;}
  #parallax-world-of-ugg .block {padding: 30px;}
  #parallax-world-of-ugg .parallax-one, #parallax-world-of-ugg .parallax-two, #parallax-world-of-ugg .parallax-three {padding-top:200px; padding-bottom:150px;}
}
@media screen and (max-width: 479px) {
  #parallax-world-of-ugg .block {padding: 30px 15px; margin: 0 15px;}
}



/*Portfolio Button*/
/* From Uiverse.io by MuhammadHasann */ 
 .portfolio-btn {
	display: block;
	margin-left: auto;
	margin-right: auto;
  position: relative;
  padding: 15px 45px;
  background: #ffffff;
  font-size: 17px;
  font-weight: 500;
  color: #181818;
  cursor: pointer;
  border: 3px solid #8bea5f;
  border-radius: 30px;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));
}

.portfolio-btn svg {
	fill: #284b18;
}
.portfolio-btn a {
	text-decoration: none;
	color: #000000;
}

.portfolio-btn a:hover {
	color: white;
}

.portfolio-btn:hover {
  border: 3px solid #ffffff;
  background: linear-gradient(
    85deg,
    #8bea5f,
    #8bea5fee,
    #8bea5fd8,
    #8bea5fbd,
    #8bea5fa9
  );
  animation: wind 2s ease-in-out infinite;
}

@keyframes wind {
  0% {
    background-position: 0% 50%;
  }

  0% {
    background-position: 50% 100%;
  }

  0% {
    background-position: 0% 50%;
  }
}

.portfolio-icon-1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  transform-origin: 0 0;
  transform: rotate(10deg);
  transition: all 0.5s ease-in-out;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
}

.portfolio-btn:hover .portfolio-icon-1 {
  animation: slay-1 3s cubic-bezier(0.52, 0, 0.58, 1) infinite;
  transform: rotate(10deg);
}

@keyframes slay-1 {
  0% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(10deg);
  }
}

.portfolio-icon-2 {
  position: absolute;
  top: 0;
  left: 25px;
  width: 12px;
  transform-origin: 50% 0;
  transform: rotate(10deg);
  transition: all 1s ease-in-out;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));
}

.portfolio-btn:hover .portfolio-icon-2 {
  animation: slay-2 3s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;
  transform: rotate(0);
}

@keyframes slay-2 {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(15deg);
  }

  100% {
    transform: rotate(0);
  }
}

.portfolio-icon-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  transform-origin: 50% 0;
  transform: rotate(-5deg);
  transition: all 1s ease-in-out;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));
}

.portfolio-btn:hover .portfolio-icon-3 {
  animation: slay-3 2s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;
  transform: rotate(0);
}

@keyframes slay-3 {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(0);
  }
}

/*Regular Button*/
.button-85 {
  padding: 0.6em 2em;
  border: none;
  outline: none;
  background: #ffffff;
  cursor: pointer;
	text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
	margin-top: 5vh;
  position: relative;
  z-index: 0;
  border-radius: 30px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-85 a {
	color: #121212;
	text-decoration: none;
}

.button-85:before {
  content: "";
  background: linear-gradient(
    45deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing-button-85 20s linear infinite;
  transition: opacity 0.3s ease-in-out;
  border-radius: 30px;
}

@keyframes glowing-button-85 {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.button-85:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ffffff;
	color: #121212;
  left: 0;
  top: 0;
  border-radius: 30px;
}