@import url("../_vendor/ddb35ffa49195d98.css");
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    padding: 0;
    margin: 0;
    min-height: 100%;
    box-sizing: border-box;
    /* background-color: dodgerblue; */
    /* background-color: #484848; */
}


/* ===== Navbar Section =====  */

nav {
    width: 100%;
    box-shadow: 3px 3px 5px rgba(7, 83, 246, 0.1);
    background-image: linear-gradient(to bottom right, white, white, rgba(8, 146, 238, .9), rgb(8, 146, 238));
    border-bottom: 3px solid white;
}

nav ul {
    width: 100%;
    height: 100%;
    margin-top: 0;
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

nav ul li a {
    height: 100%;
    padding: 0 20px;
    font-size: 2rem;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    color: black;
}

nav ul li a:hover {
    color: #088178;
    text-decoration: none;
}

.search-set {
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-input {
    width: 200px;
    font-size: 1.5rem;
    font-family: minion-pro, serif;
    height: 30px;
    outline: none;
    border: none;
    color: black;
    background: transparent;
}

.input-search {
    height: 35px;
    width: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgb(255, 218, 218);
    border-radius: 20px;
}

.search-input:hover {
    cursor: pointer;
}

.search-icon {
    width: 30px;
    height: 30px;
    display: flex;
    padding-top: 5px;
    padding-bottom: 5px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.search-icon:hover {
    cursor: pointer;
    border: 1px solid transparent;
}

.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    left: 3px;
    height: 50%;
    width: 100vh;
    background-color: rgba(255, 255, 255, 1);
    backdrop-filter: blur(12px);
    list-style: none;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
    box-shadow: 3px 3px 5px rgba(7, 83, 246, 0.1);
    background-image: linear-gradient(to bottom right, white, white, rgb(8, 146, 238), rgb(8, 146, 238));
}

.sidebar li {
    width: 100%;
    color: black;
    font-weight: 700;
    display: block;
    justify-content: center;
    align-items: center;
}

.sidebar li:hover {
    color: orangered;
    text-decoration: none;
}

.sidebar a {
    width: 100%;
}

.menu-button {
    display: none;
}

.lap-bar {
    position: static;
    display: flex;
    justify-content: space-between;
    color: black;
    margin-bottom: 0;
    box-shadow: 3px 3px 5px rgba(7, 83, 246, 0.1);
}

.lap-bar .h-logo {
    display: flex;
    align-items: center;
}

.lap-bar .h-text {
    display: flex;
    justify-content: center;
    align-items: center;
}

.h-logo li .logo-ext-txt {
    font-size: 2rem;
}

.lap-bar a {
    color: darkblue;
}

.active {
    color: #088178;
    font-weight: bold;
    text-decoration: underline;
}

@media(max-width: 700px) {
    .hideOnMobile {
        display: none;
    }
    .input-search {
        display: none;
    }
    .menu-button {
        display: block;
    }
}

@media(max-width: 400px) {
    .sidebar {
        width: 100%;
        z-index: 9999;
    }
}


/* carousel */

.carousel {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
    font-family: poppins, sans-serif;
    border-bottom: 2px solid black;
}

.carousel .list .item {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0 0 0 0;
}

.carousel .list .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel .list .item .content {
    position: absolute;
    top: 10%;
    width: 1140px;
    max-width: 80%;
    left: 42%;
    transform: translateX(-50%);
    padding-right: 30%;
    box-sizing: border-box;
    color: #fff;
    text-shadow: 0 5px 10px #0004;
}

.content .pascal-p {
    line-height: 13px;
}

.content .kolb-p {
    line-height: 17px;
}

.carousel .list .item .author {
    font-weight: bold;
    /* letter-spacing: 10px; */
}

.carousel .list .item .title,
.carousel .list .item .topic {
    font-size: 5em;
    font-weight: bold;
    line-height: 1.3em;
}

.carousel .list .item .des {
    font-size: 16px;
    line-height: 1.4em;
    font-weight: 600;
}

.carousel .list .item .topic {
    color: #f1683a;
}

.carousel .list .item .buttons {
    display: grid;
    grid-template-columns: repeat(2, 130px);
    grid-template-rows: 40px;
    gap: 5px;
    margin-top: 200px;
}

.carousel .list .item .buttons img {
    --color: #0077ff;
    font-family: inherit;
    display: inline-block;
    text-align: center;
    width: 100px;
    height: 100px;
    line-height: 2.5em;
    overflow: hidden;
    cursor: pointer;
    margin: 20px;
    font-size: 17px;
    z-index: 1;
    color: var(--color);
    position: relative;
    text-decoration: none;
}

.buttons a::before {
    position: absolute;
    content: "";
    background: var(--color);
    width: 150px;
    height: 200px;
    z-index: -1;
    border-radius: 50%;
}

.buttons a:hover {
    color: white !important;
}

.buttons a:before {
    top: 100%;
    left: 100%;
    transition: 0.3s all;
}

.buttons a:hover::before {
    top: -30px;
    left: -30px;
}

.carousel .list .item .buttons a:nth-child(2) {
    background-color: transparent;
    border: 1px solid #fff;
    color: #eee;
}


/* thumbail */

.thumbnail {
    position: absolute;
    bottom: 5px;
    left: 60%;
    width: max-content;
    z-index: 100;
    display: flex;
    gap: 10px;
}

.thumbnail .item {
    width: 100px;
    height: 150px;
    flex-shrink: 0;
    position: relative;
}

.thumbnail .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.thumbnail .item .content {
    color: #fff;
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
}

.thumbnail .item .content .title {
    font-weight: 500;
}

.thumbnail .item .content .description {
    font-weight: 300;
}


/* arrows */

.arrows {
    position: absolute;
    top: 80%;
    right: 52%;
    z-index: 100;
    width: 300px;
    max-width: 30%;
    display: flex;
    gap: 10px;
    align-items: center;
}

.arrows button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eee4;
    border: none;
    color: #fff;
    font-family: monospace;
    font-weight: bold;
    transition: .5s;
}

.arrows button:hover {
    background-color: #fff;
    color: #000;
}


/* animation */

.carousel .list .item:nth-child(1) {
    z-index: 1;
}


/* animation text in first item */

.carousel .list .item:nth-child(1) .content .author,
.carousel .list .item:nth-child(1) .content .title,
.carousel .list .item:nth-child(1) .content .topic,
.carousel .list .item:nth-child(1) .content .des,
.carousel .list .item:nth-child(1) .content .buttons {
    transform: translateY(50px);
    filter: blur(20px);
    opacity: 0;
    animation: showContent .5s 1s linear 1 forwards;
}

@keyframes showContent {
    to {
        transform: translateY(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

.carousel .list .item:nth-child(1) .content .pascal-p {
    transform: translateY(50px);
    filter: blur(20px);
    opacity: 0;
    animation: showContent .5s 1s linear 1 forwards;
}

.carousel .list .item:nth-child(1) .content .title {
    animation-delay: 1.2s!important;
}

.carousel .list .item:nth-child(1) .content .topic {
    animation-delay: 1.4s!important;
}

.carousel .list .item:nth-child(1) .content .des {
    animation-delay: 1.6s!important;
}

.carousel .list .item:nth-child(1) .content .buttons {
    animation-delay: 1.8s!important;
}


/* create animation when next click */

.carousel.next .list .item:nth-child(1) img {
    width: 150px;
    height: 220px;
    position: absolute;
    bottom: 50px;
    left: 50%;
    border-radius: 30px;
    animation: showImage .5s linear 1 forwards;
}

@keyframes showImage {
    to {
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

.carousel.next .thumbnail .item:nth-last-child(1) {
    overflow: hidden;
    animation: showThumbnail .5s linear 1 forwards;
}

.carousel.prev .list .item img {
    z-index: 100;
}

@keyframes showThumbnail {
    from {
        width: 0;
        opacity: 0;
    }
}

.carousel.next .thumbnail {
    animation: effectNext .5s linear 1 forwards;
}

@keyframes effectNext {
    from {
        transform: translateX(150px);
    }
}


/* running time */

.carousel .time {
    position: absolute;
    z-index: 1000;
    width: 0%;
    height: 3px;
    background-color: #f1683a;
    left: 0;
    top: 0;
}

.carousel.next .time,
.carousel.prev .time {
    animation: runningTime 3s linear 1 forwards;
}

@keyframes runningTime {
    from {
        width: 100%
    }
    to {
        width: 0
    }
}


/* prev click */

.carousel.prev .list .item:nth-child(2) {
    z-index: 2;
}

.carousel.prev .list .item:nth-child(2) img {
    animation: outFrame 0.5s linear 1 forwards;
    position: absolute;
    bottom: 0;
    left: 0;
}

@keyframes outFrame {
    to {
        width: 150px;
        height: 220px;
        bottom: 50px;
        left: 50%;
        border-radius: 20px;
    }
}

.carousel.prev .thumbnail .item:nth-child(1) {
    overflow: hidden;
    opacity: 0;
    animation: showThumbnail .5s linear 1 forwards;
}

.carousel.next .arrows button,
.carousel.prev .arrows button {
    pointer-events: none;
}

.carousel.prev .list .item:nth-child(2) .content .author,
.carousel.prev .list .item:nth-child(2) .content .title,
.carousel.prev .list .item:nth-child(2) .content .topic,
.carousel.prev .list .item:nth-child(2) .content .des,
.carousel.prev .list .item:nth-child(2) .content .buttons {
    animation: contentOut 1.5s linear 1 forwards!important;
}

@keyframes contentOut {
    to {
        transform: translateY(-150px);
        filter: blur(20px);
        opacity: 0;
    }
}

@media screen and (max-width: 678px) {
    .carousel .list .item .content {
        padding-right: 0;
    }
    .carousel .list .item .content .title {
        font-size: 30px;
    }
    .carousel {
        height: 400px;
    }
    .carousel .list .item {
        width: 100%;
        background-size: cover;
    }
    .carousel .list .item img {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
}


/* Featured Section */

.featured-main-1 {
    background-color: #484848;
}

.featured-main-1 .featured-product-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: #060303;
}

.featured-main-1 .featured-product-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-color: #484848;
    margin: 50px;
}

.featured-product-content .featured-content-img {
    position: relative;
}

.featured-product-content .featured-content-img a img {
    height: 300px;
    width: 380px;
    margin: 30px;
    margin-top: 0;
    opacity: 1;
    border-radius: 20px;
    transition: 0.5s ease;
    backface-visibility: hidden;
}

.featured-content-img .kolb-img-txt {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 5% 15%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    background: rgb(0, 0, 0);
    /* Fallback color */
    background: rgba(0, 0, 0, 0.5);
    /* Black background with 0.5 opacity */
    color: #f1f1f1;
}

.kolb-img-txt h3 {
    color: orange;
}

.featured-product-content .featured-content-img:hover a img {
    opacity: 0.5;
    transform: scale(1.1);
}

.featured-content-img:hover .kolb-img-txt {
    opacity: 1;
}


/* Home About Section */

.home-about-main {
    width: 100%;
    display: flex;
    margin-bottom: 20px;
    font-family: minion-pro, serif;
}

.home-about-main .about-desc {
    width: 62%;
    display: flex;
    padding-left: 70px;
    flex-direction: column;
    background-color: white;
}

.about-desc p {
    width: 70%;
    font-size: 1.6rem;
    line-height: 30px;
}

.about-desc a {
    height: 40px;
    width: 100px;
    padding: 10px;
    text-decoration: none;
    color: black;
    border-radius: 20px 10px;
    background-color: #04AA6D;
}

.home-about-main .about-img {
    width: 38%;
    padding: 0;
    margin: 0;
}

.about-desc {
    transform: translateY(50px);
    filter: blur(20px);
    opacity: 0;
    animation: showAbout .5s 1s linear 1 forwards;
}

@keyframes showAbout {
    to {
        transform: translateY(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

.about-img {
    transform: translateX(50px);
    filter: blur(20px);
    opacity: 0;
    animation: showImg .5s 1s linear 1 forwards;
}

@keyframes showImg {
    to {
        transform: translateX(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@media screen and (max-width: 680px) {
    .featured-main-1 .featured-product-content {
        display: flex;
        flex-direction: column;
    }
    .featured-main-1 .featured-content-img a img {
        height: 350px;
        width: 100%;
    }
    .home-about-main {
        display: flex;
        flex-direction: column;
    }
    .home-about-main .about-desc {
        width: 100%;
        padding-bottom: 50px;
    }
    .home-about-main .about-img {
        width: 100%;
    }
}


/* All featured Section */

.all-featured-section {
    display: flex;
    justify-content: center;
}

.all-featured-section a {
    text-decoration: none;
    color: black;
}

.all-featured-section .featured-card-section {
    height: 450px;
    width: 22%;
    margin: 15px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
}

.all-featured-section .featured-card-section:hover {
    color: white;
    background-color: darkblue;
}

.featured-card-section .fc-img img {
    height: 300px;
    width: 100%;
}

.featured-card-section .fc-text {
    padding-left: 10px;
}

.fc-text h2 {
    font-size: 150%;
    font-weight: bold;
    line-height: 1.5;
}

.fc-text p {
    font-size: 1.5rem;
}

@media screen and (max-width: 680px) {
    .all-featured-section {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: 0;
    }
    .all-featured-section .featured-card-section {
        height: auto;
        width: 100%;
        margin: 10px;
    }
}


/* Featured main 2 */

.featured-main-2 {
    background-color: #484848;
}

.featured-main-2 .featured-product-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: #060303;
}

.featured-main-2 .featured-product-content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #484848;
    margin: 70px;
}

.featured-product-content .featured-content-img-2 {
    position: relative;
}

.featured-product-content .featured-content-img-2 a img {
    height: 200px;
    width: 270px;
    margin: 20px;
    margin-top: 0;
    opacity: 1;
    border-radius: 20px;
    transition: 0.5s ease;
    backface-visibility: hidden;
}

.featured-content-img-2 .kolb-img-txt-2 {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 5% 15%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    background: rgb(0, 0, 0);
    /* Fallback color */
    background: rgba(0, 0, 0, 0.9);
    /* Black background with 0.5 opacity */
    color: #f1f1f1;
}

.kolb-img-txt-2 h3 {
    color: orange;
}

.featured-product-content .featured-content-img-2:hover a img {
    opacity: 0.5;
    transform: scale(1.1);
}

.featured-content-img-2:hover .kolb-img-txt-2 {
    opacity: 1;
}

@media screen and (max-width: 680px) {
    .featured-main-2 .featured-product-content {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin: 0;
    }
}


/* Home About Section */

.home-about-main {
    width: 100%;
    display: flex;
    margin-bottom: 20px;
}

.home-about-main .about-desc {
    width: 62%;
    display: flex;
    padding-left: 70px;
    flex-direction: column;
    background-color: white;
    text-align: justify;
}

.about-desc p {
    width: 70%;
    font-size: 1.6rem;
    line-height: 30px;
}

.about-desc a {
    height: 40px;
    width: 100px;
    padding: 10px;
    text-decoration: none;
    color: black;
    border-radius: 20px 10px;
    background-color: #04AA6D;
}

.home-about-main .about-img {
    width: 38%;
    padding: 0;
    margin: 0;
}

@media screen and (max-width: 680px) {
    .home-about-main {
        width: 100%;
    }
    .home-about-main .about-desc {
        width: 100%;
    }
    .about-desc p {
        width: 100%;
    }
    .home-about-main .about-img {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

#feature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1460px;
    width: 100%;
    background-color: transparent;
}

#feature .fe-box {
    height: 190px;
    width: 245px;
    text-align: center;
    padding: 25px 15px;
    box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
    border: 1px solid transparent;
    border-radius: 4px;
    margin: 5px 0;
}

#feature .fe-box:hover {
    box-shadow: 10px 10px 54px rgba(5, 4, 0, 0.3);
}

#feature .fe-box img {
    width: 100%;
    margin-top: 0px;
    margin-bottom: 10px;
}

#feature .fe-box h4 {
    padding: 9px 8px 6px 8px;
    line-height: 1;
    border-radius: 4px;
    color: #088178;
    /* background-color: #fddde4; */
}

footer {
    margin-top: 10px;
}

.foot-panel2 {
    color: white;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
    background-color: darkblue;
}

.foot-panel2 a {
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 5px;
    text-decoration: none;
}

.foot-panel2 ul .media-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
}

.foot-panel2 ul .media-symbol .fa {
    padding: 10px;
    margin: 0;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
    border: 1px solid white;
    background-color: transparent;
    border-radius: 5px;
}

.foot-panel2 .sm-icon {
    display: flex;
}

.sm-icon a i {
    font-size: 20px;
    padding: 10px;
    border: 1px solid white;
    border-radius: 5px;
}

.sm-icon a .fa-linkedin:hover {
    color: white;
    background-color: #006192;
}

.sm-icon a .fa-twitter:hover {
    color: white;
    background-color: #1da1f2;
}

.sm-icon a .fa-facebook:hover {
    color: white;
    background-color: #3b5998;
}

.sm-icon a .fa-instagram:hover {
    color: white;
    background-color: #e4405f;
}

.foot-panel2 p {
    font-size: 14px;
    margin: 0 0 8px 0;
}

ul {
    margin-top: 20px;
}

ul a {
    display: block;
    color: white;
    font-size: 1.5rem;
    margin: 10px;
    text-decoration: none;
}

ul a i {
    margin-left: 20px;
}

ul a i:hover {
    background-color: transparent;
    border: 1px solid transparent;
}

.foot-panel2 ul a:hover {
    color: white;
}

.foot-panel2 ul p {
    font-size: 16px;
    font-weight: 600;
}

#foot-panel3 {
    background-color: #222f3d;
    color: white;
    border-top: .5px solid white;
    height: 60px;
}

#foot-panel3 .pages {
    font-size: 0.9rem;
    text-align: center;
}

#foot-panel3 .pages a {
    text-decoration: none;
    color: white;
}

#foot-panel3 .copyright {
    font-size: 0.9rem;
    text-align: center;
    padding-top: 10px;
}

@media screen and (max-width: 768px) {
    .foot-panel2 {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-left: 20px;
        padding-right: 20px;
        align-items: center;
    }
}


/*====== About Section Started ======*/

main {
    position: relative;
}

.about-container {
    /* background-image: url("../assets/Developing-Teamwork.jpg"); */
    background-color: #2380ab;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    color: #fff;
    display: block;
    align-items: center;
    min-height: 200px;
    text-shadow: 0px 0px 10px rgb(0 0 0);
    padding: 60px 0;
    margin: 0.2rem 0.2rem;
}

.about-container .abt-mission {
    margin-top: 200px;
    margin-left: 50px;
    width: 80%;
    display: flex;
    padding: 30px;
    font-family: poppins, sans-serif;
    font-size: 1.8rem;
    line-height: 3rem;
    color: black;
    background-color: beige;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1)inset;
    backdrop-filter: blur(10px);
}

.abt-mission .abt-msn-txt {
    text-align: justify;
    padding-left: 30px;
    text-align: justify;
    font-family: poppins, sans-serif;
    font-size: 1.8rem;
    line-height: 3rem;
    color: black;
    background-color: beige;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
}

.abt-mission {
    transform: translateX(70px);
    filter: blur(20px);
    opacity: 0;
    animation: showAbout .7s 2s linear 1 forwards;
}

@keyframes showAbout {
    to {
        transform: translateY(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

.about-container .abt-wwa {
    width: 80%;
    text-align: justify;
    margin-left: 15%;
    display: flex;
    padding: 30px;
    font-family: poppins, sans-serif;
    font-size: 1.8rem;
    line-height: 3rem;
    color: black;
    background-color: beige;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1)inset;
    backdrop-filter: blur(10px);
}

.abt-wwa .abt-wwa-txt {
    margin-right: 20px;
}

.about-container .abt-wwa {
    margin-top: 50px;
}

.abt-wwa {
    transform: translateX(-70px);
    filter: blur(20px);
    opacity: 0;
    animation: showAbout2 .9s 3s linear 1 forwards;
}

@keyframes showAbout2 {
    to {
        transform: translateX(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

.about-banner .abt-wlcm {
    position: absolute;
    width: 70%;
    top: 70%;
    left: 20%;
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
    font-family: poppins, sans-serif;
    font-size: 1.8rem;
    line-height: 3rem;
    color: black;
    background-color: beige;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1)inset;
}

.abt-wlcm h1 {
    margin-bottom: 30px;
}

.abt-wlcm .about-container h3 {
    font-size: 1.8rem;
    font-weight: 700;
}

.m-team h1 {
    text-align: center;
    font-size: 4rem;
    font-weight: 600;
    padding-top: 30px;
}

.abt-wlcm {
    transform: translateY(70px);
    filter: blur(20px);
    opacity: 0;
    animation: showAboutm .5s 1s linear 1 forwards;
}

@keyframes showAboutm {
    to {
        transform: translateY(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

.about-container .abt-mission2 {
    margin-top: 40px;
    margin-left: 50px;
    width: 80%;
    display: flex;
    padding: 30px;
    font-family: poppins, sans-serif;
    font-size: 1.8rem;
    line-height: 3rem;
    color: black;
    background-color: beige;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1)inset;
    backdrop-filter: blur(10px);
}

.abt-mission2 .abt-msn-txt {
    text-align: justify;
    padding-left: 30px;
    text-align: justify;
    font-family: poppins, sans-serif;
    font-size: 1.8rem;
    line-height: 3rem;
    color: black;
    background-color: beige;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
}

.abt-mission2 {
    transform: translateX(70px);
    filter: blur(20px);
    opacity: 0;
    animation: showKapur .7s 4s linear 1 forwards;
}

@keyframes showKapur {
    to {
        transform: translateY(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

.about-container .abt-wwa2 {
    width: 80%;
    text-align: justify;
    margin-left: 15%;
    display: flex;
    padding: 30px;
    font-family: poppins, sans-serif;
    font-size: 1.8rem;
    line-height: 3rem;
    color: black;
    background-color: beige;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1)inset;
    backdrop-filter: blur(10px);
}

.abt-wwa2 .abt-wwa-txt {
    margin-right: 20px;
}

.about-container .abt-wwa2 {
    margin-top: 40px;
}

.abt-wwa2 {
    transform: translateX(-70px);
    filter: blur(20px);
    opacity: 0;
    animation: showRadhika .9s 5s linear 1 forwards;
}

@keyframes showRadhika {
    to {
        transform: translateX(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

:root {
    --total-brand: 11;
    --logo-width: 12rem;
    --total-logo-width: calc(var(--total-brand) * var(--logo-width) * 2);
}

.l-slider {
    height: 100%;
    padding: 40px;
    background-color: #fff;
    box-shadow: 10px 10px 20px rgba(131, 127, 127, 0.1);
}

.l-slider .slider {
    position: relative;
    width: 80%;
    height: 12rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    left: 10%;
    overflow: hidden;
}

.l-slider h1 {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
}

.slider::before,
.slider::after {
    position: absolute;
    content: "";
    height: 100%;
    width: var(--logo-width);
}

.slider::before {
    right: 0;
}

.slider::after {
    left: 0;
}

.slider ul.brands {
    list-style: none;
    width: var(--total-logo-width);
    display: flex;
    animation: slideLeft 16s linear infinite;
}

.slider:hover ul.brands {
    animation-play-state: paused;
}

.brands li img {
    height: 100px;
    width: 140px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 10px;
}

@keyframes slideLeft {
    100% {
        transform: translateX(calc(-100% / 2));
    }
}

ul.brands li.brand-logo {
    width: var(--logo-width);
    font-size: 2rem;
    text-align: center;
    margin-left: 3rem;
}

@media screen and (max-width: 680px) {
    .about-banner .abt-wlcm {
        width: 90%;
        top: 100%;
        margin-top: 30px;
        left: 5%;
    }
    .about-container .abt-mission {
        width: 90%;
        margin-top: 700px;
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .abt-mission .abt-msn-img img {
        width: 100%;
    }
    .about-container .abt-mission2 {
        width: 90%;
        margin-top: 30px;
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .abt-mission2 .abt-msn-img img {
        width: 100%;
    }
    .about-container .abt-wwa {
        width: 90%;
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .abt-wwa .abt-wwa-img img {
        width: 100%;
    }
    .about-container .abt-wwa2 {
        width: 90%;
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .abt-wwa2 .abt-wwa-img img {
        width: 100%;
    }
    .l-slider {
        width: 100%;
        padding: 10px;
    }
}


/* ====== Question Section Started ======= */

.faq-main-container {
    background-color: #484848;
}

.question-container {
    display: flex;
    margin: 50px 150px;
}


/* <!-- ====== Left Question Section ====== --> */

.left-section {
    display: flex;
    flex-direction: column;
    width: 30%;
    color: black;
    border: 1px solid #dddddd;
    background-color: white;
}

.left-section h1 {
    width: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
}

.link {
    display: flex;
    flex-direction: column;
}

.link a {
    padding-left: 30px;
    text-decoration: none;
    color: black;
}

.link a:hover {
    color: black;
}

.link h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    background-color: white;
}


/*====== Right Question Section =======*/

.right-section {
    display: flex;
    width: 70%;
    flex-direction: column;
    border: 1px solid #dddddd;
    background-color: white;
}

.right-section h1 {
    background-color: white;
    width: 100%;
    margin-top: 0;
}

.ques-ans-section {
    display: flex;
    justify-content: space-evenly;
    border-bottom: 1px solid #dddddd;
}

.ques {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.2rem;
}

@media screen and (max-width: 680px) {
    .question-container {
        display: flex;
        flex-direction: column;
    }
    .question-container .left-section {
        width: 100%;
    }
    .left-section .link {
        display: flex;
        justify-content: center;
    }
    .question-container .right-section {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .right-section .ques {
        font-size: 1.8rem;
    }
    .right-section .ans {
        font-size: 1.5rem;
    }
}


/* ====== Question Section Ended ======= */


/* <!--====== Products Section started ====== --> */

.products-container-main {
    background-color: #484848;
    padding-bottom: 40px;
}

.products-container-main h1 {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 40px;
    color: white;
}

.products-banner h1 {
    position: absolute;
    top: 75%;
    width: 1140px;
    max-width: 80%;
    font-size: 7rem;
    font-weight: 600;
    left: 5%;
    transform: translateX(-50%);
    padding-right: 30%;
    box-sizing: border-box;
    color: black;
    text-shadow: 0 5px 10px #0004;
}

.products-banner h1 {
    transform: translateY(70px);
    filter: blur(20px);
    opacity: 0;
    animation: showAboutm .5s 1.5s linear 1 forwards;
}

@keyframes showAboutm {
    to {
        transform: translateY(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

.products-banner {
    transform: translateY(70px);
    filter: blur(20px);
    opacity: 0;
    animation: showAboutm .5s 1s linear 1 forwards;
}

@keyframes showAboutm {
    to {
        transform: translateY(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

.products-container {
    transform: translateY(90px);
    filter: blur(20px);
    opacity: 0;
    animation: showProducts 1s 2s linear 1 forwards;
}

@keyframes showProducts {
    50% {
        transform: translateY(45px);
        filter: blur(10px);
        opacity: .5;
        animation-delay: 2s;
    }
    100% {
        transform: translateY(0px);
        filter: blur(0px);
        opacity: 1;
        animation-delay: 3s;
    }
}

.otherp-banner h1 {
    position: absolute;
    top: 75%;
    width: 1140px;
    max-width: 80%;
    font-size: 7rem;
    font-weight: 600;
    left: 5%;
    transform: translateX(-50%);
    padding-right: 30%;
    box-sizing: border-box;
    color: #fff;
    text-shadow: 0 5px 10px #0004;
}

.otherp-banner h1 {
    transform: translateY(70px);
    filter: blur(20px);
    opacity: 0;
    animation: showAboutm .5s 1s linear 1 forwards;
}

@keyframes showAboutm {
    to {
        transform: translateY(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

.products-container-main .products-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #484848;
    cursor: pointer;
}

.products-container .products-smi-img {
    position: relative;
}

.products-container .products-smi-img a img {
    height: 350px;
    width: 400px;
    margin: 20px;
    margin-top: 0;
    opacity: 1;
    border-radius: 20px;
    transition: 0.5s ease;
    backface-visibility: hidden;
    cursor: pointer;
}

.products-smi-img .products-smi-txt {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 15% 25%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    background: rgb(0, 0, 0);
    /* Fallback color */
    background: rgba(0, 0, 0, 0.9);
    /* Black background with 0.5 opacity */
    color: orange;
}

.products-container .products-smi-img:hover {
    opacity: 0.5;
    /* -webkit-transform: scaleX(-1);
    transform: scaleX(-1); */
}

.products-smi-img:hover .products-smi-txt {
    opacity: 1;
}

.products-smi-img .otherp-txt {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 5% 6%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background: rgb(0, 0, 0);
    /* Fallback color */
    background: rgba(0, 0, 0, 0.9);
    /* Black background with 0.5 opacity */
    color: orange;
}

.products-smi-img:hover .otherp-txt {
    opacity: 1;
}

.products-smi-img a p {
    position: absolute;
    bottom: 40px;
    left: 40px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    text-decoration: none;
    font-size: 2rem;
    font-weight: 700;
    color: orange;
    background-color: rgba(0, 0, 0, 0.1);
}

.products-container-main-2 {
    margin: 0;
    padding-bottom: 40px;
    color: white;
    background-color: black;
}

.products-container-main-2 h1 {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 40px;
    color: white;
}

.products-container-main-2 .products-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.products-container .products-smi-img {
    position: relative;
    transition: .5s;
}

.products-container .products-smi-img a img {
    margin: 30px;
    margin-top: 0;
    opacity: 1;
    border-radius: 20px;
    transition: 0.5s ease;
    backface-visibility: hidden;
}

.products-container .products-smi-img #img-1 {
    height: 400px;
    width: 300px;
}

.products-container .products-smi-img #img-2 {
    height: 400px;
    width: 400px;
}

.products-container .products-smi-img #img-3 {
    height: 400px;
    width: 500px;
}

.products-smi-img .products-smi-txt-2 {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 15% 25%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    background: rgb(0, 0, 0);
    /* Fallback color */
    background: rgba(0, 0, 0, 0.9);
    /* Black background with 0.5 opacity */
    color: #f1f1f1;
}

.products-container .products-smi-img:hover {
    opacity: 0.5;
    transform: scale(1.1);
}

.products-smi-img:hover .products-smi-txt-2 {
    opacity: 1;
}

@media screen and (max-width: 680px) {
    .products-banner img {
        height: 60%;
    }
    .products-banner h1 {
        position: absolute;
        top: 35%;
        width: 1140px;
        max-width: 80%;
        font-size: 5rem;
        font-weight: 600;
        left: 5%;
        transform: translateX(-50%);
        padding-right: 30%;
    }
    .otherp-banner img {
        height: 60%;
    }
    .otherp-banner h1 {
        position: absolute;
        top: 35%;
        width: 1140px;
        max-width: 80%;
        font-size: 5rem;
        font-weight: 600;
        left: 5%;
        transform: translateX(-50%);
        padding-right: 30%;
    }
}


/* <!--====== Contact Section started ====== --> */

.contact-container {
    height: 560px;
    width: 100%;
    display: flex;
    margin-top: 20px;
    margin-bottom: 30px;
    background-color: #fff;
    border: 1px solid #E3E6F3;
}

.contact-container .contact-left {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 55%;
    height: 100%;
    border: 1px solid #E3E6F3;
}

.contact-left .contact-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 20%;
    color: white;
    background-color: #222f3d;
}

.contact-left .contact-info {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.contact-info .head-office {
    width: 50%;
    padding: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    border: 1px solid #465b52;
}

.contact-info .branch-office {
    width: 50%;
    padding: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    border: 1px solid #465b52;
}

.contact-container .contact-right {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45%;
    height: 100%;
    border: 1px solid #465b52;
}

.contact-right .contact-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.1);
}

.contact-container .contact-txt {
    font-size: 35px;
    font-weight: 600;
    text-align: center;
    background: -webkit-linear-gradient(right, #262424, #070709, #080505, #060303);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-container form {
    padding: 20px 0 0 0;
}

.contact-container form .form-row {
    display: flex;
    flex-direction: column;
    margin: 20px 0;
}

form .form-row .input-data {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 30px;
    margin: 10px;
    position: relative;
}

.form-row .input-data select {
    width: 100%;
}

.form-row .input-data button {
    padding: 6px;
    right: 0;
    color: white;
    font-weight: 500;
    background-color: #088178;
    border: none;
    border-radius: 4px;
}

.form-row .input-data button:hover {
    background-color: olivedrab;
}

.form-row textarea {
    height: 60px;
    width: 100%;
}

.hide-form-container {
    display: none;
}

.open-button {
    background-color: #555;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    opacity: 0.8;
    position: fixed;
    bottom: 23px;
    right: 28px;
    width: 280px;
}


/* 
Contact Two started */

.contact-main-container {
    background: linear-gradient(90deg, #0e3959 0%, #0e3959 30%, #03a9f5 30%, #03a9f5 100%);
}

.contactUs {
    position: relative;
    width: 100%;
    padding: 40px 100px;
}

.contactUs .title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
}

.contactUs .contact-title h2 {
    color: #fff;
    font-weight: 500;
    text-align: center;
}

.form {
    grid-area: form;
}

.inf0 {
    grid-area: info;
}

.map {
    grid-area: map;
}

.contact {
    padding: 40px;
    background: #fff;
    box-shadow: 0 5px 35px rgba(0, 0, 0, 0.15);
}

.box {
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 5fr 4fr;
    grid-template-areas: "form info" "form map";
    grid-gap: 20px;
}

.contact h3 {
    color: #0e3959;
    font-weight: 500;
    font-size: 1.4em;
    margin-bottom: 10px;
}


/* form */

.formBox {
    position: relative;
    width: 100%;
}

.formBox .row50 {
    display: flex;
    gap: 20px;
}

.inputBox {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    width: 50%;
}

.formBox .row100 .inputBox {
    width: 100%;
}

.inputBox span {
    color: #03a9f5;
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: 500;
}

.inputBox input {
    padding: 10px;
    font-size: 1.1em;
    outline: none;
    border: 1px solid #333;
}

.inputBox textarea {
    padding: 10px;
    font-size: 1.1em;
    outline: none;
    border: 1px solid #333;
    resize: none;
    min-height: 220px;
    margin-bottom: 10px;
}

.inputBox input[type="submit"] {
    background: #ff578b;
    color: #fff;
    border: none;
    font-size: 1.1em;
    max-width: 120px;
    font-weight: 500;
    padding: 14px 15px;
}

.inputBox ::placeholder {
    color: #999;
}


/* info */

.info {
    background: #0e3959;
}

.info h3 {
    color: #fff;
}

.info .infoBox div {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.info .infoBox div span {
    min-width: 40px;
    height: 40px;
    color: #fff;
    background: #18b7ff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    border-radius: 50%;
    margin-right: 15px;
}

.info .infoBox div p {
    color: #fff;
    font-size: 1.1em;
}

.info .infoBox div a {
    color: #fff;
    text-decoration: none;
}

.infoBox .sci {
    margin-top: 40px;
    display: flex;
}

.sci li {
    list-style: none;
    margin-right: 15px;
}

.sci li a {
    color: #fff;
    font-size: 2em;
}

.map {
    padding: 0;
}

.map iframe {
    width: 100%;
    height: 100%;
}

@media(max-width:991px) {
    .contact-main-container {
        background: #03a9f5;
    }
    .contactUs {
        padding: 20px;
    }
    .box {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: "form" "info" "map";
    }
    .map {
        min-height: 300px;
    }
    .formBox .row50 {
        display: flex;
        gap: 0;
        flex-direction: column;
    }
    .inputBox {
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
        width: 100%;
    }
}


/* The popup form - hidden by default */

.form-popup {
    display: none;
    position: fixed;
    bottom: 0;
    right: 15px;
    border: 3px solid #f1f1f1;
    z-index: 9;
}


/* Add styles to the form container */

.form-container {
    max-width: 300px;
    padding: 10px;
    background-color: white;
}


/* Full-width input fields */

.form-container input[type=text],
.form-container input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
}


/* When the inputs get focus, do something */

.form-container input[type=text]:focus,
.form-container input[type=password]:focus {
    background-color: #ddd;
    outline: none;
}


/* Set a style for the submit/login button */

.form-container .btn {
    background-color: #04AA6D;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom: 10px;
    opacity: 0.8;
}


/* Add a red background color to the cancel button */

.form-container .cancel {
    background-color: red;
}


/* Add some hover effects to buttons */

.form-container .btn:hover,
.open-button:hover {
    opacity: 1;
}

#myBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    height: 40px;
    width: 40px;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    text-align: center;
    border: none;
    outline: none;
    backdrop-filter: blur(20px);
    transform: translate(-50%);
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
}

@media screen and (max-width: 680px) {
    .contact-container {
        display: block;
    }
    .contact-container .contact-left {
        width: 100%;
    }
    .contact-container .contact-right {
        display: none;
    }
    .hide-form-container {
        display: block;
    }
    .faq-brand {
        display: flex;
    }
}


/* Kolb Product Section */

.kolb-main {
    padding-bottom: 60px;
    background-color: #484848;
}

.kolb-main .kolb-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: beige;
}

.kolb-main .kolb-desc p {
    text-align: center;
}

.kolb-desc h1 {
    color: orange;
}

.kolb-main .kolb-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-color: #484848;
    margin: 70px;
}

.kolb-content .kolb-content-img {
    position: relative;
}

.kolb-content .kolb-content-img a img {
    height: 350px;
    width: 400px;
    margin: 20px;
    margin-top: 0;
    opacity: 1;
    border-radius: 20px;
    transition: 0.5s ease;
    backface-visibility: hidden;
}

.kolb-content-img .kolb-img-txt {
    position: absolute;
    bottom: 40px;
    left: 40px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    text-decoration: none;
    font-size: 2rem;
    font-weight: 700;
    color: orange;
    background-color: rgba(0, 0, 0, 0.1);
}

.kolb-content-img .kolb-img-details {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 100px);
    height: calc(100% - 100px);
    /* padding: 15% 15%;  */
    padding: 20px;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
}

.kolb-img-details .detail-list {
    display: flex;
}

.detail-list span {
    height: 15px;
    width: 15px;
    margin-right: 5px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: orange;
}

.kolb-img-txt h3 {
    font-weight: 700;
    color: orange;
}

.kolb-img-txt h4 {
    font-weight: 700;
    color: black;
}

.kolb-content .kolb-content-img:hover a img {
    opacity: 0.2;
    /* -webkit-transform: scaleX(-1);
    transform: scaleX(-1); */
}

.kolb-content-img:hover .kolb-img-details {
    opacity: 1;
}

.kolb-content-2 {
    display: flex;
    margin: 70px;
}

.kolb-content-2 .kolb-content-img {
    position: relative;
}

.kolb-content-2 .kolb-content-img a img {
    height: 500px;
    width: 620px;
    margin: 20px;
    border-radius: 40px;
}

.kolb-content-2 .kolb-content-img:hover a img {
    opacity: 0.5;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.kolb-content-img:hover .kolb-img-txt {
    opacity: 1;
}

.download-kolb {
    padding-left: 90px;
}

.download-kolb img {
    border: 1px solid rgb(91, 87, 87);
}

.download-kolb p {
    color: white;
}

.download-kolb p a {
    background: linear-gradient(to top, red, rgb(228, 5, 232));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-decoration: none;
}

.download-kolb p a:hover {
    font-size: 1.5rem;
    background: linear-gradient(to bottom, orangered, rgb(228, 5, 232));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-decoration: none;
}

@media screen and (max-width: 680px) {
    .kolb-main .kolb-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .kolb-main .kolb-content-2 {
        display: flex;
        flex-direction: column;
        margin: 10px;
    }
    .kolb-content .kolb-content-img a img {
        width: 100%;
    }
    .kolb-content-2 .kolb-content-img {
        display: block;
        justify-content: center;
        align-items: center;
    }
    .kolb-content-2 .kolb-content-img a img {
        height: 350px;
        width: 400px;
    }
}


/* Sankyo Products Section started */

.sankyo-banner .sankyo-logo {
    position: absolute;
    left: 4%;
    top: 25%;
}

.sankyo-logo img {
    height: 150px;
    width: 200px;
}

.kolb-banner .kolb-logo {
    position: absolute;
    left: 4%;
    top: 2%;
}

.shinweon-banner .shinweon-logo {
    position: absolute;
    left: 36%;
    bottom: 22%;
}

.shinweon-logo img {
    height: 150px;
    width: 420px;
}

.pascal-banner .pascal-logo {
    position: absolute;
    left: 5%;
    top: 2%;
}

.pascal-logo p {
    line-height: 18px;
    color: #fff;
}

.necumer-banner .necumer-logo {
    position: absolute;
    left: 0%;
    top: 1%;
}

.necumer-logo img {
    height: 200px;
    width: 200px;
}

.sankyo-container {
    width: 100%;
    padding-bottom: 60px;
    color: #fff;
    background-color: #000;
}

.sankyo-heading h1 {
    padding-top: 30px;
    padding-bottom: 20px;
    text-align: center;
    color: white;
}

.sankyo-img-container {
    display: flex;
    justify-content: center;
}

.sankyo-img-container .sankyo-img a {
    text-decoration: none;
}

.sankyo-img-container .sankyo-img a img {
    height: 300px;
    width: 350px;
    margin: 30px;
    border-radius: 10px;
    opacity: 0.9;
    text-decoration: none;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.03);
    transition: 0.7s;
}

.sankyo-img-container .sankyo-img a img:hover {
    opacity: 1;
    transform: translateY(-20px);
}

.sankyo-img-container .sankyo-img a p {
    text-align: center;
    font-size: large;
    color: white;
}

.sankyo-img-container .sankyo-img a p:hover {
    color: #eee;
}

.sankyo-p1 {
    background-color: #000;
}

.sankyo-p1-heading h1 {
    padding-top: 30px;
    padding-bottom: 20px;
    text-align: center;
    color: white;
}

.sankyo-p1 .sankyo-p1-img-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.sankyo-p1-img-container .sankyo1-img a img {
    height: 300px;
    width: 350px;
    margin: 30px;
    opacity: 0.9;
    text-decoration: none;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.03);
    transition: 0.7s;
}

.sankyo-p1-img-container .sankyo1-img a img:hover {
    text-decoration: none;
    opacity: 1;
    transform: translateY(-20px);
}

.sankyo-p1-img-container .sankyo1-img a p {
    text-align: center;
    text-decoration: none;
    font-size: large;
    color: white;
}

.sankyo-p1-img-container .sankyo1-img a p:hover {
    text-decoration: none;
    color: orange;
}

.sankyo-p2-heading h1 {
    padding-top: 30px;
    padding-bottom: 20px;
    text-align: center;
    color: white;
    background-color: #000;
}

.sankyo-p2 .sankyo-p2-img-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #000;
}

.sankyo-p2-img-container .sankyo2-img a img {
    height: 300px;
    width: 350px;
    margin: 30px;
    opacity: 0.9;
    text-decoration: none;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.03);
    transition: 0.7s;
}

.sankyo-p2-img-container .sankyo2-img a img:hover {
    text-decoration: none;
    opacity: 1;
    transform: translateY(-20px);
}

.sankyo-p2-img-container .sankyo2-img a p {
    text-align: center;
    text-decoration: none;
    font-size: large;
    color: white;
}

.sankyo-p2-img-container .sankyo2-img a p:hover {
    text-decoration: none;
    color: orange;
}

.sankyo-p3 {
    background-color: #000;
}

.sankyo-p3-heading h1 {
    padding-top: 30px;
    padding-bottom: 20px;
    text-align: center;
    color: white;
}

.sankyo-p3 .sankyo-p3-img-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.sankyo-p3-img-container .sankyo3-img a img {
    height: 300px;
    width: 350px;
    margin: 30px;
    opacity: 0.9;
    text-decoration: none;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.03);
    transition: 0.7s;
}

.sankyo-p3-img-container .sankyo3-img a img:hover {
    text-decoration: none;
    opacity: 1;
    transform: translateY(-20px);
}

.sankyo-p3-img-container .sankyo3-img a p {
    text-align: center;
    text-decoration: none;
    font-size: large;
    color: white;
}

.sankyo-p3-img-container .sankyo3-img a p:hover {
    text-decoration: none;
    color: #ffb01e;
}


/* Sankyo1 started */

.sankyo11-container {
    width: 100%;
    padding-bottom: 60px;
    background-color: white;
}

.sankyo11-container .sankyo11-heading h1 {
    padding-top: 30px;
    text-align: center;
    margin-bottom: 50px;
}

.sankyo11-heading h1 span {
    color: red;
}

.sankyo11-img-container {
    display: flex;
    flex-wrap: wrap;
    padding-left: 50px;
    padding-right: 50px;
}

.sankyo11-img-container .sankyo11-detailt {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 300px;
    margin: auto;
    margin-bottom: 30px;
    text-align: center;
    border: 1px solid aliceblue;
    background-color: #f7f7f7;
    transition: 0.5s;
}

.sankyo11-img-container .sankyo11-detailt:hover {
    transform: scale(1.02);
}

.sankyo11-detailt .sankyo11-detail-txt {
    padding-top: 20px;
    padding-bottom: 50px;
}

.sankyo11-detail-txt h3 {
    margin-bottom: 10px;
}

.sankyo-detail-txt p {
    font-size: 1.6rem;
    margin-bottom: 30px;
}

.sankyo11-detail-txt a {
    padding: 10px 20px 10px 20px;
    font-weight: 600;
    text-decoration: none;
    color: white;
    border-radius: 20px;
    background-color: #dc3545;
}

.sankyo11-detail-txt a:hover {
    color: red;
    background-color: white;
}


/* Sankyo 2 Started */

.sankyo22-container {
    width: 100%;
    padding-bottom: 60px;
    background-color: white;
}

.sankyo22-container .sankyo22-heading h1 {
    padding-top: 30px;
    text-align: center;
    margin-bottom: 50px;
}

.sankyo22-heading h1 span {
    color: red;
}

.sankyo22-img-container {
    display: flex;
    flex-wrap: wrap;
    padding-left: 50px;
    padding-right: 50px;
}

.sankyo22-img-container .sankyo22-detailt {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 350px;
    margin: auto;
    margin-bottom: 30px;
    text-align: center;
    border: 1px solid aliceblue;
    background-color: #f7f7f7;
    transition: 0.5s;
}

.sankyo22-img-container .sankyo22-detailt:hover {
    transform: scale(1.02);
}

.sankyo22-detailt .sankyo22-detail-txt {
    padding-top: 20px;
    padding-bottom: 50px;
}

.sankyo22-detail-txt h3 {
    margin-bottom: 10px;
}

.sankyo22-detail-txt p {
    margin-bottom: 70px;
    font-size: 1.6rem;
}

.sankyo22-detail-txt a {
    padding: 10px 20px 10px 20px;
    margin-top: 30px;
    font-weight: 600;
    text-decoration: none;
    color: white;
    border-radius: 20px;
    background-color: #dc3545;
}

.sankyo22-detail-txt a:hover {
    color: red;
    background-color: white;
}


/* Sankyo 2 Started  */

.sankyo33-container {
    width: 100%;
    padding-bottom: 60px;
    background-color: white;
}

.sankyo33-container .sankyo33-heading h1 {
    padding-top: 30px;
    text-align: center;
    margin-bottom: 50px;
}

.sankyo33-heading h1 span {
    color: red;
}

.sankyo33-img-container {
    display: flex;
    flex-wrap: wrap;
    padding-left: 50px;
    padding-right: 50px;
}

.sankyo33-img-container .sankyo33-detailt {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 350px;
    margin: auto;
    margin-bottom: 30px;
    text-align: center;
    border: 1px solid aliceblue;
    background-color: #f7f7f7;
    transition: 0.5s;
}

.sankyo33-img-container .sankyo33-detailt:hover {
    transform: scale(1.02);
}

.sankyo33-detailt .sankyo33-detail-txt {
    padding-top: 20px;
    padding-bottom: 50px;
}

.sankyo33-detail-txt h3 {
    margin-bottom: 10px;
}

.sankyo33-detail-txt p {
    margin-bottom: 70px;
    font-size: 1.6rem;
}

.sankyo33-detail-txt a {
    padding: 10px 20px 10px 20px;
    margin-top: 30px;
    font-weight: 600;
    text-decoration: none;
    color: white;
    border-radius: 20px;
    background-color: #dc3545;
}

.sankyo33-detail-txt a:hover {
    color: red;
    background-color: white;
}

@media screen and (max-width: 680px) {
    .sankyo-banner img {
        width: 100%;
    }
    .sankyo-img-container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
    }
}


/* Necumer Section started */

.necumer-container {
    width: 100%;
    padding-bottom: 60px;
    background-color: #484848;
}

.necumer-heading h1 {
    padding-top: 40px;
    text-align: center;
    color: white;
}

.necumer-img-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
}

.necumer-img-container .necumer-img {
    position: relative;
}

.necumer-img-container .necumer-sec1 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.necumer-img-container .necumer-sec2 {
    display: flex;
    justify-content: center;
    margin: 0 50px;
}

.necumer-img-container .necumer-img a img {
    height: 300px;
    width: 350px;
    margin: 30px;
    border-radius: 10px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.03);
    transition: 0.5s;
}

.necumer-sec1 .necumer-img a img {
    height: 450px;
    width: 760px;
    margin: 30px;
    border-radius: 10px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.03);
    transition: 0.5s;
}

.necumer-sec1 .necumer-img p {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: orange;
}

.necumer-sec2 .necumer-img-container .necumer-img a img:hover {
    transform: scale(1.1);
}

.necumer-img-container .necumer-img a p {
    position: absolute;
    bottom: 40px;
    left: 40px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    text-decoration: none;
    font-size: 2rem;
    font-weight: 700;
    color: orange;
    background-color: rgba(0, 0, 0, 0.1);
}

.necumer-img-container .necumer-img a p:hover {
    text-decoration: none;
    color: orangered;
}

@media screen and (max-width: 680px) {
    .necumer-img-container {
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 100%;
    }
    .necumer-banner img {
        height: 60%;
    }
    .necumer-img-container .necumer-sec2 {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0;
    }
    .necumer-sec1 .necumer-img a img {
        height: 300px;
        width: 350px;
    }
    .necumer-img-container .necumer-img a img {
        width: 80%;
    }
}


/* Tohastu section started */

.tohastu11-container {
    width: 100%;
    padding-bottom: 60px;
    background-color: white;
}

.tohastu11-container .tohastu11-heading h1 {
    padding-top: 30px;
    text-align: center;
    margin-bottom: 50px;
}

.tohastu11-heading h1 span {
    color: red;
}

.tohastu11-img-container {
    display: flex;
    flex-wrap: wrap;
    padding-left: 50px;
    padding-right: 50px;
}

.tohastu11-img-container .tohastu11-detailt {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 300px;
    margin: auto;
    margin-bottom: 30px;
    text-align: center;
    border: 1px solid aliceblue;
    background-color: #f7f7f7;
    transition: 0.5s;
}

.tohastu11-img-container .tohastu11-detailt:hover {
    transform: scale(1.02);
}

.tohastu11-detailt .tohastu11-detail-txt {
    padding-top: 20px;
    padding-bottom: 50px;
}

.tohastu11-detail-txt h3 {
    margin-bottom: 60px;
}

.tohastu11-detail-txt a {
    padding: 10px 20px 10px 20px;
    margin-top: 30px;
    font-weight: 600;
    text-decoration: none;
    color: white;
    border-radius: 20px;
    background-color: #dc3545;
}

.tohastu11-detail-txt a:hover {
    color: red;
    background-color: white;
}


/* ashfhfsv */

.tohastu-container {
    width: 100%;
    padding-bottom: 60px;
    background-color: #484848;
}

.tohastu-heading h1 {
    padding-top: 30px;
    text-align: center;
    color: white;
}

.tohastu-img-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tohastu-img-container .tohastu-img {
    position: relative;
}

.tohastu-img-container .tohastu-img a img {
    height: 300px;
    width: 350px;
    margin: 30px;
    border-radius: 10px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.03);
    transition: 0.5s;
}

.tohastu-img-container .tohastu-img a img:hover {
    transform: scale(1.1);
}

.tohastu-img-container .tohastu-img a p {
    bottom: 40px;
    left: 40px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    text-decoration: none;
    font-size: 2rem;
    font-weight: 700;
    color: orange;
    text-decoration: none;
}

.tohastu-img-container .tohastu-img a p:hover {
    text-decoration: none;
    color: orangered;
}


/* Tohastu1 started */

.tohastu1-container {
    width: 100%;
    padding-bottom: 60px;
}

.tohastu1-container .tohastu1-heading h1 {
    padding-top: 30px;
    text-align: center;
    padding-bottom: 15px;
    color: white;
    background-color: black;
}

.tohastu1-container .tohastu1-detail {
    display: flex;
    margin-left: 70px;
    margin-right: 70px;
    margin-bottom: 10px;
    padding-left: 90px;
    padding-right: 90px;
    justify-content: space-between;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
    color: black;
    background-color: white;
}

.tohastu1-detail .tohastu1-img {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.tohastu1-detail .tohastu1-desc {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tohastu1-detail .tohastu1-download {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tohastu1-download button {
    margin-top: 10px;
    padding: 8px 14px 8px 14px;
    outline: none;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    color: white;
    background-color: black;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.9);
    cursor: pointer;
    transition: 0.5s;
}

.tohastu1-download button:hover {
    transform: scale(1.2);
}

.tohastu1-detail .tohastu1-img img {
    height: 200px;
    width: 200px;
}


/* Tohastu2 started */

.tohastu2-container {
    width: 100%;
    padding-bottom: 60px;
}

.tohastu2-container .tohastu2-heading h1 {
    padding-top: 30px;
    text-align: center;
    padding-bottom: 15px;
    color: white;
    background-color: #000;
}

.tohastu2-container .tohastu2-detail {
    display: flex;
    margin-left: 70px;
    margin-right: 70px;
    margin-bottom: 10px;
    padding-left: 90px;
    padding-right: 90px;
    justify-content: space-between;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
    color: black;
    background-color: white;
}

.tohastu2-detail .tohastu2-img {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.tohastu2-detail .tohastu2-desc {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tohastu2-detail .tohastu2-download {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tohastu2-download button {
    margin-top: 10px;
    padding: 8px 14px 8px 14px;
    outline: none;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    color: white;
    background-color: black;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.9);
    cursor: pointer;
    transition: 0.5s;
}

.tohastu2-download button:hover {
    transform: scale(1.2);
}

.tohastu2-detail .tohastu2-img img {
    height: 200px;
    width: 200px;
}


/* Tohastu3 started */

.tohastu3-container {
    width: 100%;
    padding-bottom: 60px;
}

.tohastu3-container .tohastu3-heading h1 {
    padding-top: 30px;
    text-align: center;
    padding-bottom: 15px;
    color: white;
    background-color: #000;
}

.tohastu3-container .tohastu3-detail {
    display: flex;
    margin-left: 70px;
    margin-right: 70px;
    margin-bottom: 10px;
    padding-left: 90px;
    padding-right: 90px;
    justify-content: space-between;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
    color: #000;
    background-color: white;
}

.tohastu3-detail .tohastu3-img {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.tohastu3-detail .tohastu3-desc {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tohastu3-detail .tohastu3-download {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tohastu3-download button {
    margin-top: 10px;
    padding: 8px 14px 8px 14px;
    outline: none;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    color: white;
    background-color: black;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.9);
    cursor: pointer;
    transition: 0.5s;
}

.tohastu3-download button:hover {
    transform: scale(1.2);
}

.tohastu3-detail .tohastu3-img img {
    height: 200px;
    width: 200px;
}


/* Tohastu4 started */

.tohastu4-container {
    width: 100%;
    padding-bottom: 60px;
}

.tohastu4-container .tohastu4-heading h1 {
    padding-top: 30px;
    text-align: center;
    padding-bottom: 15px;
    color: white;
    background-color: #000;
}

.tohastu4-container .tohastu4-detail {
    display: flex;
    margin-left: 70px;
    margin-right: 70px;
    padding-left: 90px;
    margin-bottom: 20px;
    padding-right: 90px;
    justify-content: space-between;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
    background-color: white;
}

.tohastu4-detail .tohastu4-img {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.tohastu4-detail .tohastu4-desc {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tohastu4-detail .tohastu4-download {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tohastu4-download button {
    margin-top: 10px;
    padding: 8px 14px 8px 14px;
    outline: none;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    color: white;
    background-color: black;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.9);
    cursor: pointer;
    transition: 0.5s;
}

.tohastu4-download button:hover {
    transform: scale(1.2);
}

.tohastu4-detail .tohastu4-img img {
    height: 200px;
    width: 200px;
}


/* Trial section started */

.tohastutt-container {
    width: 100%;
    padding-bottom: 60px;
    background-color: #484848;
}

.tohastutt-heading h1 {
    padding-top: 30px;
    text-align: center;
    color: white;
}

.tohastutt-img-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tohastutt-img-container .tohastutt-img {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tohastutt-img-container .tohastutt-img img {
    height: 300px;
    width: 350px;
    margin: 30px;
    border-radius: 10px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.03);
    transition: 0.5s;
}

.tohastu-img-container .tohastu-img img:hover {
    transform: scale(1.1);
}

.tohastutt-img-container .tohastutt-img p {
    bottom: 40px;
    left: 40px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 700;
    color: orange;
    text-decoration: none;
}

.tohastutt-img-container .tohastutt-img button {
    margin-top: 10px;
    padding: 8px 14px 8px 14px;
    outline: none;
    font-weight: 600;
    border: none;
    color: white;
    background-color: transparent;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.9);
    cursor: pointer;
    transition: 0.5s;
}

.tohastutt-img-container .tohastutt-img button:hover {
    transform: scale(1.2);
}

.tohastutt-img-container .tohastutt-img p:hover {
    text-decoration: none;
    color: orangered;
}

@media screen and (max-width: 680px) {
    .tohastu-img-container {
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 100%;
    }
    .tohastu-img-container .tohastu-img a img {
        width: 80%;
    }
    .tohastu1-container .tohastu1-detail {
        display: flex;
        flex-direction: column;
        padding: 20px;
    }
}


/* Shinweon section started */

.shinweon-container {
    width: 100%;
    padding-bottom: 60px;
    background-color: #484848;
}

.shinweon-heading h1 {
    padding-top: 30px;
    text-align: center;
    color: white;
}

.shinweon-img-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.shinweon-img-container .shinweon-img a img {
    height: 400px;
    width: 450px;
    margin: 30px;
    border-radius: 10px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.03);
    transition: 0.5s;
}

.shinweon-img-container .shinweon-img a img:hover {
    transform: scale(1.1);
}

.shinweon-img-container .shinweon-img a p {
    bottom: 40px;
    left: 40px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    text-decoration: none;
    font-size: 2rem;
    font-weight: 700;
    color: orange;
    text-decoration: none;
}

.shinweon-img-container .shinweon-img a p:hover {
    text-decoration: none;
    color: orangered;
}

@media screen and (max-width: 680px) {
    .shinweon-img-container {
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 100%;
    }
    .shinweon-img-container .shinweon-img a img {
        width: 80%;
    }
}


/* Pascal Section Started */

.pascal-container {
    width: 100%;
}

.pascal-container .pascal-heading h2 {
    text-align: center;
    padding-top: 30px;
}

.pascal-container .pascal-img-container {
    display: flex;
    justify-content: space-between;
    padding-top: 30px;
    padding-bottom: 50px;
    padding-left: 140px;
    padding-right: 140px;
}

.pascal-img-container a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-decoration: none;
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.1);
}

.pascal-img-container a img {
    height: 400px;
    width: 300px;
}

.pascal-img-container a p {
    font-size: 1.5rem;
    font-weight: 500;
    color: #000;
    transition: 0.5s;
}

.pascal-img-container a p span {
    color: red;
}

.pascal-img-container a p:hover {
    font-size: 1.6rem;
}

.pascal1-container {
    padding-left: 140px;
    padding-right: 140px;
    padding-bottom: 90px;
    color: white;
    background-color: #000;
}

.pascal1-container .pascal1-heading h1 {
    text-align: center;
    padding: 30px 0 30px 0;
}

.pascal1-container .pascal1-img-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.pascal1-img-container .pascal1-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 30px;
    position: relative;
    background-color: #eef2f4;
}

.pascal1-img-container .pascal-ext a {
    text-decoration: none;
}

.pascal1-img a {
    text-decoration: none;
    text-align: center;
    color: #000;
}

.pascal1-img a img {
    height: 350px;
    width: 320px;
}

.pascal1-img .pascal1-download a {
    position: absolute;
    width: 100%;
    font-size: 1.6rem;
    font-weight: 500;
    margin-top: 5px;
    padding: 10px 0 10px 0;
    color: #000;
    background-color: aliceblue;
}

.pascal1-container .pascal1-ext {
    margin: 0 70px 0 30px;
    display: flex;
    color: #000;
    background-color: #eef2f4;
}

.pascal1-ext h3 {
    font-size: 2.5rem;
    display: flex;
    padding-left: 30px;
    justify-content: center;
    align-items: center;
}

.pascal1-ext img {
    width: 60%;
}

@media screen and (max-width: 680px) {
    .pascal1-container {
        padding: 20px;
    }
    .pascal-container .pascal-img-container {
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .h-logo li .logo-ext-txt img {
    width: 160px;
}
.lap-bar {
    position: static;
    display: flex;
    justify-content: end;
    color: black;
    margin-bottom: 0;
    box-shadow: 3px 3px 5px rgb(7 83 246 / 10%);
}
nav ul li a {
    height: 100%;
    padding: 0 30px;
    font-size: 2rem;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    color: black;
}

}