templates/Theme/layoutbase.html.twig line 1

Open in your IDE?
  1. <html lang="fr">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <!-- mobile responsive meta -->
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  9.   <title>{% block title %}{{ site }}{% endblock %}</title>
  10.   
  11.   {% block meta %} {% endblock %}
  12.   {% block stylesheets %}
  14.   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  15.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  16.   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
  17.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.1/assets/owl.carousel.css">
  18.   <link rel="stylesheet" href="https://themes.audemedia.com/html/goodgrowth/css/owl.theme.default.min.css">
  19.   <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet">
  20.   <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.1/owl.carousel.min.js"></script>
  21.   <!-- Favicons -->
  22.   <link href="{{ asset('template/assets/img/favicon.png') }}" rel="icon">
  23.   <link href="{{ asset('template/assets/img/apple-touch-icon.png') }}" rel="apple-touch-icon">
  26.     <link rel="preconnect" href="https://fonts.googleapis.com">
  27.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  28.     <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
  29.     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  30.     <link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet">
  31.   <!-- Google Fonts -->
  32.   <link rel="preconnect" href="https://fonts.googleapis.com">
  33.   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  34.   
  35.   <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">
  36. <!-- ======= Styles =======-->
  37.     <link href="{{ asset('templateSyscofie/vendors/bootstrap/bootstrap.min.css') }}" rel="stylesheet">
  38.     <link href="{{ asset('templateSyscofie/vendors/bootstrap-icons/font/bootstrap-icons.min.css') }}" rel="stylesheet">
  39.     <link href="{{ asset('templateSyscofie/vendors/glightbox/glightbox.min.css') }}" rel="stylesheet">
  40.     <link href="{{ asset('templateSyscofie/vendors/swiper/swiper-bundle.min.css') }}" rel="stylesheet">
  41.     <link href="{{ asset('templateSyscofie/vendors/aos/aos.css') }}" rel="stylesheet">
  43.       
  44.     <!-- End Styles-->
  45.     <!-- ======= Theme Style =======-->
  46.     <link href="{{ asset('templateSyscofie/css/style.css') }}" rel="stylesheet">
  47.     <link href="{{ asset('templateSyscofie/css/custom.css') }}" rel="stylesheet">
  48.       {# <link href="{{ asset('template/assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet"> #}
  49.     <!-- End Theme Style-->
  50.     
  51.     <!-- ======= Apply theme =======-->
  52.     <script>
  53.       // Apply the theme as early as possible to avoid flicker
  54.       (function() {
  55.       const storedTheme = localStorage.getItem('theme') || 'light';
  56.       document.documentElement.setAttribute('data-bs-theme', storedTheme);
  57.       })();
  58.     </script>
  60.   {% endblock %}
  63.    <style>
  64.         :root {
  65.             --primary: #2563eb;
  66.             --primary-dark: #1d4ed8;
  67.             --secondary: #f59e0b;
  68.             --accent: #10b981;
  69.             --text: #1f2937;
  70.             --text-light: #6b7280;
  71.             --background: #f9fafb;
  72.             --card-bg: #ffffff;
  73.             --border: #e5e7eb;
  74.             --success: #10b981;
  75.             --warning: #f59e0b;
  76.             --danger: #ef4444;
  77.         }
  79.       
  81.         /* Overlay for mobile menu */
  82.         .overlay {
  83.             position: fixed;
  84.             top: 0;
  85.             left: 0;
  86.             width: 100%;
  87.             height: 100%;
  88.             background-color: rgba(0, 0, 0, 0.5);
  89.             opacity: 0;
  90.             visibility: hidden;
  91.             transition: opacity 0.3s ease;
  92.             z-index: 999;
  93.         }
  95.         .overlay.active {
  96.             opacity: 1;
  97.             visibility: visible;
  98.         }
  100.         /* Hero Section */
  101.         .hero {
  102.             padding: 5rem 0 5rem;
  103.             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;
  104.             color: white;
  105.             text-align: center;
  106.         }
  108.         .hero h1 {
  109.             font-size: 3.5rem;
  110.             margin-bottom: 1rem;
  111.             font-weight: 800;
  112.         }
  114.         .hero p {
  115.             font-size: 1.2rem;
  116.             max-width: 700px;
  117.             margin: 0 auto 2rem;
  118.             opacity: 0.9;
  119.         }
  121.         .btn-up {
  122.             display: inline-block;
  123.             padding: 12px 30px;
  124.             background-color: var(--accent);
  125.             color: white;
  126.             border: none;
  127.             border-radius: 50px;
  128.             font-size: 1rem;
  129.             font-weight: 600;
  130.             cursor: pointer;
  131.             transition: all 0.3s ease;
  132.             text-decoration: none;
  133.             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  134.         }
  136.         .btn-up:hover {
  137.             transform: translateY(-2px);
  138.             box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  139.         }
  141.         .btn-outline {
  142.             background-color: transparent;
  143.             border: 2px solid white;
  144.             margin-left: 1rem;
  145.         }
  147.         .btn-outline:hover {
  148.             background-color: white;
  149.             color: var(--primary);
  150.         }
  152.         /* Calculator Section */
  153.         .calculator-section {
  154.             padding: 7rem 0 5rem;
  155.         }
  157.         .section-title {
  158.             text-align: center;
  159.             margin-bottom: 3rem;
  160.         }
  162.         .section-title h2 {
  163.             font-size: 2.5rem;
  164.             color: var(--primary);
  165.             margin-bottom: 1rem;
  166.             position: relative;
  167.             display: inline-block;
  168.         }
  170.         .section-title h2::after {
  171.             content: '';
  172.             position: absolute;
  173.             bottom: -10px;
  174.             left: 50%;
  175.             transform: translateX(-50%);
  176.             width: 80px;
  177.             height: 4px;
  178.             background-color: var(--accent);
  179.             border-radius: 2px;
  180.         }
  182.         .section-title p {
  183.             color: var(--text-light);
  184.             max-width: 700px;
  185.             margin: 1rem auto 0;
  186.         }
  188.         .calculator-container {
  189.             display: flex;
  190.             gap: 2rem;
  191.             margin-top: 2rem;
  192.             flex-wrap: wrap;
  193.         }
  195.         .calculator-form {
  196.             flex: 1;
  197.             min-width: 300px;
  198.             background-color: var(--card-bg);
  199.             padding: 2rem;
  200.             border-radius: 15px;
  201.             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  202.         }
  204.         .form-group {
  205.             margin-bottom: 1.5rem;
  206.         }
  208.         .form-group label {
  209.             display: block;
  210.             margin-bottom: 0.5rem;
  211.             font-weight: 600;
  212.             color: var(--text);
  213.         }
  215.         .form-group input, .form-group select {
  216.             width: 100%;
  217.             padding: 12px 15px;
  218.             border: 1px solid var(--border);
  219.             border-radius: 8px;
  220.             font-size: 1rem;
  221.             transition: border-color 0.3s ease;
  222.         }
  224.         .form-group input:focus, .form-group select:focus {
  225.             outline: none;
  226.             border-color: var(--primary);
  227.             box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  228.         }
  230.         .form-row {
  231.             display: flex;
  232.             gap: 1rem;
  233.         }
  235.         .form-row .form-group {
  236.             flex: 1;
  237.         }
  239.         .results {
  240.             flex: 1;
  241.             min-width: 300px;
  242.             background-color: var(--card-bg);
  243.             padding: 2rem;
  244.             border-radius: 15px;
  245.             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  246.         }
  248.         .results h3 {
  249.             color: var(--primary);
  250.             margin-bottom: 1.5rem;
  251.             padding-bottom: 0.5rem;
  252.             border-bottom: 2px solid var(--border);
  253.         }
  255.         .result-item {
  256.             display: flex;
  257.             justify-content: space-between;
  258.             padding: 1rem 0;
  259.             border-bottom: 1px solid var(--border);
  260.         }
  262.         .result-item:last-child {
  263.             border-bottom: none;
  264.         }
  266.         .result-item .label {
  267.             font-weight: 500;
  268.             color: var(--text-light);
  269.         }
  271.         .result-item .value {
  272.             font-weight: 700;
  273.             color: var(--primary);
  274.         }
  276.         .amortization-table {
  277.             width: 100%;
  278.             border-collapse: collapse;
  279.             margin-top: 2rem;
  280.             overflow: hidden;
  281.             border-radius: 10px;
  282.             overflow: hidden;
  283.         }
  285.         .amortization-table th {
  286.             background-color: var(--primary);
  287.             color: white;
  288.             text-align: left;
  289.             padding: 12px 15px;
  290.         }
  292.         .amortization-table td {
  293.             padding: 12px 15px;
  294.             border-bottom: 1px solid var(--border);
  295.         }
  297.         .amortization-table tr:nth-child(even) {
  298.             background-color: #f8fafc;
  299.         }
  301.         .amortization-table tr:hover {
  302.             background-color: #eff6ff;
  303.         }
  305.         .chart-container {
  306.             margin-top: 2rem;
  307.             height: 300px;
  308.             position: relative;
  309.         }
  311.         .chart {
  312.             width: 100%;
  313.             height: 100%;
  314.             background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
  315.             border-radius: 10px;
  316.             position: relative;
  317.             overflow: hidden;
  318.         }
  320.         .chart-bar {
  321.             position: absolute;
  322.             bottom: 0;
  323.             width: 30px;
  324.             background-color: rgba(255, 255, 255, 0.3);
  325.             border-radius: 5px 5px 0 0;
  326.             transition: height 0.5s ease;
  327.         }
  329.         /* Features Section */
  330.         .features {
  331.             padding: 2rem 0;
  332.             background-color: #f1f5f9;
  333.         }
  335.         .features-grid {
  336.             display: grid;
  337.             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  338.             gap: 2rem;
  339.             margin-top: 3rem;
  340.         }
  342.         .feature-card {
  343.             background-color: var(--card-bg);
  344.             padding: 2rem;
  345.             border-radius: 15px;
  346.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  347.             transition: transform 0.3s ease, box-shadow 0.3s ease;
  348.         }
  350.         .feature-card:hover {
  351.             transform: translateY(-5px);
  352.             box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  353.         }
  355.         .feature-icon {
  356.             font-size: 2.5rem;
  357.             color: var(--primary);
  358.             margin-bottom: 1rem;
  359.         }
  361.         .feature-card h3 {
  362.             margin-bottom: 1rem;
  363.             color: var(--primary);
  364.         }
  366.         /* Testimonials */
  367.         .testimonials {
  368.             padding: 5rem 0;
  369.         }
  371.         .testimonial-grid {
  372.             display: grid;
  373.             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  374.             gap: 2rem;
  375.             margin-top: 3rem;
  376.         }
  378.         .testimonial-card {
  379.             background-color: var(--card-bg);
  380.             padding: 2rem;
  381.             border-radius: 15px;
  382.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  383.             position: relative;
  384.         }
  386.         .testimonial-card::before {
  387.             content: '"';
  388.             position: absolute;
  389.             top: 10px;
  390.             left: 20px;
  391.             font-size: 5rem;
  392.             color: var(--primary);
  393.             opacity: 0.1;
  394.             font-family: Georgia, serif;
  395.         }
  397.         .testimonial-content {
  398.             margin-bottom: 1.5rem;
  399.             font-style: italic;
  400.             color: var(--text-light);
  401.         }
  403.         .client-info {
  404.             display: flex;
  405.             align-items: center;
  406.         }
  408.         .client-avatar {
  409.             width: 50px;
  410.             height: 50px;
  411.             border-radius: 50%;
  412.             background-color: var(--primary);
  413.             margin-right: 1rem;
  414.             display: flex;
  415.             align-items: center;
  416.             justify-content: center;
  417.             color: white;
  418.             font-weight: 600;
  419.         }
  421.         .client-name {
  422.             font-weight: 600;
  423.             color: var(--text);
  424.         }
  426.         .client-role {
  427.             font-size: 0.9rem;
  428.             color: var(--text-light);
  429.         }
  431.         /* CTA Section */
  432.         .cta {
  433.             padding: 5rem 0;
  434.             background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  435.             color: white;
  436.             text-align: center;
  437.         }
  439.         .cta h2 {
  440.             font-size: 2.5rem;
  441.             margin-bottom: 1rem;
  442.         }
  444.         .cta p {
  445.             max-width: 700px;
  446.             margin: 0 auto 2rem;
  447.             opacity: 0.9;
  448.         }
  450.         .btn-light {
  451.             background-color: white;
  452.             color: var(--primary);
  453.         }
  455.         .btn-light:hover {
  456.             background-color: #f8fafc;
  457.         }
  459.         /* Footer */
  460.         footer {
  461.             background-color: #1f2937;
  462.             color: white;
  463.             padding: 4rem 0 2rem;
  464.         }
  466.         .footer-content {
  467.             display: grid;
  468.             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  469.             gap: 2rem;
  470.             margin-bottom: 3rem;
  471.         }
  473.         .footer-column h3 {
  474.             font-size: 1.2rem;
  475.             margin-bottom: 1.5rem;
  476.             position: relative;
  477.             padding-bottom: 0.5rem;
  478.         }
  480.         .footer-column h3::after {
  481.             content: '';
  482.             position: absolute;
  483.             bottom: 0;
  484.             left: 0;
  485.             width: 40px;
  486.             height: 3px;
  487.             background-color: var(--accent);
  488.         }
  490.         .footer-column ul {
  491.             list-style: none;
  492.         }
  494.         .footer-column ul li {
  495.             margin-bottom: 0.8rem;
  496.         }
  498.         .footer-column a {
  499.             color: #d1d5db;
  500.             text-decoration: none;
  501.             transition: color 0.3s ease;
  502.         }
  504.         .footer-column a:hover {
  505.             color: white;
  506.         }
  508.         .social-links {
  509.             display: flex;
  510.             gap: 1rem;
  511.             margin-top: 1rem;
  512.         }
  514.         .social-links a {
  515.             display: inline-flex;
  516.             align-items: center;
  517.             justify-content: center;
  518.             width: 40px;
  519.             height: 40px;
  520.             background-color: rgba(255, 255, 255, 0.1);
  521.             border-radius: 50%;
  522.             transition: background-color 0.3s ease;
  523.         }
  525.         .social-links a:hover {
  526.             background-color: var(--primary);
  527.         }
  529.         .footer-bottom {
  530.             text-align: center;
  531.             padding-top: 2rem;
  532.             border-top: 1px solid rgba(255, 255, 255, 0.1);
  533.             color: #9ca3af;
  534.             font-size: 0.9rem;
  535.         }
  537.         /* Responsive Design */
  538.         @media (max-width: 768px) {
  539.             .mobile-toggle {
  540.                 display: block;
  541.             }
  543.             nav ul {
  544.                 display: none;
  545.             }
  547.             .header-content {
  548.                 padding: 0 1rem;
  549.             }
  551.             .hero {
  552.                 padding: 8rem 0 5rem;
  553.             }
  555.             .hero h1 {
  556.                 font-size: 2.5rem;
  557.             }
  559.             .calculator-section {
  560.                 padding: 6rem 0 5rem;
  561.             }
  563.             .calculator-container {
  564.                 flex-direction: column;
  565.             }
  567.             .form-row {
  568.                 flex-direction: column;
  569.                 gap: 1rem;
  570.             }
  572.             .btn-outline {
  573.                 margin-left: 0;
  574.                 margin-top: 1rem;
  575.             }
  577.             .mobile-menu {
  578.                 right: -300px;
  579.             }
  581.             .mobile-menu.active {
  582.                 right: 0;
  583.             }
  584.         }
  586.         /* Animation */
  587.         @keyframes fadeIn {
  588.             from {
  589.                 opacity: 0;
  590.                 transform: translateY(20px);
  591.             }
  592.             to {
  593.                 opacity: 1;
  594.                 transform: translateY(0);
  595.             }
  596.         }
  598.         .animate-fade-in {
  599.             animation: fadeIn 0.6s ease forwards;
  600.         }
  602.         .delay-1 {
  603.             animation-delay: 0.1s;
  604.         }
  606.         .delay-2 {
  607.             animation-delay: 0.2s;
  608.         }
  610.         .delay-3 {
  611.             animation-delay: 0.3s;
  612.         }
  614.         .delay-4 {
  615.             animation-delay: 0.4s;
  616.         }
  618.         /* Calculator-specific styles */
  619.         .calculator-tabs {
  620.             display: flex;
  621.             margin-bottom: 1.5rem;
  622.             border-bottom: 1px solid var(--border);
  623.         }
  625.         .tab-button {
  626.             padding: 12px 20px;
  627.             background: none;
  628.             border: none;
  629.             font-size: 1rem;
  630.             font-weight: 600;
  631.             cursor: pointer;
  632.             color: var(--text-light);
  633.             position: relative;
  634.         }
  636.         .tab-button.active {
  637.             color: var(--primary);
  638.         }
  640.         .tab-button.active::after {
  641.             content: '';
  642.             position: absolute;
  643.             bottom: -1px;
  644.             left: 0;
  645.             width: 100%;
  646.             height: 3px;
  647.             background-color: var(--primary);
  648.         }
  650.         .currency-symbol {
  651.             position: absolute;
  652.             left: 15px;
  653.             top: 50%;
  654.             transform: translateY(-50%);
  655.             color: var(--text-light);
  656.             pointer-events: none;
  657.         }
  659.         .input-with-symbol {
  660.             position: relative;
  661.             padding-left: 35px;
  662.         }
  666.         
  667. /************ ====== End off Service ==============***/
  670. .section-services {
  671.     font-family: "Poppins", sans-serif;
  672.     background-color: #e6edf7;
  673.     color: #202020;
  674.     padding-top: 5px;
  675.     padding-bottom: 10px;
  676. }
  678. .section-services .header-section {
  679.     margin-bottom: 0px;
  680. }
  682. .section-services .header-section .title {
  683.     position: relative;
  684.     padding-bottom: 14px;
  685.     margin-bottom: 25px;
  686.     font-weight: 700;
  687.     font-size: 32px;
  688. }
  690. .section-services .header-section .title:before {
  691.     content: "";
  692.     position: absolute;
  693.     bottom: 0;
  694.     left: 50%;
  695.     transform: translateX(-50%);
  696.     width: 50px;
  697.     height: 3px;
  698.     background-color: #ff4500;
  699.     border-radius: 3px;
  700. }
  702. .section-services .header-section .title:after {
  703.     content: "";
  704.     position: absolute;
  705.     bottom: 0;
  706.     left: 50%;
  707.     transform: translateX(30px);
  708.     width: 10px;
  709.     height: 3px;
  710.     background-color: #504f93;
  711.     border-radius: 3px;
  712. }
  714. .section-services .header-section .description {
  715.     font-size: 14px;
  716.     color: #282828;
  717. }
  719. .section-services .single-service {
  720.     position: relative;
  721.     margin-top: 30px;
  722.     background-color: #fff;
  723.     border-radius: 10px;
  724.     padding: 40px 30px;
  725.     overflow: hidden;
  726. }
  728. .section-services .single-service .content {
  729.     position: relative;
  730.     z-index: 20;
  731. }
  733. .section-services .single-service .circle-before {
  734.     position: absolute;
  735.     top: 0;
  736.     right: 0px;
  737.     transform: translate(40%, -40%);
  738.     width: 150px;
  739.     height: 150px;
  740.     background-color: #ff4500;
  741.     border: 6px solid #504f93;
  742.     border-radius: 50%;
  743.     opacity: 0.5;
  744.     z-index: 10;
  745.     transition: all .6s;
  746. }
  748. .section-services .single-service:hover .circle-before {
  749.     width: 100%;
  750.     height: 100%;
  751.     transform: none;
  752.     border: 0;
  753.     border-radius: 0;
  754.     opacity: 1;
  755. }
  757. .section-services .single-service .icon {
  758.     display: inline-block;
  759.     margin-bottom: 26px;
  760.     width: 70px;
  761.     height: 70px;
  762.     background-color: #ff4500;
  763.     border-radius: 5px;
  764.     line-height: 70px;
  765.     text-align: center;
  766.     color: #fff;
  767.     font-size: 30px;
  768.     transition: all .3s;
  769. }
  771. .section-services .single-service:hover .icon {
  772.     background-color: #fff;
  773.     color: #ff4500;
  774. }
  776. .section-services .single-service .title {
  777.     margin-bottom: 18px;
  778.     font-weight: 700;
  779.     font-size: 23px;
  780.     transition: color .3s;
  781. }
  783. .section-services .single-service:hover .title {
  784.     color: #fff;
  785. }
  787. .section-services .single-service .description {
  788.     margin-bottom: 20px;
  789.     font-size: 14px;
  790.     transition: color .3s;
  791. }
  793. .section-services .single-service:hover .description {
  794.     color: #fff;
  795. }
  797. .section-services .single-service a {
  798.     position: relative;
  799.     font-size: 18px;
  800.     color: #202020;
  801.     text-decoration: none;
  802.     font-weight: 500;
  803.     transition: color .3s;
  804. }
  806. .section-services .single-service:hover a {
  807.     color: #fff;
  808. }
  810. .section-services .single-service a:after {
  811.     content: "";
  812.     position: absolute;
  813.     bottom: 0;
  814.     left: 0;
  815.     right: 0;
  816.     height: 1px;
  817.     background-color: #ff4500;
  818.     transition: background-color .3s;
  819. }
  821. .section-services .single-service:hover a:after {
  822.     background-color: #fff;
  823. }
  825. .section-services .content {
  826.     background-color: transparent;
  827. }
  828. /*****=========== End of Service ===========*/
  832.     /* css section */
  833. @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@400;800&family=Roboto:ital,wght@0,500;1,400&display=swap');
  835. .faq-container{
  836.   max-width: 600px;
  837.   margin: 0 auto;
  838. }
  839. .faq{
  840.   background-color: transparent;
  841.   border: solid 1px #9fa4a8;
  842.   border-radius: 10px;
  843.   padding: 30px;
  844.   margin: 20px 0;
  845.   position: relative;
  846.   overflow: hidden;
  847.   transition: .4s ease;
  848. }
  849. .faq.active {
  850.     background-color: #fff;
  851.     box-shadow: 0 3px 6px rgba(0, 0, 0, .1), 0 3px 6px rgba(0, 0, 0, .1);
  852. }
  853. .faq.active::before, .faq.active::after {
  854.     content: "\f075";
  855.     font-family: 'Font Awesome 5 Free';
  856.     color: #2ecc71;
  857.     position: absolute;
  858.     font-size: 7rem;
  859.     opacity: .2;
  860.     top: 20px;
  861.     left: 20px;
  862.     z-index: 0;
  863. }
  864. .faq.active::before{
  865.   color: #3498db;
  866.   top: -10px;
  867.   left: -30px;
  868.   transform: rotateY(180deg);
  869. }
  870. .faq-title{
  871.   margin: 0 35px 0 0;
  872. }
  873. .faq-text{
  874.   display: none;
  875.   margin: 30px 0 0;
  876. }
  877. .faq.active .faq-text{
  878.   display: block;
  879. }
  880. .faq-toggle {
  881.     border: 0;
  882.     border-radius: 50%;
  883.     background-color: transparent;
  884.     cursor: pointer;
  885.     font-size: 16px;
  886.     display: flex;
  887.     justify-content: center;
  888.     align-items: center;
  889.     position: absolute;
  890.     right: 30px;
  891.     top: 30px;
  892.     height: 30px;
  893.     width: 30px;
  894. }
  895. .faq-toggle .fa-times{
  896.   display: none;
  897. }
  898. .faq.active .faq-toggle .fa-times{
  899.   display: block;
  900.   color: #fff;
  901. }
  902. .faq.active .faq-toggle .fa-chevron-down{
  903.   display: none;
  904. }
  905. .faq.active .faq-toggle {
  906.     background: #999;
  907. }
  908.     </style>
  909. </head>
  911. <body>
  912.  
  913.   {{ render(controller("App\\Controller\\General\\Template\\MenuController:menubare", {'position': 'offerts'})) }}
  914.   {% block body %}
  915.         
  916.   {% endblock %}
  917.   {{ render(controller("App\\Controller\\General\\Template\\MenuController:footer", {'position': 'offerts'})) }}
  918.   <div id="preloader"></div>
  920.   <!-- Vendor JS Files -->
  921.   
  922.     
  924.     <script src="{{ asset('templateSyscofie/js/perso.js') }}"></script>
  925.     <script src="{{ asset('templateSyscofie/vendors/bootstrap/bootstrap.bundle.min.js') }}assets/vendors/bootstrap/bootstrap.bundle.min.js"></script>
  926.     <script src="{{ asset('templateSyscofie/vendors/gsap/gsap.min.js') }}"></script>
  927.     <script src="{{ asset('templateSyscofie/vendors/imagesloaded/imagesloaded.pkgd.min.js') }}"></script>
  928.     <script src="{{ asset('templateSyscofie/vendors/isotope/isotope.pkgd.min.js') }}"></script>
  929.     <script src="{{ asset('templateSyscofie/vendors/glightbox/glightbox.min.js') }}"></script>
  930.     <script src="{{ asset('templateSyscofie/vendors/swiper/swiper-bundle.min.js') }}"></script>
  931.     <script src="{{ asset('templateSyscofie/vendors/aos/aos.js') }}"></script>
  932.     <script src="{{ asset('templateSyscofie/vendors/purecounter/purecounter.js') }}"></script>
  933.     <script src="{{ asset('templateSyscofie/js/custom.js') }}"></script>
  934.     <script src="{{ asset('templateSyscofie/asstes/js/perso.js') }}"></script>
  935.     <script src="{{ asset('templateSyscofie/js/send_email.js') }}"></script>
  939.   <script type="text/javascript">
  940.     
  941.     {% block javascript %}
  942.       <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
  943.       <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
  944.       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  945.     {% endblock %}
  946.   </script>
  947.   <button id="back-to-top"><i class="bi bi-arrow-up-short"></i></button>
  948. </body>
  949. </html>