@font-face {font-family: En;src: url('../../font/Roboto_Condensed/static/RobotoCondensed-Regular.ttf') format('truetype');font-weight:normal;font-size: 1.1rem}

.en{
    font-family: "en" !important;
}
.tinos{font-family: "Tinos" !important}

:root{
    --cofe-dark: #285373 !important;
    --cofe-light: #cecece !important;
    --light:#f0dbab !important;
    --rgb: rgb(40,83,115);
    --blur: #28537348;
    --blur2: #09141db0;
}
body{
    font-size: 1rem;
}
.fs-7{
    font-size: 0.8rem;
    font-family: inherit;
}
.text-cofe-dark{
    color: var(--cofe-dark) !important;
}
.text-cofe-light{
    color: var(--cofe-light) !important;
}
.text-light2{
    color: var(--light) !important;
}
.bg-cofe-dark{
    background-color: var(--cofe-dark) !important;
}
.bg-cofe-light{
    background-color: var(--cofe-light) !important;
}
.bg-light2{
    background-color: var(--light) !important;
}
a{
    color: inherit !important;
}
/* Header */
.bg-blur{
    backdrop-filter: blur(9px);
    background-color: var(--blur);
    animation: sticky 1s;
}
.bg-blur2{
    backdrop-filter: blur(9px);
    background-color: var(--blur2);
    animation: sticky 1s;
}
.header{
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    z-index: 1000;
}
.header::after{
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    background: linear-gradient(to top,rgb(40,83,115,0.6),transparent)!important;
    z-index: 1;
}
.logo{
    width: 6rem;
    height: 5rem;
}
/* Menu Bar */
.m-top{
    height: 9rem;
}
.p-top{
    padding-top: 3rem !important;
}
.menu-bar{
    gap: 23px;
    padding: 0.5rem 2rem;
    scrollbar-width: none;
    position: fixed;
    top: 5rem;
    left: 0;
    right: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    z-index: 1000;
}
.menu-bar::-webkit-scrollbar{
    display: none;
}
.item-bar{
    gap: 5px;
    max-width: 12.5rem;
    height: 5rem;
    padding: 1rem 0.7rem;
    white-space: nowrap;
}
.img-bar{
    width: 5.5rem;
    height: 5.5rem;
}
.img-bar2{
    width: 5px;
    height: 5px;
}
/* Menu Item */
.div-h{
    height: 12.5rem;
}
.border-blue1{
    border-bottom: 0.5px solid var(--cofe-dark) !important;
}
.name-item{
    height: 3.5rem;
    border-top: 0.2rem dotted var(--cofe-dark);
    border-bottom:  0.2rem dotted var(--cofe-dark);
}
.name-item2{
    height: 4.5rem;
    border-top: 0.2rem dotted var(--cofe-dark);
    border-bottom:  0.2rem dotted var(--cofe-dark);
}
.name-item h6{
    font-weight: bold;
}

.product1{
    background-image: url('/Portals/10/logo-border.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border: 1px solid var(--cofe-dark);
    border-radius: 50%;
    opacity: 0.5;
}
.product11{
       background-image: url('/Portals/10/1/1.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 13rem;
    height: 13rem;
    border-radius: 50%;
}
.product12{
       background-image: url('/Portals/10/1/2.jfif');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product13{
       background-image: url('/Portals/10/1/3.jpeg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product14{
       background-image: url('/Portals/10/1/4.jpeg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product15{
       background-image: url('/Portals/10/1/5.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product16{
       background-image: url('/Portals/10/1/6.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product17{
       background-image: url('/Portals/10/1/7.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product18{
       background-image: url('/Portals/10/1/8.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product19{
       background-image: url('/Portals/10/1/9.jpeg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product10{
       background-image: url('/Portals/10/1/10.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product111{
       background-image: url('/Portals/10/1/11.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product112{
       background-image: url('/Portals/10/1/12.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product113{
       background-image: url('/Portals/10/1/13.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product114{
       background-image: url('/Portals/10/1/14.jpeg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product115{
       background-image: url('/Portals/10/1/15.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product116{
       background-image: url('/Portals/10/1/16.jfif');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product117{
       background-image: url('/Portals/10/1/17.jfif');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product118{
       background-image: url('/Portals/10/1/18.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product119{
       background-image: url('/Portals/10/1/19.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product20{
       background-image: url('/Portals/10/1/20.jfif');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product21{
       background-image: url('/Portals/10/1/21.jfif');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product22{
       background-image: url('/Portals/10/1/22.jfif');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem; 
    height: 9rem;
    border-radius: 50%;
}
.product23{
       background-image: url('/Portals/10/1/23.jfif');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product24{
       background-image: url('/Portals/10/1/24.jfif');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product25{
       background-image: url('/Portals/10/1/25.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product26{
       background-image: url('/Portals/10/1/26.jfif');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product27{
       background-image: url('/Portals/10/1/27.jfif');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product28{
       background-image: url('/Portals/10/1/28.jfif');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product29{
       background-image: url('/Portals/10/1/29.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product30{
       background-image: url('/Portals/10/1/30.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product31{
       background-image: url('/Portals/10/1/31.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}

.product32{
       background-image: url('/Portals/10/1/32.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product33{
    background-image: url('/Portals/10/1/33.jpeg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
}
.product3-1{
    background-image: url('/Portals/10/1/8.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;

}
.product91{
    background-image: url('/Portals/10/1/9.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;

}


/* Footer */
.gradient-fill{
    fill: var(--cofe-dark);
}
/* one Pane */
.fs-8{
    font-size: 1.1rem !important;
}
.fs-9{
    font-size: 1rem !important;
}
.div-one{
    height: 62.5rem;
    width: 20rem;
}
.bg-img{
    background-image: url('/Portals/10/bg/bg.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* product */
.border-tak{
    border-left: 1px solid var(--cofe-dark);
}