body {
    color: hsl(0, 0%, 10%);
    background-color: hsl(0, 0%, 95%);
    margin: 0 auto;
    direction: rtl;
    /*background: url(../img/knowledge/bg.jpg) center center no-repeat;*/
    font-family: TheSansArabic !important;

}


.hexagon {
    position: relative;
    display: inline-block;
    /* left/right margin approx. 25% of .hexagon width + spacing */
    margin: 1px 18px;
    background-color: hsl(220, 75%, 75%);
    text-align: center;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    transform: rotate(30deg);
    transition: all .4s;
    cursor:pointer
     
}

.hexagon, .hexagon::before, .hexagon::after {
  /* easy way: height is width * 1.732
  actual formula is 2*(width/(2*Math.tan(Math.PI/6)))
  remove border-radius for straight edges on hexagons */
    width: 100px;
    height: 175px;
    border-radius: 20%/5%;
   
}
.hexagon::before {
  background-color: inherit;
  content: "";
  position: absolute;
  left: 0;
  transform: rotate(-60deg);
}
.hexagon::after {
  background-color: inherit;
  content: "";
  position: absolute;
  left: 0;
  transform: rotate(60deg);
}
.hexagon:nth-child(even) {
  /* top approx. 50% of .hexagon height + spacing */
  top: 59px;
}
 
.hexagon:active {
  background-color: hsla(60, 75%, 50%, 1.0);
  z-index: 110;
}
.hexanone {
  position: relative;
  display: inline-block;
  width: 67px;
  height: 116px;
  margin: 1px 18px;
}
.hexanone:nth-child(even) {
  top: 59px;
}
.hexagontent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  font-size: 1.4rem;
  line-height: 1.2;
  z-index: 100;
}
.ibws-fix {
  /* inline-block whitespace fix */
  font-size: 0;
}
.honeycomb {
  margin: 0 auto;
  text-align: center;
}

/**/

.honeycombs{ 
    width: 700px;
    margin: 5% auto;
    position: relative;
    height: 50em !important;
}
h1, h2, h3, h4, h5, h6, span {
    font-family: TheSansArabic !important;
}
.pos-abs {position: absolute}

.first-child{right: 0}

.nth-2,
.nth-11{right: 190px}

.nth-3,
.nth-12{right: 380px}

.nth-4,.nth-13{left: 0}

.nth-5 {right: -98px;}

.rotate-150 .hexagon{transform: rotate(150deg);}

.nth-6{right: 88px;}

.nth-7{left: 285px;}

.nth-7 .hexagon {
    transform: scale(1.6) rotate(150deg);
    background: hsl(0, 0%, 95%);
    z-index: 999999;
}
.imge-main {
    max-width: 130px;
    padding-bottom: 10px;
}
.nth-8{right: 475px}

.nth-9{left: -95px}

.nth-5,
.nth-6,
.nth-7,
.nth-8,
.nth-9{
    top: 164px;
}

.nth-10,
.nth-11,
.nth-12,
.nth-13{top: 327px}

.pos-abs{cursor: pointer}


.nth-2{
    top: -8px;
    right: 186px;
}

.nth-3 {
    right: 375px;
    top: -8px;
}

.pos-abs p,
.btn-back p,
.nth-7 > i {
    color: #ffb500f0 !important;
    /*z-index: 9999;*/
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(50%);
    text-align: center;
    right: 50%;
    font-family: TheSansArabic !important;
    width: 100%;
    font-size: 20px
}


.icon-check {display: none}

.pos-abs i{
  z-index: 999999;
}
.pos-abs p span {
    font-family: "TheSans-Plain";
    font-size: 17px
}

.pos-abs i > img{
  transform: scale(1.1);
}

.btn-back p i {display: none}

/*
.pos-abs .hexagon:hover {
    transform: scale(1.2) rotate(150deg)
}
*/


.btn-back {
    position: absolute;
    right: 50%;
    top: 120px;
    transform: translateX(50%);
    display: none;
	z-index: 999
    
}


.box-honey {
    position: absolute;
    top: 200px;
    right: 38%;
    transform: translateX(-50%);
    transition: all .4s;
    z-index: 1;
    width: 0;
}


.box-honey .hexagon {transition: all .4s}

.box-honey .hexagon{transform: rotate(150deg) scale(0)}

.box-honey .hexagon .hexagontent{transform: rotate(210deg) translate(50%);}

.scale{transform: rotate(150deg) scale(2.7) !important;}

.pos-abs.first-child .hexagon{background-color: #007167}

.pos-abs.nth-2 .hexagon{background-color: #007167}

.pos-abs.nth-3 .hexagon{background-color: #007167}

.pos-abs.nth-4 .hexagon{background-color: #007167}

.pos-abs.nth-5 .hexagon {
    background-color: #129589
}

.pos-abs.nth-6 .hexagon {
    background-color: #129589
}

.pos-abs.nth-8 .hexagon {
    background-color: #129589
}

.pos-abs.nth-9 .hexagon {
    background-color: #129589
}

.pos-abs.nth-10 .hexagon {
    background-color: #007167
}

.pos-abs.nth-11 .hexagon {
    background-color: #007167
}

.pos-abs.nth-12 .hexagon {
    background-color: #007167
}

.pos-abs.nth-13 .hexagon {
    background-color: #007167
}

.box-honey .hexagon{background-color: #fff}

.btn-back p .icon-check i.fa-check{
  position: absolute;
  font-size: 18px;
  top: 0;
  right: 0;
  display: block;
}

.btn-back .hexagon{background-color: #129589}

.nth-8 p {margin-right: 15px;}

.icon-check {
    position: absolute;
    bottom: 24px;
    right: -36px;
    width: 40px;
    height: 40px;
    font-size: 20px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    background-color: #009D4F;
 
}

.content_box{
    color: #fff;
    z-index: 9999;
    position: absolute;
    top: 50%;
    transform: translateY(-77%) translateX(44%);
    text-align: center;
    right: 50%;
   font-family: TheSansArabic !important;
    width: 100%;
}
.content_box h2{
    font-size:7px;
   font-family: TheSansArabic !important;
    color: #5B5B5B;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    top: -10px
}
    .content_box p {
        font-size: 9px;
        font-family: TheSansArabic !important;
        color: #5B5B5B;
        margin-bottom: 0;
        transform: scale(.7);
        position: relative;
        top: -5px;
        /*font-weight: bold;*/
        text-align: right;
    }

.content_box p a{
    position: relative;
    top: 25px;
    display: block;
    width: 150px;
    margin: 0 -5px 0;
    height: 20px;
	z-index: 99999
}
    .content_box > img {
        transform: scale(0.65);
        position: relative;
        top: 2px;
        max-width: 130px;
    }
.loader-state{
  line-height: 1;
  position: relative;
    top: 10px
}
.loader-state > img{
  max-width: 100%;
  height: 10px;
}
.loader-state span{
  display: block;
  font-size: 6px;
  font-family: "TheSans-Plain";
  color: #5B5B5B;
  text-align: center;
      transform: scale(.7);
}

.nth-7-box p{top: -40px}

.nth-7-box .loader-state{top: -10px}

.scaleZero {transform: translateX(50%) scale(0) ;transition: all .4s}

.nth-7 .icon-check {
    bottom: -2px;
    right: -80px;
    z-index: 999999
}

/* style for mobile screen */ 
.honey-style {
    background-color: #129589;
    padding: 20px;
    margin: 10px 0;
    border-radius: 15px; /* Slightly rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    overflow: hidden; /* Prevents content overflow from breaking the shape */
}

.honey-style-content {
    text-align: center;
    color: white;
    font-size: 18px;
    padding: 20px;
    color: #ffb500f0 !important;
    text-decoration: underline;
    font-family: TheSansArabic !important;
}

btn rp-primary-btn {
    font-size: 1.5em;
}