@tailwind base;
@tailwind components;
@tailwind utilities;



@layer components {
  .field_with_errors input{
    @apply w-full !border-red-2400;
  }
}


/* Blog Style */

@layer components {
  .blog-content {
    @apply max-w-3xl mx-auto px-4 py-8 prose prose-lg prose-neutral dark:prose-invert;

    /* Optional: add font customization to match Medium */
    font-family: theme('fontFamily.medium');
    /* line-height: 2; */
  }

  .blog-content code,
  .blog-content pre {
    font-family: theme('fontFamily.code');
  }

  .blog-content h1 {
    @apply text-4xl font-bold mt-8 mb-4;
  }

  .blog-content h2 {
    @apply text-3xl font-semibold mt-8 mb-4;
  }

  .blog-content h3 {
    @apply text-2xl font-semibold mt-6 mb-3;
  }

  .blog-content p {
    @apply mb-6 text-base;
  }

  .blog-content a {
    @apply text-blue-600 hover:underline;
  }

  .blog-content ul,
  .blog-content ol {
    @apply list-disc pl-5 mb-6;
  }

  .blog-content li {
    @apply mb-2;
  }

  .blog-content blockquote {
    @apply border-l-4 border-gray-400 pl-4 italic text-gray-600 my-6;
  }

  .blog-content img {
    @apply rounded-xl my-6 w-full;
  }

  .blog-content strong {
    @apply font-semibold;
  }

  .blog-content em {
    @apply italic;
  }

  .blog-content code {
    @apply bg-gray-100 px-1 py-0.5 rounded text-sm font-mono;
  }

  .blog-content pre {
    @apply bg-gray-900 text-white text-sm p-4 rounded overflow-x-auto my-6;
  }
}
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .blog-content {
    @apply max-w-3xl mx-auto px-4 py-8 prose prose-lg prose-neutral dark:prose-invert;

    /* Optional: add font customization to match Medium */
    font-family: 'Georgia', 'Cambria', serif;
    line-height: 1.75;
  }

  .blog-content h1 {
    @apply text-4xl font-bold mt-8 mb-4;
  }

  .blog-content h2 {
    @apply text-3xl font-semibold mt-8 mb-4;
  }

  .blog-content h3 {
    @apply text-2xl font-semibold mt-6 mb-3;
  }

  .blog-content p {
    @apply mb-6 text-base;
  }

  .blog-content a {
    @apply text-blue-600 hover:underline;
  }

  .blog-content ul,
  .blog-content ol {
    @apply list-disc pl-5 mb-6;
  }

  .blog-content li {
    @apply mb-2;
  }

  .blog-content blockquote {
    @apply border-l-4 border-gray-400 pl-4 italic text-gray-600 my-6;
  }

  .blog-content img {
    @apply rounded-xl my-6 w-full;
  }

  .blog-content strong {
    @apply font-semibold;
  }

  .blog-content em {
    @apply italic;
  }

  .blog-content code {
    @apply bg-gray-100 px-1 py-0.5 rounded text-sm font-mono;
  }

  .blog-content pre {
    @apply bg-gray-900 text-white text-sm p-4 rounded overflow-x-auto my-6;
  }
}
/* jQuery Growl
 * Copyright 2015 Kevin Sylvestre
 * 1.3.5
 */
.ontop, #growls-default, #growls-tl, #growls-tr, #growls-bl, #growls-br, #growls-tc, #growls-bc, #growls-cc, #growls-cl, #growls-cr {
  z-index: 50000;
  position: fixed; }

#growls-default {
  top: 10px;
  right: 10px; }
#growls-tl {
  top: 10px;
  left: 10px; }
#growls-tr {
  top: 10px;
  right: 10px; }
#growls-bl {
  bottom: 10px;
  left: 10px; }
#growls-br {
  bottom: 10px;
  right: 10px; }
#growls-tc {
  top: 10px;
  right: 10px;
  left: 10px; }
#growls-bc {
  bottom: 10px;
  right: 10px;
  left: 10px; }
#growls-cc {
  top: 50%;
  left: 50%;
  margin-left: -125px; }
#growls-cl {
  top: 50%;
  left: 10px; }
#growls-cr {
  top: 50%;
  right: 10px; }
#growls-tc .growl, #growls-bc .growl {
  margin-left: auto;
  margin-right: auto; }

.growl {
  opacity: 0.8;
  filter: alpha(opacity=80);
  position: relative;
  border-radius: 4px;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out; }
  .growl.growl-incoming {
    opacity: 0;
    filter: alpha(opacity=0); }
  .growl.growl-outgoing {
    opacity: 0;
    filter: alpha(opacity=0); }
  .growl.growl-small {
    width: 200px;
    padding: 5px;
    margin: 5px; }
  .growl.growl-medium {
    width: 250px;
    padding: 10px;
    margin: 10px; }
  .growl.growl-large {
    width: 300px;
    padding: 15px;
    margin: 15px; }
  .growl.growl-default {
    color: #FFF;
    background: #7f8c8d; }
  .growl.growl-error {
    color: #FFF;
    background: #C0392B; }
  .growl.growl-notice {
    color: #FFF;
    background: #2ECC71; }
  .growl.growl-warning {
    color: #FFF;
    background: #F39C12; }
  .growl .growl-close {
    cursor: pointer;
    float: right;
    font-size: 14px;
    line-height: 18px;
    font-weight: normal;
    font-family: helvetica, verdana, sans-serif; }
  .growl .growl-title {
    font-size: 18px;
    line-height: 24px; }
  .growl .growl-message {
    font-size: 14px;
    line-height: 18px; }
/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(/owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */


@media only screen and (max-width: 767px) {
    .bk-bg {
        background-image: url(asset-url(/assets/bk-bg-37cc8946e5e834af5c779ec81729bab423af15c77ec7e2a62fa6e46f11423a12.svg));
        background-size: cover;
        background-repeat: no-repeat;
        height: 242px;
    }

    .l-bg {
        background-image: url(asset-url(/bl-bg.svg));
        background-size: cover;
        background-repeat: no-repeat;
        height: 242px;
    }
}

/* Tablet (768px to 1024px) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .bk-bg {
        background-image: url(asset-url(/assets/bk-bg-37cc8946e5e834af5c779ec81729bab423af15c77ec7e2a62fa6e46f11423a12.svg));
        background-size: cover;
        background-repeat: no-repeat;
        height: 293px;
    }

    .l-bg {
        background-image: url(/assets/l-bg.svg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 293px;
    }
}

/* Desktop (min-width: 1025px) */
@media only screen and (min-width: 1025px) {
    .bk-bg {
        background-image: url(/assets/bk-bg.svg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 293px;
    }

    .l-bg {
        background-image: url(/assets/l-bg.svg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 293px;
    }
}

.dropdown-menu {
      display: none;
      /* Default hidden */
      opacity: 0;
      transform: translateY(-10px);
    }

    .dropdown-menu.block {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }