.templates {
    background-color: #FFF;
    overflow: hidden;
    margin-top: 0px !important;
    padding-top: 100px;
  }
  
  @media (max-width: 1199px) {
    .templates {
      margin-top: unset;
    }
  }
 
  .templates  .templates-title .title-container {
    border-radius: 32px !important;
    border: 1px solid #000 !important;
    padding-left: 10px;
    padding-right: 20px;
  }
  
  .templates .figma-templates .template .image-container {
    display: inline-block;
    overflow: hidden;
    border-radius: 12px;
  }
  
  .templates .figma-templates .template .image-container .template-img {
    display: block;
    width: 100%;
    transition: transform 0.8s ease;
  }
  
  .templates .figma-templates .template .image-container .template-img:hover {
    transform: scale(1.1);
  }
  
  .templates .figma-templates .template .figma-btn {
    top: 4%;
    right: 3%;
  }
  
  @media (max-width: 1199px) {
    .templates .figma-templates .template .figma-btn {
      cursor: pointer;
      animation: vibrate-rotate 0.8s infinite;
    }
  }
  
  .templates .figma-templates .template .tag {
    bottom: 5%;
    left: 3%;
  }
  
  .templates .figma-templates .template .tag .rentals {
    background-color: #0075FF;
    border-radius: 50px;
  }
  .templates .figma-templates .template .tag .cruises {
    background-color: #A43368;
    border-radius: 50px;
  }
  .templates .figma-templates .template .bottom-text .template-title {
    color: #1E1E1E;
    cursor: pointer;
  }
  
  .templates .figma-templates .template .bottom-text .template-title:hover {
    text-decoration: underline !important;
  }
  
  @media (max-width: 991px) {
    .templates .figma-templates .template .bottom-text .template-title {
      font-size: 32px;
    }
  }

  
.templates .figma-templates .template .bottom-text .rentals span {
    color: #0075FF; 
  }
  .templates .figma-templates .template .bottom-text .cruises span {
    color: #A43368;
  }
  
  .templates .figma-templates .template:hover .figma-btn {
    animation: vibrate-rotate 0.7s infinite;
    cursor: pointer;
  }
  
  @keyframes vibrate-rotate {
    0% {
      transform: translateX(0) rotate(0);
    }
    25% {
      transform: translateX(-2px) rotate(-2deg);
    }
    50% {
      transform: translateX(2px) rotate(2deg);
    }
    75% {
      transform: translateX(-2px) rotate(-2deg);
    }
    100% {
      transform: translateX(0) rotate(0);
    }
  }
  
  .templates .figma-templates .modal .modal-xl {
    --bs-modal-width: 1700px !important;
  }
  
  @media (min-width: 992px) {
    .templates .figma-templates .modal .modal-lg,
    .templates .figma-templates .modal .modal-xl {
      --bs-modal-width: 1000px;
    }
  }
  
  @media (max-width: 991px) {
    .templates .figma-templates .modal .modal-lg,
    .templates .figma-templates .modal .modal-xl {
      --bs-modal-width: 100%;
    }
  }
  
  .templates .figma-templates .modal .modal-content {
    background: transparent;
    border: 0;
  }
  
  .templates .figma-templates .modal .modal-header {
    background: #212529;
    border: 0;
  }
  
  .templates .figma-templates .modal .modal-header h5 {
    color: #ADB5BD;
    font-family: Syne;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
  }
  
  .templates .figma-templates .modal .modal-header .btn-close {
    --bs-btn-close-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><g clip-path="url(%23clip0_1013_434)"><path d="M0.292786 0.292105C0.480314 0.104634 0.734622 -0.000681838 0.999786 -0.000681838C1.26495 -0.000681838 1.51926 0.104634 1.70679 0.292105L7.99979 6.5851L14.2928 0.292105C14.385 0.196594 14.4954 0.120412 14.6174 0.0680032C14.7394 0.0155942 14.8706 -0.011992 15.0034 -0.0131458C15.1362 -0.0142997 15.2678 0.0110021 15.3907 0.0612829C15.5136 0.111564 15.6253 0.185817 15.7192 0.27971C15.8131 0.373602 15.8873 0.485254 15.9376 0.608151C15.9879 0.731047 16.0132 0.862727 16.012 0.995506C16.0109 1.12829 15.9833 1.25951 15.9309 1.38151C15.8785 1.50351 15.8023 1.61386 15.7068 1.7061L9.41379 7.9991L15.7068 14.2921C15.8889 14.4807 15.9897 14.7333 15.9875 14.9955C15.9852 15.2577 15.88 15.5085 15.6946 15.6939C15.5092 15.8793 15.2584 15.9845 14.9962 15.9868C14.734 15.9891 14.4814 15.8883 14.2928 15.7061L7.99979 9.4131L1.70679 15.7061C1.51818 15.8883 1.26558 15.9891 1.00339 15.9868C0.741189 15.9845 0.490376 15.8793 0.304968 15.6939C0.11956 15.5085 0.0143908 15.2577 0.0121124 14.9955C0.00983399 14.7333 0.110628 14.4807 0.292786 14.2921L6.58579 7.9991L0.292786 1.7061C0.105315 1.51858 0 1.26427 0 0.999105C0 0.73394 0.105315 0.479632 0.292786 0.292105Z" fill="white"/></g><defs><clipPath id="clip0_1013_434"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>');
  }
  
  .templates .figma-templates .modal .modal-body {
    border-radius: 0px 0px 15px 15px;
  }
  
  .templates .figma-templates .modal .modal-body iframe {
    border-radius: 0rem 0rem 0.5rem 0.5rem;
  }
  
  .templates .figma-templates .modal a {
    font-family: "syne";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    color: #FFF;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    padding: 4px 8px;
    border-radius: 3.2px;
    bottom: 9%;
    left: 2%;
  }
  
  @media (max-width: 767px) {
    .templates .figma-templates .modal a {
      bottom: 15%;
    }
  }
  
  .templates .figma-templates .modal #figmaDesktopLink,
  .templates .figma-templates .modal #figmaMobileLink {
    bottom: 9%;
    right: 2%;
    display: flex;
    flex-direction: row;
    border-radius: 3.2px;
    align-items: center;
    font-family: "syne";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    color: #FFF;
    gap: 5px;
    padding: 4px 8px;
  }
  
  @media (max-width: 767px) {
    .templates .figma-templates .modal #figmaDesktopLink,
    .templates .figma-templates .modal #figmaMobileLink {
      bottom: 15%;
    }
  }
  
  .templates .figma-templates .modal #figmaDesktopLink svg,
  .templates .figma-templates .modal #figmaMobileLink svg {
    transform: rotatez(-90deg);
  }