var/cache/dev/twig/63/6361df345908e26e8617c9cd597bb68c.php line 39

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\CoreExtension;
  7. use Twig\Extension\SandboxExtension;
  8. use Twig\Markup;
  9. use Twig\Sandbox\SecurityError;
  10. use Twig\Sandbox\SecurityNotAllowedTagError;
  11. use Twig\Sandbox\SecurityNotAllowedFilterError;
  12. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  13. use Twig\Source;
  14. use Twig\Template;
  16. /* Theme/layoutbase.html.twig */
  17. class __TwigTemplate_333957a219b765aaf0ac14a7142fbc2d extends Template
  18. {
  19.     private $source;
  20.     private $macros = [];
  22.     public function __construct(Environment $env)
  23.     {
  24.         parent::__construct($env);
  26.         $this->source = $this->getSourceContext();
  28.         $this->parent = false;
  30.         $this->blocks = [
  31.             'title' => [$this, 'block_title'],
  32.             'meta' => [$this, 'block_meta'],
  33.             'stylesheets' => [$this, 'block_stylesheets'],
  34.             'body' => [$this, 'block_body'],
  35.             'javascript' => [$this, 'block_javascript'],
  36.         ];
  37.     }
  39.     protected function doDisplay(array $context, array $blocks = [])
  40.     {
  41.         $macros = $this->macros;
  42.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  43.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Theme/layoutbase.html.twig"));
  45.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  46.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Theme/layoutbase.html.twig"));
  48.         // line 1
  49.         yield "<html lang=\"fr\">
  51. <head>
  52.   <meta charset=\"utf-8\">
  53.   <!-- mobile responsive meta -->
  54.   <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  55.   <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1\">
  57.   <title>";
  58.         // line 9
  59.         yield from $this->unwrap()->yieldBlock('title', $context, $blocks);
  60.         yield "</title>
  61.   
  62.   ";
  63.         // line 11
  64.         yield from $this->unwrap()->yieldBlock('meta', $context, $blocks);
  65.         // line 12
  66.         yield "  ";
  67.         yield from $this->unwrap()->yieldBlock('stylesheets', $context, $blocks);
  68.         // line 61
  69.         yield "
  71.    <style>
  72.         :root {
  73.             --primary: #2563eb;
  74.             --primary-dark: #1d4ed8;
  75.             --secondary: #f59e0b;
  76.             --accent: #10b981;
  77.             --text: #1f2937;
  78.             --text-light: #6b7280;
  79.             --background: #f9fafb;
  80.             --card-bg: #ffffff;
  81.             --border: #e5e7eb;
  82.             --success: #10b981;
  83.             --warning: #f59e0b;
  84.             --danger: #ef4444;
  85.         }
  87.       
  89.         /* Overlay for mobile menu */
  90.         .overlay {
  91.             position: fixed;
  92.             top: 0;
  93.             left: 0;
  94.             width: 100%;
  95.             height: 100%;
  96.             background-color: rgba(0, 0, 0, 0.5);
  97.             opacity: 0;
  98.             visibility: hidden;
  99.             transition: opacity 0.3s ease;
  100.             z-index: 999;
  101.         }
  103.         .overlay.active {
  104.             opacity: 1;
  105.             visibility: visible;
  106.         }
  108.         /* Hero Section */
  109.         .hero {
  110.             padding: 5rem 0 5rem;
  111.             background: linear-gradient(rgba(37, 99, 235, 0.9), rgba(37, 99, 235, 0.7)), url('https://placehold.co/1920x600/2563eb/ffffff?text=Cabinet Syscofie Consulting SARL') no-repeat center center/cover;
  112.             color: white;
  113.             text-align: center;
  114.         }
  116.         .hero h1 {
  117.             font-size: 3.5rem;
  118.             margin-bottom: 1rem;
  119.             font-weight: 800;
  120.         }
  122.         .hero p {
  123.             font-size: 1.2rem;
  124.             max-width: 700px;
  125.             margin: 0 auto 2rem;
  126.             opacity: 0.9;
  127.         }
  129.         .btn-up {
  130.             display: inline-block;
  131.             padding: 12px 30px;
  132.             background-color: var(--accent);
  133.             color: white;
  134.             border: none;
  135.             border-radius: 50px;
  136.             font-size: 1rem;
  137.             font-weight: 600;
  138.             cursor: pointer;
  139.             transition: all 0.3s ease;
  140.             text-decoration: none;
  141.             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  142.         }
  144.         .btn-up:hover {
  145.             transform: translateY(-2px);
  146.             box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  147.         }
  149.         .btn-outline {
  150.             background-color: transparent;
  151.             border: 2px solid white;
  152.             margin-left: 1rem;
  153.         }
  155.         .btn-outline:hover {
  156.             background-color: white;
  157.             color: var(--primary);
  158.         }
  160.         /* Calculator Section */
  161.         .calculator-section {
  162.             padding: 7rem 0 5rem;
  163.         }
  165.         .section-title {
  166.             text-align: center;
  167.             margin-bottom: 3rem;
  168.         }
  170.         .section-title h2 {
  171.             font-size: 2.5rem;
  172.             color: var(--primary);
  173.             margin-bottom: 1rem;
  174.             position: relative;
  175.             display: inline-block;
  176.         }
  178.         .section-title h2::after {
  179.             content: '';
  180.             position: absolute;
  181.             bottom: -10px;
  182.             left: 50%;
  183.             transform: translateX(-50%);
  184.             width: 80px;
  185.             height: 4px;
  186.             background-color: var(--accent);
  187.             border-radius: 2px;
  188.         }
  190.         .section-title p {
  191.             color: var(--text-light);
  192.             max-width: 700px;
  193.             margin: 1rem auto 0;
  194.         }
  196.         .calculator-container {
  197.             display: flex;
  198.             gap: 2rem;
  199.             margin-top: 2rem;
  200.             flex-wrap: wrap;
  201.         }
  203.         .calculator-form {
  204.             flex: 1;
  205.             min-width: 300px;
  206.             background-color: var(--card-bg);
  207.             padding: 2rem;
  208.             border-radius: 15px;
  209.             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  210.         }
  212.         .form-group {
  213.             margin-bottom: 1.5rem;
  214.         }
  216.         .form-group label {
  217.             display: block;
  218.             margin-bottom: 0.5rem;
  219.             font-weight: 600;
  220.             color: var(--text);
  221.         }
  223.         .form-group input, .form-group select {
  224.             width: 100%;
  225.             padding: 12px 15px;
  226.             border: 1px solid var(--border);
  227.             border-radius: 8px;
  228.             font-size: 1rem;
  229.             transition: border-color 0.3s ease;
  230.         }
  232.         .form-group input:focus, .form-group select:focus {
  233.             outline: none;
  234.             border-color: var(--primary);
  235.             box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  236.         }
  238.         .form-row {
  239.             display: flex;
  240.             gap: 1rem;
  241.         }
  243.         .form-row .form-group {
  244.             flex: 1;
  245.         }
  247.         .results {
  248.             flex: 1;
  249.             min-width: 300px;
  250.             background-color: var(--card-bg);
  251.             padding: 2rem;
  252.             border-radius: 15px;
  253.             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  254.         }
  256.         .results h3 {
  257.             color: var(--primary);
  258.             margin-bottom: 1.5rem;
  259.             padding-bottom: 0.5rem;
  260.             border-bottom: 2px solid var(--border);
  261.         }
  263.         .result-item {
  264.             display: flex;
  265.             justify-content: space-between;
  266.             padding: 1rem 0;
  267.             border-bottom: 1px solid var(--border);
  268.         }
  270.         .result-item:last-child {
  271.             border-bottom: none;
  272.         }
  274.         .result-item .label {
  275.             font-weight: 500;
  276.             color: var(--text-light);
  277.         }
  279.         .result-item .value {
  280.             font-weight: 700;
  281.             color: var(--primary);
  282.         }
  284.         .amortization-table {
  285.             width: 100%;
  286.             border-collapse: collapse;
  287.             margin-top: 2rem;
  288.             overflow: hidden;
  289.             border-radius: 10px;
  290.             overflow: hidden;
  291.         }
  293.         .amortization-table th {
  294.             background-color: var(--primary);
  295.             color: white;
  296.             text-align: left;
  297.             padding: 12px 15px;
  298.         }
  300.         .amortization-table td {
  301.             padding: 12px 15px;
  302.             border-bottom: 1px solid var(--border);
  303.         }
  305.         .amortization-table tr:nth-child(even) {
  306.             background-color: #f8fafc;
  307.         }
  309.         .amortization-table tr:hover {
  310.             background-color: #eff6ff;
  311.         }
  313.         .chart-container {
  314.             margin-top: 2rem;
  315.             height: 300px;
  316.             position: relative;
  317.         }
  319.         .chart {
  320.             width: 100%;
  321.             height: 100%;
  322.             background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
  323.             border-radius: 10px;
  324.             position: relative;
  325.             overflow: hidden;
  326.         }
  328.         .chart-bar {
  329.             position: absolute;
  330.             bottom: 0;
  331.             width: 30px;
  332.             background-color: rgba(255, 255, 255, 0.3);
  333.             border-radius: 5px 5px 0 0;
  334.             transition: height 0.5s ease;
  335.         }
  337.         /* Features Section */
  338.         .features {
  339.             padding: 2rem 0;
  340.             background-color: #f1f5f9;
  341.         }
  343.         .features-grid {
  344.             display: grid;
  345.             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  346.             gap: 2rem;
  347.             margin-top: 3rem;
  348.         }
  350.         .feature-card {
  351.             background-color: var(--card-bg);
  352.             padding: 2rem;
  353.             border-radius: 15px;
  354.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  355.             transition: transform 0.3s ease, box-shadow 0.3s ease;
  356.         }
  358.         .feature-card:hover {
  359.             transform: translateY(-5px);
  360.             box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  361.         }
  363.         .feature-icon {
  364.             font-size: 2.5rem;
  365.             color: var(--primary);
  366.             margin-bottom: 1rem;
  367.         }
  369.         .feature-card h3 {
  370.             margin-bottom: 1rem;
  371.             color: var(--primary);
  372.         }
  374.         /* Testimonials */
  375.         .testimonials {
  376.             padding: 5rem 0;
  377.         }
  379.         .testimonial-grid {
  380.             display: grid;
  381.             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  382.             gap: 2rem;
  383.             margin-top: 3rem;
  384.         }
  386.         .testimonial-card {
  387.             background-color: var(--card-bg);
  388.             padding: 2rem;
  389.             border-radius: 15px;
  390.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  391.             position: relative;
  392.         }
  394.         .testimonial-card::before {
  395.             content: '\"';
  396.             position: absolute;
  397.             top: 10px;
  398.             left: 20px;
  399.             font-size: 5rem;
  400.             color: var(--primary);
  401.             opacity: 0.1;
  402.             font-family: Georgia, serif;
  403.         }
  405.         .testimonial-content {
  406.             margin-bottom: 1.5rem;
  407.             font-style: italic;
  408.             color: var(--text-light);
  409.         }
  411.         .client-info {
  412.             display: flex;
  413.             align-items: center;
  414.         }
  416.         .client-avatar {
  417.             width: 50px;
  418.             height: 50px;
  419.             border-radius: 50%;
  420.             background-color: var(--primary);
  421.             margin-right: 1rem;
  422.             display: flex;
  423.             align-items: center;
  424.             justify-content: center;
  425.             color: white;
  426.             font-weight: 600;
  427.         }
  429.         .client-name {
  430.             font-weight: 600;
  431.             color: var(--text);
  432.         }
  434.         .client-role {
  435.             font-size: 0.9rem;
  436.             color: var(--text-light);
  437.         }
  439.         /* CTA Section */
  440.         .cta {
  441.             padding: 5rem 0;
  442.             background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  443.             color: white;
  444.             text-align: center;
  445.         }
  447.         .cta h2 {
  448.             font-size: 2.5rem;
  449.             margin-bottom: 1rem;
  450.         }
  452.         .cta p {
  453.             max-width: 700px;
  454.             margin: 0 auto 2rem;
  455.             opacity: 0.9;
  456.         }
  458.         .btn-light {
  459.             background-color: white;
  460.             color: var(--primary);
  461.         }
  463.         .btn-light:hover {
  464.             background-color: #f8fafc;
  465.         }
  467.         /* Footer */
  468.         footer {
  469.             background-color: #1f2937;
  470.             color: white;
  471.             padding: 4rem 0 2rem;
  472.         }
  474.         .footer-content {
  475.             display: grid;
  476.             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  477.             gap: 2rem;
  478.             margin-bottom: 3rem;
  479.         }
  481.         .footer-column h3 {
  482.             font-size: 1.2rem;
  483.             margin-bottom: 1.5rem;
  484.             position: relative;
  485.             padding-bottom: 0.5rem;
  486.         }
  488.         .footer-column h3::after {
  489.             content: '';
  490.             position: absolute;
  491.             bottom: 0;
  492.             left: 0;
  493.             width: 40px;
  494.             height: 3px;
  495.             background-color: var(--accent);
  496.         }
  498.         .footer-column ul {
  499.             list-style: none;
  500.         }
  502.         .footer-column ul li {
  503.             margin-bottom: 0.8rem;
  504.         }
  506.         .footer-column a {
  507.             color: #d1d5db;
  508.             text-decoration: none;
  509.             transition: color 0.3s ease;
  510.         }
  512.         .footer-column a:hover {
  513.             color: white;
  514.         }
  516.         .social-links {
  517.             display: flex;
  518.             gap: 1rem;
  519.             margin-top: 1rem;
  520.         }
  522.         .social-links a {
  523.             display: inline-flex;
  524.             align-items: center;
  525.             justify-content: center;
  526.             width: 40px;
  527.             height: 40px;
  528.             background-color: rgba(255, 255, 255, 0.1);
  529.             border-radius: 50%;
  530.             transition: background-color 0.3s ease;
  531.         }
  533.         .social-links a:hover {
  534.             background-color: var(--primary);
  535.         }
  537.         .footer-bottom {
  538.             text-align: center;
  539.             padding-top: 2rem;
  540.             border-top: 1px solid rgba(255, 255, 255, 0.1);
  541.             color: #9ca3af;
  542.             font-size: 0.9rem;
  543.         }
  545.         /* Responsive Design */
  546.         @media (max-width: 768px) {
  547.             .mobile-toggle {
  548.                 display: block;
  549.             }
  551.             nav ul {
  552.                 display: none;
  553.             }
  555.             .header-content {
  556.                 padding: 0 1rem;
  557.             }
  559.             .hero {
  560.                 padding: 8rem 0 5rem;
  561.             }
  563.             .hero h1 {
  564.                 font-size: 2.5rem;
  565.             }
  567.             .calculator-section {
  568.                 padding: 6rem 0 5rem;
  569.             }
  571.             .calculator-container {
  572.                 flex-direction: column;
  573.             }
  575.             .form-row {
  576.                 flex-direction: column;
  577.                 gap: 1rem;
  578.             }
  580.             .btn-outline {
  581.                 margin-left: 0;
  582.                 margin-top: 1rem;
  583.             }
  585.             .mobile-menu {
  586.                 right: -300px;
  587.             }
  589.             .mobile-menu.active {
  590.                 right: 0;
  591.             }
  592.         }
  594.         /* Animation */
  595.         @keyframes fadeIn {
  596.             from {
  597.                 opacity: 0;
  598.                 transform: translateY(20px);
  599.             }
  600.             to {
  601.                 opacity: 1;
  602.                 transform: translateY(0);
  603.             }
  604.         }
  606.         .animate-fade-in {
  607.             animation: fadeIn 0.6s ease forwards;
  608.         }
  610.         .delay-1 {
  611.             animation-delay: 0.1s;
  612.         }
  614.         .delay-2 {
  615.             animation-delay: 0.2s;
  616.         }
  618.         .delay-3 {
  619.             animation-delay: 0.3s;
  620.         }
  622.         .delay-4 {
  623.             animation-delay: 0.4s;
  624.         }
  626.         /* Calculator-specific styles */
  627.         .calculator-tabs {
  628.             display: flex;
  629.             margin-bottom: 1.5rem;
  630.             border-bottom: 1px solid var(--border);
  631.         }
  633.         .tab-button {
  634.             padding: 12px 20px;
  635.             background: none;
  636.             border: none;
  637.             font-size: 1rem;
  638.             font-weight: 600;
  639.             cursor: pointer;
  640.             color: var(--text-light);
  641.             position: relative;
  642.         }
  644.         .tab-button.active {
  645.             color: var(--primary);
  646.         }
  648.         .tab-button.active::after {
  649.             content: '';
  650.             position: absolute;
  651.             bottom: -1px;
  652.             left: 0;
  653.             width: 100%;
  654.             height: 3px;
  655.             background-color: var(--primary);
  656.         }
  658.         .currency-symbol {
  659.             position: absolute;
  660.             left: 15px;
  661.             top: 50%;
  662.             transform: translateY(-50%);
  663.             color: var(--text-light);
  664.             pointer-events: none;
  665.         }
  667.         .input-with-symbol {
  668.             position: relative;
  669.             padding-left: 35px;
  670.         }
  674.         
  675. /************ ====== End off Service ==============***/
  678. .section-services {
  679. \tfont-family: \"Poppins\", sans-serif;
  680. \tbackground-color: #e6edf7;
  681. \tcolor: #202020;
  682. \tpadding-top: 5px;
  683.     padding-bottom: 10px;
  684. }
  686. .section-services .header-section {
  687. \tmargin-bottom: 0px;
  688. }
  690. .section-services .header-section .title {
  691. \tposition: relative;
  692.     padding-bottom: 14px;
  693.     margin-bottom: 25px;
  694. \tfont-weight: 700;
  695.     font-size: 32px;
  696. }
  698. .section-services .header-section .title:before {
  699. \tcontent: \"\";
  700. \tposition: absolute;
  701. \tbottom: 0;
  702. \tleft: 50%;
  703. \ttransform: translateX(-50%);
  704. \twidth: 50px;
  705. \theight: 3px;
  706. \tbackground-color: #ff4500;
  707.     border-radius: 3px;
  708. }
  710. .section-services .header-section .title:after {
  711. \tcontent: \"\";
  712. \tposition: absolute;
  713. \tbottom: 0;
  714. \tleft: 50%;
  715.     transform: translateX(30px);
  716. \twidth: 10px;
  717. \theight: 3px;
  718. \tbackground-color: #504f93;
  719.     border-radius: 3px;
  720. }
  722. .section-services .header-section .description {
  723. \tfont-size: 14px;
  724.     color: #282828;
  725. }
  727. .section-services .single-service {
  728.     position: relative;
  729.     margin-top: 30px;
  730.     background-color: #fff;
  731.     border-radius: 10px;
  732.     padding: 40px 30px;
  733.     overflow: hidden;
  734. }
  736. .section-services .single-service .content {
  737. \tposition: relative;
  738. \tz-index: 20;
  739. }
  741. .section-services .single-service .circle-before {
  742.     position: absolute;
  743.     top: 0;
  744.     right: 0px;
  745.     transform: translate(40%, -40%);
  746.     width: 150px;
  747.     height: 150px;
  748.     background-color: #ff4500;
  749.     border: 6px solid #504f93;
  750.     border-radius: 50%;
  751.     opacity: 0.5;
  752.     z-index: 10;
  753.     transition: all .6s;
  754. }
  756. .section-services .single-service:hover .circle-before {
  757. \twidth: 100%;
  758. \theight: 100%;
  759. \ttransform: none;
  760. \tborder: 0;
  761. \tborder-radius: 0;
  762. \topacity: 1;
  763. }
  765. .section-services .single-service .icon {
  766. \tdisplay: inline-block;
  767. \tmargin-bottom: 26px;
  768.     width: 70px;
  769.     height: 70px;
  770.     background-color: #ff4500;
  771.     border-radius: 5px;
  772.     line-height: 70px;
  773.     text-align: center;
  774.     color: #fff;
  775.     font-size: 30px;
  776.     transition: all .3s;
  777. }
  779. .section-services .single-service:hover .icon {
  780. \tbackground-color: #fff;
  781. \tcolor: #ff4500;
  782. }
  784. .section-services .single-service .title {
  785.     margin-bottom: 18px;
  786. \tfont-weight: 700;
  787.     font-size: 23px;
  788.     transition: color .3s;
  789. }
  791. .section-services .single-service:hover .title {
  792. \tcolor: #fff;
  793. }
  795. .section-services .single-service .description {
  796.     margin-bottom: 20px;
  797.     font-size: 14px;
  798.     transition: color .3s;
  799. }
  801. .section-services .single-service:hover .description {
  802. \tcolor: #fff;
  803. }
  805. .section-services .single-service a {
  806. \tposition: relative;
  807. \tfont-size: 18px;
  808.     color: #202020;
  809.     text-decoration: none;
  810.     font-weight: 500;
  811.     transition: color .3s;
  812. }
  814. .section-services .single-service:hover a {
  815. \tcolor: #fff;
  816. }
  818. .section-services .single-service a:after {
  819. \tcontent: \"\";
  820. \tposition: absolute;
  821. \tbottom: 0;
  822. \tleft: 0;
  823. \tright: 0;
  824. \theight: 1px;
  825. \tbackground-color: #ff4500;
  826. \ttransition: background-color .3s;
  827. }
  829. .section-services .single-service:hover a:after {
  830. \tbackground-color: #fff;
  831. }
  833. .section-services .content {
  834.     background-color: transparent;
  835. }
  836. /*****=========== End of Service ===========*/
  840.     /* css section */
  841. @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@400;800&family=Roboto:ital,wght@0,500;1,400&display=swap');
  843. .faq-container{
  844.   max-width: 600px;
  845.   margin: 0 auto;
  846. }
  847. .faq{
  848.   background-color: transparent;
  849.   border: solid 1px #9fa4a8;
  850.   border-radius: 10px;
  851.   padding: 30px;
  852.   margin: 20px 0;
  853.   position: relative;
  854.   overflow: hidden;
  855.   transition: .4s ease;
  856. }
  857. .faq.active {
  858.     background-color: #fff;
  859.     box-shadow: 0 3px 6px rgba(0, 0, 0, .1), 0 3px 6px rgba(0, 0, 0, .1);
  860. }
  861. .faq.active::before, .faq.active::after {
  862.     content: \"\\f075\";
  863.     font-family: 'Font Awesome 5 Free';
  864.     color: #2ecc71;
  865.     position: absolute;
  866.     font-size: 7rem;
  867.     opacity: .2;
  868.     top: 20px;
  869.     left: 20px;
  870.     z-index: 0;
  871. }
  872. .faq.active::before{
  873.   color: #3498db;
  874.   top: -10px;
  875.   left: -30px;
  876.   transform: rotateY(180deg);
  877. }
  878. .faq-title{
  879.   margin: 0 35px 0 0;
  880. }
  881. .faq-text{
  882.   display: none;
  883.   margin: 30px 0 0;
  884. }
  885. .faq.active .faq-text{
  886.   display: block;
  887. }
  888. .faq-toggle {
  889.     border: 0;
  890.     border-radius: 50%;
  891.     background-color: transparent;
  892.     cursor: pointer;
  893.     font-size: 16px;
  894.     display: flex;
  895.     justify-content: center;
  896.     align-items: center;
  897.     position: absolute;
  898.     right: 30px;
  899.     top: 30px;
  900.     height: 30px;
  901.     width: 30px;
  902. }
  903. .faq-toggle .fa-times{
  904.   display: none;
  905. }
  906. .faq.active .faq-toggle .fa-times{
  907.   display: block;
  908.   color: #fff;
  909. }
  910. .faq.active .faq-toggle .fa-chevron-down{
  911.   display: none;
  912. }
  913. .faq.active .faq-toggle {
  914.     background: #999;
  915. }
  916.     </style>
  917. </head>
  919. <body>
  920.  
  921.   ";
  922.         // line 913
  923.         yield $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment(Symfony\Bridge\Twig\Extension\HttpKernelExtension::controller("App\\Controller\\General\\Template\\MenuController:menubare", ["position" => "offerts"]));
  924.         yield "
  925.   ";
  926.         // line 914
  927.         yield from $this->unwrap()->yieldBlock('body', $context, $blocks);
  928.         // line 917
  929.         yield "  ";
  930.         yield $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment(Symfony\Bridge\Twig\Extension\HttpKernelExtension::controller("App\\Controller\\General\\Template\\MenuController:footer", ["position" => "offerts"]));
  931.         yield "
  932.   <div id=\"preloader\"></div>
  934.   <!-- Vendor JS Files -->
  935.   
  936.     
  938.     <script src=\"";
  939.         // line 924
  940.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/js/perso.js"), "html", null, true);
  941.         yield "\"></script>
  942.     <script src=\"";
  943.         // line 925
  944.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/vendors/bootstrap/bootstrap.bundle.min.js"), "html", null, true);
  945.         yield "assets/vendors/bootstrap/bootstrap.bundle.min.js\"></script>
  946.     <script src=\"";
  947.         // line 926
  948.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/vendors/gsap/gsap.min.js"), "html", null, true);
  949.         yield "\"></script>
  950.     <script src=\"";
  951.         // line 927
  952.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/vendors/imagesloaded/imagesloaded.pkgd.min.js"), "html", null, true);
  953.         yield "\"></script>
  954.     <script src=\"";
  955.         // line 928
  956.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/vendors/isotope/isotope.pkgd.min.js"), "html", null, true);
  957.         yield "\"></script>
  958.     <script src=\"";
  959.         // line 929
  960.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/vendors/glightbox/glightbox.min.js"), "html", null, true);
  961.         yield "\"></script>
  962.     <script src=\"";
  963.         // line 930
  964.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/vendors/swiper/swiper-bundle.min.js"), "html", null, true);
  965.         yield "\"></script>
  966.     <script src=\"";
  967.         // line 931
  968.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/vendors/aos/aos.js"), "html", null, true);
  969.         yield "\"></script>
  970.     <script src=\"";
  971.         // line 932
  972.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/vendors/purecounter/purecounter.js"), "html", null, true);
  973.         yield "\"></script>
  974.     <script src=\"";
  975.         // line 933
  976.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/js/custom.js"), "html", null, true);
  977.         yield "\"></script>
  978.     <script src=\"";
  979.         // line 934
  980.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/asstes/js/perso.js"), "html", null, true);
  981.         yield "\"></script>
  982.     <script src=\"";
  983.         // line 935
  984.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/js/send_email.js"), "html", null, true);
  985.         yield "\"></script>
  989.   <script type=\"text/javascript\">
  990.     
  991.     ";
  992.         // line 941
  993.         yield from $this->unwrap()->yieldBlock('javascript', $context, $blocks);
  994.         // line 946
  995.         yield "  </script>
  996.   <button id=\"back-to-top\"><i class=\"bi bi-arrow-up-short\"></i></button>
  997. </body>
  998. </html>";
  999.         
  1000.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1002.         
  1003.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1005.         return; yield '';
  1006.     }
  1008.     // line 9
  1009.     public function block_title($context, array $blocks = [])
  1010.     {
  1011.         $macros = $this->macros;
  1012.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1013.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  1015.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1016.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  1018.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape((isset($context["site"]) || array_key_exists("site", $context) ? $context["site"] : (function () { throw new RuntimeError('Variable "site" does not exist.', 9, $this->source); })()), "html", null, true);
  1019.         
  1020.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1022.         
  1023.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1025.         return; yield '';
  1026.     }
  1028.     // line 11
  1029.     public function block_meta($context, array $blocks = [])
  1030.     {
  1031.         $macros = $this->macros;
  1032.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1033.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "meta"));
  1035.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1036.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "meta"));
  1038.         yield " ";
  1039.         
  1040.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1042.         
  1043.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1045.         return; yield '';
  1046.     }
  1048.     // line 12
  1049.     public function block_stylesheets($context, array $blocks = [])
  1050.     {
  1051.         $macros = $this->macros;
  1052.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1053.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  1055.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1056.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  1058.         // line 13
  1059.         yield "
  1060.   <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js\"></script>
  1061.   <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>
  1062.   <script src=\"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js\"></script>
  1063.   <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.1/assets/owl.carousel.css\">
  1064.   <link rel=\"stylesheet\" href=\"https://themes.audemedia.com/html/goodgrowth/css/owl.theme.default.min.css\">
  1065.   <link href=\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css\" rel=\"stylesheet\">
  1066.   <script src=\"https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.1/owl.carousel.min.js\"></script>
  1067.   <!-- Favicons -->
  1068.   <link href=\"";
  1069.         // line 22
  1070.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/assets/img/favicon.png"), "html", null, true);
  1071.         yield "\" rel=\"icon\">
  1072.   <link href=\"";
  1073.         // line 23
  1074.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/assets/img/apple-touch-icon.png"), "html", null, true);
  1075.         yield "\" rel=\"apple-touch-icon\">
  1078.     <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">
  1079.     <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>
  1080.     <link href=\"https://fonts.googleapis.com/css2?family=Pacifico&display=swap\" rel=\"stylesheet\">
  1081.     <link href=\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">
  1082.     <link href=\"https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css\" rel=\"stylesheet\">
  1083.   <!-- Google Fonts -->
  1084.   <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">
  1085.   <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>
  1086.   
  1087.   <link href=\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap\" rel=\"stylesheet\">
  1088. <!-- ======= Styles =======-->
  1089.     <link href=\"";
  1090.         // line 37
  1091.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/vendors/bootstrap/bootstrap.min.css"), "html", null, true);
  1092.         yield "\" rel=\"stylesheet\">
  1093.     <link href=\"";
  1094.         // line 38
  1095.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/vendors/bootstrap-icons/font/bootstrap-icons.min.css"), "html", null, true);
  1096.         yield "\" rel=\"stylesheet\">
  1097.     <link href=\"";
  1098.         // line 39
  1099.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/vendors/glightbox/glightbox.min.css"), "html", null, true);
  1100.         yield "\" rel=\"stylesheet\">
  1101.     <link href=\"";
  1102.         // line 40
  1103.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/vendors/swiper/swiper-bundle.min.css"), "html", null, true);
  1104.         yield "\" rel=\"stylesheet\">
  1105.     <link href=\"";
  1106.         // line 41
  1107.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/vendors/aos/aos.css"), "html", null, true);
  1108.         yield "\" rel=\"stylesheet\">
  1110.       
  1111.     <!-- End Styles-->
  1112.     <!-- ======= Theme Style =======-->
  1113.     <link href=\"";
  1114.         // line 46
  1115.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/css/style.css"), "html", null, true);
  1116.         yield "\" rel=\"stylesheet\">
  1117.     <link href=\"";
  1118.         // line 47
  1119.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("templateSyscofie/css/custom.css"), "html", null, true);
  1120.         yield "\" rel=\"stylesheet\">
  1121.       ";
  1122.         // line 49
  1123.         yield "    <!-- End Theme Style-->
  1124.     
  1125.     <!-- ======= Apply theme =======-->
  1126.     <script>
  1127.       // Apply the theme as early as possible to avoid flicker
  1128.       (function() {
  1129.       const storedTheme = localStorage.getItem('theme') || 'light';
  1130.       document.documentElement.setAttribute('data-bs-theme', storedTheme);
  1131.       })();
  1132.     </script>
  1134.   ";
  1135.         
  1136.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1138.         
  1139.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1141.         return; yield '';
  1142.     }
  1144.     // line 914
  1145.     public function block_body($context, array $blocks = [])
  1146.     {
  1147.         $macros = $this->macros;
  1148.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1149.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  1151.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1152.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  1154.         // line 915
  1155.         yield "        
  1156.   ";
  1157.         
  1158.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1160.         
  1161.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1163.         return; yield '';
  1164.     }
  1166.     // line 941
  1167.     public function block_javascript($context, array $blocks = [])
  1168.     {
  1169.         $macros = $this->macros;
  1170.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1171.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  1173.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1174.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  1176.         // line 942
  1177.         yield "      <script src=\"https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js\"></script>
  1178.       <script src=\"https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js\"></script>
  1179.       <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js\"></script>
  1180.     ";
  1181.         
  1182.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1184.         
  1185.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1187.         return; yield '';
  1188.     }
  1190.     /**
  1191.      * @codeCoverageIgnore
  1192.      */
  1193.     public function getTemplateName()
  1194.     {
  1195.         return "Theme/layoutbase.html.twig";
  1196.     }
  1198.     /**
  1199.      * @codeCoverageIgnore
  1200.      */
  1201.     public function isTraitable()
  1202.     {
  1203.         return false;
  1204.     }
  1206.     /**
  1207.      * @codeCoverageIgnore
  1208.      */
  1209.     public function getDebugInfo()
  1210.     {
  1211.         return array (  1177 => 942,  1167 => 941,  1155 => 915,  1145 => 914,  1123 => 49,  1119 => 47,  1115 => 46,  1107 => 41,  1103 => 40,  1099 => 39,  1095 => 38,  1091 => 37,  1074 => 23,  1070 => 22,  1059 => 13,  1049 => 12,  1029 => 11,  1009 => 9,  995 => 946,  993 => 941,  984 => 935,  980 => 934,  976 => 933,  972 => 932,  968 => 931,  964 => 930,  960 => 929,  956 => 928,  952 => 927,  948 => 926,  944 => 925,  940 => 924,  929 => 917,  927 => 914,  923 => 913,  69 => 61,  66 => 12,  64 => 11,  59 => 9,  49 => 1,);
  1212.     }
  1214.     public function getSourceContext()
  1215.     {
  1216.         return new Source("<html lang=\"fr\">
  1218. <head>
  1219.   <meta charset=\"utf-8\">
  1220.   <!-- mobile responsive meta -->
  1221.   <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  1222.   <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1\">
  1224.   <title>{% block title %}{{ site }}{% endblock %}</title>
  1225.   
  1226.   {% block meta %} {% endblock %}
  1227.   {% block stylesheets %}
  1229.   <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js\"></script>
  1230.   <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>
  1231.   <script src=\"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js\"></script>
  1232.   <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.1/assets/owl.carousel.css\">
  1233.   <link rel=\"stylesheet\" href=\"https://themes.audemedia.com/html/goodgrowth/css/owl.theme.default.min.css\">
  1234.   <link href=\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css\" rel=\"stylesheet\">
  1235.   <script src=\"https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.1/owl.carousel.min.js\"></script>
  1236.   <!-- Favicons -->
  1237.   <link href=\"{{ asset('template/assets/img/favicon.png') }}\" rel=\"icon\">
  1238.   <link href=\"{{ asset('template/assets/img/apple-touch-icon.png') }}\" rel=\"apple-touch-icon\">
  1241.     <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">
  1242.     <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>
  1243.     <link href=\"https://fonts.googleapis.com/css2?family=Pacifico&display=swap\" rel=\"stylesheet\">
  1244.     <link href=\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">
  1245.     <link href=\"https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css\" rel=\"stylesheet\">
  1246.   <!-- Google Fonts -->
  1247.   <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">
  1248.   <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>
  1249.   
  1250.   <link href=\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap\" rel=\"stylesheet\">
  1251. <!-- ======= Styles =======-->
  1252.     <link href=\"{{ asset('templateSyscofie/vendors/bootstrap/bootstrap.min.css') }}\" rel=\"stylesheet\">
  1253.     <link href=\"{{ asset('templateSyscofie/vendors/bootstrap-icons/font/bootstrap-icons.min.css') }}\" rel=\"stylesheet\">
  1254.     <link href=\"{{ asset('templateSyscofie/vendors/glightbox/glightbox.min.css') }}\" rel=\"stylesheet\">
  1255.     <link href=\"{{ asset('templateSyscofie/vendors/swiper/swiper-bundle.min.css') }}\" rel=\"stylesheet\">
  1256.     <link href=\"{{ asset('templateSyscofie/vendors/aos/aos.css') }}\" rel=\"stylesheet\">
  1258.       
  1259.     <!-- End Styles-->
  1260.     <!-- ======= Theme Style =======-->
  1261.     <link href=\"{{ asset('templateSyscofie/css/style.css') }}\" rel=\"stylesheet\">
  1262.     <link href=\"{{ asset('templateSyscofie/css/custom.css') }}\" rel=\"stylesheet\">
  1263.       {# <link href=\"{{ asset('template/assets/vendor/bootstrap/css/bootstrap.min.css') }}\" rel=\"stylesheet\"> #}
  1264.     <!-- End Theme Style-->
  1265.     
  1266.     <!-- ======= Apply theme =======-->
  1267.     <script>
  1268.       // Apply the theme as early as possible to avoid flicker
  1269.       (function() {
  1270.       const storedTheme = localStorage.getItem('theme') || 'light';
  1271.       document.documentElement.setAttribute('data-bs-theme', storedTheme);
  1272.       })();
  1273.     </script>
  1275.   {% endblock %}
  1278.    <style>
  1279.         :root {
  1280.             --primary: #2563eb;
  1281.             --primary-dark: #1d4ed8;
  1282.             --secondary: #f59e0b;
  1283.             --accent: #10b981;
  1284.             --text: #1f2937;
  1285.             --text-light: #6b7280;
  1286.             --background: #f9fafb;
  1287.             --card-bg: #ffffff;
  1288.             --border: #e5e7eb;
  1289.             --success: #10b981;
  1290.             --warning: #f59e0b;
  1291.             --danger: #ef4444;
  1292.         }
  1294.       
  1296.         /* Overlay for mobile menu */
  1297.         .overlay {
  1298.             position: fixed;
  1299.             top: 0;
  1300.             left: 0;
  1301.             width: 100%;
  1302.             height: 100%;
  1303.             background-color: rgba(0, 0, 0, 0.5);
  1304.             opacity: 0;
  1305.             visibility: hidden;
  1306.             transition: opacity 0.3s ease;
  1307.             z-index: 999;
  1308.         }
  1310.         .overlay.active {
  1311.             opacity: 1;
  1312.             visibility: visible;
  1313.         }
  1315.         /* Hero Section */
  1316.         .hero {
  1317.             padding: 5rem 0 5rem;
  1318.             background: linear-gradient(rgba(37, 99, 235, 0.9), rgba(37, 99, 235, 0.7)), url('https://placehold.co/1920x600/2563eb/ffffff?text=Cabinet Syscofie Consulting SARL') no-repeat center center/cover;
  1319.             color: white;
  1320.             text-align: center;
  1321.         }
  1323.         .hero h1 {
  1324.             font-size: 3.5rem;
  1325.             margin-bottom: 1rem;
  1326.             font-weight: 800;
  1327.         }
  1329.         .hero p {
  1330.             font-size: 1.2rem;
  1331.             max-width: 700px;
  1332.             margin: 0 auto 2rem;
  1333.             opacity: 0.9;
  1334.         }
  1336.         .btn-up {
  1337.             display: inline-block;
  1338.             padding: 12px 30px;
  1339.             background-color: var(--accent);
  1340.             color: white;
  1341.             border: none;
  1342.             border-radius: 50px;
  1343.             font-size: 1rem;
  1344.             font-weight: 600;
  1345.             cursor: pointer;
  1346.             transition: all 0.3s ease;
  1347.             text-decoration: none;
  1348.             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  1349.         }
  1351.         .btn-up:hover {
  1352.             transform: translateY(-2px);
  1353.             box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  1354.         }
  1356.         .btn-outline {
  1357.             background-color: transparent;
  1358.             border: 2px solid white;
  1359.             margin-left: 1rem;
  1360.         }
  1362.         .btn-outline:hover {
  1363.             background-color: white;
  1364.             color: var(--primary);
  1365.         }
  1367.         /* Calculator Section */
  1368.         .calculator-section {
  1369.             padding: 7rem 0 5rem;
  1370.         }
  1372.         .section-title {
  1373.             text-align: center;
  1374.             margin-bottom: 3rem;
  1375.         }
  1377.         .section-title h2 {
  1378.             font-size: 2.5rem;
  1379.             color: var(--primary);
  1380.             margin-bottom: 1rem;
  1381.             position: relative;
  1382.             display: inline-block;
  1383.         }
  1385.         .section-title h2::after {
  1386.             content: '';
  1387.             position: absolute;
  1388.             bottom: -10px;
  1389.             left: 50%;
  1390.             transform: translateX(-50%);
  1391.             width: 80px;
  1392.             height: 4px;
  1393.             background-color: var(--accent);
  1394.             border-radius: 2px;
  1395.         }
  1397.         .section-title p {
  1398.             color: var(--text-light);
  1399.             max-width: 700px;
  1400.             margin: 1rem auto 0;
  1401.         }
  1403.         .calculator-container {
  1404.             display: flex;
  1405.             gap: 2rem;
  1406.             margin-top: 2rem;
  1407.             flex-wrap: wrap;
  1408.         }
  1410.         .calculator-form {
  1411.             flex: 1;
  1412.             min-width: 300px;
  1413.             background-color: var(--card-bg);
  1414.             padding: 2rem;
  1415.             border-radius: 15px;
  1416.             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  1417.         }
  1419.         .form-group {
  1420.             margin-bottom: 1.5rem;
  1421.         }
  1423.         .form-group label {
  1424.             display: block;
  1425.             margin-bottom: 0.5rem;
  1426.             font-weight: 600;
  1427.             color: var(--text);
  1428.         }
  1430.         .form-group input, .form-group select {
  1431.             width: 100%;
  1432.             padding: 12px 15px;
  1433.             border: 1px solid var(--border);
  1434.             border-radius: 8px;
  1435.             font-size: 1rem;
  1436.             transition: border-color 0.3s ease;
  1437.         }
  1439.         .form-group input:focus, .form-group select:focus {
  1440.             outline: none;
  1441.             border-color: var(--primary);
  1442.             box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  1443.         }
  1445.         .form-row {
  1446.             display: flex;
  1447.             gap: 1rem;
  1448.         }
  1450.         .form-row .form-group {
  1451.             flex: 1;
  1452.         }
  1454.         .results {
  1455.             flex: 1;
  1456.             min-width: 300px;
  1457.             background-color: var(--card-bg);
  1458.             padding: 2rem;
  1459.             border-radius: 15px;
  1460.             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  1461.         }
  1463.         .results h3 {
  1464.             color: var(--primary);
  1465.             margin-bottom: 1.5rem;
  1466.             padding-bottom: 0.5rem;
  1467.             border-bottom: 2px solid var(--border);
  1468.         }
  1470.         .result-item {
  1471.             display: flex;
  1472.             justify-content: space-between;
  1473.             padding: 1rem 0;
  1474.             border-bottom: 1px solid var(--border);
  1475.         }
  1477.         .result-item:last-child {
  1478.             border-bottom: none;
  1479.         }
  1481.         .result-item .label {
  1482.             font-weight: 500;
  1483.             color: var(--text-light);
  1484.         }
  1486.         .result-item .value {
  1487.             font-weight: 700;
  1488.             color: var(--primary);
  1489.         }
  1491.         .amortization-table {
  1492.             width: 100%;
  1493.             border-collapse: collapse;
  1494.             margin-top: 2rem;
  1495.             overflow: hidden;
  1496.             border-radius: 10px;
  1497.             overflow: hidden;
  1498.         }
  1500.         .amortization-table th {
  1501.             background-color: var(--primary);
  1502.             color: white;
  1503.             text-align: left;
  1504.             padding: 12px 15px;
  1505.         }
  1507.         .amortization-table td {
  1508.             padding: 12px 15px;
  1509.             border-bottom: 1px solid var(--border);
  1510.         }
  1512.         .amortization-table tr:nth-child(even) {
  1513.             background-color: #f8fafc;
  1514.         }
  1516.         .amortization-table tr:hover {
  1517.             background-color: #eff6ff;
  1518.         }
  1520.         .chart-container {
  1521.             margin-top: 2rem;
  1522.             height: 300px;
  1523.             position: relative;
  1524.         }
  1526.         .chart {
  1527.             width: 100%;
  1528.             height: 100%;
  1529.             background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
  1530.             border-radius: 10px;
  1531.             position: relative;
  1532.             overflow: hidden;
  1533.         }
  1535.         .chart-bar {
  1536.             position: absolute;
  1537.             bottom: 0;
  1538.             width: 30px;
  1539.             background-color: rgba(255, 255, 255, 0.3);
  1540.             border-radius: 5px 5px 0 0;
  1541.             transition: height 0.5s ease;
  1542.         }
  1544.         /* Features Section */
  1545.         .features {
  1546.             padding: 2rem 0;
  1547.             background-color: #f1f5f9;
  1548.         }
  1550.         .features-grid {
  1551.             display: grid;
  1552.             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  1553.             gap: 2rem;
  1554.             margin-top: 3rem;
  1555.         }
  1557.         .feature-card {
  1558.             background-color: var(--card-bg);
  1559.             padding: 2rem;
  1560.             border-radius: 15px;
  1561.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  1562.             transition: transform 0.3s ease, box-shadow 0.3s ease;
  1563.         }
  1565.         .feature-card:hover {
  1566.             transform: translateY(-5px);
  1567.             box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  1568.         }
  1570.         .feature-icon {
  1571.             font-size: 2.5rem;
  1572.             color: var(--primary);
  1573.             margin-bottom: 1rem;
  1574.         }
  1576.         .feature-card h3 {
  1577.             margin-bottom: 1rem;
  1578.             color: var(--primary);
  1579.         }
  1581.         /* Testimonials */
  1582.         .testimonials {
  1583.             padding: 5rem 0;
  1584.         }
  1586.         .testimonial-grid {
  1587.             display: grid;
  1588.             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  1589.             gap: 2rem;
  1590.             margin-top: 3rem;
  1591.         }
  1593.         .testimonial-card {
  1594.             background-color: var(--card-bg);
  1595.             padding: 2rem;
  1596.             border-radius: 15px;
  1597.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  1598.             position: relative;
  1599.         }
  1601.         .testimonial-card::before {
  1602.             content: '\"';
  1603.             position: absolute;
  1604.             top: 10px;
  1605.             left: 20px;
  1606.             font-size: 5rem;
  1607.             color: var(--primary);
  1608.             opacity: 0.1;
  1609.             font-family: Georgia, serif;
  1610.         }
  1612.         .testimonial-content {
  1613.             margin-bottom: 1.5rem;
  1614.             font-style: italic;
  1615.             color: var(--text-light);
  1616.         }
  1618.         .client-info {
  1619.             display: flex;
  1620.             align-items: center;
  1621.         }
  1623.         .client-avatar {
  1624.             width: 50px;
  1625.             height: 50px;
  1626.             border-radius: 50%;
  1627.             background-color: var(--primary);
  1628.             margin-right: 1rem;
  1629.             display: flex;
  1630.             align-items: center;
  1631.             justify-content: center;
  1632.             color: white;
  1633.             font-weight: 600;
  1634.         }
  1636.         .client-name {
  1637.             font-weight: 600;
  1638.             color: var(--text);
  1639.         }
  1641.         .client-role {
  1642.             font-size: 0.9rem;
  1643.             color: var(--text-light);
  1644.         }
  1646.         /* CTA Section */
  1647.         .cta {
  1648.             padding: 5rem 0;
  1649.             background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  1650.             color: white;
  1651.             text-align: center;
  1652.         }
  1654.         .cta h2 {
  1655.             font-size: 2.5rem;
  1656.             margin-bottom: 1rem;
  1657.         }
  1659.         .cta p {
  1660.             max-width: 700px;
  1661.             margin: 0 auto 2rem;
  1662.             opacity: 0.9;
  1663.         }
  1665.         .btn-light {
  1666.             background-color: white;
  1667.             color: var(--primary);
  1668.         }
  1670.         .btn-light:hover {
  1671.             background-color: #f8fafc;
  1672.         }
  1674.         /* Footer */
  1675.         footer {
  1676.             background-color: #1f2937;
  1677.             color: white;
  1678.             padding: 4rem 0 2rem;
  1679.         }
  1681.         .footer-content {
  1682.             display: grid;
  1683.             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  1684.             gap: 2rem;
  1685.             margin-bottom: 3rem;
  1686.         }
  1688.         .footer-column h3 {
  1689.             font-size: 1.2rem;
  1690.             margin-bottom: 1.5rem;
  1691.             position: relative;
  1692.             padding-bottom: 0.5rem;
  1693.         }
  1695.         .footer-column h3::after {
  1696.             content: '';
  1697.             position: absolute;
  1698.             bottom: 0;
  1699.             left: 0;
  1700.             width: 40px;
  1701.             height: 3px;
  1702.             background-color: var(--accent);
  1703.         }
  1705.         .footer-column ul {
  1706.             list-style: none;
  1707.         }
  1709.         .footer-column ul li {
  1710.             margin-bottom: 0.8rem;
  1711.         }
  1713.         .footer-column a {
  1714.             color: #d1d5db;
  1715.             text-decoration: none;
  1716.             transition: color 0.3s ease;
  1717.         }
  1719.         .footer-column a:hover {
  1720.             color: white;
  1721.         }
  1723.         .social-links {
  1724.             display: flex;
  1725.             gap: 1rem;
  1726.             margin-top: 1rem;
  1727.         }
  1729.         .social-links a {
  1730.             display: inline-flex;
  1731.             align-items: center;
  1732.             justify-content: center;
  1733.             width: 40px;
  1734.             height: 40px;
  1735.             background-color: rgba(255, 255, 255, 0.1);
  1736.             border-radius: 50%;
  1737.             transition: background-color 0.3s ease;
  1738.         }
  1740.         .social-links a:hover {
  1741.             background-color: var(--primary);
  1742.         }
  1744.         .footer-bottom {
  1745.             text-align: center;
  1746.             padding-top: 2rem;
  1747.             border-top: 1px solid rgba(255, 255, 255, 0.1);
  1748.             color: #9ca3af;
  1749.             font-size: 0.9rem;
  1750.         }
  1752.         /* Responsive Design */
  1753.         @media (max-width: 768px) {
  1754.             .mobile-toggle {
  1755.                 display: block;
  1756.             }
  1758.             nav ul {
  1759.                 display: none;
  1760.             }
  1762.             .header-content {
  1763.                 padding: 0 1rem;
  1764.             }
  1766.             .hero {
  1767.                 padding: 8rem 0 5rem;
  1768.             }
  1770.             .hero h1 {
  1771.                 font-size: 2.5rem;
  1772.             }
  1774.             .calculator-section {
  1775.                 padding: 6rem 0 5rem;
  1776.             }
  1778.             .calculator-container {
  1779.                 flex-direction: column;
  1780.             }
  1782.             .form-row {
  1783.                 flex-direction: column;
  1784.                 gap: 1rem;
  1785.             }
  1787.             .btn-outline {
  1788.                 margin-left: 0;
  1789.                 margin-top: 1rem;
  1790.             }
  1792.             .mobile-menu {
  1793.                 right: -300px;
  1794.             }
  1796.             .mobile-menu.active {
  1797.                 right: 0;
  1798.             }
  1799.         }
  1801.         /* Animation */
  1802.         @keyframes fadeIn {
  1803.             from {
  1804.                 opacity: 0;
  1805.                 transform: translateY(20px);
  1806.             }
  1807.             to {
  1808.                 opacity: 1;
  1809.                 transform: translateY(0);
  1810.             }
  1811.         }
  1813.         .animate-fade-in {
  1814.             animation: fadeIn 0.6s ease forwards;
  1815.         }
  1817.         .delay-1 {
  1818.             animation-delay: 0.1s;
  1819.         }
  1821.         .delay-2 {
  1822.             animation-delay: 0.2s;
  1823.         }
  1825.         .delay-3 {
  1826.             animation-delay: 0.3s;
  1827.         }
  1829.         .delay-4 {
  1830.             animation-delay: 0.4s;
  1831.         }
  1833.         /* Calculator-specific styles */
  1834.         .calculator-tabs {
  1835.             display: flex;
  1836.             margin-bottom: 1.5rem;
  1837.             border-bottom: 1px solid var(--border);
  1838.         }
  1840.         .tab-button {
  1841.             padding: 12px 20px;
  1842.             background: none;
  1843.             border: none;
  1844.             font-size: 1rem;
  1845.             font-weight: 600;
  1846.             cursor: pointer;
  1847.             color: var(--text-light);
  1848.             position: relative;
  1849.         }
  1851.         .tab-button.active {
  1852.             color: var(--primary);
  1853.         }
  1855.         .tab-button.active::after {
  1856.             content: '';
  1857.             position: absolute;
  1858.             bottom: -1px;
  1859.             left: 0;
  1860.             width: 100%;
  1861.             height: 3px;
  1862.             background-color: var(--primary);
  1863.         }
  1865.         .currency-symbol {
  1866.             position: absolute;
  1867.             left: 15px;
  1868.             top: 50%;
  1869.             transform: translateY(-50%);
  1870.             color: var(--text-light);
  1871.             pointer-events: none;
  1872.         }
  1874.         .input-with-symbol {
  1875.             position: relative;
  1876.             padding-left: 35px;
  1877.         }
  1881.         
  1882. /************ ====== End off Service ==============***/
  1885. .section-services {
  1886. \tfont-family: \"Poppins\", sans-serif;
  1887. \tbackground-color: #e6edf7;
  1888. \tcolor: #202020;
  1889. \tpadding-top: 5px;
  1890.     padding-bottom: 10px;
  1891. }
  1893. .section-services .header-section {
  1894. \tmargin-bottom: 0px;
  1895. }
  1897. .section-services .header-section .title {
  1898. \tposition: relative;
  1899.     padding-bottom: 14px;
  1900.     margin-bottom: 25px;
  1901. \tfont-weight: 700;
  1902.     font-size: 32px;
  1903. }
  1905. .section-services .header-section .title:before {
  1906. \tcontent: \"\";
  1907. \tposition: absolute;
  1908. \tbottom: 0;
  1909. \tleft: 50%;
  1910. \ttransform: translateX(-50%);
  1911. \twidth: 50px;
  1912. \theight: 3px;
  1913. \tbackground-color: #ff4500;
  1914.     border-radius: 3px;
  1915. }
  1917. .section-services .header-section .title:after {
  1918. \tcontent: \"\";
  1919. \tposition: absolute;
  1920. \tbottom: 0;
  1921. \tleft: 50%;
  1922.     transform: translateX(30px);
  1923. \twidth: 10px;
  1924. \theight: 3px;
  1925. \tbackground-color: #504f93;
  1926.     border-radius: 3px;
  1927. }
  1929. .section-services .header-section .description {
  1930. \tfont-size: 14px;
  1931.     color: #282828;
  1932. }
  1934. .section-services .single-service {
  1935.     position: relative;
  1936.     margin-top: 30px;
  1937.     background-color: #fff;
  1938.     border-radius: 10px;
  1939.     padding: 40px 30px;
  1940.     overflow: hidden;
  1941. }
  1943. .section-services .single-service .content {
  1944. \tposition: relative;
  1945. \tz-index: 20;
  1946. }
  1948. .section-services .single-service .circle-before {
  1949.     position: absolute;
  1950.     top: 0;
  1951.     right: 0px;
  1952.     transform: translate(40%, -40%);
  1953.     width: 150px;
  1954.     height: 150px;
  1955.     background-color: #ff4500;
  1956.     border: 6px solid #504f93;
  1957.     border-radius: 50%;
  1958.     opacity: 0.5;
  1959.     z-index: 10;
  1960.     transition: all .6s;
  1961. }
  1963. .section-services .single-service:hover .circle-before {
  1964. \twidth: 100%;
  1965. \theight: 100%;
  1966. \ttransform: none;
  1967. \tborder: 0;
  1968. \tborder-radius: 0;
  1969. \topacity: 1;
  1970. }
  1972. .section-services .single-service .icon {
  1973. \tdisplay: inline-block;
  1974. \tmargin-bottom: 26px;
  1975.     width: 70px;
  1976.     height: 70px;
  1977.     background-color: #ff4500;
  1978.     border-radius: 5px;
  1979.     line-height: 70px;
  1980.     text-align: center;
  1981.     color: #fff;
  1982.     font-size: 30px;
  1983.     transition: all .3s;
  1984. }
  1986. .section-services .single-service:hover .icon {
  1987. \tbackground-color: #fff;
  1988. \tcolor: #ff4500;
  1989. }
  1991. .section-services .single-service .title {
  1992.     margin-bottom: 18px;
  1993. \tfont-weight: 700;
  1994.     font-size: 23px;
  1995.     transition: color .3s;
  1996. }
  1998. .section-services .single-service:hover .title {
  1999. \tcolor: #fff;
  2000. }
  2002. .section-services .single-service .description {
  2003.     margin-bottom: 20px;
  2004.     font-size: 14px;
  2005.     transition: color .3s;
  2006. }
  2008. .section-services .single-service:hover .description {
  2009. \tcolor: #fff;
  2010. }
  2012. .section-services .single-service a {
  2013. \tposition: relative;
  2014. \tfont-size: 18px;
  2015.     color: #202020;
  2016.     text-decoration: none;
  2017.     font-weight: 500;
  2018.     transition: color .3s;
  2019. }
  2021. .section-services .single-service:hover a {
  2022. \tcolor: #fff;
  2023. }
  2025. .section-services .single-service a:after {
  2026. \tcontent: \"\";
  2027. \tposition: absolute;
  2028. \tbottom: 0;
  2029. \tleft: 0;
  2030. \tright: 0;
  2031. \theight: 1px;
  2032. \tbackground-color: #ff4500;
  2033. \ttransition: background-color .3s;
  2034. }
  2036. .section-services .single-service:hover a:after {
  2037. \tbackground-color: #fff;
  2038. }
  2040. .section-services .content {
  2041.     background-color: transparent;
  2042. }
  2043. /*****=========== End of Service ===========*/
  2047.     /* css section */
  2048. @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@400;800&family=Roboto:ital,wght@0,500;1,400&display=swap');
  2050. .faq-container{
  2051.   max-width: 600px;
  2052.   margin: 0 auto;
  2053. }
  2054. .faq{
  2055.   background-color: transparent;
  2056.   border: solid 1px #9fa4a8;
  2057.   border-radius: 10px;
  2058.   padding: 30px;
  2059.   margin: 20px 0;
  2060.   position: relative;
  2061.   overflow: hidden;
  2062.   transition: .4s ease;
  2063. }
  2064. .faq.active {
  2065.     background-color: #fff;
  2066.     box-shadow: 0 3px 6px rgba(0, 0, 0, .1), 0 3px 6px rgba(0, 0, 0, .1);
  2067. }
  2068. .faq.active::before, .faq.active::after {
  2069.     content: \"\\f075\";
  2070.     font-family: 'Font Awesome 5 Free';
  2071.     color: #2ecc71;
  2072.     position: absolute;
  2073.     font-size: 7rem;
  2074.     opacity: .2;
  2075.     top: 20px;
  2076.     left: 20px;
  2077.     z-index: 0;
  2078. }
  2079. .faq.active::before{
  2080.   color: #3498db;
  2081.   top: -10px;
  2082.   left: -30px;
  2083.   transform: rotateY(180deg);
  2084. }
  2085. .faq-title{
  2086.   margin: 0 35px 0 0;
  2087. }
  2088. .faq-text{
  2089.   display: none;
  2090.   margin: 30px 0 0;
  2091. }
  2092. .faq.active .faq-text{
  2093.   display: block;
  2094. }
  2095. .faq-toggle {
  2096.     border: 0;
  2097.     border-radius: 50%;
  2098.     background-color: transparent;
  2099.     cursor: pointer;
  2100.     font-size: 16px;
  2101.     display: flex;
  2102.     justify-content: center;
  2103.     align-items: center;
  2104.     position: absolute;
  2105.     right: 30px;
  2106.     top: 30px;
  2107.     height: 30px;
  2108.     width: 30px;
  2109. }
  2110. .faq-toggle .fa-times{
  2111.   display: none;
  2112. }
  2113. .faq.active .faq-toggle .fa-times{
  2114.   display: block;
  2115.   color: #fff;
  2116. }
  2117. .faq.active .faq-toggle .fa-chevron-down{
  2118.   display: none;
  2119. }
  2120. .faq.active .faq-toggle {
  2121.     background: #999;
  2122. }
  2123.     </style>
  2124. </head>
  2126. <body>
  2127.  
  2128.   {{ render(controller(\"App\\\\Controller\\\\General\\\\Template\\\\MenuController:menubare\", {'position': 'offerts'})) }}
  2129.   {% block body %}
  2130.         
  2131.   {% endblock %}
  2132.   {{ render(controller(\"App\\\\Controller\\\\General\\\\Template\\\\MenuController:footer\", {'position': 'offerts'})) }}
  2133.   <div id=\"preloader\"></div>
  2135.   <!-- Vendor JS Files -->
  2136.   
  2137.     
  2139.     <script src=\"{{ asset('templateSyscofie/js/perso.js') }}\"></script>
  2140.     <script src=\"{{ asset('templateSyscofie/vendors/bootstrap/bootstrap.bundle.min.js') }}assets/vendors/bootstrap/bootstrap.bundle.min.js\"></script>
  2141.     <script src=\"{{ asset('templateSyscofie/vendors/gsap/gsap.min.js') }}\"></script>
  2142.     <script src=\"{{ asset('templateSyscofie/vendors/imagesloaded/imagesloaded.pkgd.min.js') }}\"></script>
  2143.     <script src=\"{{ asset('templateSyscofie/vendors/isotope/isotope.pkgd.min.js') }}\"></script>
  2144.     <script src=\"{{ asset('templateSyscofie/vendors/glightbox/glightbox.min.js') }}\"></script>
  2145.     <script src=\"{{ asset('templateSyscofie/vendors/swiper/swiper-bundle.min.js') }}\"></script>
  2146.     <script src=\"{{ asset('templateSyscofie/vendors/aos/aos.js') }}\"></script>
  2147.     <script src=\"{{ asset('templateSyscofie/vendors/purecounter/purecounter.js') }}\"></script>
  2148.     <script src=\"{{ asset('templateSyscofie/js/custom.js') }}\"></script>
  2149.     <script src=\"{{ asset('templateSyscofie/asstes/js/perso.js') }}\"></script>
  2150.     <script src=\"{{ asset('templateSyscofie/js/send_email.js') }}\"></script>
  2154.   <script type=\"text/javascript\">
  2155.     
  2156.     {% block javascript %}
  2157.       <script src=\"https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js\"></script>
  2158.       <script src=\"https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js\"></script>
  2159.       <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js\"></script>
  2160.     {% endblock %}
  2161.   </script>
  2162.   <button id=\"back-to-top\"><i class=\"bi bi-arrow-up-short\"></i></button>
  2163. </body>
  2164. </html>", "Theme/layoutbase.html.twig", "/home/syscofie/public_html/syscofie/templates/Theme/layoutbase.html.twig");
  2165.     }
  2166. }