#button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
   }
   
   #button.learn-more {
    width: 12rem;
    height: auto;
   }
   
   #button.learn-more .circle {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: relative;
    display: block;
    margin: 0;
    width: 3rem;
    height: 3rem;
    background: #333ed1;
    border-radius: 1.625rem;
   }
   
   #button.learn-more .circle .icon {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
   }
   
   #button.learn-more .circle .icon.arrow {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    left: 0.625rem;
    width: 1.125rem;
    height: 0.125rem;
    background: none;
   }
   
   #button.learn-more .circle .icon.arrow::before {
    position: absolute;
    content: "";
    top: -0.29rem;
    right: 0.0625rem;
    width: 0.625rem;
    height: 0.625rem;
    border-top: 0.125rem solid #fff;
    border-right: 0.125rem solid #fff;
    transform: rotate(45deg);
   }
   
   #button.learn-more .button-text {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem 0;
    margin: 0 0 0 1.85rem;
    color: white;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    text-transform: uppercase;
   }
   
   #button:hover .circle {
    width: 100%;
   }
   
   #button:hover .circle .icon.arrow {
    background: #fff;
    transform: translate(1rem, 0);
   }
   
   #button:hover .button-text {
    color: #fff;
   }
   
   
   
   
   
   
   
   
   
   
   #btn {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
   }
   
   #btn.learn-more {
    width: 8rem;
    height: auto;
   }
   
   #btn.learn-more .circle {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: relative;
    display: block;
    margin: 0;
    width: 2rem;
    height: 2rem;
    background: #333ed1;
    border-radius: 1.625rem;
   }
   
   #btn.learn-more .circle .icon {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
   }
   
   #btn.learn-more .circle .icon.arrow {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    left: 0.2rem;
    width: 1.125rem;
    height: 0.125rem;
    background: none;
   }
   
   #btn.learn-more .circle .icon.arrow::before {
    position: absolute;
    content: "";
    top: -0.29rem;
    right: 0.0625rem;
    width: 0.625rem;
    height: 0.625rem;
    border-top: 0.125rem solid #fff;
    border-right: 0.125rem solid #fff;
    transform: rotate(45deg);
   }
   
   #btn.learn-more .button-text {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.088, 1);
    position: absolute;
    top: 0;
    left: 0;font-size: small;
    right: 0;
    bottom: 0;
    padding: 0.45rem 0;
    margin: 0 0 0 1.85rem;
    color: white;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
    text-transform: uppercase;
   }
   
   #btn:hover .circle {
    width: 100%;
   }
   
   #btn:hover .circle .icon.arrow {
    background: #fff;
    transform: translate(0.6rem, 0);
   }
   
   #btn:hover .button-text {
    color: #fff;
   }
   
   
   
   
   
   
   #btnplus {
     padding: 0;
     margin: 0;
     border: none;
     background: none;
   }
   
   #btnplus {
     --primary-color: #111;
     --hovered-color: #34AD54;
     position: relative;
     display: flex;
     font-weight: 600;
     font-size: 20px;
     gap: 0.5rem;
     align-items: center;
   }
   
   #btnplus p {
     margin: 0;
     position: relative;
     font-size: 20px;
     color: var(--primary-color)
   }
   
   #btnplus::after {
     position: absolute;
     content: "";
     width: 0;
     left: 0;
     bottom: -7px;
     background: var(--hovered-color);
     height: 2px;
     transition: 0.2s ease-out;
   }
   
   #btnplus p::before {
     position: absolute;
   /*   box-sizing: border-box; */
     content: "Read more";
     width: 0%;
     inset: 0;
     color: var(--hovered-color);
     overflow: hidden;
     transition: 0.2s ease-out;
   }
   
   #btnplus:hover::after {
     width: 100%;
   }
   
   #btnplus:hover p::before {
     width: 100%;
   }
   
   #btnplus:hover svg {
     transform: translateX(4px);
     color: var(--hovered-color)
   }
   
   #btnplus svg {
     color: var(--primary-color);
     transition: 0.2s;
     position: relative;
     width: 15px;
     transition-delay: 0.2s;
   }
   
   
   
  
   
   .honeycomb {
     display: flex;
     flex-wrap: wrap;
     list-style: none;
     justify-content: center;
     align-items: center;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0;
     transform: translateY(34.375px);
   }
   .honeycomb-cell {
     flex: 0 0 250px;
     max-width: 200px;
     height: 110.5px;
     margin: 30.4761904762px 10.5px 22px;
     position: relative;
     padding: 0.2em;
     text-align: center;
     z-index: 1;
   }
   .honeycomb-cell__title {
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     hyphens: auto;
     word-break: break-word;
     text-transform: uppercase;
     color: #fff;
     font-weight: 700;
     font-size: 1.50em;
     transition: opacity 350ms;
     -webkit-text-stroke: 1.5px #23388D;
   }
   .honeycomb-cell__title > small {
     font-weight: 300;
     margin-top: 0.25em;
   }
   .honeycomb-cell__image {
   
   }
   .honeycomb-cell::before, .honeycomb-cell::after {
     content: '';
   }
   .honeycomb-cell::before, .honeycomb-cell::after, .honeycomb-cell__image {
     top: -50%;
     left: 0;
     width: 100%;
     height: 200%;
     display: block;
     position: absolute;
     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
     z-index: -1; 
   }
   .honeycomb-cell::before {
     background: #10266d;
     transform: scale(1.055);
   
   }
   .honeycomb-cell::after {
    
   }
   .honeycomb-cell:hover .honeycomb-cell__title {
     opacity: 0;  cursor: pointer;
   
   }
   .honeycomb-cell:hover::before {
     background: #34AD54;
     cursor: pointer;
   }
   .honeycomb-cell:hover::after {
     opacity: 0;
   }
   .honeycomb__placeholder {
     display: none;
     opacity: 0;
     width: 250px;
     margin: 0 12.5px;
   }

   @media (max-width: 430px) {
     .honeycomb-cell {
       margin: 60.25px 25px;
     }
   }
   @media (min-width: 430px) and (max-width: 655px) {
    .honeycomb-cell {
    
      margin: 60.4761904762px 8px 60px;
    }
    
   }
   @media (min-width: 655px) and (max-width: 825px) {
    .honeycomb-cell {
    
      margin: 40.4761904762px 8px 29px;
    }
   }
   @media (min-width: 825px) and (max-width: 1100px) {
    .honeycomb-cell {
    
      margin: 40.4761904762px 8px 27px;
    }
   }
   @media (min-width: 1100px) {
     .honeycomb-cell:nth-child(1) {
   
     }
     .honeycomb-cell:nth-child(2) {
   
     }
     .honeycomb__placeholder:nth-child(5n), .honeycomb__placeholder:nth-child(2) {
     
     }
   }
   
   
   
   .content-overlay {
     background: rgba(0,0,0,0.7);
     position: absolute;
     width: 100%;
     height: 200%;
     top: -50%;
     left: 0;
     bottom: 0;
     right: 0;
     opacity: 0;
     -webkit-transition: all 0.9s ease-in-out 0s;
     -moz-transition: all 0.9s ease-in-out 0s;
     transition: all 0.9s ease-in-out 0s;
     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
   
   }
   
   .honeycomb-cell:hover .content-overlay{
     opacity: 1;
   }
   
   
   .content-details {
     position: absolute;
     text-align: center;
     padding-left: 1em;
     padding-right: 1em;
     width: 100%;
     top: 50%;
     left: 50%;
     opacity: 0;
     -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     -webkit-transition: all 0.3s ease-in-out 0s;
     -moz-transition: all 0.3s ease-in-out 0s;
     transition: all 0.3s ease-in-out 0s;
   }
   
   .honeycomb-cell:hover .content-details{
     top: 50%;
     left: 50%;
     opacity: 1;
   }
   
   .content-details h3{
     color: #fff;
     font-weight: 500;
     letter-spacing: 0.15em;
     margin-bottom: 0.5em;
     text-transform: uppercase;
   }
   .content-details p{
     color: #fff;
     font-size: 0.9em;
     cursor: pointer;
   }
   
   .fadeIn-bottom{
     top: 80%;
   }
   
   .fadeIn-top{
     top: 40%;
   }
   
   .fadeIn-left{
     left: 40%;
   }
   
   .fadeIn-right{
     left: 80%;
   }
   
   .tracking-in-expand {
       animation: tracking-in-expand 3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
   }
   @keyframes tracking-in-expand {
     0% {
       letter-spacing: -0.5em;
       opacity: 0;
     }
     40% {
       opacity: 0.6;
     }
     100% {
       opacity: 1;
     }
   }
   
   
   .counter-content {
     position: absolute;
     width: 100%;
     top: 0;
     margin-top: 110px;
     padding: 12px 0px;
     height: 100px;
     background-color: rgba(250,250,250,0.3);
     z-index: 2000;
   }
   
   .counter-content li {
     display: inline-block;
     font-size: 14px;
     list-style-type: none;
     font-weight: 300;;
     text-transform: capitalize;
     color: #fff;
     min-width: 15%;
   }
   
   .counter-content li span {
     display: block;
     font-size: 50px;
     font-weight: 900;
     margin-top: -10px;
   }
   .next-show {
     position: absolute;
     top: 0;
     margin-top: 210px;
     left: 50%;
     transform: translateX(-50%);
     animation: move-up-down 3s infinite;
     z-index: 222222;
   }
    .next-show {
     color: #fff;
     font-size: 18px;
   }
   
    .next-show i {
     font-size: 12px;
     text-align: center;
   }
   
   .next-show span {
     display: block;
     font-size: 14px;
     font-weight: 300;
   }
   
   @-webkit-keyframes move-up-down {
     0% {
       -webkit-transform: translateY(0px);
               transform: translateY(0px); }
     50% {
       -webkit-transform: translateY(-12px);
               transform: translateY(-12px); }
     100% {
       -webkit-transform: translateY(0px);
               transform: translateY(0px); } 
   }
   
   #modal-container {
        position: fixed;
        display: table;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        transform: scale(0);
        z-index: 1;
   }
    #modal-container.one {
        transform: scaleY(0.01) scaleX(0);
        animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
   }
    #modal-container.one .modal-background .modal {
        transform: scale(0);
        animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
   }
    #modal-container.one.out {
        transform: scale(1);
        animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
   }
    #modal-container.one.out .modal-background .modal {
        animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
   }
    .modal-background {
        display: table-cell;
        background: rgba(0, 0, 0, .8);
        text-align: center;
        vertical-align: middle;
   
   }
    .modal-background .modal {
        display: inline-block;
        border-radius: 10px;
        font-weight: 300;
   margin-top: 7%;
   
     }
    #fermer {
       position: absolute;
     top: 30px;
     right: 30px;
   cursor: pointer;
     }
   
    .content {
        min-height: 100%;
        height: 100%;
        background: white;
        position: relative;
        z-index: 0;
   }
    .content h1 {
        padding: 75px 0 30px 0;
        text-align: center;
        font-size: 30px;
        line-height: 30px;
   }
    .content .buttons {
        max-width: 800px;
        margin: 0 auto;
        padding: 0;
        text-align: center;
   }
    .content .buttons .button {
        display: inline-block;
        text-align: center;
        padding: 10px 15px;
        margin: 10px;
        background: red;
        font-size: 18px;
        background-color: #efefef;
        border-radius: 3px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
        cursor: pointer;
   }
    .content .buttons .button:hover {
        color: white;
        background: #009bd5;
   }
    @keyframes unfoldIn {
        0% {
            transform: scaleY(0.005) scaleX(0);
       }
        50% {
            transform: scaleY(0.005) scaleX(1);
       }
        100% {
            transform: scaleY(1) scaleX(1);
       }
   }
    @keyframes unfoldOut {
        0% {
            transform: scaleY(1) scaleX(1);
       }
        50% {
            transform: scaleY(0.005) scaleX(1);
       }
        100% {
            transform: scaleY(0.005) scaleX(0);
       }
   }
    @keyframes zoomIn {
        0% {
            transform: scale(0);
       }
        100% {
            transform: scale(1);
       }
   }
    @keyframes zoomOut {
        0% {
            transform: scale(1);
       }
        100% {
            transform: scale(0);
       }
   }
    video {
       width: 700px;
      
        outline: none;
        border: 6px solid #52AF30;
        box-shadow: 0 15px 35px rgba(1, 0.6, 0, 1.25);
   }
    @media (max-width: 991px) {
        video {
            max-width: 100%;
       }
   }
   
   .mapdiv{
       width:100%;
       margin: auto;
   }
   @media (max-width: 767px) {
       .mapdiv{
           width:80%;
           margin: auto;
       }  
   } 
   @media (min-width: 768px) and (max-width: 1023px) {
           .mapdiv{
               width:100%;
               margin: auto;
           }     
   }  
   .dot {
       width: 10px;
       height: 10px;
       background-color: red;
       border-radius: 50%; /* Makes the element round */
       display: inline-block;
     }
     #txtcl{
       color:#10266d;
     }
    
   
   
   
   
     
   
   .accordion dt > a {
     text-align: center;
     font-weight: 700;
     padding: 2em;
     display: block;
     text-decoration: none;
     color: #fff;
     -webkit-transition: background-color 0.5s ease-in-out;
     border-bottom: #34AD54 6px solid;
   }
   .accordion dd {
     background-color: #34AD54;
     color:#fafafa;
     font-size: 1em;
     line-height: 1.5em;
   }
   .accordion dd > p {
     padding: 1em 2em 1em 2em;
   }
   
 
   
   
   .accordionTitle {
     background-color: #10266d;
     border-bottom: 1px solid #34AD54;
   }
   .accordionTitle:before {
     content: "+";
     font-size: 1.5em;
     line-height: 0.5em;
     float: left;
     -moz-transition: -moz-transform 0.3s ease-in-out;
     -o-transition: -o-transform 0.3s ease-in-out;
     -webkit-transition: -webkit-transform 0.3s ease-in-out;
     transition: transform 0.3s ease-in-out;
   }
   .accordionTitle:hover {
     background-color: #2c3e50;
   }
   
   .accordionTitleActive {
     background-color:#34495e;
   }
   .accordionTitleActive:before {
     -webkit-transform: rotate(-225deg);
     -moz-transform: rotate(-225deg);
     transform: rotate(-225deg);
   }
   
   .accordionItem {
     height: auto;
     overflow: hidden;
   }
   @media all {
     .accordionItem {
       max-height: 50em;
       -moz-transition: max-height 1s;
       -o-transition: max-height 1s;
       -webkit-transition: max-height 1s;
       transition: max-height 1s;
     }
   }
   @media screen and (min-width: 48em) {
     .accordionItem {
       max-height: 15em;
       -moz-transition: max-height 0.5s;
       -o-transition: max-height 0.5s;
       -webkit-transition: max-height 0.5s;
       transition: max-height 0.5s;
     }
   }
   
   .accordionItemCollapsed {
     max-height: 0;
   }
   
   .animateIn {
     -webkit-animation-name: accordionIn;
     -webkit-animation-duration: 0.65s;
     -webkit-animation-iteration-count: 1;
     -webkit-animation-direction: normal;
     -webkit-animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: both;
     -webkit-animation-delay: 0s;
     -moz-animation-name: normal;
     -moz-animation-duration: 0.65s;
     -moz-animation-iteration-count: 1;
     -moz-animation-direction: alternate;
     -moz-animation-timing-function: ease-in-out;
     -moz-animation-fill-mode: both;
     -moz-animation-delay: 0s;
     animation-name: accordionIn;
     animation-duration: 0.65s;
     animation-iteration-count: 1;
     animation-direction: normal;
     animation-timing-function: ease-in-out;
     animation-fill-mode: both;
     animation-delay: 0s;
   }
   
   .animateOut {
     -webkit-animation-name: accordionOut;
     -webkit-animation-duration: 0.75s;
     -webkit-animation-iteration-count: 1;
     -webkit-animation-direction: alternate;
     -webkit-animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: both;
     -webkit-animation-delay: 0s;
     -moz-animation-name: accordionOut;
     -moz-animation-duration: 0.75s;
     -moz-animation-iteration-count: 1;
     -moz-animation-direction: alternate;
     -moz-animation-timing-function: ease-in-out;
     -moz-animation-fill-mode: both;
     -moz-animation-delay: 0s;
     animation-name: accordionOut;
     animation-duration: 0.75s;
     animation-iteration-count: 1;
     animation-direction: alternate;
     animation-timing-function: ease-in-out;
     animation-fill-mode: both;
     animation-delay: 0s;
   }
   
   @-webkit-keyframes accordionIn {
     0% {
       opacity: 0;
       -webkit-transform: scale(0.8);
     }
     100% {
       opacity: 1;
       -webkit-transform: scale(1);
     }
   }
   @-moz-keyframes accordionIn {
     0% {
       opacity: 0;
       -moz-transform: scale(0.8);
     }
     100% {
       opacity: 1;
       -moz-transform: scale(1);
     }
   }
   @keyframes accordionIn {
     0% {
       opacity: 0;
       transform: scale(0.8);
     }
     100% {
       opacity: 1;
       transform: scale(1);
     }
   }
   @-webkit-keyframes accordionOut {
     0% {
       opacity: 1;
       -webkit-transform: scale(1);
     }
     100% {
       opacity: 0;
       -webkit-transform: scale(0.8);
     }
   }
   @-moz-keyframes accordionOut {
     0% {
       opacity: 1;
       -moz-transform: scale(1);
     }
     100% {
       opacity: 0;
       -moz-transform: scale(0.8);
     }
   }
   @keyframes accordionOut {
     0% {
       opacity: 1;
       transform: scale(1);
     }
     100% {
       opacity: 0;
       transform: scale(0.8);
     }
   }
   
   .download-button {
    position: relative;
    border-width: 0;
    color: white;
    font-size: 15px;
    font-weight: 600;
    border-radius: 4px;
    background-color: #34AD54;
    outline: none;
    z-index: 1;
   }
   
   .download-button .docs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 4px;
    z-index: 1;
    background-color: #242a35;
    border: solid 1px #e8e8e82d;
    transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
   }
   
   .download-button:hover {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
   }
   
   .download {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90%;
    margin: 0 auto;
    z-index: -1;
    border-radius: 4px;
    transform: translateY(0%);
    background-color: #01e056;
    border: solid 1px #01e0572d;
    transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
   }
   
   .download-button:hover .download {
    transform: translateY(100%)
   }
   
   .download svg polyline,.download svg line {
    animation: docs 1s infinite;
   }
   
   @keyframes docs {
    0% {
     transform: translateY(0%);
    }
   
    50% {
     transform: translateY(-15%);
    }
   
    100% {
     transform: translateY(0%);
    }
   }
   
   
   
   .mapdiv path {
       fill: #fff;
       stroke: red;
       stroke-width:4px;
       transition: fill 0.3s;
   }
   
   .mapdiv polygon{
       fill: #fff;
       stroke: red;
       stroke-width:4px;
       transition: fill 0.3s;
   }
   .mapdiv path:nth-child(1) {
       cursor: pointer;
       fill: #52AF30;
   
       transition: fill 0.3s;
   }
   .mapdiv path:nth-child(2) {
       cursor: pointer;
       fill: #52AF30;
   
       transition: fill 0.3s;
   }
   .mapdiv path:nth-child(3) {
       cursor: pointer;
       fill: #52AF30;
   
       transition: fill 0.3s;
   }
   .mapdiv path:nth-child(4) {
       cursor: pointer;
       fill: #52AF30;
   
       transition: fill 0.3s;
   }
   .mapdiv path:nth-child(5) {
       cursor: pointer;
       fill: #52AF30;
   
       transition: fill 0.3s;
   }
   .mapdiv path:nth-child(6) {
       cursor: pointer;
       fill: #52AF30;
   
       transition: fill 0.3s;
   }
   .mapdiv path:nth-child(7) {
       cursor: pointer;
       fill:#52AF30;
   
       transition: fill 0.3s;
   }
   .mapdiv :hover {
       fill:#000;
   }
   
   .video-section {
       background: url(../dd.png) no-repeat fixed center ;
       background-size: cover;
       overflow: hidden;
   }
   .video-overlay {
       background: linear-gradient(to left, rgba(9, 30, 62, .7), rgba(9, 30, 62, .7));
   }
   .video-section h3 {
       font-weight: 600;
       font-size: 38px;
   }
   .video-section i {
       display: block;
       position: relative;
       width: 70px;
       height: 70px;
       border-radius: 100px;
       background: #ffffff;
       color: #52AF30;
       font-size: 30px;
       line-height: 70px;
       margin: 0 auto;
       cursor:pointer;
   
   }
    
     .play_btn:before {
       z-index: 2;
       -webkit-animation: before-animation 1500ms infinite;
               animation: before-animation 1500ms infinite;
     }
     
   .play_btn:after {
       z-index: 1;
       -webkit-animation: after-animation 1500ms infinite;
               animation: after-animation 1500ms infinite;
     }
     
     @-webkit-keyframes before-animation {
       0% {
         -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
                 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
         opacity: 1;
       }
       100% {
         -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
                 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
         opacity: 0;
       }
     }
     
     @keyframes before-animation {
       0% {
         -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
                 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
         opacity: 1;
       }
       100% {
         -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
                 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
         opacity: 0;
       }
     }
     
     @-webkit-keyframes after-animation {
       0% {
         -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
                 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
         opacity: 1;
       }
       100% {
         -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2);
                 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2);
         opacity: 0;
       }
     }
     
     @keyframes after-animation {
       0% {
         -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
                 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
         opacity: 1;
       }
       100% {
         -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2);
                 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2);
         opacity: 0;
       }
     }
     
   
   .video-popup {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: 99999;
       background: rgba(0, 0, 0, 0.5);
       display: none;
       align-content: center !important;
       -ms-flex-line-pack: center !important;
       -ms-flex-align: center !important;
       align-items: center !important;
       -ms-flex-pack: center !important;
       justify-content: center !important;
   }
   .video-popup .video-src {
       position: relative;
       width: 700px;
       max-width: 80%;
   }
   .video-popup .iframe-src {
       width: 100%;
       height: 0;
       padding-top: 56.3%;
       position: relative;
       display: none;
   }
   .video-popup .iframe-src iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
   }
   .section-padding {
       padding:80px 0px;
   }
   
   
   
   #testimonials {
       background-color: #EDEFF4;
   
   }
   
   .testimonial-box {
       background-color: #ffffff;
     box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
       border-radius: 20px;
       padding: 10px 30px;
       margin-top: 10px;
   }
   
   .testimonial-box h6 {
       font-size: 22px;
       font-weight: 700;
       letter-spacing: .05em;
       margin-top: 5px;
       margin-bottom: 0px;
   }
   
   .testimonial-box p {
       font-size: 16px;
       font-weight: 300;
   
       line-height: 1.8;
       padding: 0px;
   }
   
   .testimonial-box i {
       color: #ffffff;
   }
   
   .testimonial-box small {
       color: #8da2b5;
       display: inline-block;
   }
   
   .testimonial-box span {
       font-size: 14px;
       color: #ffffff;
   }
   
   .rating {
       background-color: #0095f7;
   
       border-radius: 50px;
   }
   
   .profile-picture {
     display: inline-block;
     width: 70px;
     height: 70px;
     border-radius: 50%;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
   }
   
   .review-one {
     background-image: url('../img/PDG.jpg');
   }
   .review-two {
     background-image: url('../img/omar-hasnaoui.jpg');
   }
   .review-three {
     background-image: url('../img/Aokacha-hasnaoui.jpg');
   }
   
   .personal-info {
       
       border-bottom: 1px solid #edf1f2;
   }
   
   /*** Booking ***/
   .video {
       position: relative;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }
   
   .video .btn-play {
       position: relative;
       box-sizing: content-box;
       display: block;
       width: 32px;
       height: 44px;
       border-radius: 50%;
       border: none;
       outline: none;
       padding: 18px 20px 18px 28px;
       margin-bottom: 4rem;
   }
   
   .video .btn-play:before {
       content: "";
       position: absolute;
       z-index: 0;
       left: 50%;
       top: 50%;
       transform: translateX(-50%) translateY(-50%);
       display: block;
       width: 100px;
       height: 100px;
       background: #FFFFFF;
       border-radius: 50%;
       animation: pulse-border 1500ms ease-out infinite;
   }
   
   .video .btn-play:after {
       content: "";
       position: absolute;
       z-index: 1;
       left: 50%;
       top: 50%;
       transform: translateX(-50%) translateY(-50%);
       display: block;
       width: 100px;
       height: 100px;
       background: #FFFFFF;
       border-radius: 50%;
       transition: all 200ms;
   }
   
   .video .btn-play img {
       position: relative;
       z-index: 3;
       max-width: 100%;
       width: auto;
       height: auto;
   }
   
   .video .btn-play span {
       display: block;
       position: relative;
       z-index: 3;
       width: 0;
       height: 0;
       border-left: 32px solid var(--primary);
       border-top: 22px solid transparent;
       border-bottom: 22px solid transparent;
   }
   
   @keyframes pulse-border {
       0% {
           transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
           opacity: 1;
       }
   
       100% {
           transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
           opacity: 0;
       }
   }
   
  
.tiittle{
              color: #52AF30;
              font-weight: bold;
              font-size: 20px;
              margin-top: 20px;
              text-align: center;
           }
           .tiitle{
               width: 65px;
               height:65px;       
              transform: scale(1.1); /* Scale the image to 110% when hovering */
   
           }
          .tiitle:hover{
           transform: scale(1.22); /* Scale the image to 110% when hovering */
   
   transition: 1s;
           }
   
     
           .nws {
             border-right: #23388D solid 6px ;
   
   position: relative;
   
   top: 0;
   
   left: 0;
   
   right: 0;
   
   font-family: "Roboto", sans-serif;
   
   box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.3);
   background-color: #fff;
   }
   
   
   
   .nws .tg {
   
   position: absolute;
   border-left: #52AF30 solid 6.5px ;
   
   background: #23388D;
   
   height: 100%;
   
   display: flex;
   
   align-items: center;
   
   padding: 0 10px;
   font-size: 	1.5rem;
   color: white;
   
   font-weight: bold;
   
   z-index: 200;
   
   }
   #bn{
     color:#677994;font-size:1.5rem;
   }
   @media (max-width: 991.98px) {
     .nws .tg {
       font-size: 	1.1rem;
   
   
     }
     #bn{
       font-size: 	1.1rem;
     
     }
   }
   
   .nws ul {
   
   display: flex;
   
   list-style: none;
   
   margin: 0;
   font-size: 	1.4 rem;
   
   }
   
   
   td, th {
   padding: 8px;
   }
   #tr:nth-child(even) {
   background-color: #dddddd;
   }
   
   
   
   .nws ul li {
   
   white-space: nowrap;
   
   padding: 10px 24px;
   
   color: #494949;
   
   position: relative;
   
   font-family: "Roboto", sans-serif;
   
   }
   
   
   
   .nws ul li ::after {
   
   content: "";
   
   width: 1px;
   
   height: 100%;
   
   background: #b8b8b8;
   
   position: absolute;
   
   top: 0;
   
   right: 0;
   
   }
   
   
   
   .nws ul li:last-child::after {
   
   display: none;
   
   }
   
   
   
   @keyframes scroll {
   
   from {
   
     transform: translateX(100%);
   
   }
   
   
   
   to {
   
     transform: translateX(-1083px);
   
   
   
   }
   
   }
   
   
   #br{
       background-color: #fff;height:468px;display:flex;justify-content: center;align-items: center ;
       border-right:#23388D 6px solid;
      
   } 
   @media (max-width: 767px) {
           #br{
             display: none;
           }
       }
   
   
   #annonce{
    height:468px;
    border-left:#52AF30 solid 6px;
   }
   @media (max-width: 768px) {
     #annonce{
    height:400px;
     }
   }
   #ii{
     max-width: 100%;
     height: auto;
   }
   @media screen and (max-width: 768px) {
     #ii {
       max-width: 100%; /* Adjust the image size for screens up to 768px wide */
       height: 100%;
     }
   }
   
   #type{
   position:absolute;top:40%;z-index:222222;background-color: #34AD54;
   }
   @media screen and (max-width: 768px) {
     #type{
   position:absolute;top:18%;z-index:222222;background-color: #34AD54;
   }
   
   }
   
   .goog-te-banner-frame.skiptranslate,.goog-te-gadget-simple img{
       display:none !important;
     }
     .goog-tooltip{
       display: none !important;
     }
     .goog-tooltip:hover{
       display: none !important;
     }
     .goog-text-highlight{
       background-color: transparent !important;
       border: none !important;
       box-shadow: none !important;
     }
   
     body{
       top:0px !important;
     }
  

  @media (max-width: 767px) {
 #yt{ 
  margin-top: 40px;
 }
}