<!doctype html>
<html lang="ar">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/infoSite/css/bootstrap.min.css">
    <link rel="stylesheet" href="/infoSite/css/all.min.css">
    <!-- plugins CSS -->
    <link rel="stylesheet" href="/infoSite/plugins/owl-carousel/css/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" integrity="sha512-vKMx8UnXk60zUwyUnUPM3HbQo8QfmNx7+ltw8Pm5zLusl1XIfwcxo8DbWCqMGKaWeNxWA8yrx5v3SaVpMvR3CA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <!-- my CSS -->
    <link rel="stylesheet" href="/infoSite/css/style.css">
    <%if(translate.language =='en'){%>
        <link rel="stylesheet" href="/infoSite/css/style-ltr.css">
    <%}%>

    <meta name="description"          content="<%=infoSite.description%>" />
    <meta name="keywords"             content="seo" />

    <meta property="fb:app_id"        content="140586622674265" />
    <meta property="og:type"          content="website" />
    <meta property="og:url"           content="{{ Request::url() }}" />

    <meta property="og:title"         content="<%=infoSite.name%>" />
    <meta property="og:description"   content="<%=infoSite.description%>" />
    <meta property="og:image"         content="<%=infoSite.logo%>"/>
    <meta property="og:width"         content="200"/>
    <meta property="og:height"        content="200"/>

    <style>
        .custom-select.is-invalid~.invalid-feedback, .custom-select.is-invalid~.invalid-tooltip, .form-control.is-invalid~.invalid-feedback, .form-control.is-invalid~.invalid-tooltip, .was-validated .custom-select:invalid~.invalid-feedback, .was-validated .custom-select:invalid~.invalid-tooltip, .was-validated .form-control:invalid~.invalid-feedback, .was-validated .form-control:invalid~.invalid-tooltip {
            display: block;
        }
        :root {
            --main: <%=infoSite.mainColor%>;
        --hover: <%=infoSite.hoverColor%>;
        --main2: linear-gradient(to right bottom, <%=infoSite.buttonsColor%>, <%=infoSite.buttonsColor%>,<%=infoSite.buttonsColor%>, <%=infoSite.buttonsColor%>, <%=infoSite.buttonsColor%>);
        --white: #ffffff;
        --gray: #777;
        }
        .invalid-feedback{
            height: 40px;
            line-height: 40px;
        }
        #searchTextField{
            left: 0 !important;
            top: 55px !important;
        }
        .imgMontg {
            /*overflow: hidden;*/
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 25px;
        }
        .imagesUploadBlock {
            display: inline-block;
            vertical-align: top;
            position: relative;
            margin: 20px 0;
            width: 140px;
            height: 140px;
        }
        .uploadImg {
            display: inline-block;
            width: 140px;
            height: 140px;
            line-height: 110px;
            text-align: center;
            position: relative;
            border-radius: 15px;
            margin: 0;
            border: 3px dotted #e4e4e4;
        }
        .uploadImg:before {
            content: '';
            position: absolute;
            width: 140px;
            height: 140px;
            border-radius: 15px;
            right: 0;
        }
        .uploadImg input {
            position: absolute;
            opacity: 0;
            z-index: -1;
            display: none;
        }
        .select2-container--default .select2-selection--multiple {
            border: 0 !important;
            background-color: #f9f9f9 !important;
            height: 40px !important;
        }
        .select2-container--default .select2-results>.select2-results__options{
            background-color: #f9f9f9 !important;
            border: 0 !important;
        }
        .select2-dropdown{
            border: 0 !important;
        }
        .sec-padd {
    padding: 60px 0 !important;
}

.the_title {
    text-align: center !important;
    margin-bottom: 40px !important;
}

.the_title h3 {
    font-size: 2em !important;
    font-weight: bold !important;
}

.sec-padd {
    padding: 60px 0 !important;
}

.the_title {
    text-align: center !important;
    margin-bottom: 40px !important;
}

.the_title h3 {
    font-size: 2em !important;
    font-weight: bold !important;
}

:root {
  --surface-color: #fff;
  --curve: 40;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #fef8f8;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 0.3fr));
  gap: 2rem;
  margin: 4rem 5vw;
  padding: 0;
  list-style-type: none;
  justify-content: center;
}

.card {
  position: relative !important;
  display: block !important;
  height: 100% !important;  
  border-radius: calc(var(--curve) * 1px) !important;
  overflow: hidden !important;
  text-decoration: none !important;
}

.card__image {      
  width: 100% !important;
  height: 95% !important;
}

.card__overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1 !important;      
  border-radius: calc(var(--curve) * 1px) !important;    
  background-color: var(--surface-color) !important;      
  transform: translateY(100%) !important;
  transition: .2s ease-in-out !important;
}

.card:hover .card__overlay {
  transform: translateY(0) !important;
}

.card__header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 2em !important;
  padding: 2em !important;
  border-radius: calc(var(--curve) * 1px) 0 0 0 !important;    
  background-color: var(--surface-color) !important;
  transform: translateY(-100%) !important;
  transition: .2s ease-in-out !important;
}

.card__arc {
  width: 80px !important;
  height: 80px !important;
  position: absolute !important;
  bottom: 100% !important;
  right: 0 !important;      
  z-index: 1 !important;
}

.card__arc path {
  fill: var(--surface-color) !important;
  /* d: path("M 40 80 c 22 0 40 -22 40 -40 v 40 Z") !important; */
}       

.card:hover .card__header {
  transform: translateY(0) !important;
}

.card__thumb {
  flex-shrink: 0 !important;
  width: 50px !important;
  height: 50px !important;      
  border-radius: 50% !important;      
}

.card__title {
  font-size: 1em !important;
  margin: 0 0 .3em !important;
  color: #6A515E !important;
}

.card__tagline {
  display: block !important;
  margin: 1em 0 !important;
  font-family: "MockFlowFont" !important;  
  font-size: .8em !important; 
  color: #D7BDCA !important;  
}

.card__status {
  font-size: .8em !important;
  color: #D7BDCA !important;
}

.card__description {
  padding: 0 2em 2em !important;
  margin: 0 !important;
  color: #D7BDCA !important;
  font-family: "MockFlowFont" !important;   
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  /* -webkit-line-clamp: 3 !important; */
  overflow: hidden !important;
}    
 



    </style>
    <title><%=infoSite.name[lang]%></title>
    <!-- title logo -->
    <%= console.log(infoSite.logo) %>
     
    <link rel="icon"  href="<%=infoSite.logo%>" type="image/x-icon" />
</head>