/* ===================================
   Ogg Font Face
   =================================== */
@font-face {
  font-family: 'Ogg';
  src: url('Ogg-Roman.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ogg';
  src: url('Ogg-Roman.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: 'gibstone';
    src: url('../fonts/GibstoneTrial-Bold.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'certia';
    src: url('../fonts/certia/Certia-Regular.otf') format('otf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Premium Presentation Container */
.webpage-container {display: flex;justify-content: center;align-items: center;width: 100vw;height: 100vh;position: relative;background-color: #27344d;}
/* Top content */
.top-content{position:absolute;top:70px;left:120px;right:120px;display:flex;justify-content:space-between;align-items:flex-start;z-index:100;}
.content-left{width:16%;}
.content-right{width:78%;}
.content-left h2 {font-size: 51px;font-weight: 700;color: #fff;text-transform: uppercase;padding-top: 40px;margin: 0;font-family: "gibstone";}
.content-right p {color: #fff;font-size: 16px;line-height: 21px;padding-top: 40px;}
/* Absolute Left Section: Slide Indicators */
.slider-left {position: absolute;left: 116px;top: 65%;transform: translateY(-50%);z-index: 100;}
.slide-indicators {display: flex;flex-direction: column;gap: 32px;}
.indicator-item {font-size: 13px;font-weight: 300;color: #cccccc;cursor: pointer;transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);display: flex;align-items: center;gap: 12px;font-variant-numeric: tabular-nums;user-select: none;}
.indicator-item::before {content: '';display: inline-block;width: 0;height: 1px;background-color: #000000;transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);}
.indicator-item.active {color: #fff;font-weight: 500;font-size: 18px;transform: translateX(10px);}
.indicator-item.active::before {width: 16px;}
.indicator-item:hover {color: #000000;}
/* Center Section: Circular Mask & Line */
.slider-center {display: flex;justify-content: center;align-items: center;z-index: 50;position: relative;top: 15%;}
.circle-slider-wrapper {display: flex;flex-direction: column;align-items: center;position: relative;}
.circle-frame {width: 350px; height: 350px; position: relative;border-radius: 50%;overflow: visible;}
.slide-image-layer {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;overflow: hidden;background-size: cover;background-position: center;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);}
.slide-image-layer.current {z-index: 1;}
.slide-image-layer.next {    z-index: 2;    -webkit-mask-image: conic-gradient(from 220deg, #000000 0deg, transparent 0deg);    mask-image: conic-gradient(from 220deg, #000000 0deg, transparent 0deg);}
.center-dot {width: 11px; height: 11px; background-color: #000000;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 10;box-shadow: 0 0 0 2px #ffffff;}
.radial-line {position: absolute;top: 50%;left: 50%;width: 280px; height: 1px;background-color: #e2e2e2;transform-origin: 0% 100%;z-index: 5;transform: rotate(130deg);}
.radial-line::after {content: '';position: absolute;right: 0;top: -2.5px;width: 6px;height: 6px;border-radius: 50%;background-color: #cccccc;}
/* Coordinates Styling */
.coordinates-wrapper {margin-top: 48px;display: flex;justify-content: center;}
.coordinates-text {font-size: 14px;font-weight: 300;letter-spacing: 1.5px;color: #ffffff;font-variant-numeric: tabular-nums;font-family: 'Outfit', monospace;}

@media(max-width:991px){
.content-right p {color: #fff;font-size: 8px;line-height: 1.8;max-width: 650px;padding-top: 8px;}
.content-right {width: 100%;}
.content-left h2 {font-size: 16px;font-weight: 700;color: #fff;text-transform: uppercase;padding-top: 40px;margin: 0;font-family: "gibstone";}
.content-left {width: 100%;}
.top-content {position: absolute;top: -16px;left: 120px;right: 120px;display: block;justify-content: space-between;align-items: center;text-align: center;z-index: 100;}
.slider-left {position: absolute;left: 0px;top: 31%;transform: translateY(-50%);z-index: 100;}
.slide-indicators {display: flex;flex-direction: column;gap: 11px;}
.indicator-item {font-size: 11px;font-weight: 300;color: #cccccc;cursor: pointer;transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);display: flex;align-items: center;gap: 10px;font-variant-numeric: tabular-nums;user-select: none;}
.indicator-item.active {color: #fff;font-weight: 500;font-size: 19px;transform: translateX(10px);}
.circle-frame {width: 250px; height: 250px; position: relative;border-radius: 50%;overflow: visible;}
}