/* Container with two columns */
.custom-petal-widget {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 0 auto;
  align-items: center;
  margin-bottom: 15%;
  gap: 15px;
}

.petal-column {
  width: 50%;
  box-sizing: border-box;
  padding: 10px;
}

/* Each petal item – add some vertical spacing */
.petal-item {
  margin-bottom: -12%;
}
#the-logo{
  position: absolute;
  width: 7%;
  margin-top: 6%;
}

/* Flex container for each item’s content */
.petal-content {
  display: flex;
  align-items: center;
}

/* Left column: text on left, image on right */
.petal-left-item .petal-content {
  flex-direction: row;
}

/* Right column: image on left, text on right */
.petal-right-item .petal-content {
 
}

/* Text container */
.petal-text {
  padding: 10px;
  font-family: sans-serif;
  width: 55%;
}

.petal-text.left {
  text-align: left;
}

.petal-text.right {
  text-align: right;
}

.petal-text h4 {
  margin: 0 0 5px;
  font-size: 1.2em;
  text-transform: capitalize;
  color: #333;
}
.petal-text h4::after {
  content: '';
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  background-color: red;
  margin-left: 0.5em;
  vertical-align: middle;
}

.petal-text p {
  margin: 0;
  font-size: 0.9em;
  color: #666;
  font-size: 16px;
}

/* Image container */
.petal-image {
  width: 60%;
  text-align: center;
}

/* The petal shape achieved via clip-path */
.petal-image img {
  width: 100%;
  max-width: 180px;
  transition: transform 0.3s ease;
}




#petal-content-1,#petal-content-4{
  align-items: flex-start;
}

#petal-content-3,#petal-content-6{
  align-items: flex-end;
}


#petal-content-2 .petal-image{

    padding-right: 15%;
    align-items: center;

}
#petal-content-5 .petal-image{

  padding-left: 15%;
  align-items: center;

}

#petal-image-1 {
  clip-path: polygon( 6.313% 1.67%,6.313% 1.67%,9.782% 0.891%,16.666% 0.385%,26.101% 0.105%,37.221% 0.003%,49.161% 0.032%,61.056% 0.143%,72.04% 0.289%,81.25% 0.423%,87.819% 0.496%,90.882% 0.463%,90.882% 0.463%,91.959% 0.622%,93.117% 1.261%,94.31% 2.312%,95.493% 3.707%,96.618% 5.376%,97.642% 7.253%,98.517% 9.268%,99.199% 11.354%,99.642% 13.441%,99.8% 15.463%,99.8% 15.463%,99.802% 18.517%,99.809% 23.432%,99.819% 29.729%,99.828% 36.93%,99.837% 44.558%,99.843% 52.133%,99.844% 59.179%,99.838% 65.217%,99.824% 69.77%,99.8% 72.359%,99.8% 72.359%,99.547% 74.581%,98.837% 78.049%,97.651% 82.314%,95.97% 86.925%,93.775% 91.433%,91.048% 95.387%,87.771% 98.338%,83.925% 99.835%,79.49% 99.429%,74.449% 96.67%,74.449% 96.67%,68.157% 91.849%,60.326% 85.827%,51.476% 79.006%,42.125% 71.79%,32.791% 64.579%,23.991% 57.777%,16.245% 51.786%,10.071% 47.009%,5.986% 43.847%,4.509% 42.704%,4.509% 42.704%,4.383% 42.546%,4.04% 42.083%,3.535% 41.331%,2.922% 40.304%,2.255% 39.019%,1.587% 37.49%,0.974% 35.734%,0.469% 33.766%,0.126% 31.601%,0% 29.256%,0% 29.256%,0% 26.984%,0.001% 25.007%,0.003% 23.289%,0.006% 21.794%,0.013% 20.484%,0.022% 19.325%,0.034% 18.279%,0.051% 17.311%,0.073% 16.384%,0.1% 15.463%,0.1% 15.463%,0.166% 14.406%,0.314% 13.134%,0.558% 11.701%,0.916% 10.161%,1.403% 8.566%,2.034% 6.972%,2.825% 5.431%,3.791% 3.998%,4.948% 2.726%,6.313% 1.67% );
}
#petal-image-2{
  
  clip-path: polygon( 94.299% 37.817%,94.299% 37.817%,96.349% 39.757%,97.92% 41.999%,99.015% 44.464%,99.636% 47.072%,99.785% 49.742%,99.466% 52.396%,98.681% 54.953%,97.432% 57.333%,95.722% 59.456%,93.553% 61.244%,93.347% 61.38%,25.334% 97.647%,25.334% 97.647%,24.934% 97.852%,24.529% 98.045%,24.119% 98.224%,23.704% 98.39%,23.285% 98.544%,22.862% 98.684%,22.435% 98.81%,22.005% 98.923%,21.571% 99.023%,21.135% 99.108%,18.006% 99.672%,18.006% 99.672%,15.528% 99.898%,13.117% 99.694%,10.81% 99.09%,8.643% 98.115%,6.655% 96.799%,4.883% 95.17%,3.364% 93.257%,2.136% 91.091%,1.235% 88.7%,0.698% 86.113%,0% 80.639%,0% 49.529%,0% 18.124%,0.313% 14.636%,0.313% 14.636%,0.759% 11.999%,1.585% 9.548%,2.753% 7.314%,4.225% 5.328%,5.965% 3.622%,7.934% 2.227%,10.095% 1.175%,12.41% 0.497%,14.841% 0.225%,17.352% 0.39%,21.487% 1.032%,21.487% 1.032%,21.936% 1.109%,22.383% 1.201%,22.826% 1.307%,23.266% 1.427%,23.702% 1.561%,24.135% 1.71%,24.563% 1.872%,24.986% 2.049%,25.404% 2.239%,25.817% 2.443%,92.29% 36.543%,92.29% 36.543%,92.5% 36.653%,92.708% 36.767%,92.914% 36.885%,93.119% 37.007%,93.321% 37.133%,93.521% 37.262%,93.719% 37.395%,93.914% 37.532%,94.108% 37.673%,94.299% 37.817% );
}
#petal-image-3 {
  clip-path: polygon( 6.313% 98.33%,6.313% 98.33%,9.782% 99.109%,16.666% 99.614%,26.101% 99.894%,37.221% 99.997%,49.161% 99.968%,61.056% 99.857%,72.04% 99.711%,81.25% 99.577%,87.819% 99.503%,90.882% 99.537%,90.882% 99.537%,91.959% 99.378%,93.117% 98.739%,94.31% 97.688%,95.493% 96.293%,96.618% 94.623%,97.642% 92.747%,98.517% 90.732%,99.199% 88.646%,99.642% 86.559%,99.8% 84.537%,99.8% 84.537%,99.802% 81.482%,99.809% 76.568%,99.819% 70.271%,99.828% 63.07%,99.837% 55.442%,99.843% 47.867%,99.844% 40.821%,99.838% 34.783%,99.824% 30.23%,99.8% 27.641%,99.8% 27.641%,99.547% 25.419%,98.837% 21.951%,97.651% 17.687%,95.97% 13.075%,93.775% 8.568%,91.048% 4.613%,87.771% 1.662%,83.925% 0.165%,79.49% 0.571%,74.449% 3.33%,74.449% 3.331%,68.157% 8.151%,60.326% 14.173%,51.476% 20.994%,42.125% 28.21%,32.791% 35.421%,23.991% 42.223%,16.245% 48.214%,10.071% 52.991%,5.986% 56.153%,4.509% 57.296%,4.509% 57.296%,4.383% 57.454%,4.04% 57.917%,3.535% 58.669%,2.922% 59.696%,2.255% 60.981%,1.587% 62.51%,0.974% 64.266%,0.469% 66.234%,0.126% 68.398%,0% 70.744%,0% 70.744%,0% 73.016%,0.001% 74.992%,0.003% 76.711%,0.006% 78.206%,0.013% 79.516%,0.022% 80.675%,0.034% 81.721%,0.051% 82.689%,0.073% 83.616%,0.1% 84.537%,0.1% 84.537%,0.166% 85.594%,0.314% 86.866%,0.558% 88.299%,0.916% 89.839%,1.403% 91.434%,2.034% 93.028%,2.825% 94.569%,3.791% 96.002%,4.948% 97.274%,6.313% 98.33% );
}
#petal-image-4 {
 
  clip-path: polygon( 93.687% 1.67%,93.687% 1.67%,90.218% 0.891%,83.334% 0.385%,73.899% 0.105%,62.779% 0.003%,50.839% 0.032%,38.944% 0.143%,27.96% 0.289%,18.75% 0.423%,12.181% 0.496%,9.118% 0.463%,9.118% 0.463%,8.041% 0.622%,6.883% 1.261%,5.69% 2.312%,4.507% 3.707%,3.382% 5.376%,2.358% 7.253%,1.483% 9.268%,0.801% 11.354%,0.358% 13.441%,0.2% 15.463%,0.2% 15.463%,0.198% 18.517%,0.191% 23.432%,0.181% 29.729%,0.172% 36.93%,0.163% 44.558%,0.157% 52.133%,0.156% 59.179%,0.162% 65.217%,0.176% 69.77%,0.2% 72.359%,0.2% 72.359%,0.453% 74.581%,1.163% 78.049%,2.349% 82.314%,4.03% 86.925%,6.225% 91.433%,8.951% 95.387%,12.229% 98.338%,16.075% 99.835%,20.51% 99.429%,25.551% 96.67%,25.551% 96.67%,31.843% 91.849%,39.674% 85.827%,48.524% 79.006%,57.875% 71.79%,67.209% 64.579%,76.009% 57.777%,83.755% 51.786%,89.929% 47.009%,94.014% 43.847%,95.491% 42.704%,95.491% 42.704%,95.617% 42.546%,95.96% 42.083%,96.465% 41.331%,97.078% 40.304%,97.745% 39.019%,98.413% 37.49%,99.026% 35.734%,99.531% 33.766%,99.874% 31.601%,100% 29.256%,100% 29.256%,100% 26.984%,99.999% 25.007%,99.997% 23.289%,99.994% 21.794%,99.987% 20.484%,99.978% 19.325%,99.966% 18.279%,99.949% 17.311%,99.927% 16.384%,99.9% 15.463%,99.9% 15.463%,99.834% 14.406%,99.686% 13.134%,99.442% 11.701%,99.084% 10.161%,98.597% 8.566%,97.966% 6.972%,97.176% 5.431%,96.209% 3.998%,95.052% 2.726%,93.687% 1.67% );
}
#petal-image-5{
  clip-path: polygon( 5.701% 37.752%,5.701% 37.752%,3.651% 39.692%,2.08% 41.934%,0.985% 44.399%,0.364% 47.006%,0.214% 49.677%,0.534% 52.331%,1.319% 54.887%,2.568% 57.267%,4.278% 59.391%,6.447% 61.179%,6.653% 61.315%,74.666% 97.581%,74.666% 97.581%,75.066% 97.787%,75.471% 97.979%,75.881% 98.159%,76.296% 98.325%,76.715% 98.478%,77.138% 98.618%,77.565% 98.745%,77.995% 98.858%,78.429% 98.957%,78.865% 99.043%,81.994% 99.607%,81.994% 99.607%,84.472% 99.832%,86.883% 99.629%,89.19% 99.025%,91.357% 98.05%,93.345% 96.734%,95.117% 95.104%,96.636% 93.192%,97.864% 91.026%,98.766% 88.634%,99.302% 86.048%,100% 80.573%,100% 49.464%,100% 18.058%,99.688% 14.571%,99.688% 14.571%,99.241% 11.934%,98.415% 9.483%,97.247% 7.248%,95.775% 5.262%,94.035% 3.556%,92.066% 2.162%,89.905% 1.11%,87.59% 0.432%,85.159% 0.16%,82.648% 0.325%,78.513% 0.967%,78.513% 0.967%,78.064% 1.044%,77.617% 1.135%,77.174% 1.241%,76.734% 1.362%,76.297% 1.496%,75.865% 1.645%,75.437% 1.807%,75.014% 1.983%,74.596% 2.174%,74.183% 2.377%,7.71% 36.478%,7.71% 36.478%,7.5% 36.588%,7.292% 36.702%,7.086% 36.82%,6.881% 36.942%,6.679% 37.068%,6.479% 37.197%,6.281% 37.33%,6.086% 37.467%,5.892% 37.608%,5.701% 37.752% );
}
#petal-image-6 {
  clip-path: polygon( 93.687% 98.33%,93.687% 98.33%,90.218% 99.109%,83.334% 99.614%,73.899% 99.894%,62.779% 99.997%,50.839% 99.968%,38.944% 99.857%,27.96% 99.711%,18.75% 99.577%,12.181% 99.503%,9.118% 99.537%,9.118% 99.537%,8.041% 99.378%,6.883% 98.739%,5.69% 97.688%,4.507% 96.293%,3.382% 94.623%,2.358% 92.747%,1.483% 90.732%,0.801% 88.646%,0.358% 86.559%,0.2% 84.537%,0.2% 84.537%,0.198% 81.482%,0.191% 76.568%,0.181% 70.271%,0.172% 63.07%,0.163% 55.442%,0.157% 47.867%,0.156% 40.821%,0.162% 34.783%,0.176% 30.23%,0.2% 27.641%,0.2% 27.641%,0.453% 25.419%,1.163% 21.951%,2.349% 17.687%,4.03% 13.075%,6.225% 8.568%,8.951% 4.613%,12.229% 1.662%,16.075% 0.165%,20.51% 0.571%,25.551% 3.33%,25.551% 3.33%,31.843% 8.151%,39.674% 14.173%,48.524% 20.994%,57.875% 28.21%,67.209% 35.421%,76.009% 42.223%,83.755% 48.214%,89.929% 52.991%,94.014% 56.153%,95.491% 57.296%,95.491% 57.296%,95.617% 57.454%,95.96% 57.917%,96.465% 58.669%,97.078% 59.696%,97.745% 60.981%,98.413% 62.51%,99.026% 64.266%,99.531% 66.234%,99.874% 68.398%,100% 70.744%,100% 70.744%,100% 73.016%,99.999% 74.992%,99.997% 76.711%,99.994% 78.206%,99.987% 79.516%,99.978% 80.675%,99.966% 81.721%,99.949% 82.689%,99.927% 83.616%,99.9% 84.537%,99.9% 84.537%,99.834% 85.594%,99.686% 86.866%,99.442% 88.299%,99.084% 89.839%,98.597% 91.434%,97.966% 93.028%,97.176% 94.569%,96.209% 96.002%,95.052% 97.274%,93.687% 98.33% );
}

/* pop up */
.petal-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.petal-popup-content {
    background: white;
    padding: 20px;
    border-radius: 12px;
    max-width: 90%;
    text-align: center;
    position: relative;
}

.petal-popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
}

.popup-button {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background: red;
    color: white;
    text-decoration: none;
    border-radius: 6px;
}



/* Responsive adjustments */
@media (max-width: 768px) {
    
    .petal-text {
        display:none;
    }
     
    .petal-image {
        width: 100%;
        
    }
    
    #the-logo{
        width: 15%;
    }
  
    .petal-item {
        margin-bottom: -20%;
    }
   
  #petal-content-5 .petal-image {
        padding-left: 10%;
    }
      #petal-content-2 .petal-image{
                padding-right: 10%;
      }
   
}


@media (max-width: 425px) {
    
    .petal-text {
      display:none;
     }
  

    
}