@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --font-global: 'Montserrat', sans-serif;
    --color-background: #f2f2f3;
    --radius-section: 14px;
}

/* Scroller */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
}

::-webkit-scrollbar-thumb {
    background: #000; 
}

::-webkit-scrollbar-thumb:hover {
    background: #000; 
}

.btn {
    padding: 9px 38px;
    border-radius: 5px;
}

body {
    background: var(--color-background);
    font-family: var(--font-global);
}

.carousel-caption {
    text-align: start;
    display: flex;
    align-items: start;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    color: #000;
    width: 30%;
}

.nav-link {
    font-weight: 500;
    margin-right: 19px;
}

.navbar {
    z-index: 99;
    position: absolute;
}

.navbar-brand {
    z-index: 1;
    position: relative;
}

.navbar-brand:after {
    z-index: -1;
    content: " ";
    width: 288px;
    height: 190px;
    background: #000000;
    margin: auto;
    transform: perspective(361px) rotateX(-45deg);
    display: block;
    position: absolute;
    top: -26px;
    left: -59px;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
}

.navbar-brand img {
    width: 65%;
}

/* Section */
.section-title {
    position: relative;
    display: inline-block;
    color: #fff;
    z-index: 1;
    padding: 11px 38px;
    bo: 21px;
    margin-bottom: 22px;
}

.section-title:after {
    content: " ";
    background: #000;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    z-index: -1;
    top: 1px;
    border-top-right-radius: var(--radius-section);
    border-bottom-right-radius: var(--radius-section);
}

.icon-wrap {
    background: #000;
    text-align: center;
    border-radius: 17px;
    padding: 25px 0;    
}

.icon-wrap > img {
    width: 50%;
}

.about {
    background-image: url('../img/about.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    font-size: 16px;
    font-weight: 400;
}

.table>:not(caption)>*>* {
    width: 75%;
}

/* Responsive */
@media(max-width:768px){
    .navbar-brand:after {
        display: none;
    }
    
    .navbar-brand img {
        width: 18vh;
    }
    
    .navbar {
        position: sticky;
    }
}