@import "common.css";


.go-to-top-btn {
    width: 100px;
}

div.scrollmenu {
    background-color: transparent;
    overflow: auto;
    white-space: nowrap;
    /* Hide the scrollbar for Internet Explorer, Edge and Firefox */
    -ms-overflow-style: none;  /* Internet Explorer and Edge */
    scrollbar-width: none;  /* Firefox */

    /* Hide the scrollbar for Chrome, Safari and Opera */
    &::-webkit-scrollbar {
       display: none;
    }
}
  
div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 20px;
    padding-right: 20px;
    margin-right: 20px;
    text-decoration: none;
    background-color: var(--btn-gray);
    border-radius: 100px;
    font-weight: bold;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 20px;
}

div.scrollmenu a:active, div.scrollmenu a.active {
    display: inline-block;
    color: var(--primary);
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 20px;
    padding-right: 20px;
    margin-right: 20px;
    text-decoration: none;
    background-color: var(--gray);
    border-radius: 100px;
    font-weight: bold;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 20px;
}

div.scrollmenu p {
    display: inline-block;
    color: var(--primary);
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 20px;
    padding-right: 20px;
    margin-right: 20px;
    text-decoration: none;
    background-color: var(--gray);
    border-radius: 100px;
    font-weight: bold;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 20px;
}

div.scrollmenu a:hover {
    display: inline-block;
    color: white;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 20px;
    padding-right: 20px;
    margin-right: 20px;
    text-decoration: none;
    background: rgb(112,119,128) !important;
    background: linear-gradient(0deg, rgba(112,119,128,1) 20%, rgba(255,255,255,1) 95%)!important;
    border-radius: 100px;
    font-weight: bold;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 20px;
}

.card-funtion-list {
    background-color: var(--gray);
    width: 20rem;
}

.card-funtion-list-2 {
    background-color: var(--primary);
    width: 20rem;
}

.landing-image {
    height: 340px;
    width: 90%;
    object-fit: cover;
    object-position: 100% 100%;
}

.card-funtion-view {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.solution-section-text {
    font-size: 48px;
}

.function-title-text {
    font-size: 28px;
}

.function-desc-text {
    font-size: 20px;
}

.section-view {

}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
    .card-funtion-view {
        display: flex;
        flex-direction: column;
        align-items: start;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
   
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

}

@media (min-width: 1440px) { 
    .card-funtion-list {
        background-color: var(--gray);
        width: 424px;
        /* height: 658px; */
    }
    .card-funtion-list-2 {
        background-color: var(--primary);
        width: 424px;
        /* height: 658px; */
    }
    .section-view {
        height: 1166px;
    }
}