@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");

/* Gilroy font-face declarations */
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy/Gilroy-Heavy.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy/Gilroy-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy/Gilroy-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy/Gilroy-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy/Gilroy-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Gilroy font utility classes */
.gilroy-heavy { font-family: 'Gilroy', sans-serif !important; font-weight: 900; }
.gilroy-bold { font-family: 'Gilroy', sans-serif !important; font-weight: 700; }
.gilroy-medium { font-family: 'Gilroy', sans-serif !important; font-weight: 500; }
.gilroy-regular { font-family: 'Gilroy', sans-serif !important; font-weight: 400; }
.gilroy-light { font-family: 'Gilroy', sans-serif !important; font-weight: 300; }

/* Global font */
.space-grotesk { font-family: "Space Grotesk", sans-serif; font-optical-sizing: auto; font-style: normal; }
* { font-family: "Space Grotesk", sans-serif; font-optical-sizing: auto; font-style: normal; }

/* Hero section background */
#hero-section {
    background-image: url("../images/heor-img.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100dvh;
    width: 100%;
}

/* Globe image container */
#globe-img-container {
    position: relative;
    width: 100%;
    background-image: url("../images/globe-img.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#globe-img-container::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 aspect ratio */
}

/* Timeline & other effects */
#timeline-progress { transition: height 0.3s ease-out, opacity 0.3s ease-out; }
.row-hover { transition: all 0.3s ease; }
.row-hover:hover { background: linear-gradient(135deg, #f0fdf4, #ecfdf5); transform: translateY(-1px); }

/* Page image sections */
.page-image-section { position: relative; width: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; }
#equipment-image-section,#equipment-image-section-1 { 
    position: relative; 
    width: 100%; 
    background-image: url("../images/timeline-img-1.svg"); 
    background-size: contain; 
    background-position: center; 
    background-repeat: no-repeat; 
}
#food-grade-image-section{ background-image: url("../images/food-grade-guar.svg"); }
#cationic-guar-image-section{ background-image: url("../images/cationic-guar.svg"); }
#guar-split-image-section{ background-image: url("../images/guar-split.svg"); }
#animal-feed-image-section{ background-image: url("../images/guar-korma.svg"); }
#guar-churi-image-section{ background-image: url("../images/guar-churi.svg"); }
#oil-and-gas-image-section{ background-image: url("../images/oil-gas-industry.svg"); }
#equipment-machinery-image-section{ background-image: url("../images/eqiupments-and-machinery.svg"); }

/* Heading clamp for hero */
.heading-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Gradient animation */
@keyframes rotateBorder {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animate-gradient {
  background-size: 600% 600%;
  animation: rotateBorder 4s linear infinite;
}

/* Marquee scroll */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.33%); }
}
.animate-scroll { animation: scroll 60s linear infinite; }

/* Responsive adjustments */
@media (min-width: 768px) {
    #globe-img-container::before { padding-top: 50%; } /* maintain aspect ratio for desktop */
    #globe-img-container { background-size: cover; height: 65dvh; background-attachment: fixed; }
}