/* Custom CSS for the Botomatically Hero Section */

:root {
    --botomatically-dark-green: #0a140a;
    /* A very dark green, almost black */
    --botomatically-bright-green: #59f578;
    /* For button and accents */
}

.bg-bright-green {
    background: var(--botomatically-bright-green);
}

.text-bright-green {
    color: var(--botomatically-bright-green);
}

section {
    min-height: 100vh !important;
}

.botomatically-hero,
.WhatWeCanDo {
    /* Set the background color to match the image */
    background-color: var(--botomatically-dark-green);
    /* The image has a subtle green gradient/overlay effect */
    background-image: linear-gradient(rgba(0, 200, 0, 0.05), rgba(0, 0, 0, 0.9));
    /* min-height: 80vh; */
    /* Make the section tall */
    padding: 80px 0;
}

/* Custom button style to match the bright green */
.botomatically-btn {
    background-color: var(--botomatically-bright-green);
    color: var(--botomatically-dark-green);
    /* Dark text on bright green button */
    border: none;
    border-radius: 0;
    /* Square edges */
    transition: background-color 0.3s ease;
}

.botomatically-btn:hover {
    background-color: #33ff33;
    /* Slightly lighter on hover */
    color: var(--botomatically-dark-green);
}

/* Custom styling for the header text based on the image */
.botomatically-hero h1 {
    /* Adjust line height if necessary for better text flow */
    line-height: 1.1;
}

/* Note on Graphic:
   The complex graphic (robot, asterisk, glow) is best included as a single PNG or SVG
   with a transparent background, or as separate layered elements for complex effects.
   For a functional setup, an <img> tag is the easiest approach inside the
   .botomatically-graphic div.
*/


/* --- Third Section: Services Styling --- */
.botomatically-services {
    background-color: var(--botomatically-light-gray);
    /* Light background */
    color: var(--botomatically-text-color);
    /* Darker text */
}

.botomatically-services h2 {
    color: var(--botomatically-dark-green);
    /* Heading color */
    font-size: 2.5rem;
    /* Adjust heading size */
}

.service-item {
    /* Optional: Add some subtle box-shadow or border if desired */
    /* border: 1px solid #e9ecef; */
    /* border-radius: .5rem; */
    /* background-color: white; */
}

.service-icon-wrapper {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;

    background:
        linear-gradient(45deg, rgb(30, 255, 0), rgb(246, 255, 0), lime) border-box,
        /* Gradient border */
        white padding-box;
    /* Inner background (inside border) */

    border: 2px solid transparent;
    /* Needed for background-clip to work */
    background-origin: border-box;
    background-clip: content-box, border-box;
    padding: 16px;
}

.service-icon-wrapper i {
    font-size: 2.5rem;
    /* Size of the Bootstrap Icon */
    /* color: var(--botomatically-bright-green); */
    /* Icon color */
    /* Optional: Add a subtle text shadow for glow effect if needed */
    /* text-shadow: 0 0 8px rgba(0, 255, 0, 0.5); */
}

.service-item h3 {
    color: var(--botomatically-text-color);
    /* Heading for service item */
}

.service-item p {
    font-size: 0.9rem;
    /* Smaller text for description */
}

/* Ensure the graphic placeholder for the hero section doesn't take up too much space if empty */
.botomatically-graphic {
    min-height: 200px;
    /* Example min-height */
    /* background-color: rgba(0, 255, 0, 0.1); */
    /* For visual debugging */
    /* background-image: url('path/to/your/robot-graphic.png'); */
    /* Add your actual image here */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.gradient-ring {
    width: 148px;
    height: 148px;
    border-radius: 1000px;
    padding: 8px;
    background: linear-gradient(45deg, rgb(30, 255, 0), rgb(246, 255, 0), lime) border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner-circle {
    background-color: #fff;
    border-radius: 1000px;
    width: 138px;
    height: 138px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ls-1 {
    letter-spacing: 1px;
}

.ls-2 {
    letter-spacing: 2px;
}

.ls-wide {
    letter-spacing: 0.1em;
}

.ls-tight {
    letter-spacing: -0.05em;
}

.shadow-custom {
    filter: drop-shadow(0 0 24px rgba(98, 250, 77, 0.24));
}

.clipped-video {
    width: 100%;
    height: auto;
    /* clip-path: circle(50% at center); */
    clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
    /* Try other shapes: polygon(), ellipse(), etc. */
}