var/cache/dev/twig/46/46b7b51af1ad9a0d1b9241b382423c0e0272516c6f4dcfe50965f7628cd53ade.php line 1095

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\SandboxExtension;
  7. use Twig\Markup;
  8. use Twig\Sandbox\SecurityError;
  9. use Twig\Sandbox\SecurityNotAllowedTagError;
  10. use Twig\Sandbox\SecurityNotAllowedFilterError;
  11. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  12. use Twig\Source;
  13. use Twig\Template;
  15. /* Theme/Produit/Service/Service/supportscenter.html.twig */
  16. class __TwigTemplate_1daac9016a5de1c6ce8296e66ad3589c467e601cf8cd0d459ac98d5f1e18ffc9 extends Template
  17. {
  18.     private $source;
  19.     private $macros = [];
  21.     public function __construct(Environment $env)
  22.     {
  23.         parent::__construct($env);
  25.         $this->source = $this->getSourceContext();
  27.         $this->blocks = [
  28.             'meta' => [$this, 'block_meta'],
  29.             'title' => [$this, 'block_title'],
  30.             'stylesheets' => [$this, 'block_stylesheets'],
  31.             'userblog_body' => [$this, 'block_userblog_body'],
  32.             'srcjavascripttemplate' => [$this, 'block_srcjavascripttemplate'],
  33.             'javascripttemplate' => [$this, 'block_javascripttemplate'],
  34.         ];
  35.     }
  37.     protected function doGetParent(array $context)
  38.     {
  39.         // line 1
  40.         return "Theme/Users/User/layoutoffert.html.twig";
  41.     }
  43.     protected function doDisplay(array $context, array $blocks = [])
  44.     {
  45.         $macros = $this->macros;
  46.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  47.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Theme/Produit/Service/Service/supportscenter.html.twig"));
  49.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  50.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Theme/Produit/Service/Service/supportscenter.html.twig"));
  52.         $this->parent = $this->loadTemplate("Theme/Users/User/layoutoffert.html.twig", "Theme/Produit/Service/Service/supportscenter.html.twig", 1);
  53.         $this->parent->display($context, array_merge($this->blocks, $blocks));
  54.         
  55.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  57.         
  58.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  60.     }
  62.     // line 2
  63.     public function block_meta($context, array $blocks = [])
  64.     {
  65.         $macros = $this->macros;
  66.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  67.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "meta"));
  69.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  70.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "meta"));
  72.         // line 3
  73.         echo "\t";
  74.         $this->displayParentBlock("meta", $context, $blocks);
  75.         echo "
  76. \t<meta name=\"keywords\" content=\"";
  77.         // line 4
  78.         echo twig_escape_filter($this->env, (isset($context["site"]) || array_key_exists("site", $context) ? $context["site"] : (function () { throw new RuntimeError('Variable "site" does not exist.', 4, $this->source); })()), "html", null, true);
  79.         echo ", ";
  80.         echo twig_escape_filter($this->env, (isset($context["keywords"]) || array_key_exists("keywords", $context) ? $context["keywords"] : (function () { throw new RuntimeError('Variable "keywords" does not exist.', 4, $this->source); })()), "html", null, true);
  81.         echo "\"/>
  82. \t<meta name=\"author\" content=\"Noel Kenfack\"/>
  83. \t<meta name=\"description\" content=\"";
  84.         // line 6
  85.         echo twig_escape_filter($this->env, (isset($context["metier"]) || array_key_exists("metier", $context) ? $context["metier"] : (function () { throw new RuntimeError('Variable "metier" does not exist.', 6, $this->source); })()), "html", null, true);
  86.         echo ", ";
  87.         echo twig_escape_filter($this->env, (isset($context["site"]) || array_key_exists("site", $context) ? $context["site"] : (function () { throw new RuntimeError('Variable "site" does not exist.', 6, $this->source); })()), "html", null, true);
  88.         echo "\"/>
  90. \t
  91. ";
  92.         
  93.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  95.         
  96.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  98.     }
  100.     // line 11
  101.     public function block_title($context, array $blocks = [])
  102.     {
  103.         $macros = $this->macros;
  104.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  105.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  107.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  108.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  110.         // line 12
  111.         $this->displayParentBlock("title", $context, $blocks);
  112.         echo " ";
  113.         echo twig_escape_filter($this->env, (isset($context["site"]) || array_key_exists("site", $context) ? $context["site"] : (function () { throw new RuntimeError('Variable "site" does not exist.', 12, $this->source); })()), "html", null, true);
  114.         echo "
  115. ";
  116.         
  117.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  119.         
  120.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  122.     }
  124.     // line 15
  125.     public function block_stylesheets($context, array $blocks = [])
  126.     {
  127.         $macros = $this->macros;
  128.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  129.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  131.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  132.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  134.         // line 16
  135.         $this->displayParentBlock("stylesheets", $context, $blocks);
  136.         echo "
  138. <style>
  139. \t/*  */
  140. .small-text {color:#2c2b0c;}
  141. .heading{color:#000; font-size:39px; font-weight:700;}
  142. .work-process-section { width: 100%; display: block; padding: 90px 0px 100px; background: #f7f6e2 ; background-size: cover; background-position: center; }
  143. .work-process-section .heading-block { width: 100%; display: block; max-width: 600px; margin: 0px auto 60px; text-align: center; }
  144. .work-process-section .heading-block .description { font-size: 16px; color: #666666; margin-bottom: 0px; }
  145. .work-process-block { max-width: 1600px; width: 100%; margin: 0px auto; /* height: 450px; */ }
  147. .work-process-layout1 .work-process-top .number { display:inline-block; width:80px; height:80px; text-align:center; border:5px solid; font-size:26px; font-weight:700; line-height:73px; margin-left:40px; margin-bottom:25px; background-color: #b9b533 !important; border-radius: 50%; position: relative; -webkit-transition: all ease 0.4s; transition: all ease 0.4s; }
  148. .work-process-layout1 .work-process-top { text-align:center; position:relative }
  149. .work-process-layout1 .work-process-top .shape { -webkit-transition: all ease 0.4s; transition: all ease 0.4s;  display:inline-block; position:absolute; left:25px; top:63px; width:100%; height:270px; max-width:270px; -webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 29% 100%); clip-path:polygon(0 0, 100% 0, 100% 100%, 29% 100%); border-radius:10px; z-index:0; -webkit-transform:rotate(-5deg); -ms-transform:rotate(-5deg); transform:rotate(-5deg); background-color: #b9b533; }
  151. .work-process-layout1 .vs-work-process-2 .shape { background: #99962a !important; }
  152. .work-process-layout1 .vs-work-process-2 .number{ background: #99962a !important; }
  153. .work-process-layout1 .vs-work-process-2  .work-process-content { border-color: #99962a !important; }
  155. /* .work-process-layout1 .vs-work-process-3 .shape { background: #008dc4  !important; }
  156. .work-process-layout1 .vs-work-process-3 .number{ background: #008dc4  !important; }
  157. .work-process-layout1 .vs-work-process-3 .work-process-content { border-color: #008dc4  !important; }
  158. */
  159. .work-process-layout1 .vs-work-process-4 .shape { background: #90acd1  !important; }
  160. .work-process-layout1 .vs-work-process-4 .number{ background: #90acd1  !important; }
  161. .work-process-layout1 .vs-work-process-4 .work-process-content { border-color: #90acd1 !important; }
  163. .work-process-layout1 .work-process-content { -webkit-transition: all ease 0.4s; transition: all ease 0.4s;  border-radius:10px; box-shadow:0px 3px 0px 0px rgba(17,180,245,0.004),0px 3px 50px 0px rgba(17,180,245,0.1); background-color:rgba(255,255,255,0.969); padding:35px 20px; padding-bottom:30px; max-width:270px; border-bottom:3px solid #b9b533; position: relative;}
  164. .work-process-layout1 .work-process-content.odd-block { border-color: #d9d675; }
  165. .work-process-layout1 .work-process-content .icon { width: 45px; height: 45px; margin: 0px auto 20px; }
  166. .work-process-layout1 .work-process-content .icon img{ width: 100%; height: 100%; }
  167. .work-process-layout1 .work-process-content .process-title { color: #1d165c; font-size: 20px; line-height: 30px; transition: all 500ms ease; font-weight:600;  margin-bottom: 12px;  }
  168. .work-process-layout1 .work-process-content .text {  position: relative; font-size: 14px; line-height: 24px; color: #666666; transition: all 500ms ease; margin-bottom: 0px;  }
  169. .work-process-layout1 .vs-work-process:hover .work-process-top .shape {-webkit-transform:rotate(0); -ms-transform:rotate(0); transform:rotate(0); -webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%)}
  170. .work-process-layout1 .vs-work-process:hover .work-process-top .number { margin-bottom:0px;  margin-left:0% }
  173. /*================= Beging Article =================*/
  174. .card {
  175.     display: flex;
  176.     margin-bottom: 30px;
  177.     width: 100%;
  178.   }
  179.   .card .card-icon-top {
  180.     font-size: 4.5rem;
  181.     margin-top: 3rem;
  182.   }
  183.   .card .card-tags {
  184.     color: #097d6c;
  185.     display: inline-block;
  186.     font-weight: 700;
  187.     margin-bottom: 1rem;
  188.   }
  189.   .card .card-tags:before {
  190.     content: \"\";
  191.     background-color: #097d6c;
  192.     width: 0.75em;
  193.     height: 0.75em;
  194.     border-radius: 100%;
  195.     display: inline-block;
  196.     margin-right: 0.5rem;
  197.   }
  198.   .card .card-date {
  199.     display: inline-block;
  200.     padding-bottom: 1rem;
  201.   }
  202.   .card .card-title {
  203.     color: #212529;
  204.     display: block;
  205.     font-weight: 700;
  206.     font-size: 1.5rem;
  207.     line-height: 1.33333;
  208.     margin-bottom: 1rem;
  209.   }
  210.   .card .card-title:last-child {
  211.     margin-bottom: 0;
  212.   }
  213.   .card .card-label {
  214.     color: #212529;
  215.     display: block;
  216.     font-size: 1.5rem;
  217.     line-height: 1.33333;
  218.     font-weight: 700;
  219.   }
  220.   .card .card-body {
  221.     padding: 2rem 2rem 2rem 2rem;
  222.     align-self: center;
  223.     width: 100%;
  224.   }
  225.   .card .card-body .popover-wrapper.right {
  226.     position: absolute;
  227.     right: 0;
  228.   }
  229.   .card .card-metadata {
  230.     min-width: 10rem;
  231.   }
  232.   .card .card-footer {
  233.     border-top: none;
  234.     padding: 0 2rem 2rem 2rem;
  235.     background-color: inherit;
  236.     display: flex;
  237.     align-items: center;
  238.   }
  239.   .card .card-footer .vfi {
  240.     color: #097d6c;
  241.     font-size: 2.5rem;
  242.     padding-left: 0.5rem;
  243.   }
  244.   .card .vfi {
  245.     color: #097d6c;
  246.   }
  247.   .card > a {
  248.     border-bottom: none;
  249.     color: #637381;
  250.     display: flex;
  251.     flex-direction: column;
  252.     height: 100%;
  253.   }
  254.   .card > a:hover,
  255.   .card > a:active {
  256.     color: #fff;
  257.     background: #097d6c;
  258.     text-decoration: none;
  259.   }
  260.   .card > a:hover .card-title,
  261.   .card > a:hover .card-icon-top,
  262.   .card > a:hover .card-footer .vfi,
  263.   .card > a:hover .card-tags,
  264.   .card > a:active .card-title,
  265.   .card > a:active .card-icon-top,
  266.   .card > a:active .card-footer .vfi,
  267.   .card > a:active .card-tags {
  268.     color: #fff;
  269.   }
  270.   .card > a:hover .text-muted,
  271.   .card > a:active .text-muted {
  272.     color: #fff !important;
  273.   }
  274.   .card > a:hover .card-tags:before,
  275.   .card > a:active .card-tags:before {
  276.     background-color: #fff;
  277.   }
  278.   .card2 {
  279.     -webkit-transition: all 100ms ease-in-out;
  280.     transition: all 100ms ease-in-out;
  281.     border: none;
  282.     -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);
  283.     box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);
  284.   }
  285.   .card2:hover {
  286.     transform: scale(1.04);
  287.     border: none;
  288.   }
  289.   .card2 > a:hover,
  290.   .card2 > a:active {
  291.     color: inherit;
  292.     background: #fff;
  293.     text-decoration: none;
  294.   }
  295.   .card2 > a:hover .card-icon-top,
  296.   .card2 > a:hover .card-footer .vfi,
  297.   .card2 > a:hover .card-tags,
  298.   .card2 > a:active .card-icon-top,
  299.   .card2 > a:active .card-footer .vfi,
  300.   .card2 > a:active .card-tags {
  301.     color: inherit;
  302.   }
  303.   .card2 > a:hover .card-title,
  304.   .card2 > a:active .card-title {
  305.     color: #097d6c;
  306.   }
  307.   .card2 > a:hover .text-muted,
  308.   .card2 > a:active .text-muted {
  309.     color: #fff !important;
  310.   }
  311.   .card2 > a:hover .card-tags:before,
  312.   .card2 > a:active .card-tags:before {
  313.     background-color: #fff;
  314.   }
  315.   .card3 {
  316.     -webkit-transition: all 200ms ease-in-out;
  317.     transition: all 200ms ease-in-out;
  318.   }
  319.   .card3:hover {
  320.     border: 1px solid #0cb097;
  321.   }
  322.   .card3 > a:hover,
  323.   .card3 > a:active {
  324.     color: inherit;
  325.     background: #fff;
  326.     text-decoration: none;
  327.   }
  328.   .card3 > a:hover .card-icon-top,
  329.   .card3 > a:hover .card-footer .vfi,
  330.   .card3 > a:hover .card-tags,
  331.   .card3 > a:active .card-icon-top,
  332.   .card3 > a:active .card-footer .vfi,
  333.   .card3 > a:active .card-tags {
  334.     color: inherit;
  335.   }
  336.   .card3 > a:hover .card-title,
  337.   .card3 > a:active .card-title {
  338.     color: #212529;
  339.   }
  340.   .card3 > a .card-icon-top,
  341.   .card3 > a .card-icon-top {
  342.     -webkit-transition: all 200ms ease-in-out;
  343.     transition: all 200ms ease-in-out;
  344.   }
  345.   .card3 > a:hover .card-icon-top,
  346.   .card3 > a:active .card-icon-top {
  347.     transform: scale(1.4);
  348.   }
  349.   .card3 > a:hover .text-muted,
  350.   .card3 > a:active .text-muted {
  351.     color: #fff !important;
  352.   }
  353.   .card3 > a:hover .card-tags:before,
  354.   .card3 > a:active .card-tags:before {
  355.     background-color: #fff;
  356.   }
  357.   .card4 {
  358.     -webkit-transition: all 200ms ease-in-out;
  359.     transition: all 200ms ease-in-out;
  360.     border: 0;
  361.     -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);
  362.     box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);
  363.   }
  364.   .card4 > a:hover,
  365.   .card4 > a:active {
  366.     background: #ffffff;
  367.     color: inherit;
  368.     text-decoration: none;
  369.     cursor: url(https://dl.dropbox.com/s/2nmb5ja0g888q8n/arrow.png) 0 0, auto;
  370.   }
  371.   .card4 > a:hover:before,
  372.   .card4 > a:active:before {
  373.     content: \"\";
  374.     display: block;
  375.     width: 100%;
  376.     height: 100%;
  377.     background: rgba(0, 0, 0, 0.3);
  378.     position: absolute;
  379.   }
  381.   .card4 > a:hover .card-icon-top,
  382.   .card4 > a:hover .card-footer .vfi,
  383.   .card4 > a:hover .card-tags,
  384.   .card4 > a:active .card-icon-top,
  385.   .card4 > a:active .card-footer .vfi,
  386.   .card4 > a:active .card-tags {
  387.     color: inherit;
  388.   }
  389.   .card4 > a:hover .card-title,
  390.   .card4 > a:active .card-title {
  391.     color: #212529;
  392.   }
  393.   .card4 > a .card-icon-top,
  394.   .card4 > a .card-icon-top {
  395.     -webkit-transition: all 200ms ease-in-out;
  396.     transition: all 200ms ease-in-out;
  397.   }
  398.   .card4 > a:hover .text-muted,
  399.   .card4 > a:active .text-muted {
  400.     color: #fff !important;
  401.   }
  402.   .card4 > a:hover .card-tags:before,
  403.   .card4 > a:active .card-tags:before {
  404.     background-color: #fff;
  405.   }
  406.   .card.card-row-layout .card-body {
  407.     text-align: left;
  408.   }
  410.   @media (min-width: 500px) {
  411.     .gradien-color-height{
  412.       height: 180px!important;
  413.     }
  414.   }
  415.   @media (max-width: 500px) {
  416.     .gradien-color-height{
  417.       height: 260px!important;
  418.     }
  419.   }
  420.   @media screen and (max-width: 450px){
  421.   #page, #masthead, #content {
  422.       width: 100%!important;;
  423.       overflow: visible!important;;
  424.   }
  425.   }
  427.   @media (min-width: 992px) {
  428.     .card.card-row-layout {
  429.       flex-direction: row;
  430.       align-items: center;
  431.     }
  432.     .card.card-row-layout .card-icon-top {
  433.       margin-top: 0;
  434.       margin-left: 2rem;
  435.     }
  436.     .card.card-row-layout .card-icon-top.card-icon-right {
  437.       order: 100;
  438.       margin-right: 2rem;
  439.     }
  440.     .card.card-row-layout .card-body {
  441.       text-align: left;
  442.     }
  443.     .card.card-row-layout .card-footer {
  444.       padding: 2rem;
  445.     }
  446.     .card.card-row-layout .card-footer .vfi {
  447.       font-size: 3.6rem;
  448.     }
  449.     .card.card-row-layout > a {
  450.       flex-direction: row;
  451.       align-items: center;
  452.       width: 100%;
  453.     }
  454.   }
  455.   .card.card-large .card-title,
  456.   .card.card-featured .card-title {
  457.     color: #212529;
  458.     display: block;
  459.     font-weight: 700;
  460.     font-size: 1.5rem;
  461.     line-height: 1.33333;
  462.   }
  463.   .card.card-large .card-body,
  464.   .card.card-featured .card-body {
  465.     text-align: left;
  466.   }
  467.   @media (min-width: 992px) {
  468.     .card.card-fw .card-img-top {
  469.       margin-left: 1rem;
  470.       max-width: 300px;
  471.       order: 100;
  472.     }
  473.   }
  474.   .card.card-large.card-row-layout .card-body {
  475.     text-align: center;
  476.   }
  477.   @media (min-width: 992px) {
  478.     .card.card-large.card-row-layout .card-body {
  479.       text-align: left;
  480.     }
  481.   }
  482.   @media (min-width: 992px) {
  483.     .card.card-large.card-fw .card-img-top {
  484.       margin-left: 1rem;
  485.       max-width: 400px;
  486.       order: 100;
  487.     }
  488.     .card.card-large.card-fw .vfi {
  489.       color: #fff;
  490.     }
  491.   }
  492.   @media (min-width: 1200px) {
  493.     .card.card-large.card-fw .card-img-top {
  494.       max-width: 500px;
  495.     }
  496.   }
  497.   .card.card-featured .card-body .text-muted {
  498.     display: inline-block;
  499.     margin-bottom: 1.5rem;
  500.   }
  501.   .card.card-featured .card-body .card-footer {
  502.     padding: 0;
  503.   }
  504.   @media (min-width: 992px) {
  505.     .card.card-featured .card-img-top {
  506.       flex: 0 0 50%;
  507.       max-width: 50%;
  508.       margin: 0;
  509.       align-self: start;
  510.     }
  511.     .card.card-featured .card-body {
  512.       display: flex;
  513.       flex-flow: column nowrap;
  514.       height: 100%;
  515.     }
  516.     .card.card-featured .card-body .card-footer {
  517.       margin-top: auto;
  518.     }
  519.   }
  520.   .card.card-label-content .card-title {
  521.     font-weight: 700;
  522.   }
  523.   .card.card-label-content .card-label {
  524.     font-size: 1rem;
  525.   }
  526.   .card .rounded-circle {
  527.     margin: 2rem auto 1rem auto;
  528.     width: 61.5%;
  529.   }
  530.   .card[data-toggle=\"modal\"] {
  531.     cursor: pointer;
  532.   }
  533.   .cards > div,
  534.   .cards .card-item {
  535.     display: flex;
  536.   }
  537.   .cards .card.bg-gray-sky {
  538.     border: none;
  539.   }
  540.   .cards.bg-gray-sky {
  541.     background-color: transparent;
  542.   }
  543.   .cards.bg-gray-sky .card {
  544.     background-color: #f4f6f8;
  545.     border: none;
  546.   }
  547.   .cards.bg-gray-sky .card .vfi {
  548.     color: #097d6c;
  549.   }
  550.   .cards.bg-gray-sky .card a:hover .vfi {
  551.     color: #fff;
  552.   }
  553.   .cards.cards-bs-grid {
  554.     display: flex;
  555.     flex-wrap: wrap;
  556.     margin-right: -15px;
  557.     margin-left: -15px;
  558.   }
  559.   .cards.cards-bs-grid .card-item {
  560.     position: relative;
  561.     width: 100%;
  562.     min-height: 1px;
  563.     padding-right: 15px;
  564.     padding-left: 15px;
  565.     flex: 0 0 100%;
  566.     max-width: 100%;
  567.   }
  568.   @media (min-width: 768px) {
  569.     .cards.cards-bs-grid .card-item {
  570.       flex: 0 0 50%;
  571.       max-width: 50%;
  572.     }
  573.   }
  574.   @media (min-width: 992px) {
  575.     .cards.cards-bs-grid .card-item {
  576.       flex: 0 0 33.33333%;
  577.       max-width: 33.33333%;
  578.     }
  579.   }
  582. /* ============Start Article ========*/
  583. .banner {
  584.   display: block;
  585.   text-decoration: none;
  586.   color: inherit;
  587.   overflow: hidden;
  588.   background-color: hsl(0, 0%, 100%);
  589.   box-shadow: 0 0 0 1px hsla(230, 13%, 9%, 0.05),
  590.     0 0.3px 0.4px hsla(230, 13%, 9%, 0.02),
  591.     0 0.9px 1.5px hsla(230, 13%, 9%, 0.045),
  592.     0 3.5px 6px hsla(230, 13%, 9%, 0.09);
  593.   border-radius: 0.375em;
  594.   transition: 0.3s;
  595.   width: 100%;
  596.   margin-inline: auto;
  597. }
  599. .banner__grid {
  600.   display: flex;
  601.   flex-direction: column;
  602. }
  604. .banner__grid > * {
  605.   min-width: 0;
  606. }
  608. .banner__link {
  609.   position: relative;
  610.   text-decoration: none;
  611.   color: hsl(250, 84%, 54%);
  612.   display: inline-block;
  613.   transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  614.   transform-origin: left bottom;
  615. }
  617. .banner__link i {
  618.   /* label */
  619.   position: relative;
  620.   z-index: 2;
  621.   display: inline-block;
  622.   transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  623. }
  625. .banner__link::after {
  626.   /* animated border */
  627.   content: \"\";
  628.   background-color: currentColor;
  629.   height: 2px;
  630.   width: 100%;
  631.   position: absolute;
  632.   z-index: 1;
  633.   bottom: 0;
  634.   left: 0;
  635.   -webkit-clip-path: inset(0% round 0.1875em);
  636.   clip-path: inset(0% round 0.1875em);
  637.   opacity: 0.15;
  638.   transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  639. }
  641. .banner__figure {
  642.   height: 0;
  643.   width: 100%;
  644.   padding-bottom: 50%;
  645.   transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  646.   background-position: center center;
  647.   background-repeat: no-repeat;
  648.   background-size: cover;
  649. }
  651. .banner__text {
  652.   padding: 1.5rem;
  653. }
  655. .banner__link-wrapper {
  656.   margin-top: 1rem;
  657. }
  659. .banner:hover {
  660.   box-shadow: 0 0 0 1px hsla(230, 13%, 9%, 0.05),
  661.     0 0.9px 1.25px hsla(230, 13%, 9%, 0.025), 0 3px 5px hsla(230, 13%, 9%, 0.05),
  662.     0 12px 20px hsla(230, 13%, 9%, 0.09);
  663. }
  665. .banner:hover .banner__link {
  666.   transform: scale(1.3);
  667. }
  669. .banner:hover .banner__link i {
  670.   transform: scale(0.7);
  671. }
  673. .banner:hover .banner__link::after {
  674.   height: 100%;
  675. }
  677. .banner:hover .banner__figure {
  678.   transform: scale(1.05);
  679. }
  681. @media (min-width: 64rem) {
  682.   .banner__grid {
  683.     flex-direction: row-reverse;
  684.   }
  686.   .banner__grid > * {
  687.     width: 50%;
  688.   }
  690.   .banner__figure {
  691.     height: 100%;
  692.     padding-bottom: 0;
  693.     -webkit-clip-path: polygon(100px 0%, 100% 0%, 100% 100%, 50px 100%);
  694.     clip-path: polygon(100px 0%, 100% 0%, 100% 100%, 50px 100%);
  695.   }
  697.   .banner__text {
  698.     padding: 3rem;
  699.   }
  701.   .banner__link-wrapper {
  702.     margin-top: 1.5rem;
  703.   }
  705.   .banner--invert .banner__grid {
  706.     flex-direction: row;
  707.   }
  709.   .banner--invert .banner__figure {
  710.     -webkit-clip-path: polygon(
  711.       0% 0%,
  712.       calc(100% - 100px) 0%,
  713.       calc(100% - 50px) 100%,
  714.       0% 100%
  715.     );
  716.     clip-path: polygon(
  717.       0% 0%,
  718.       calc(100% - 100px) 0%,
  719.       calc(100% - 50px) 100%,
  720.       0% 100%
  721.     );
  722.   }
  724.   .banner--invert .banner__text {
  725.     text-align: right;
  726.   }
  728.   .banner--invert .banner__link {
  729.     transform-origin: right bottom;
  730.   }
  732.   .banner:hover .banner__figure {
  733.     -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  734.     clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  735.   }
  736. }
  738. /* ------------------------ Watermark (Please Ignore) ----------------------- */
  739. .watermark-ctr {
  740.   --clr-button-bg: #141414;
  741.   --clr-button: 72, 39, 236;
  742.   --clr-text: #ffffff;
  744.   position: fixed;
  745.   bottom: 1.5rem;
  746.   right: 1.5rem;
  747.   z-index: 1000;
  748. }
  749. .watermark-ctr a {
  750.   text-decoration: none;
  751.   color: inherit;
  752.   display: flex;
  753. }
  754. .generate-button {
  755.   --generate-button-star-1-opacity: 0.25;
  756.   --generate-button-star-1-scale: 1;
  757.   --generate-button-star-2-opacity: 1;
  758.   --generate-button-star-2-scale: 1;
  759.   --generate-button-star-3-opacity: 0.5;
  760.   --generate-button-star-3-scale: 1;
  761.   --generate-button-dots-opacity: 0;
  762.   appearance: none;
  763.   outline: none;
  764.   border: none;
  765.   padding: 14px 24px 14px 20px;
  766.   border-radius: 29px;
  767.   margin: 0;
  768.   background-color: var(--clr-button-bg);
  769.   color: var(--clr-text);
  770.   display: flex;
  771.   align-items: center;
  772.   justify-content: center;
  773.   position: relative;
  774.   cursor: pointer;
  775.   -webkit-tap-highlight-color: transparent;
  776.   z-index: 1;
  777.   transform: scale(var(--generate-button-scale, 1)) translateZ(0);
  778.   box-shadow: 0px 0px 120px var(--generate-button-shadow-wide, transparent),
  779.     0px 4px 12px rgba(0, 0, 0, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.1),
  780.     inset 0px 1px 1px
  781.       var(--generate-button-shadow-inset, rgba(255, 255, 255, 0.04)),
  782.     0 0 0 var(--generate-button-shadow-outline, 0px)
  783.       rgba(var(--clr-button), 0.4);
  784.   transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s, color 0.3s;
  785. }
  786. .generate-button:before {
  787.   content: \"\";
  788.   display: block;
  789.   position: absolute;
  790.   right: 20%;
  791.   height: 20px;
  792.   left: 20%;
  793.   bottom: -10px;
  794.   background: rgba(204, 204, 204, 0.4);
  795.   filter: blur(12.5px);
  796.   z-index: 2;
  797.   clip-path: inset(-200% -30% 10px -30% round 29px);
  798.   opacity: 0;
  799.   transition: opacity 0.4s;
  800.   transform: translateZ(0);
  801. }
  802. .generate-button span {
  803.   position: relative;
  804.   z-index: 1;
  805.   font-family: \"Poppins\", Arial;
  806.   font-weight: 600;
  807.   font-size: 16px;
  808.   letter-spacing: 0.005em;
  809.   display: block;
  810.   user-select: none;
  811. }
  812. .generate-button .stroke {
  813.   mix-blend-mode: hard-light;
  814. }
  815. .generate-button .stroke svg {
  816.   position: absolute;
  817.   inset: 0;
  818.   width: 100%;
  819.   height: 100%;
  820.   fill: none;
  821.   stroke-width: 0.75px;
  822.   stroke: #e2d9ff;
  823.   stroke-dasharray: 1.5 14;
  824.   stroke-dashoffset: 22;
  825.   opacity: 0;
  826. }
  827. .generate-button .stroke svg:nth-child(2) {
  828.   stroke-width: 1px;
  829.   stroke-opacity: 0.5;
  830.   filter: blur(3px);
  831. }
  833. .generate-button svg.icon {
  834.   width: 18px;
  835.   height: 20px;
  836.   margin-right: 10px;
  837.   fill: currentColor;
  838. }
  839. .generate-button svg.icon path:nth-child(1) {
  840.   opacity: var(--generate-button-star-1-opacity);
  841.   transform: scale(var(--generate-button-star-1-scale)) translateZ(0);
  842.   transform-origin: 25% 14.58%;
  843. }
  844. .generate-button svg.icon path:nth-child(2) {
  845.   opacity: var(--generate-button-star-2-opacity);
  846.   transform: scale(var(--generate-button-star-2-scale)) translateZ(0);
  847.   transform-origin: 60.42% 50%;
  848. }
  849. .generate-button svg.icon path:nth-child(3) {
  850.   opacity: var(--generate-button-star-3-opacity);
  851.   transform: scale(var(--generate-button-star-3-scale)) translateZ(0);
  852.   transform-origin: 25% 85.42%;
  853. }
  854. .generate-button:hover {
  855.   --generate-button-scale: 1.01;
  856.   --generate-button-shadow-wide: rgba(var(--clr-button), 0.4);
  857.   --generate-button-shadow-inset: rgba(255, 255, 255, 0.35);
  858.   --generate-button-shadow-outline: 3px;
  859.   color: var(--clr-text);
  860.   background-color: rgba(var(--clr-button));
  861. }
  862. .generate-button:hover .stroke svg {
  863.   animation: stroke 2s linear infinite;
  864. }
  865. .generate-button:hover:before {
  866.   opacity: 1;
  867. }
  868. .generate-button:hover span:before {
  869.   opacity: 0;
  870. }
  871. .generate-button:hover:active {
  872.   --generate-button-scale: 1.05;
  873. }
  874. @keyframes stroke {
  875.   0% {
  876.     opacity: 0;
  877.   }
  878.   25%,
  879.   75% {
  880.     opacity: 1;
  881.   }
  882.   95%,
  883.   100% {
  884.     stroke-dashoffset: 6;
  885.     opacity: 0;
  886.   }
  887. }
  892. .pagination {
  893.     font-weight: bold;
  894.     font-size: 16px;
  895.     font-family: \"helvetica neue\", helvetica, arial, sans-serif;
  896.   }
  897.   .pagination a {
  898.     padding: 3px;
  899.     border: 1px solid #262626;
  900.     border-radius: 3px;
  901.     margin: 3px;
  902.     background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e3e3e3), color-stop(100%, #b8b8b8));
  903.     background: -moz-linear-gradient(top, #e3e3e3, #b8b8b8);
  904.     background: -webkit-linear-gradient(top, #e3e3e3, #b8b8b8);
  905.     background: linear-gradient(to bottom, #e3e3e3, #b8b8b8);
  906.     box-shadow: 0 0 6px rgba(0, 0, 0, 0.6), inset 0 1px rgba(255, 255, 255, 0.4);
  907.     color: #333;
  908.     text-decoration: none;
  909.     text-shadow: 0 1px 1px rgba(255, 255, 255, 0.72);
  910.   }
  911.   .pagination a:hover {
  912.     background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d90073), color-stop(100%, #a00056));
  913.     background: -moz-linear-gradient(top, #d90073, #a00056);
  914.     background: -webkit-linear-gradient(top, #d90073, #a00056);
  915.     background: linear-gradient(to bottom, #d90073, #a00056);
  916.     color: #260014;
  917.   }
  918.   .pagination a.active {
  919.     background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00add9), color-stop(100%, #00708c));
  920.     background: -moz-linear-gradient(top, #00add9, #00708c);
  921.     background: -webkit-linear-gradient(top, #00add9, #00708c);
  922.     background: linear-gradient(to bottom, #00add9, #00708c);
  923.     color: #001e26;
  924.   }
  925.   .pagination a.active:hover {
  926.     cursor: default;
  927.   }
  928.   .pagination .prev:before {
  929.     content: \"« \";
  930.     font-weight: normal;
  931.   }
  932.   .pagination .next:after {
  933.     content: \" »\";
  934.     font-weight: normal;
  935.   }
  936.   .pagination .next:hover, .pagination .prev:hover {
  937.     border-color: #141414;
  938.     background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI2MjYyNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFhMWExYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  939.     background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #262626), color-stop(100%, #1a1a1a));
  940.     background: -moz-linear-gradient(top, #262626, #1a1a1a);
  941.     background: -webkit-linear-gradient(top, #262626, #1a1a1a);
  942.     background: linear-gradient(to bottom, #262626, #1a1a1a);
  943.     box-shadow: 0 0 6px rgba(0, 0, 0, 0.6), inset 0 1px rgba(255, 255, 255, 0.1);
  944.     color: #ebebeb;
  945.     text-shadow: none;
  946.   }
  947. </style>
  948. ";
  949.         
  950.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  952.         
  953.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  955.     }
  957.     // line 830
  958.     public function block_userblog_body($context, array $blocks = [])
  959.     {
  960.         $macros = $this->macros;
  961.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  962.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "userblog_body"));
  964.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  965.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "userblog_body"));
  967.         // line 831
  968.         echo "
  969. <div style=\"background-image: linear-gradient(-1deg, #F6FCFF 0%, #EAF7FF 98%);\">
  972. ";
  973.         // line 835
  974.         if ((0 === twig_compare((isset($context["position"]) || array_key_exists("position", $context) ? $context["position"] : (function () { throw new RuntimeError('Variable "position" does not exist.', 835, $this->source); })()), "aide"))) {
  975.             // line 836
  976.             echo "\t";
  977.             echo $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment(Symfony\Bridge\Twig\Extension\HttpKernelExtension::controller("App\\Controller\\Produit\\Service\\ServiceController:articlesdemo", ["position" => (isset($context["position"]) || array_key_exists("position", $context) ? $context["position"] : (function () { throw new RuntimeError('Variable "position" does not exist.', 836, $this->source); })()), "page" => (isset($context["page"]) || array_key_exists("page", $context) ? $context["page"] : (function () { throw new RuntimeError('Variable "page" does not exist.', 836, $this->source); })())]));
  978.             echo "
  979. ";
  980.         } else {
  981.             // line 838
  982.             echo "\t";
  983.             if ((0 === twig_compare((isset($context["position"]) || array_key_exists("position", $context) ? $context["position"] : (function () { throw new RuntimeError('Variable "position" does not exist.', 838, $this->source); })()), "faq"))) {
  984.                 // line 839
  985.                 echo "\t\t";
  986.                 echo $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment(Symfony\Bridge\Twig\Extension\HttpKernelExtension::controller("App\\Controller\\Produit\\Service\\ServiceController:articlesfaq", ["position" => (isset($context["position"]) || array_key_exists("position", $context) ? $context["position"] : (function () { throw new RuntimeError('Variable "position" does not exist.', 839, $this->source); })()), "page" => (isset($context["page"]) || array_key_exists("page", $context) ? $context["page"] : (function () { throw new RuntimeError('Variable "page" does not exist.', 839, $this->source); })())]));
  987.                 echo "
  988. \t";
  989.             } else {
  990.                 // line 841
  991.                 echo "\t\t";
  992.                 if ((0 === twig_compare((isset($context["position"]) || array_key_exists("position", $context) ? $context["position"] : (function () { throw new RuntimeError('Variable "position" does not exist.', 841, $this->source); })()), "blog"))) {
  993.                     // line 842
  994.                     echo "\t\t\t";
  995.                     echo $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment(Symfony\Bridge\Twig\Extension\HttpKernelExtension::controller("App\\Controller\\Produit\\Service\\ServiceController:articlesblog", ["position" => (isset($context["position"]) || array_key_exists("position", $context) ? $context["position"] : (function () { throw new RuntimeError('Variable "position" does not exist.', 842, $this->source); })()), "page" => (isset($context["page"]) || array_key_exists("page", $context) ? $context["page"] : (function () { throw new RuntimeError('Variable "page" does not exist.', 842, $this->source); })())]));
  996.                     echo "
  997. \t\t";
  998.                 } else {
  999.                     // line 844
  1000.                     echo "\t\t\t";
  1001.                     if ((0 === twig_compare((isset($context["position"]) || array_key_exists("position", $context) ? $context["position"] : (function () { throw new RuntimeError('Variable "position" does not exist.', 844, $this->source); })()), "presentation"))) {
  1002.                         // line 845
  1003.                         echo "\t\t\t\t";
  1004.                         echo $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment(Symfony\Bridge\Twig\Extension\HttpKernelExtension::controller("App\\Controller\\Produit\\Service\\ServiceController:articleapropos", ["position" => (isset($context["position"]) || array_key_exists("position", $context) ? $context["position"] : (function () { throw new RuntimeError('Variable "position" does not exist.', 845, $this->source); })()), "page" => (isset($context["page"]) || array_key_exists("page", $context) ? $context["page"] : (function () { throw new RuntimeError('Variable "page" does not exist.', 845, $this->source); })())]));
  1005.                         echo "
  1006. \t\t\t";
  1007.                     } else {
  1008.                         // line 847
  1009.                         echo "\t\t\t\t";
  1010.                         if ((0 === twig_compare((isset($context["position"]) || array_key_exists("position", $context) ? $context["position"] : (function () { throw new RuntimeError('Variable "position" does not exist.', 847, $this->source); })()), "garantie"))) {
  1011.                             // line 848
  1012.                             echo "\t\t\t\t\t";
  1013.                             echo $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment(Symfony\Bridge\Twig\Extension\HttpKernelExtension::controller("App\\Controller\\Produit\\Service\\ServiceController:articlesengagement", ["position" => (isset($context["position"]) || array_key_exists("position", $context) ? $context["position"] : (function () { throw new RuntimeError('Variable "position" does not exist.', 848, $this->source); })()), "page" => (isset($context["page"]) || array_key_exists("page", $context) ? $context["page"] : (function () { throw new RuntimeError('Variable "page" does not exist.', 848, $this->source); })())]));
  1014.                             echo "
  1015. \t\t\t\t";
  1016.                         } else {
  1017.                             // line 850
  1018.                             echo "\t\t\t\t\t";
  1019.                             if ((0 === twig_compare((isset($context["position"]) || array_key_exists("position", $context) ? $context["position"] : (function () { throw new RuntimeError('Variable "position" does not exist.', 850, $this->source); })()), "toutinclus"))) {
  1020.                                 // line 851
  1021.                                 echo "\t\t\t\t\t\t";
  1022.                                 echo $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment(Symfony\Bridge\Twig\Extension\HttpKernelExtension::controller("App\\Controller\\Produit\\Service\\ServiceController:articlestoutinclus", ["position" => (isset($context["position"]) || array_key_exists("position", $context) ? $context["position"] : (function () { throw new RuntimeError('Variable "position" does not exist.', 851, $this->source); })()), "page" => (isset($context["page"]) || array_key_exists("page", $context) ? $context["page"] : (function () { throw new RuntimeError('Variable "page" does not exist.', 851, $this->source); })())]));
  1023.                                 echo "
  1024. \t\t\t\t\t";
  1025.                             } else {
  1026.                                 // line 853
  1027.                                 echo "\t\t\t\t\t\t";
  1028.                                 if ((0 === twig_compare((isset($context["position"]) || array_key_exists("position", $context) ? $context["position"] : (function () { throw new RuntimeError('Variable "position" does not exist.', 853, $this->source); })()), "modepaiement"))) {
  1029.                                     // line 854
  1030.                                     echo "\t\t\t\t\t\t\t";
  1031.                                     echo $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment(Symfony\Bridge\Twig\Extension\HttpKernelExtension::controller("App\\Controller\\Produit\\Service\\ServiceController:articlesmodepaiement", ["position" => (isset($context["position"]) || array_key_exists("position", $context) ? $context["position"] : (function () { throw new RuntimeError('Variable "position" does not exist.', 854, $this->source); })()), "page" => (isset($context["page"]) || array_key_exists("page", $context) ? $context["page"] : (function () { throw new RuntimeError('Variable "page" does not exist.', 854, $this->source); })())]));
  1032.                                     echo "
  1033. \t\t\t\t\t\t";
  1034.                                 } else {
  1035.                                     // line 856
  1036.                                     echo "\t\t\t\t\t\t\t";
  1037.                                     if ((0 === twig_compare((isset($context["position"]) || array_key_exists("position", $context) ? $context["position"] : (function () { throw new RuntimeError('Variable "position" does not exist.', 856, $this->source); })()), "cgu"))) {
  1038.                                         // line 857
  1039.                                         echo "\t\t\t\t\t\t\t\t";
  1040.                                         echo $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment(Symfony\Bridge\Twig\Extension\HttpKernelExtension::controller("App\\Controller\\Produit\\Service\\ServiceController:articlescgu", ["position" => (isset($context["position"]) || array_key_exists("position", $context) ? $context["position"] : (function () { throw new RuntimeError('Variable "position" does not exist.', 857, $this->source); })()), "page" => (isset($context["page"]) || array_key_exists("page", $context) ? $context["page"] : (function () { throw new RuntimeError('Variable "page" does not exist.', 857, $this->source); })())]));
  1041.                                         echo "
  1042. \t\t\t\t\t\t\t";
  1043.                                     } else {
  1044.                                         // line 859
  1045.                                         echo "\t\t\t\t\t\t\t\t";
  1046.                                         if ((0 === twig_compare((isset($context["position"]) || array_key_exists("position", $context) ? $context["position"] : (function () { throw new RuntimeError('Variable "position" does not exist.', 859, $this->source); })()), "confidentialite"))) {
  1047.                                             // line 860
  1048.                                             echo "\t\t\t\t\t\t\t\t\t";
  1049.                                             echo $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment(Symfony\Bridge\Twig\Extension\HttpKernelExtension::controller("App\\Controller\\Produit\\Service\\ServiceController:articlesconfidentialite", ["position" => (isset($context["position"]) || array_key_exists("position", $context) ? $context["position"] : (function () { throw new RuntimeError('Variable "position" does not exist.', 860, $this->source); })()), "page" => (isset($context["page"]) || array_key_exists("page", $context) ? $context["page"] : (function () { throw new RuntimeError('Variable "page" does not exist.', 860, $this->source); })())]));
  1050.                                             echo "
  1051. \t\t\t\t\t\t\t\t";
  1052.                                         } else {
  1053.                                             // line 862
  1054.                                             echo "\t\t\t\t\t\t\t\t\t
  1055. \t\t\t\t\t\t\t\t\t\t";
  1056.                                             // line 863
  1057.                                             echo $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment(Symfony\Bridge\Twig\Extension\HttpKernelExtension::controller("App\\Controller\\Produit\\Service\\ServiceController:itemaide", ["position" => "menuaide"]));
  1058.                                             echo "
  1059. \t\t\t\t\t\t\t\t\t\t
  1060. \t\t\t\t\t\t\t\t";
  1061.                                         }
  1062.                                         // line 866
  1063.                                         echo "\t\t\t\t\t\t\t";
  1064.                                     }
  1065.                                     // line 867
  1066.                                     echo "\t\t\t\t\t\t";
  1067.                                 }
  1068.                                 // line 868
  1069.                                 echo "\t\t\t\t\t";
  1070.                             }
  1071.                             // line 869
  1072.                             echo "\t\t\t\t";
  1073.                         }
  1074.                         // line 870
  1075.                         echo "\t\t\t";
  1076.                     }
  1077.                     // line 871
  1078.                     echo "\t\t";
  1079.                 }
  1080.                 // line 872
  1081.                 echo "\t";
  1082.             }
  1083.         }
  1084.         // line 874
  1085.         echo "</div>
  1086. ";
  1087.         // line 875
  1088.         $this->loadTemplate("Theme/General/Template/Menu/contacts.html.twig", "Theme/Produit/Service/Service/supportscenter.html.twig", 875)->display($context);
  1089.         // line 876
  1090.         echo "
  1091. <div style=\"border-top: 2px solid #ddd; background: #fff;\">
  1092. \t<div class=\"container\">
  1093. \t";
  1094.         // line 879
  1095.         echo $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment(Symfony\Bridge\Twig\Extension\HttpKernelExtension::controller("App\\Controller\\Users\\User\\BilletController:aviscarousel"));
  1096.         echo "
  1097. \t</div>
  1098. </div>
  1101. <div class=\"modal fade\" data-backdrop=\"false\" id=\"modalArticlesDetail\" style=\"margin-top: -75px;\">
  1102. <div class=\"modal-dialog modal-md\">
  1103. <div class=\"modal-content\">
  1104. <div class=\"modal-header color-bottom\" style=\"border-bottom: 4px solid #37c0fb; display: block;\">
  1105. \t<button type=\"button\" class=\"close\" data-dismiss=\"modal\" style=\"float: right;\">&times;</button>
  1106. \t<h3 class=\"modal-title custom-title-modal\" style=\"text-transform: capitalize; text-align: left;\"> ";
  1107.         // line 889
  1108.         echo twig_escape_filter($this->env, (isset($context["position"]) || array_key_exists("position", $context) ? $context["position"] : (function () { throw new RuntimeError('Variable "position" does not exist.', 889, $this->source); })()), "html", null, true);
  1109.         echo " <span class=\" fa fa-chevron-right\" style=\"font-size: 20px;\"></span> Article #";
  1110.         echo twig_escape_filter($this->env, (isset($context["id"]) || array_key_exists("id", $context) ? $context["id"] : (function () { throw new RuntimeError('Variable "id" does not exist.', 889, $this->source); })()), "html", null, true);
  1111.         echo "</h3>
  1112. </div>
  1113. <div class=\"modal-body\">
  1114. \t<div class=\"row\">
  1115. \t  <div class=\"col-md-12\">
  1116. \t\t<div class=\"wait-chargement-content-module-article\" style=\"text-align: center;\">
  1117. \t\t\tPatientez un moment pendant le chargement de l'article</br>
  1118. \t\t\t<img src=\"";
  1119.         // line 896
  1120.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/images/loader1.gif"), "html", null, true);
  1121.         echo "\" alt=\"image\" style=\"height: 40px; width: 40px;\">
  1122. \t\t</div>
  1124. \t\t<div class=\"content-module-loading-article\" style=\"display: none;\">
  1125. \t\t
  1126. \t\t</div>
  1127. \t  </div>
  1128. \t</div>
  1129. </div>
  1130. <div class=\"modal-footer color-top\" style=\"text-align: right; border-top: 4px solid #37c0fb; display: block;\">
  1131. ";
  1132.         // line 906
  1133.         $this->loadTemplate("Theme/General/Template/Menu/social.html.twig", "Theme/Produit/Service/Service/supportscenter.html.twig", 906)->display($context);
  1134.         // line 907
  1135.         echo "</div>
  1136. </div>
  1137. </div>
  1138. </div>
  1140. ";
  1141.         
  1142.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  1144.         
  1145.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  1147.     }
  1149.     // line 914
  1150.     public function block_srcjavascripttemplate($context, array $blocks = [])
  1151.     {
  1152.         $macros = $this->macros;
  1153.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1154.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "srcjavascripttemplate"));
  1156.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1157.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "srcjavascripttemplate"));
  1159.         // line 915
  1160.         echo "
  1161. ";
  1162.         
  1163.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  1165.         
  1166.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  1168.     }
  1170.     // line 918
  1171.     public function block_javascripttemplate($context, array $blocks = [])
  1172.     {
  1173.         $macros = $this->macros;
  1174.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1175.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripttemplate"));
  1177.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1178.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripttemplate"));
  1180.         // line 919
  1181.         echo "
  1182. ";
  1183.         // line 920
  1184.         $context['_parent'] = $context;
  1185.         $context['_seq'] = twig_ensure_traversable(twig_get_attribute($this->env, $this->source, twig_get_attribute($this->env, $this->source, twig_get_attribute($this->env, $this->source, (isset($context["app"]) || array_key_exists("app", $context) ? $context["app"] : (function () { throw new RuntimeError('Variable "app" does not exist.', 920, $this->source); })()), "session", [], "any", false, false, false, 920), "flashbag", [], "any", false, false, false, 920), "get", [0 => "information"], "method", false, false, false, 920));
  1186.         $context['loop'] = [
  1187.           'parent' => $context['_parent'],
  1188.           'index0' => 0,
  1189.           'index'  => 1,
  1190.           'first'  => true,
  1191.         ];
  1192.         if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  1193.             $length = count($context['_seq']);
  1194.             $context['loop']['revindex0'] = $length - 1;
  1195.             $context['loop']['revindex'] = $length;
  1196.             $context['loop']['length'] = $length;
  1197.             $context['loop']['last'] = 1 === $length;
  1198.         }
  1199.         foreach ($context['_seq'] as $context["_key"] => $context["infos"]) {
  1200.             // line 921
  1201.             if (twig_get_attribute($this->env, $this->source, $context["loop"], "first", [], "any", false, false, false, 921)) {
  1202.                 // line 922
  1203.                 echo "\tresetNotif();
  1204. \talertify.alert(\"";
  1205.                 // line 923
  1206.                 echo twig_escape_filter($this->env, $context["infos"], "html", null, true);
  1207.                 echo "\");
  1208. ";
  1209.             }
  1210.             ++$context['loop']['index0'];
  1211.             ++$context['loop']['index'];
  1212.             $context['loop']['first'] = false;
  1213.             if (isset($context['loop']['length'])) {
  1214.                 --$context['loop']['revindex0'];
  1215.                 --$context['loop']['revindex'];
  1216.                 $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  1217.             }
  1218.         }
  1219.         $_parent = $context['_parent'];
  1220.         unset($context['_seq'], $context['_iterated'], $context['_key'], $context['infos'], $context['_parent'], $context['loop']);
  1221.         $context = array_intersect_key($context, $_parent) + $_parent;
  1222.         // line 926
  1223.         echo "
  1224. \$('a').tooltip();
  1226. \$('.div-tab-mod').hide();
  1227. \$('.div-tab-mod:first').show();
  1228. \$('.tabs-nav li:first').addClass('tab-active');
  1230. // Change tab class and display content
  1231. \$('.tabs-nav a').on('click', function(event){
  1232.   event.preventDefault();
  1233.   \$('.tabs-nav li').removeClass('tab-active');
  1234.   \$(this).parent().addClass('tab-active');
  1235.   \$('.div-tab-mod').hide();
  1236.   \$(\$(this).attr('href')).show();
  1237. });
  1239. \$(\".open\").click(function(){
  1240.   var container = \$(this).parents(\".topic\");
  1241.   var answer = container.find(\".answer\");
  1242.   var trigger = container.find(\".faq-t\");
  1243.   
  1244.   answer.slideToggle(200);
  1245.   
  1246.   if (trigger.hasClass(\"faq-o\")) {
  1247.     trigger.removeClass(\"faq-o\");
  1248.   }
  1249.   else {
  1250.     trigger.addClass(\"faq-o\");
  1251.   }
  1252.   
  1253.   if (container.hasClass(\"expanded\")) {
  1254.     container.removeClass(\"expanded\");
  1255.   }
  1256.   else {
  1257.     container.addClass(\"expanded\");
  1258.   }
  1259. });
  1261. \$('.item-app').hover(function(){
  1262.   \$(this).find('.popover').stop(true, true).delay(200).fadeIn(200);
  1263.   }, function(){
  1264.   \$(this).find('.popover').stop(true, true).delay(200).fadeOut(200);
  1265. });  
  1267. \$('.open-content-article-reponse').click(function(){
  1268. \tvar id = \$(this).attr('value');
  1269. \topenarticlesupport(id);
  1270. });\t
  1272. function openarticlesupport(id)
  1273. {
  1274. \t\$('#modalArticlesDetail').modal('show');
  1275. \t\$('.wait-chargement-content-module-article').show();
  1276. \t\$('.content-module-loading-article').hide();
  1277. \t\$('.custom-title-modal').html('<img src=\"";
  1278.         // line 980
  1279.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/images/diplome.jpg"), "html", null, true);
  1280.         echo "\" alt=\"image\" style=\"height: 40px; width: 40px;\"/> ";
  1281.         echo twig_escape_filter($this->env, (isset($context["position"]) || array_key_exists("position", $context) ? $context["position"] : (function () { throw new RuntimeError('Variable "position" does not exist.', 980, $this->source); })()), "html", null, true);
  1282.         echo " <span class=\"fa fa-gg\" style=\"font-size: 20px;\"></span> Article <span class=\" fa fa-gg\" style=\"font-size: 20px;\"></span> '+id*87);
  1283. \t\$.post('";
  1284.         // line 981
  1285.         echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("produit_service_detail_article_support");
  1286.         echo "',{ id: id }, function(data){
  1287. \t\t\$('.wait-chargement-content-module-article').hide();
  1288. \t\t\$('.content-module-loading-article').show();
  1289. \t\t\$('.content-module-loading-article').html(data);
  1290. \t});
  1291. }
  1292. ";
  1293.         // line 987
  1294.         if ((1 === twig_compare((isset($context["id"]) || array_key_exists("id", $context) ? $context["id"] : (function () { throw new RuntimeError('Variable "id" does not exist.', 987, $this->source); })()), 0))) {
  1295.             // line 988
  1296.             echo "\topenarticlesupport(";
  1297.             echo twig_escape_filter($this->env, (isset($context["id"]) || array_key_exists("id", $context) ? $context["id"] : (function () { throw new RuntimeError('Variable "id" does not exist.', 988, $this->source); })()), "html", null, true);
  1298.             echo ");
  1299. ";
  1300.         }
  1301.         
  1302.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  1304.         
  1305.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  1307.     }
  1309.     public function getTemplateName()
  1310.     {
  1311.         return "Theme/Produit/Service/Service/supportscenter.html.twig";
  1312.     }
  1314.     public function isTraitable()
  1315.     {
  1316.         return false;
  1317.     }
  1319.     public function getDebugInfo()
  1320.     {
  1321.         return array (  1296 => 988,  1294 => 987,  1285 => 981,  1279 => 980,  1223 => 926,  1206 => 923,  1203 => 922,  1201 => 921,  1184 => 920,  1181 => 919,  1171 => 918,  1160 => 915,  1150 => 914,  1135 => 907,  1133 => 906,  1120 => 896,  1108 => 889,  1095 => 879,  1090 => 876,  1088 => 875,  1085 => 874,  1081 => 872,  1078 => 871,  1075 => 870,  1072 => 869,  1069 => 868,  1066 => 867,  1063 => 866,  1057 => 863,  1054 => 862,  1048 => 860,  1045 => 859,  1039 => 857,  1036 => 856,  1030 => 854,  1027 => 853,  1021 => 851,  1018 => 850,  1012 => 848,  1009 => 847,  1003 => 845,  1000 => 844,  994 => 842,  991 => 841,  985 => 839,  982 => 838,  976 => 836,  974 => 835,  968 => 831,  958 => 830,  135 => 16,  125 => 15,  111 => 12,  101 => 11,  85 => 6,  78 => 4,  73 => 3,  63 => 2,  40 => 1,);
  1322.     }
  1324.     public function getSourceContext()
  1325.     {
  1326.         return new Source("{% extends \"Theme/Users/User/layoutoffert.html.twig\" %}
  1327. {% block meta %}
  1328. \t{{ parent() }}
  1329. \t<meta name=\"keywords\" content=\"{{ site }}, {{ keywords }}\"/>
  1330. \t<meta name=\"author\" content=\"Noel Kenfack\"/>
  1331. \t<meta name=\"description\" content=\"{{ metier }}, {{ site }}\"/>
  1333. \t
  1334. {% endblock %}
  1336. {% block title %}
  1337. {{ parent() }} {{ site }}
  1338. {% endblock %}
  1340. {% block stylesheets %}
  1341. {{ parent() }}
  1343. <style>
  1344. \t/*  */
  1345. .small-text {color:#2c2b0c;}
  1346. .heading{color:#000; font-size:39px; font-weight:700;}
  1347. .work-process-section { width: 100%; display: block; padding: 90px 0px 100px; background: #f7f6e2 ; background-size: cover; background-position: center; }
  1348. .work-process-section .heading-block { width: 100%; display: block; max-width: 600px; margin: 0px auto 60px; text-align: center; }
  1349. .work-process-section .heading-block .description { font-size: 16px; color: #666666; margin-bottom: 0px; }
  1350. .work-process-block { max-width: 1600px; width: 100%; margin: 0px auto; /* height: 450px; */ }
  1352. .work-process-layout1 .work-process-top .number { display:inline-block; width:80px; height:80px; text-align:center; border:5px solid; font-size:26px; font-weight:700; line-height:73px; margin-left:40px; margin-bottom:25px; background-color: #b9b533 !important; border-radius: 50%; position: relative; -webkit-transition: all ease 0.4s; transition: all ease 0.4s; }
  1353. .work-process-layout1 .work-process-top { text-align:center; position:relative }
  1354. .work-process-layout1 .work-process-top .shape { -webkit-transition: all ease 0.4s; transition: all ease 0.4s;  display:inline-block; position:absolute; left:25px; top:63px; width:100%; height:270px; max-width:270px; -webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 29% 100%); clip-path:polygon(0 0, 100% 0, 100% 100%, 29% 100%); border-radius:10px; z-index:0; -webkit-transform:rotate(-5deg); -ms-transform:rotate(-5deg); transform:rotate(-5deg); background-color: #b9b533; }
  1356. .work-process-layout1 .vs-work-process-2 .shape { background: #99962a !important; }
  1357. .work-process-layout1 .vs-work-process-2 .number{ background: #99962a !important; }
  1358. .work-process-layout1 .vs-work-process-2  .work-process-content { border-color: #99962a !important; }
  1360. /* .work-process-layout1 .vs-work-process-3 .shape { background: #008dc4  !important; }
  1361. .work-process-layout1 .vs-work-process-3 .number{ background: #008dc4  !important; }
  1362. .work-process-layout1 .vs-work-process-3 .work-process-content { border-color: #008dc4  !important; }
  1363. */
  1364. .work-process-layout1 .vs-work-process-4 .shape { background: #90acd1  !important; }
  1365. .work-process-layout1 .vs-work-process-4 .number{ background: #90acd1  !important; }
  1366. .work-process-layout1 .vs-work-process-4 .work-process-content { border-color: #90acd1 !important; }
  1368. .work-process-layout1 .work-process-content { -webkit-transition: all ease 0.4s; transition: all ease 0.4s;  border-radius:10px; box-shadow:0px 3px 0px 0px rgba(17,180,245,0.004),0px 3px 50px 0px rgba(17,180,245,0.1); background-color:rgba(255,255,255,0.969); padding:35px 20px; padding-bottom:30px; max-width:270px; border-bottom:3px solid #b9b533; position: relative;}
  1369. .work-process-layout1 .work-process-content.odd-block { border-color: #d9d675; }
  1370. .work-process-layout1 .work-process-content .icon { width: 45px; height: 45px; margin: 0px auto 20px; }
  1371. .work-process-layout1 .work-process-content .icon img{ width: 100%; height: 100%; }
  1372. .work-process-layout1 .work-process-content .process-title { color: #1d165c; font-size: 20px; line-height: 30px; transition: all 500ms ease; font-weight:600;  margin-bottom: 12px;  }
  1373. .work-process-layout1 .work-process-content .text {  position: relative; font-size: 14px; line-height: 24px; color: #666666; transition: all 500ms ease; margin-bottom: 0px;  }
  1374. .work-process-layout1 .vs-work-process:hover .work-process-top .shape {-webkit-transform:rotate(0); -ms-transform:rotate(0); transform:rotate(0); -webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%)}
  1375. .work-process-layout1 .vs-work-process:hover .work-process-top .number { margin-bottom:0px;  margin-left:0% }
  1378. /*================= Beging Article =================*/
  1379. .card {
  1380.     display: flex;
  1381.     margin-bottom: 30px;
  1382.     width: 100%;
  1383.   }
  1384.   .card .card-icon-top {
  1385.     font-size: 4.5rem;
  1386.     margin-top: 3rem;
  1387.   }
  1388.   .card .card-tags {
  1389.     color: #097d6c;
  1390.     display: inline-block;
  1391.     font-weight: 700;
  1392.     margin-bottom: 1rem;
  1393.   }
  1394.   .card .card-tags:before {
  1395.     content: \"\";
  1396.     background-color: #097d6c;
  1397.     width: 0.75em;
  1398.     height: 0.75em;
  1399.     border-radius: 100%;
  1400.     display: inline-block;
  1401.     margin-right: 0.5rem;
  1402.   }
  1403.   .card .card-date {
  1404.     display: inline-block;
  1405.     padding-bottom: 1rem;
  1406.   }
  1407.   .card .card-title {
  1408.     color: #212529;
  1409.     display: block;
  1410.     font-weight: 700;
  1411.     font-size: 1.5rem;
  1412.     line-height: 1.33333;
  1413.     margin-bottom: 1rem;
  1414.   }
  1415.   .card .card-title:last-child {
  1416.     margin-bottom: 0;
  1417.   }
  1418.   .card .card-label {
  1419.     color: #212529;
  1420.     display: block;
  1421.     font-size: 1.5rem;
  1422.     line-height: 1.33333;
  1423.     font-weight: 700;
  1424.   }
  1425.   .card .card-body {
  1426.     padding: 2rem 2rem 2rem 2rem;
  1427.     align-self: center;
  1428.     width: 100%;
  1429.   }
  1430.   .card .card-body .popover-wrapper.right {
  1431.     position: absolute;
  1432.     right: 0;
  1433.   }
  1434.   .card .card-metadata {
  1435.     min-width: 10rem;
  1436.   }
  1437.   .card .card-footer {
  1438.     border-top: none;
  1439.     padding: 0 2rem 2rem 2rem;
  1440.     background-color: inherit;
  1441.     display: flex;
  1442.     align-items: center;
  1443.   }
  1444.   .card .card-footer .vfi {
  1445.     color: #097d6c;
  1446.     font-size: 2.5rem;
  1447.     padding-left: 0.5rem;
  1448.   }
  1449.   .card .vfi {
  1450.     color: #097d6c;
  1451.   }
  1452.   .card > a {
  1453.     border-bottom: none;
  1454.     color: #637381;
  1455.     display: flex;
  1456.     flex-direction: column;
  1457.     height: 100%;
  1458.   }
  1459.   .card > a:hover,
  1460.   .card > a:active {
  1461.     color: #fff;
  1462.     background: #097d6c;
  1463.     text-decoration: none;
  1464.   }
  1465.   .card > a:hover .card-title,
  1466.   .card > a:hover .card-icon-top,
  1467.   .card > a:hover .card-footer .vfi,
  1468.   .card > a:hover .card-tags,
  1469.   .card > a:active .card-title,
  1470.   .card > a:active .card-icon-top,
  1471.   .card > a:active .card-footer .vfi,
  1472.   .card > a:active .card-tags {
  1473.     color: #fff;
  1474.   }
  1475.   .card > a:hover .text-muted,
  1476.   .card > a:active .text-muted {
  1477.     color: #fff !important;
  1478.   }
  1479.   .card > a:hover .card-tags:before,
  1480.   .card > a:active .card-tags:before {
  1481.     background-color: #fff;
  1482.   }
  1483.   .card2 {
  1484.     -webkit-transition: all 100ms ease-in-out;
  1485.     transition: all 100ms ease-in-out;
  1486.     border: none;
  1487.     -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);
  1488.     box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);
  1489.   }
  1490.   .card2:hover {
  1491.     transform: scale(1.04);
  1492.     border: none;
  1493.   }
  1494.   .card2 > a:hover,
  1495.   .card2 > a:active {
  1496.     color: inherit;
  1497.     background: #fff;
  1498.     text-decoration: none;
  1499.   }
  1500.   .card2 > a:hover .card-icon-top,
  1501.   .card2 > a:hover .card-footer .vfi,
  1502.   .card2 > a:hover .card-tags,
  1503.   .card2 > a:active .card-icon-top,
  1504.   .card2 > a:active .card-footer .vfi,
  1505.   .card2 > a:active .card-tags {
  1506.     color: inherit;
  1507.   }
  1508.   .card2 > a:hover .card-title,
  1509.   .card2 > a:active .card-title {
  1510.     color: #097d6c;
  1511.   }
  1512.   .card2 > a:hover .text-muted,
  1513.   .card2 > a:active .text-muted {
  1514.     color: #fff !important;
  1515.   }
  1516.   .card2 > a:hover .card-tags:before,
  1517.   .card2 > a:active .card-tags:before {
  1518.     background-color: #fff;
  1519.   }
  1520.   .card3 {
  1521.     -webkit-transition: all 200ms ease-in-out;
  1522.     transition: all 200ms ease-in-out;
  1523.   }
  1524.   .card3:hover {
  1525.     border: 1px solid #0cb097;
  1526.   }
  1527.   .card3 > a:hover,
  1528.   .card3 > a:active {
  1529.     color: inherit;
  1530.     background: #fff;
  1531.     text-decoration: none;
  1532.   }
  1533.   .card3 > a:hover .card-icon-top,
  1534.   .card3 > a:hover .card-footer .vfi,
  1535.   .card3 > a:hover .card-tags,
  1536.   .card3 > a:active .card-icon-top,
  1537.   .card3 > a:active .card-footer .vfi,
  1538.   .card3 > a:active .card-tags {
  1539.     color: inherit;
  1540.   }
  1541.   .card3 > a:hover .card-title,
  1542.   .card3 > a:active .card-title {
  1543.     color: #212529;
  1544.   }
  1545.   .card3 > a .card-icon-top,
  1546.   .card3 > a .card-icon-top {
  1547.     -webkit-transition: all 200ms ease-in-out;
  1548.     transition: all 200ms ease-in-out;
  1549.   }
  1550.   .card3 > a:hover .card-icon-top,
  1551.   .card3 > a:active .card-icon-top {
  1552.     transform: scale(1.4);
  1553.   }
  1554.   .card3 > a:hover .text-muted,
  1555.   .card3 > a:active .text-muted {
  1556.     color: #fff !important;
  1557.   }
  1558.   .card3 > a:hover .card-tags:before,
  1559.   .card3 > a:active .card-tags:before {
  1560.     background-color: #fff;
  1561.   }
  1562.   .card4 {
  1563.     -webkit-transition: all 200ms ease-in-out;
  1564.     transition: all 200ms ease-in-out;
  1565.     border: 0;
  1566.     -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);
  1567.     box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);
  1568.   }
  1569.   .card4 > a:hover,
  1570.   .card4 > a:active {
  1571.     background: #ffffff;
  1572.     color: inherit;
  1573.     text-decoration: none;
  1574.     cursor: url(https://dl.dropbox.com/s/2nmb5ja0g888q8n/arrow.png) 0 0, auto;
  1575.   }
  1576.   .card4 > a:hover:before,
  1577.   .card4 > a:active:before {
  1578.     content: \"\";
  1579.     display: block;
  1580.     width: 100%;
  1581.     height: 100%;
  1582.     background: rgba(0, 0, 0, 0.3);
  1583.     position: absolute;
  1584.   }
  1586.   .card4 > a:hover .card-icon-top,
  1587.   .card4 > a:hover .card-footer .vfi,
  1588.   .card4 > a:hover .card-tags,
  1589.   .card4 > a:active .card-icon-top,
  1590.   .card4 > a:active .card-footer .vfi,
  1591.   .card4 > a:active .card-tags {
  1592.     color: inherit;
  1593.   }
  1594.   .card4 > a:hover .card-title,
  1595.   .card4 > a:active .card-title {
  1596.     color: #212529;
  1597.   }
  1598.   .card4 > a .card-icon-top,
  1599.   .card4 > a .card-icon-top {
  1600.     -webkit-transition: all 200ms ease-in-out;
  1601.     transition: all 200ms ease-in-out;
  1602.   }
  1603.   .card4 > a:hover .text-muted,
  1604.   .card4 > a:active .text-muted {
  1605.     color: #fff !important;
  1606.   }
  1607.   .card4 > a:hover .card-tags:before,
  1608.   .card4 > a:active .card-tags:before {
  1609.     background-color: #fff;
  1610.   }
  1611.   .card.card-row-layout .card-body {
  1612.     text-align: left;
  1613.   }
  1615.   @media (min-width: 500px) {
  1616.     .gradien-color-height{
  1617.       height: 180px!important;
  1618.     }
  1619.   }
  1620.   @media (max-width: 500px) {
  1621.     .gradien-color-height{
  1622.       height: 260px!important;
  1623.     }
  1624.   }
  1625.   @media screen and (max-width: 450px){
  1626.   #page, #masthead, #content {
  1627.       width: 100%!important;;
  1628.       overflow: visible!important;;
  1629.   }
  1630.   }
  1632.   @media (min-width: 992px) {
  1633.     .card.card-row-layout {
  1634.       flex-direction: row;
  1635.       align-items: center;
  1636.     }
  1637.     .card.card-row-layout .card-icon-top {
  1638.       margin-top: 0;
  1639.       margin-left: 2rem;
  1640.     }
  1641.     .card.card-row-layout .card-icon-top.card-icon-right {
  1642.       order: 100;
  1643.       margin-right: 2rem;
  1644.     }
  1645.     .card.card-row-layout .card-body {
  1646.       text-align: left;
  1647.     }
  1648.     .card.card-row-layout .card-footer {
  1649.       padding: 2rem;
  1650.     }
  1651.     .card.card-row-layout .card-footer .vfi {
  1652.       font-size: 3.6rem;
  1653.     }
  1654.     .card.card-row-layout > a {
  1655.       flex-direction: row;
  1656.       align-items: center;
  1657.       width: 100%;
  1658.     }
  1659.   }
  1660.   .card.card-large .card-title,
  1661.   .card.card-featured .card-title {
  1662.     color: #212529;
  1663.     display: block;
  1664.     font-weight: 700;
  1665.     font-size: 1.5rem;
  1666.     line-height: 1.33333;
  1667.   }
  1668.   .card.card-large .card-body,
  1669.   .card.card-featured .card-body {
  1670.     text-align: left;
  1671.   }
  1672.   @media (min-width: 992px) {
  1673.     .card.card-fw .card-img-top {
  1674.       margin-left: 1rem;
  1675.       max-width: 300px;
  1676.       order: 100;
  1677.     }
  1678.   }
  1679.   .card.card-large.card-row-layout .card-body {
  1680.     text-align: center;
  1681.   }
  1682.   @media (min-width: 992px) {
  1683.     .card.card-large.card-row-layout .card-body {
  1684.       text-align: left;
  1685.     }
  1686.   }
  1687.   @media (min-width: 992px) {
  1688.     .card.card-large.card-fw .card-img-top {
  1689.       margin-left: 1rem;
  1690.       max-width: 400px;
  1691.       order: 100;
  1692.     }
  1693.     .card.card-large.card-fw .vfi {
  1694.       color: #fff;
  1695.     }
  1696.   }
  1697.   @media (min-width: 1200px) {
  1698.     .card.card-large.card-fw .card-img-top {
  1699.       max-width: 500px;
  1700.     }
  1701.   }
  1702.   .card.card-featured .card-body .text-muted {
  1703.     display: inline-block;
  1704.     margin-bottom: 1.5rem;
  1705.   }
  1706.   .card.card-featured .card-body .card-footer {
  1707.     padding: 0;
  1708.   }
  1709.   @media (min-width: 992px) {
  1710.     .card.card-featured .card-img-top {
  1711.       flex: 0 0 50%;
  1712.       max-width: 50%;
  1713.       margin: 0;
  1714.       align-self: start;
  1715.     }
  1716.     .card.card-featured .card-body {
  1717.       display: flex;
  1718.       flex-flow: column nowrap;
  1719.       height: 100%;
  1720.     }
  1721.     .card.card-featured .card-body .card-footer {
  1722.       margin-top: auto;
  1723.     }
  1724.   }
  1725.   .card.card-label-content .card-title {
  1726.     font-weight: 700;
  1727.   }
  1728.   .card.card-label-content .card-label {
  1729.     font-size: 1rem;
  1730.   }
  1731.   .card .rounded-circle {
  1732.     margin: 2rem auto 1rem auto;
  1733.     width: 61.5%;
  1734.   }
  1735.   .card[data-toggle=\"modal\"] {
  1736.     cursor: pointer;
  1737.   }
  1738.   .cards > div,
  1739.   .cards .card-item {
  1740.     display: flex;
  1741.   }
  1742.   .cards .card.bg-gray-sky {
  1743.     border: none;
  1744.   }
  1745.   .cards.bg-gray-sky {
  1746.     background-color: transparent;
  1747.   }
  1748.   .cards.bg-gray-sky .card {
  1749.     background-color: #f4f6f8;
  1750.     border: none;
  1751.   }
  1752.   .cards.bg-gray-sky .card .vfi {
  1753.     color: #097d6c;
  1754.   }
  1755.   .cards.bg-gray-sky .card a:hover .vfi {
  1756.     color: #fff;
  1757.   }
  1758.   .cards.cards-bs-grid {
  1759.     display: flex;
  1760.     flex-wrap: wrap;
  1761.     margin-right: -15px;
  1762.     margin-left: -15px;
  1763.   }
  1764.   .cards.cards-bs-grid .card-item {
  1765.     position: relative;
  1766.     width: 100%;
  1767.     min-height: 1px;
  1768.     padding-right: 15px;
  1769.     padding-left: 15px;
  1770.     flex: 0 0 100%;
  1771.     max-width: 100%;
  1772.   }
  1773.   @media (min-width: 768px) {
  1774.     .cards.cards-bs-grid .card-item {
  1775.       flex: 0 0 50%;
  1776.       max-width: 50%;
  1777.     }
  1778.   }
  1779.   @media (min-width: 992px) {
  1780.     .cards.cards-bs-grid .card-item {
  1781.       flex: 0 0 33.33333%;
  1782.       max-width: 33.33333%;
  1783.     }
  1784.   }
  1787. /* ============Start Article ========*/
  1788. .banner {
  1789.   display: block;
  1790.   text-decoration: none;
  1791.   color: inherit;
  1792.   overflow: hidden;
  1793.   background-color: hsl(0, 0%, 100%);
  1794.   box-shadow: 0 0 0 1px hsla(230, 13%, 9%, 0.05),
  1795.     0 0.3px 0.4px hsla(230, 13%, 9%, 0.02),
  1796.     0 0.9px 1.5px hsla(230, 13%, 9%, 0.045),
  1797.     0 3.5px 6px hsla(230, 13%, 9%, 0.09);
  1798.   border-radius: 0.375em;
  1799.   transition: 0.3s;
  1800.   width: 100%;
  1801.   margin-inline: auto;
  1802. }
  1804. .banner__grid {
  1805.   display: flex;
  1806.   flex-direction: column;
  1807. }
  1809. .banner__grid > * {
  1810.   min-width: 0;
  1811. }
  1813. .banner__link {
  1814.   position: relative;
  1815.   text-decoration: none;
  1816.   color: hsl(250, 84%, 54%);
  1817.   display: inline-block;
  1818.   transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  1819.   transform-origin: left bottom;
  1820. }
  1822. .banner__link i {
  1823.   /* label */
  1824.   position: relative;
  1825.   z-index: 2;
  1826.   display: inline-block;
  1827.   transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  1828. }
  1830. .banner__link::after {
  1831.   /* animated border */
  1832.   content: \"\";
  1833.   background-color: currentColor;
  1834.   height: 2px;
  1835.   width: 100%;
  1836.   position: absolute;
  1837.   z-index: 1;
  1838.   bottom: 0;
  1839.   left: 0;
  1840.   -webkit-clip-path: inset(0% round 0.1875em);
  1841.   clip-path: inset(0% round 0.1875em);
  1842.   opacity: 0.15;
  1843.   transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  1844. }
  1846. .banner__figure {
  1847.   height: 0;
  1848.   width: 100%;
  1849.   padding-bottom: 50%;
  1850.   transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  1851.   background-position: center center;
  1852.   background-repeat: no-repeat;
  1853.   background-size: cover;
  1854. }
  1856. .banner__text {
  1857.   padding: 1.5rem;
  1858. }
  1860. .banner__link-wrapper {
  1861.   margin-top: 1rem;
  1862. }
  1864. .banner:hover {
  1865.   box-shadow: 0 0 0 1px hsla(230, 13%, 9%, 0.05),
  1866.     0 0.9px 1.25px hsla(230, 13%, 9%, 0.025), 0 3px 5px hsla(230, 13%, 9%, 0.05),
  1867.     0 12px 20px hsla(230, 13%, 9%, 0.09);
  1868. }
  1870. .banner:hover .banner__link {
  1871.   transform: scale(1.3);
  1872. }
  1874. .banner:hover .banner__link i {
  1875.   transform: scale(0.7);
  1876. }
  1878. .banner:hover .banner__link::after {
  1879.   height: 100%;
  1880. }
  1882. .banner:hover .banner__figure {
  1883.   transform: scale(1.05);
  1884. }
  1886. @media (min-width: 64rem) {
  1887.   .banner__grid {
  1888.     flex-direction: row-reverse;
  1889.   }
  1891.   .banner__grid > * {
  1892.     width: 50%;
  1893.   }
  1895.   .banner__figure {
  1896.     height: 100%;
  1897.     padding-bottom: 0;
  1898.     -webkit-clip-path: polygon(100px 0%, 100% 0%, 100% 100%, 50px 100%);
  1899.     clip-path: polygon(100px 0%, 100% 0%, 100% 100%, 50px 100%);
  1900.   }
  1902.   .banner__text {
  1903.     padding: 3rem;
  1904.   }
  1906.   .banner__link-wrapper {
  1907.     margin-top: 1.5rem;
  1908.   }
  1910.   .banner--invert .banner__grid {
  1911.     flex-direction: row;
  1912.   }
  1914.   .banner--invert .banner__figure {
  1915.     -webkit-clip-path: polygon(
  1916.       0% 0%,
  1917.       calc(100% - 100px) 0%,
  1918.       calc(100% - 50px) 100%,
  1919.       0% 100%
  1920.     );
  1921.     clip-path: polygon(
  1922.       0% 0%,
  1923.       calc(100% - 100px) 0%,
  1924.       calc(100% - 50px) 100%,
  1925.       0% 100%
  1926.     );
  1927.   }
  1929.   .banner--invert .banner__text {
  1930.     text-align: right;
  1931.   }
  1933.   .banner--invert .banner__link {
  1934.     transform-origin: right bottom;
  1935.   }
  1937.   .banner:hover .banner__figure {
  1938.     -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  1939.     clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  1940.   }
  1941. }
  1943. /* ------------------------ Watermark (Please Ignore) ----------------------- */
  1944. .watermark-ctr {
  1945.   --clr-button-bg: #141414;
  1946.   --clr-button: 72, 39, 236;
  1947.   --clr-text: #ffffff;
  1949.   position: fixed;
  1950.   bottom: 1.5rem;
  1951.   right: 1.5rem;
  1952.   z-index: 1000;
  1953. }
  1954. .watermark-ctr a {
  1955.   text-decoration: none;
  1956.   color: inherit;
  1957.   display: flex;
  1958. }
  1959. .generate-button {
  1960.   --generate-button-star-1-opacity: 0.25;
  1961.   --generate-button-star-1-scale: 1;
  1962.   --generate-button-star-2-opacity: 1;
  1963.   --generate-button-star-2-scale: 1;
  1964.   --generate-button-star-3-opacity: 0.5;
  1965.   --generate-button-star-3-scale: 1;
  1966.   --generate-button-dots-opacity: 0;
  1967.   appearance: none;
  1968.   outline: none;
  1969.   border: none;
  1970.   padding: 14px 24px 14px 20px;
  1971.   border-radius: 29px;
  1972.   margin: 0;
  1973.   background-color: var(--clr-button-bg);
  1974.   color: var(--clr-text);
  1975.   display: flex;
  1976.   align-items: center;
  1977.   justify-content: center;
  1978.   position: relative;
  1979.   cursor: pointer;
  1980.   -webkit-tap-highlight-color: transparent;
  1981.   z-index: 1;
  1982.   transform: scale(var(--generate-button-scale, 1)) translateZ(0);
  1983.   box-shadow: 0px 0px 120px var(--generate-button-shadow-wide, transparent),
  1984.     0px 4px 12px rgba(0, 0, 0, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.1),
  1985.     inset 0px 1px 1px
  1986.       var(--generate-button-shadow-inset, rgba(255, 255, 255, 0.04)),
  1987.     0 0 0 var(--generate-button-shadow-outline, 0px)
  1988.       rgba(var(--clr-button), 0.4);
  1989.   transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s, color 0.3s;
  1990. }
  1991. .generate-button:before {
  1992.   content: \"\";
  1993.   display: block;
  1994.   position: absolute;
  1995.   right: 20%;
  1996.   height: 20px;
  1997.   left: 20%;
  1998.   bottom: -10px;
  1999.   background: rgba(204, 204, 204, 0.4);
  2000.   filter: blur(12.5px);
  2001.   z-index: 2;
  2002.   clip-path: inset(-200% -30% 10px -30% round 29px);
  2003.   opacity: 0;
  2004.   transition: opacity 0.4s;
  2005.   transform: translateZ(0);
  2006. }
  2007. .generate-button span {
  2008.   position: relative;
  2009.   z-index: 1;
  2010.   font-family: \"Poppins\", Arial;
  2011.   font-weight: 600;
  2012.   font-size: 16px;
  2013.   letter-spacing: 0.005em;
  2014.   display: block;
  2015.   user-select: none;
  2016. }
  2017. .generate-button .stroke {
  2018.   mix-blend-mode: hard-light;
  2019. }
  2020. .generate-button .stroke svg {
  2021.   position: absolute;
  2022.   inset: 0;
  2023.   width: 100%;
  2024.   height: 100%;
  2025.   fill: none;
  2026.   stroke-width: 0.75px;
  2027.   stroke: #e2d9ff;
  2028.   stroke-dasharray: 1.5 14;
  2029.   stroke-dashoffset: 22;
  2030.   opacity: 0;
  2031. }
  2032. .generate-button .stroke svg:nth-child(2) {
  2033.   stroke-width: 1px;
  2034.   stroke-opacity: 0.5;
  2035.   filter: blur(3px);
  2036. }
  2038. .generate-button svg.icon {
  2039.   width: 18px;
  2040.   height: 20px;
  2041.   margin-right: 10px;
  2042.   fill: currentColor;
  2043. }
  2044. .generate-button svg.icon path:nth-child(1) {
  2045.   opacity: var(--generate-button-star-1-opacity);
  2046.   transform: scale(var(--generate-button-star-1-scale)) translateZ(0);
  2047.   transform-origin: 25% 14.58%;
  2048. }
  2049. .generate-button svg.icon path:nth-child(2) {
  2050.   opacity: var(--generate-button-star-2-opacity);
  2051.   transform: scale(var(--generate-button-star-2-scale)) translateZ(0);
  2052.   transform-origin: 60.42% 50%;
  2053. }
  2054. .generate-button svg.icon path:nth-child(3) {
  2055.   opacity: var(--generate-button-star-3-opacity);
  2056.   transform: scale(var(--generate-button-star-3-scale)) translateZ(0);
  2057.   transform-origin: 25% 85.42%;
  2058. }
  2059. .generate-button:hover {
  2060.   --generate-button-scale: 1.01;
  2061.   --generate-button-shadow-wide: rgba(var(--clr-button), 0.4);
  2062.   --generate-button-shadow-inset: rgba(255, 255, 255, 0.35);
  2063.   --generate-button-shadow-outline: 3px;
  2064.   color: var(--clr-text);
  2065.   background-color: rgba(var(--clr-button));
  2066. }
  2067. .generate-button:hover .stroke svg {
  2068.   animation: stroke 2s linear infinite;
  2069. }
  2070. .generate-button:hover:before {
  2071.   opacity: 1;
  2072. }
  2073. .generate-button:hover span:before {
  2074.   opacity: 0;
  2075. }
  2076. .generate-button:hover:active {
  2077.   --generate-button-scale: 1.05;
  2078. }
  2079. @keyframes stroke {
  2080.   0% {
  2081.     opacity: 0;
  2082.   }
  2083.   25%,
  2084.   75% {
  2085.     opacity: 1;
  2086.   }
  2087.   95%,
  2088.   100% {
  2089.     stroke-dashoffset: 6;
  2090.     opacity: 0;
  2091.   }
  2092. }
  2097. .pagination {
  2098.     font-weight: bold;
  2099.     font-size: 16px;
  2100.     font-family: \"helvetica neue\", helvetica, arial, sans-serif;
  2101.   }
  2102.   .pagination a {
  2103.     padding: 3px;
  2104.     border: 1px solid #262626;
  2105.     border-radius: 3px;
  2106.     margin: 3px;
  2107.     background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e3e3e3), color-stop(100%, #b8b8b8));
  2108.     background: -moz-linear-gradient(top, #e3e3e3, #b8b8b8);
  2109.     background: -webkit-linear-gradient(top, #e3e3e3, #b8b8b8);
  2110.     background: linear-gradient(to bottom, #e3e3e3, #b8b8b8);
  2111.     box-shadow: 0 0 6px rgba(0, 0, 0, 0.6), inset 0 1px rgba(255, 255, 255, 0.4);
  2112.     color: #333;
  2113.     text-decoration: none;
  2114.     text-shadow: 0 1px 1px rgba(255, 255, 255, 0.72);
  2115.   }
  2116.   .pagination a:hover {
  2117.     background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d90073), color-stop(100%, #a00056));
  2118.     background: -moz-linear-gradient(top, #d90073, #a00056);
  2119.     background: -webkit-linear-gradient(top, #d90073, #a00056);
  2120.     background: linear-gradient(to bottom, #d90073, #a00056);
  2121.     color: #260014;
  2122.   }
  2123.   .pagination a.active {
  2124.     background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00add9), color-stop(100%, #00708c));
  2125.     background: -moz-linear-gradient(top, #00add9, #00708c);
  2126.     background: -webkit-linear-gradient(top, #00add9, #00708c);
  2127.     background: linear-gradient(to bottom, #00add9, #00708c);
  2128.     color: #001e26;
  2129.   }
  2130.   .pagination a.active:hover {
  2131.     cursor: default;
  2132.   }
  2133.   .pagination .prev:before {
  2134.     content: \"« \";
  2135.     font-weight: normal;
  2136.   }
  2137.   .pagination .next:after {
  2138.     content: \" »\";
  2139.     font-weight: normal;
  2140.   }
  2141.   .pagination .next:hover, .pagination .prev:hover {
  2142.     border-color: #141414;
  2143.     background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI2MjYyNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFhMWExYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  2144.     background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #262626), color-stop(100%, #1a1a1a));
  2145.     background: -moz-linear-gradient(top, #262626, #1a1a1a);
  2146.     background: -webkit-linear-gradient(top, #262626, #1a1a1a);
  2147.     background: linear-gradient(to bottom, #262626, #1a1a1a);
  2148.     box-shadow: 0 0 6px rgba(0, 0, 0, 0.6), inset 0 1px rgba(255, 255, 255, 0.1);
  2149.     color: #ebebeb;
  2150.     text-shadow: none;
  2151.   }
  2152. </style>
  2153. {% endblock %}
  2155. {% block userblog_body %}
  2157. <div style=\"background-image: linear-gradient(-1deg, #F6FCFF 0%, #EAF7FF 98%);\">
  2160. {% if position == 'aide' %}
  2161. \t{{ render(controller(\"App\\\\Controller\\\\Produit\\\\Service\\\\ServiceController:articlesdemo\", {'position': position, 'page': page})) }}
  2162. {% else %}
  2163. \t{% if position == 'faq' %}
  2164. \t\t{{ render(controller(\"App\\\\Controller\\\\Produit\\\\Service\\\\ServiceController:articlesfaq\", {'position': position, 'page': page})) }}
  2165. \t{% else %}
  2166. \t\t{% if position == 'blog' %}
  2167. \t\t\t{{ render(controller(\"App\\\\Controller\\\\Produit\\\\Service\\\\ServiceController:articlesblog\", {'position': position, 'page': page})) }}
  2168. \t\t{% else %}
  2169. \t\t\t{% if position == 'presentation' %}
  2170. \t\t\t\t{{ render(controller(\"App\\\\Controller\\\\Produit\\\\Service\\\\ServiceController:articleapropos\", {'position': position, 'page': page})) }}
  2171. \t\t\t{% else %}
  2172. \t\t\t\t{% if position == 'garantie' %}
  2173. \t\t\t\t\t{{ render(controller(\"App\\\\Controller\\\\Produit\\\\Service\\\\ServiceController:articlesengagement\", {'position': position, 'page': page})) }}
  2174. \t\t\t\t{% else %}
  2175. \t\t\t\t\t{% if position == 'toutinclus' %}
  2176. \t\t\t\t\t\t{{ render(controller(\"App\\\\Controller\\\\Produit\\\\Service\\\\ServiceController:articlestoutinclus\", {'position': position, 'page': page})) }}
  2177. \t\t\t\t\t{% else %}
  2178. \t\t\t\t\t\t{% if position == 'modepaiement' %}
  2179. \t\t\t\t\t\t\t{{ render(controller(\"App\\\\Controller\\\\Produit\\\\Service\\\\ServiceController:articlesmodepaiement\", {'position': position, 'page': page})) }}
  2180. \t\t\t\t\t\t{% else %}
  2181. \t\t\t\t\t\t\t{% if position == 'cgu' %}
  2182. \t\t\t\t\t\t\t\t{{ render(controller(\"App\\\\Controller\\\\Produit\\\\Service\\\\ServiceController:articlescgu\", {'position': position, 'page': page})) }}
  2183. \t\t\t\t\t\t\t{% else %}
  2184. \t\t\t\t\t\t\t\t{% if position == 'confidentialite' %}
  2185. \t\t\t\t\t\t\t\t\t{{ render(controller(\"App\\\\Controller\\\\Produit\\\\Service\\\\ServiceController:articlesconfidentialite\", {'position': position, 'page': page})) }}
  2186. \t\t\t\t\t\t\t\t{% else %}
  2187. \t\t\t\t\t\t\t\t\t
  2188. \t\t\t\t\t\t\t\t\t\t{{ render(controller(\"App\\\\Controller\\\\Produit\\\\Service\\\\ServiceController:itemaide\", {'position': 'menuaide'})) }}
  2189. \t\t\t\t\t\t\t\t\t\t
  2190. \t\t\t\t\t\t\t\t{% endif %}
  2191. \t\t\t\t\t\t\t{% endif %}
  2192. \t\t\t\t\t\t{% endif %}
  2193. \t\t\t\t\t{% endif %}
  2194. \t\t\t\t{% endif %}
  2195. \t\t\t{% endif %}
  2196. \t\t{% endif %}
  2197. \t{% endif %}
  2198. {% endif %}
  2199. </div>
  2200. {% include 'Theme/General/Template/Menu/contacts.html.twig' %}
  2202. <div style=\"border-top: 2px solid #ddd; background: #fff;\">
  2203. \t<div class=\"container\">
  2204. \t{{ render(controller(\"App\\\\Controller\\\\Users\\\\User\\\\BilletController:aviscarousel\")) }}
  2205. \t</div>
  2206. </div>
  2209. <div class=\"modal fade\" data-backdrop=\"false\" id=\"modalArticlesDetail\" style=\"margin-top: -75px;\">
  2210. <div class=\"modal-dialog modal-md\">
  2211. <div class=\"modal-content\">
  2212. <div class=\"modal-header color-bottom\" style=\"border-bottom: 4px solid #37c0fb; display: block;\">
  2213. \t<button type=\"button\" class=\"close\" data-dismiss=\"modal\" style=\"float: right;\">&times;</button>
  2214. \t<h3 class=\"modal-title custom-title-modal\" style=\"text-transform: capitalize; text-align: left;\"> {{ position }} <span class=\" fa fa-chevron-right\" style=\"font-size: 20px;\"></span> Article #{{ id }}</h3>
  2215. </div>
  2216. <div class=\"modal-body\">
  2217. \t<div class=\"row\">
  2218. \t  <div class=\"col-md-12\">
  2219. \t\t<div class=\"wait-chargement-content-module-article\" style=\"text-align: center;\">
  2220. \t\t\tPatientez un moment pendant le chargement de l'article</br>
  2221. \t\t\t<img src=\"{{ asset('template/images/loader1.gif') }}\" alt=\"image\" style=\"height: 40px; width: 40px;\">
  2222. \t\t</div>
  2224. \t\t<div class=\"content-module-loading-article\" style=\"display: none;\">
  2225. \t\t
  2226. \t\t</div>
  2227. \t  </div>
  2228. \t</div>
  2229. </div>
  2230. <div class=\"modal-footer color-top\" style=\"text-align: right; border-top: 4px solid #37c0fb; display: block;\">
  2231. {% include \"Theme/General/Template/Menu/social.html.twig\" %}
  2232. </div>
  2233. </div>
  2234. </div>
  2235. </div>
  2237. {% endblock %}
  2239. {% block srcjavascripttemplate %}
  2241. {% endblock %}
  2243. {% block javascripttemplate %}
  2245. {% for infos in app.session.flashbag.get('information') %}
  2246. {% if loop.first %}
  2247. \tresetNotif();
  2248. \talertify.alert(\"{{ infos }}\");
  2249. {% endif %}
  2250. {% endfor %}
  2252. \$('a').tooltip();
  2254. \$('.div-tab-mod').hide();
  2255. \$('.div-tab-mod:first').show();
  2256. \$('.tabs-nav li:first').addClass('tab-active');
  2258. // Change tab class and display content
  2259. \$('.tabs-nav a').on('click', function(event){
  2260.   event.preventDefault();
  2261.   \$('.tabs-nav li').removeClass('tab-active');
  2262.   \$(this).parent().addClass('tab-active');
  2263.   \$('.div-tab-mod').hide();
  2264.   \$(\$(this).attr('href')).show();
  2265. });
  2267. \$(\".open\").click(function(){
  2268.   var container = \$(this).parents(\".topic\");
  2269.   var answer = container.find(\".answer\");
  2270.   var trigger = container.find(\".faq-t\");
  2271.   
  2272.   answer.slideToggle(200);
  2273.   
  2274.   if (trigger.hasClass(\"faq-o\")) {
  2275.     trigger.removeClass(\"faq-o\");
  2276.   }
  2277.   else {
  2278.     trigger.addClass(\"faq-o\");
  2279.   }
  2280.   
  2281.   if (container.hasClass(\"expanded\")) {
  2282.     container.removeClass(\"expanded\");
  2283.   }
  2284.   else {
  2285.     container.addClass(\"expanded\");
  2286.   }
  2287. });
  2289. \$('.item-app').hover(function(){
  2290.   \$(this).find('.popover').stop(true, true).delay(200).fadeIn(200);
  2291.   }, function(){
  2292.   \$(this).find('.popover').stop(true, true).delay(200).fadeOut(200);
  2293. });  
  2295. \$('.open-content-article-reponse').click(function(){
  2296. \tvar id = \$(this).attr('value');
  2297. \topenarticlesupport(id);
  2298. });\t
  2300. function openarticlesupport(id)
  2301. {
  2302. \t\$('#modalArticlesDetail').modal('show');
  2303. \t\$('.wait-chargement-content-module-article').show();
  2304. \t\$('.content-module-loading-article').hide();
  2305. \t\$('.custom-title-modal').html('<img src=\"{{ asset('template/images/diplome.jpg') }}\" alt=\"image\" style=\"height: 40px; width: 40px;\"/> {{ position }} <span class=\"fa fa-gg\" style=\"font-size: 20px;\"></span> Article <span class=\" fa fa-gg\" style=\"font-size: 20px;\"></span> '+id*87);
  2306. \t\$.post('{{ path('produit_service_detail_article_support') }}',{ id: id }, function(data){
  2307. \t\t\$('.wait-chargement-content-module-article').hide();
  2308. \t\t\$('.content-module-loading-article').show();
  2309. \t\t\$('.content-module-loading-article').html(data);
  2310. \t});
  2311. }
  2312. {% if id > 0 %}
  2313. \topenarticlesupport({{ id }});
  2314. {% endif %}
  2315. {% endblock %}
  2316. ", "Theme/Produit/Service/Service/supportscenter.html.twig", "/home/afhunt/domains/factory.afhunt.com/public_html/factory/templates/Theme/Produit/Service/Service/supportscenter.html.twig");
  2317.     }
  2318. }