.elementor-24 .elementor-element.elementor-element-3ad45cc{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-widget-hotspot .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-hotspot{--hotspot-color:var( --e-global-color-primary );--hotspot-box-color:var( --e-global-color-secondary );--tooltip-color:var( --e-global-color-secondary );}.elementor-widget-hotspot .e-hotspot__label{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-hotspot .e-hotspot__tooltip{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-24 .elementor-element.elementor-element-7f30d24 .elementor-repeater-item-012a0a3{left:63%;--hotspot-translate-x:63%;top:42%;--hotspot-translate-y:42%;}.elementor-24 .elementor-element.elementor-element-7f30d24 .elementor-repeater-item-3ac34c8{left:26%;--hotspot-translate-x:26%;top:67%;--hotspot-translate-y:67%;}.elementor-24 .elementor-element.elementor-element-7f30d24 .e-hotspot--tooltip-position{right:initial;bottom:initial;left:initial;top:calc(100% + 5px );}.elementor-24 .elementor-element.elementor-element-adb1cc1{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-24 .elementor-element.elementor-element-519e3a7{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-24 .elementor-element.elementor-element-519e3a7 > .elementor-widget-container{--e-transform-rotateZ:53deg;--e-transform-scale:0;}.elementor-24 .elementor-element.elementor-element-519e3a7 > .elementor-widget-container:hover{--e-transform-scale:1;}.elementor-24 .elementor-element.elementor-element-519e3a7 .elementor-divider-separator{width:250px;}.elementor-24 .elementor-element.elementor-element-519e3a7 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}@media(max-width:1024px){.elementor-widget-hotspot .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-hotspot .e-hotspot__label{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-hotspot .e-hotspot__tooltip{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-divider .elementor-divider__text{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}}@media(max-width:767px){.elementor-widget-hotspot .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-hotspot .e-hotspot__label{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-hotspot .e-hotspot__tooltip{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-divider .elementor-divider__text{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}}/* Start custom CSS for hotspot, class: .elementor-element-7f30d24 *//* Style for the map container */
#map-container {
  position: relative;
  width: 100%; /* Adjust as needed */
  height: 500px; /* Adjust as needed */
}

/* Style for the hotspots */
.hotspot {
  position: absolute;
  width: 100px; /* Adjust size */
  height: 30px; /* Adjust size */
  background-color: #FF5722; /* Hotspot color */
  border-radius: 5px;
  text-align: center;
  line-height: 30px; /* Center text vertically */
  cursor: pointer;
}

/* Position the hotspots */
.hotspot[data-name="SRI LANKA"] {
  top: 20%; /* Position for SRI LANKA */
  left: 30%; /* Position for SRI LANKA */
}

.hotspot[data-name="CAPE"] {
  top: 70%; /* Position for CAPE */
  left: 80%; /* Position for CAPE */
}

/* Route line */
#map-container::before {
  content: "";
  position: absolute;
  top: 20%; /* Adjust based on SRI LANKA position */
  left: 30%; /* Adjust based on SRI LANKA position */
  width: calc(50% - 15px); /* Adjust based on positions */
  height: 2px;
  background-color: #FF5722; /* Route color */
  transform: rotate(20deg); /* Adjust based on hotspot positions */
  transform-origin: left center;
  transition: opacity 0.3s ease;
  opacity: 0; /* Initially hidden */
}

/* Show the route when hovering over either hotspot */
.hotspot:hover ~ #map-container::before,
#map-container:hover::before {
  opacity: 1;
}/* End custom CSS */