/* Variables */
:root {
    --color-dark-blue: #1C5B79;
    --color-light-blue: #d4eaf5;
    --text-dark-blue: #052c43;

    --light-red: #f5ebeb;
    --dark-red: #cb9696;
    --light-green: #dcebdd;
    --dark-green: #8bbd8e;
    --light-yellow: #f5efd8;
    --dark-yellow: #d1b54a;
    --light-orange: #f4e6d8;
    --dark-orange: #d29a61;
}

body {
    overflow-x: hidden;
}

/* Custom */
.w-fit {
    width: fit-content;
}

.dark-blue {
    color: var(--color-dark-blue);
}

.text-dark-blue {
    color: var(--text-dark-blue);
}

/* Start Header */
.top-header {
    height: 100vh;

    >.mobile-nav {
        background-color: var(--color-dark-blue);
    }

    >.row {
        >.left-side {
            background-color: var(--color-light-blue);
        }

        >.right-side {
            background-image: url("../images/bg_2.jpg");
            background-position: center;
            background-size: cover;
        }
    }
}

/* Start moto */
.moto {
    >.row {
        >div {
            padding: 2rem;

            >span {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                display: flex;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 2rem;
                color: white;
            }

            &:nth-of-type(1) {
                background-color: var(--light-red);

                >span {
                    background-color: var(--dark-red);

                }
            }

            &:nth-of-type(2) {
                background-color: var(--light-green);

                >span {
                    background-color: var(--dark-green);

                }
            }

            &:nth-of-type(3) {
                background-color: var(--light-yellow);

                >span {
                    background-color: var(--dark-yellow);

                }
            }

            &:nth-of-type(4) {
                background-color: var(--light-orange);

                >span {
                    background-color: var(--dark-orange);

                }
            }
        }
    }
}

/* Start about */
.about {
    background-color: #f0eeed;
    height: 70vh;

    img {
        object-position: center;
    }

    .play-button {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem 2rem;
        gap: 2rem;

        >span {
            &:first-of-type {
                width: 60px;
                height: 60px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                background-color: #cf7500;
                color: #fff;
                animation: pulse 1s linear infinite;
            }

            &:last-of-type {
                font-size: 20px;
                color: #cf7500;
            }
        }
    }


}

@media screen and (max-width:767px) {
    .about {
        .row {
            >div {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }
}

@keyframes pulse {
    from {
        outline: 0 solid orange;
    }

    to {
        outline: 20px solid transparent;
    }
}

/* Start projects */
.projects {
    min-height: 100vh;
    padding-top: 8rem;
    padding-inline: 1rem;

    figure {
        height: 400px;
        position: relative;
        padding: 0;

        >figcaption {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            opacity: 0;
            transition: 0.4s;
            display: flex;
            flex-direction: column;
            padding: 2rem;
            gap: 1rem;
            justify-content: flex-end;

            >span {
                color: #fff;
                background-color: black;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 1rem;
                width: fit-content;
                padding: 1rem;
                border-radius: 50%;
            }

            >h3 {
                color: #fff;
            }
        }

        &:hover {
            >figcaption {
                opacity: 1;
            }
        }
    }
}

/* Start statistics */
.statistics {
    background-color: #d4eaf5;
}

/* Start testimgitonial */
.testimonial {
    padding-block: 5rem;
    background-color: #f7f7f7;

    .carousel {
        max-height: 400px !important;


        .carousel-item {

            height: 400px;

            img {
                object-position: 50% 90%;
            }
        }
    }
}

/* Start production */
.production {
    padding-block: 5rem;
    background-color: #f7f7f7;

    >.container>.row {
        >div {
            /* border: 1px solid red; */
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
            text-align: center;
            justify-content: space-between;

            >span {
                display: flex;
                width: 150px;
                height: 150px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                background-color: #fff;
                color: #cf7500;
                font-size: 4rem;
            }


        }

        &::before {
            content: '';
            display: flex;
            width: 70%;
            height: 50%;
            position: absolute;
            top: 25%;
            left: 15%;
            border-top: 1px dashed gray;
        }
    }
}

@media screen and (max-width:768px) {
    .production>.container>.row::before {
        display: none;
    }
}

/* Start footer */
footer {
    background-color: #d4eaf5;
    padding-top: 4rem;

    div[class*="col"] {
        min-height: 250px;
    }

    >p {
        color: grey;
        background-color: #abd6eb;
    }

    figure {

        figcaption {
            transition: 0.4s;
            opacity: 0;
            cursor: pointer;

            a {
                text-decoration: none;
                font-size: 1.5rem;
                color: #052c43;
                transition: 0.4s;

                &:hover {
                    scale: 1.3;
                }
            }

        }

        &:hover {
            >figcaption {
                opacity: 1;
            }
        }
    }
}