/*!
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Description: A plain-vanilla & lightweight theme for Elementor page builder
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Template: hello-elementor
Version: 1.0.0
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hello-elementor
*/

.container {
  display: grid;
  place-items: center;
  position: relative;
  width: 100%;
  height: 600px;
  margin: 0 auto !important;
  max-width: 1200px;
}

.center-circle {
  background: #B19740;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  box-shadow: 0px 0px 0px 16px rgb(215 191 112 / 71%), 0px 0px 0px 29px rgb(215 191 112 / 42%), 0px 0px 0px 42px #d7bf7036;
  z-index: 2;
  position: absolute;
}

span.center-circle-text {
    font-size: 36px;
    line-height: 42px
}

.circle {
  border: 2px dashed #d9bc6d;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 14px;
  color: #333;
  background: #fff;
  padding: 20px;
  transition: all 0.3s ease;
  position: absolute;
 transform: translateY(-71%);
}
.circle.large::after {
    content: "?";
    position: absolute;
    right: -15px;
    font-size: 60px;
    color: #d9bc6d;
    font-weight: bold;
    top: 50%;
    transform: translateY(-50%);
    background: #fff !important;
    padding: 0px 1px 24px 1px;
    font-family: 'dashicons';
    z-index: 10;
}

.circle.medium::after {
    content: "?";
    position: absolute;
    right: -15px;
    font-size: 44px;
    color: #d9bc6d;
    font-weight: bold;
    top: 50%;
    transform: translateY(-50%);
    background: #fff !important;
    padding: 0px 1px 6px 1px;
    font-family: 'dashicons';
    z-index: 10;
}
.circle.small::after {
    content: "?";
    position: absolute;
    right: -10px;
    font-size: 30px;
    color: #d9bc6d;
    font-weight: bold;
    top: 50%;
    transform: translateY(-50%);
    background: #fff !important;
    padding: 0px 1px 6px 1px;
    font-family: 'dashicons';
    z-index: 10;
}
.circle.large span {
    font-size: 18px;
    line-height: 26px;
}
.circle.medium span {
    font-size: 14px;
    line-height: 20px;
}
.circle.small span {
    font-size: 12px;
    line-height: 20px;
}
.circle .highlight {
  color: #d9bc6d;
  font-weight: bold;
}
.circle .cta-hover .covered-text {
  color: #d9bc6d;  
  font-weight: bold;
}
.circle span {
    line-height: 20px;
}

.circle .cta-hover a {
 color: #fff;
 text-decoration: underline;
 font-size: 12px;
}
.circle.small span {
    line-height: 16px;
}
.circle:hover .cta-hover {
  opacity: 1;
}

.circle .cta-hover .circle-cursive-text {
  font-family: 'Farmhouse';
  font-size: 18px;
}

.circle:hover::after{
    display: none
}

.circle.small {
  width: 120px;
  height: 120px;
}

.circle.medium {
  width: 155px;
  height: 155px;
}

.circle.large {
  width: 200px;
  height: 200px;
}
/*count 1*/
.circle:nth-child(1) {
  top: 22%;
  left: 33%;
}

/*count 2*/
.circle:nth-child(2) {
    top: 37%;
    left: 20%;
}
/*count 3*/
.circle:nth-child(3) {
  top: 59%;
  left: 27%;
}

/*count 4*/
.circle:nth-child(4) {
  top: 29%;
  left: 1%;
}

/*count 5*/
.circle:nth-child(5) {
  top: 56%;
  left: 13%;
}

/*count 6*/
.circle:nth-child(6) {
    top: 64%;
    left: -2%;
}

/*count 7*/
.circle:nth-child(7) {
    top: 93%;
    left: 3%;
}

/*count 8*/
.circle:nth-child(8) {
    top: 88%;
    left: 18%;
}

/*count 9*/
.circle:nth-child(9) {
    top: 93%;
    left: 36%;
}

/*count 10 is center circle*/

/*count 10*/
.circle:nth-child(11) {
    top: 36%;
    right: 22%;
}

/*count 11*/
.circle:nth-child(12) {
    top: 67%;
    right: 24%;
}

/*count 12*/
.circle:nth-child(13) {
    top: 18%;
    right: 40%;
}

/*count 13*/
.circle:nth-child(14) {
    top: 91%;
    right: 38%;
}

/*count 14*/
.circle:nth-child(15) {
    top: 93%;
    right: 26%;
}

/*count 15*/
.circle:nth-child(16) {
    top: 93%;
    right: -1%;
}

/*count 16*/
.circle:nth-child(17) {
    top: 20%;
    right: 8%;
}

/*count 17*/
.circle:nth-child(18) {
    top: 51%;
    right: 14%;
}

/*count 18*/
.circle:nth-child(19) {
    top: 45%;
    right: -1%;
}

/*count 19*/
.circle:nth-child(20) {
    top: 68%;
    right: 6%;
}

/*count 20*/
.circle:nth-child(21) {
    top: 83%;
    right: 15%;
}

.circle:hover {
  background: rgba(0, 0, 0);
  border: 2px dashed #000;
  box-shadow: 0px 0px 0px 8px rgb(0 0 0 / 27%), 0px 0px 0px 18px rgb(21 19 19 / 36%), 0px 0px 0px 27px #aca7a7a1;
}

.circle .cta-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  font-size: 12px;
  line-height: 20px;
  opacity: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0);
  transition: opacity 0.3s ease;
  padding: 10px;
  box-sizing: border-box;
}

.circle:hover .cta-hover {
  opacity: 1;
}



/* Base styles remain unchanged */

/* Responsive styles for mobile devices */
@media screen and (max-width: 767px) {
.container {
    height: auto;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr  !important;
    padding: 11px;
}

  .center-circle {
    width: 130px;
    height: 130px;
    font-size: 16px;
    box-shadow: 0px 0px 0px 12px rgb(215 191 112 / 71%), 0px 0px 0px 22px rgb(215 191 112 / 42%), 0px 0px 0px 32px #d7bf7036;
  }

  .center-circle .center-circle-text {
    font-size: 28px;
    line-height: 36px;
  }

  .circle {
    transform: translateY(0);
    position: static;
    margin: 10px auto;
  }

  .circle.small {
    width: 150px;
    height: 150px;
    font-size: 12px;
  }

  .circle.medium {
    width: 150px;
    height: 150px;
    font-size: 14px;
  }

  .circle.large {
    width: 150px;
    height: 150px;
    font-size: 16px;
  }

  .circle::after {
    font-size: 20px;
    right: 5px;
    top: 5px;
  }

  .circle .cta-hover {
    font-size: 10px;
    padding: 5px;
  }

  .circle .cta-hover .circle-cursive-text {
    font-size: 14px;
  }

  /* Stack circles vertically */
  .container .circle:nth-child(n) {
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
  }
.circle.large span {
    font-size: 14px;
    line-height: 16px;
}
	.circle.small span {
     font-size: 14px;
    line-height: 16px;
}
	.circle.medium span {
     font-size: 14px;
    line-height: 16px;
}
}

/* responsive for tablet devices */

/* Responsive styles for mobile devices */
@media (min-width: 768px) and (max-width: 1020px) {
.container {
    height: auto;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr  !important;
    padding: 11px;
}

  .center-circle {
    width: 130px;
    height: 130px;
    font-size: 16px;
    box-shadow: 0px 0px 0px 12px rgb(215 191 112 / 71%), 0px 0px 0px 22px rgb(215 191 112 / 42%), 0px 0px 0px 32px #d7bf7036;
  }

  .center-circle .center-circle-text {
    font-size: 28px;
    line-height: 36px;
  }

  .circle {
    transform: translateY(0);
    position: static;
    margin: 10px auto;
  }

  .circle.small {
    width: 150px;
    height: 150px;
    font-size: 12px;
  }

  .circle.medium {
    width: 150px;
    height: 150px;
    font-size: 14px;
  }

  .circle.large {
    width: 150px;
    height: 150px;
    font-size: 16px;
  }

  .circle::after {
    font-size: 20px;
    right: 5px;
    top: 5px;
  }

  .circle .cta-hover {
    font-size: 10px;
    padding: 5px;
  }

  .circle .cta-hover .circle-cursive-text {
    font-size: 14px;
  }

  /* Stack circles vertically */
  .container .circle:nth-child(n) {
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
  }
.circle.large span {
    font-size: 14px;
    line-height: 16px;
}
	.circle.small span {
     font-size: 14px;
    line-height: 16px;
}
	.circle.medium span {
     font-size: 14px;
    line-height: 16px;
}
}