/*=========================================================
  PETRO IFMS
  Global Design System
=========================================================*/

:root{

    /*======== Brand Colors ========*/
    --primary:#ed5900;
    --primary-dark:#A91E1E;
    --secondary:#1E293B;
    --accent:#F4B400;

    /*======== Neutral ========*/
    --white:#ffffff;
    --black:#111827;

    --gray-50:#F8FAFC;
    --gray-100:#F1F5F9;
    --gray-200:#E2E8F0;
    --gray-300:#CBD5E1;
    --gray-400:#94A3B8;
    --gray-500:#64748B;
    --gray-600:#475569;
    --gray-700:#334155;
    --gray-800:#1E293B;
    --gray-900:#0F172A;

    /*======== Text ========*/
    --heading-color:var(--gray-900);
    --text-color:var(--gray-600);
    --text-light:var(--gray-500);

    /*======== Background ========*/
    --body-bg:#ffffff;
    --section-bg:#F8FAFC;
    --dark-bg:#0F172A;

    /*======== Border ========*/
    --border-color:#E2E8F0;

    /*======== Radius ========*/
    --radius-sm:.5rem;
    --radius-md:1rem;
    --radius-lg:1.5rem;
    --radius-xl:2rem;

    /*======== Shadow ========*/
    --shadow-sm:0 .25rem .75rem rgba(0,0,0,.05);

    --shadow-md:0 .5rem 2rem rgba(0,0,0,.08);

    --shadow-lg:0 1rem 3rem rgba(0,0,0,.12);

    /*======== Container ========*/
    --container:85%;
    --container-lg:90%;

    /*======== Transition ========*/
    --transition:.35s ease;

    /*======== Fonts ========*/
    --rs-ff-body: "Space Grotesk", sans-serif;
    --rs-ff-title: "Outfit", sans-serif;
    --rs-ff-p: "Space Grotesk", sans-serif;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    font-size:100%;
    overflow-x:hidden;
    width: 100%;
}

body{
    font-family: var(--rs-ff-body);
    background:var(--body-bg);
    color:var(--text-color);
    line-height:1.7;
    overflow-x:hidden;
    width: 100%;
    cursor:none; /* hide default cursor */
}

/*=========================================================
  Custom Cursor — dot + ring
=========================================================*/

/* Dot — tiny filled circle */
.cursor-dot{
    position:fixed;
    top:0; left:0;
    width:8px;
    height:8px;
    background:var(--primary); /* orange brand colour */
    border-radius:50%;
    pointer-events:none;
    z-index:99999;
    will-change:transform;
    transform:translate(-50%,-50%);
    transition:width .15s ease, height .15s ease, opacity .2s ease;
}

/* Ring — hollow circle that lags behind */
.cursor-ring{
    position:fixed;
    top:0; left:0;
    width:36px;
    height:36px;
    border:1.5px solid rgba(237,89,0,.45); /* semi-transparent orange */
    border-radius:50%;
    pointer-events:none;
    z-index:99998;
    will-change:transform;
    transform:translate(-50%,-50%);
    transition:width .25s ease, height .25s ease,
               border-color .25s ease, opacity .2s ease;
}

/* Hover state — ring expands, dot disappears */
.cursor-ring--hover{
    width:56px;
    height:56px;
    border-color:var(--primary);
}
.cursor-dot--hover{
    width:4px;
    height:4px;
    opacity:.4;
}

/* Click state — ring shrinks */
.cursor-ring--click{
    width:26px;
    height:26px;
    border-color:var(--primary);
}
.cursor-dot--click{
    width:12px;
    height:12px;
}

/* Restore default pointer for everything except body */
a, button, input, textarea, label, select, [data-cursor-hover]{
    cursor:none;
}


img{
    width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

button,
input,
textarea{
    font:inherit;
    border:none;
    outline:none;
}

section{
    padding:3vw 0;
}

.container{
    width:var(--container);
    margin:auto;
}


h1,
h2,
h3,
h4,
h5,
h6{
    font-family: var(--rs-ff-title);
    color:var(--heading-color);
    line-height:1.2;
    font-weight:700;
}

h1{
    font-size:clamp(3rem,5vw,5rem);
}

h2{
    font-size:clamp(2rem,4vw,2.8rem);
}

h3{
    font-size:clamp(1.6rem,2.5vw,2.3rem);
}

h4{
    font-size:clamp(1.3rem,2vw,1.8rem);
}

h5{
    font-size:1.15rem;
}

h6{
    font-size:1rem;
}

/* p{
    font-size:1rem;
    color:var(--text-color);
} */

small{
    color:var(--text-light);
}

/*=========================================================
  Custom Mobile Bottom Navigation Footer
=========================================================*/
.mobile-footer-nav {
    display: none;
}

@media (max-width: 768px) {
    body {
        padding-bottom: 80px !important;
    }

    .mobile-footer-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04);
        justify-content: space-around;
        align-items: center;
        z-index: 99999;
        padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)) 0;
    }

    .mobile-footer-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        text-decoration: none;
        gap: 5px;
        transition: var(--transition);
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-footer-nav-icon {
        width: 22px;
        height: 22px;
        transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .mobile-footer-nav-item span {
        font-family: var(--rs-ff-title);
        font-size: 11px;
        font-weight: 600;
        color: var(--secondary);
        transition: var(--transition);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Interactive States & Micro-animations */
    .mobile-footer-nav-item:hover .mobile-footer-nav-icon,
    .mobile-footer-nav-item:focus .mobile-footer-nav-icon {
        transform: translateY(-3px) scale(1.15);
    }

    .mobile-footer-nav-item:hover span,
    .mobile-footer-nav-item:focus span {
        color: var(--primary);
    }
}

/*=========================================================
  Preloader
=========================================================*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--white);
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease;
}

#preloader.fade-out {
  opacity: 0;
}

.loader-wrapper {
  position: relative;
  width: 90px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--primary);
  border-bottom-color: var(--secondary);
  animation: spin 4s linear infinite;
}

.loader-logo {
  width: 45px;
  height: auto;
  z-index: 2;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}