:root {
    --opec-color: #00A5E8;
    --swiper-theme-color: var(--opec-color);
}

.subsubMenuHeight{
    height:calc(100vh - 4rem)!important;
}

@font-face {
    font-family: "Roboto";
    font-display: swap;
    src: url(../../404.html) format("woff2");
}

/***** Swiper *****/
.autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 5px;
    stroke: var(--opec-color);
    fill: none;
    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
}


.map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}
.video-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

.video-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.instagram-media{margin:10px auto !important;}

/* Utility classes for the compensation & feedback forms */
.max-w-2xl { max-width: 42rem; }
.max-w-md { max-width: 28rem; }
.max-w-5xl { max-width: 64rem; }
.mb-1 { margin-bottom: 0.25rem; }
.rounded-xl { border-radius: 0.75rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.gap-8 { gap: 2rem; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
.bg-green-100 { background-color: rgb(220 252 231); }
.border-green-300 { border-color: rgb(134 239 172); }
.hover\:opacity-90:hover { opacity: 0.9; }
.ring-opec { --tw-ring-opacity: 1; --tw-ring-color: rgb(0 165 232 / var(--tw-ring-opacity)); }
.focus\:ring-opec:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(0 165 232 / var(--tw-ring-opacity)); }
@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}