/*===============================================
Template Name: Prygo - Transport & Logistics HTML5 Template
Author:  https://themeforest.net/user/dreamit-solution
Description: Description
Version: 1.0.0
Text Domain: Prygo
Tags:   delivery company, grid, logistics, moving, moving company, shipping, courier, shipping company, storage, transport, transport company, warehouse.
================================================*/
    
/*TABLE OF CONTENTS*/
/*=====================
01. Prygo Header Top Menu Area Css
02. Prygo Nav Menu Area Css 
03. Prygo Slider Area Css
04. Prygo Breadcumb Area Css
05. Prygo Featrue Area Css
06. Prygo Section Title Css
07. Prygo About Area Css
08. Prygo Service Area Css
09. Prygo Service Details Area Css
10. Prygo Video Area Css
11. Prygo Why Choose Us Area Css
12. Prygo Portfolio Area Css 
13. Prygo Portfolio Details Area Css
14. Prygo Testimonial Area Css
15. Prygo Pricing Area Css
16. Prygo Skill Area Css
17. Prygo Team Area Css
18. Prygo Counter Area Css
19. Prygo Contact Area Css
20. Prygo Mission Vision Area Css
21. Prygo Mission Area Css
22. Prygo Contact Address Area Css
23. Prygo Blog Area Css
24. Prygo Blog Details Area Css
25. Prygo Case Study Area Css
26. Prygo Faq Area Css
27. Prygo News Letter Area CSS
28. Prygo Footer Area CSS
29. Prygo Scrollup Section
30. Prygo Search Popup Css
31. Prygo Loader Css
=======================*/

/*=========================================
    <-- Estilos del botón flotante de WhatsApp -->
===========================================*/

.whatsapp-float {
    position: fixed; /* Lo mantiene fijo en la pantalla */
    bottom: 150px; /* Ajusta la altura para evitar solapamientos */
    right: 30px; /* Separado de la derecha */
    background-color: #25d366; /* Color oficial de WhatsApp */
    color: white;
    width: 60px; /* Tamaño del botón */
    height: 60px;
    border-radius: 50%; /* Forma redonda */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px; /* Tamaño del icono */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); /* Efecto de sombra */
    text-decoration: none;
    z-index: 999; /* Asegura que esté sobre otros elementos */
}


.whatsapp-float:hover {
    background-color: #20b358; /* Color ligeramente más oscuro al pasar el mouse */
}

/*=========================================
 <-- Prygo Header Top Menu Area Css  -->
===========================================*/

.header-top-area {
    background: #0E1317;
    padding: 14px 100px 18px;
    position: relative;
}

.header-top-area::before {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    height: 100%;
    width: 28%;
    background: linear-gradient(90deg, #629976 -20.95%, #663366 102.22%);
    clip-path: polygon(12% 0%, 100% 0%, 100% 101%, 0% 101%);
}

.single-header-top-address {
    margin-right: 80px;
    float: left;
}

.single-header-top-address.fast {
    padding-left: 40px;
}

.single-header-top-address.last {
    margin-right: 0;
    position: relative;
}

.single-header-top-address.last:after {
    position: absolute;
    content: "";
    left: -40px;
    top: 8px;
    height: 45px;
    width: 1px;
    background: #aeadad;
}

.top-address-icon {
    float: left;
    margin-right: 20px;
    margin-top: 10px;
}

.top-address-text {
    overflow: hidden;
}

.top-address-text p {
    color: #fff;
    line-height: 20px;
    margin: 0;
}

.top-address-text span {
    color: #CED3D9;
    font-size: 12px;
}

.header-top-button {
    text-align: right;
}

.header-top-button a {
    color: #0E1317;
    padding: 14px 42px;
    position: relative;
    z-index: 1;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
    background: #fff;
    display: inline-block;
    border-radius: 3px;
    z-index: 1;
    transition: .5s;
}

.header-top-button a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: #0E1317;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.header-top-button a i {
    margin-left: 6px;
}

.header-top-button a:hover{
    color: #fff;
}

.header-top-button a:hover:before{
    width: 100%;
}

ul.sub-menu li a span {
    background: #62;
    padding: 5px 10px;
    color: #fff;
    opacity: 1;
    border-radius: 2px;
    margin-left: 5px;
    transition: .5s;
}

ul.sub-menu li:hover a span {
    background: rgba(255,255,255, 0.20);
}

/*=====================================
<--  Prygo Nav Menu Area Css -->
=======================================*/


.prygo_nav_manu {
    padding: 0 100px;
}

.prygo_nav_manu:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 45%;
    width: 28%;
    background: linear-gradient(90deg, #629976 -20.95%, #663366 102.22%);
    clip-path: polygon(0% 0%, 100% 0%, 65% 101%, 0% 101%);
}

.sticky {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    background: #10102E !important;
    transition: .5s;
    z-index: 999;
    padding: 10px 100px;
}

.logo {
    position: relative;
    margin-top: -68px;
}

.sticky .logo {
    margin-top: 0;
}

.sticky.prygo_nav_manu:before {
    display: none;
}

/* prygo Menu Css*/

nav.prygo_menu {
    text-align: right;
}

.prygo_menu ul {
    list-style: none;
    display: inline-block;
}

.prygo_menu>ul>li {
    display: inline-block;
    position: relative;
    z-index: 2;
}

.prygo_menu > ul > li > a {
    display: block;
    margin: 20px 10px 18px;
    -webkit-transition: .5s;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
}

nav.prygo_menu span {
    font-size: 13px;
    padding-left: 6px;
    font-family: FontAwesome;
    opacity: .5;
}

.prygo_menu > ul > li > a:hover {
    color: #629976;
}



/*** Sub Menu Style ***/
.prygo_menu ul .sub-menu {
    position: absolute;
    left: 0;
    top: 130%;
    width: 217px;
    text-align: left;
    background: #fff;
    margin: 0;
    z-index: 1;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    transition: .5s;
    visibility: hidden;
    border-top: 2px solid #629976;
    opacity: 0;
}

.prygo_menu ul li:hover>.sub-menu {
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     visibility: visible;
     top: 100%;
     opacity: 1;
     z-index: 9999;
 }

.prygo_menu ul .sub-menu li {
     position: relative;
}

.prygo_menu ul .sub-menu li a {
    display: block;
    padding: 12px 20px;
    margin: 0;
    line-height: 1.3;
    letter-spacing: normal;
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    -webkit-transition: .1s;
    visibility: inherit !important;
    color: #211e3b !important;
}

.prygo_menu ul .sub-menu li:hover>a,
.prygo_menu ul .sub-menu .sub-menu li:hover>a,
.prygo_menu ul .sub-menu .sub-menu .sub-menu li:hover>a,
.prygo_menu ul .sub-menu .sub-menu .sub-menu .sub-menu li:hover>a {
     background:#629976;
     color: #fff !important;
}

/* sub menu 2 */

.prygo_menu ul .sub-menu .sub-menu {
     left: 100%;
     top: 130%;
     opacity: 0;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     visibility: hidden;
}

.prygo_menu ul .sub-menu li:hover>.sub-menu {
     opacity: 1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     visibility: visible;
     top: 0%;
}

/* sub menu 3 */

.prygo_menu ul .sub-menu .sub-menu li {
    position: relative;
}

.prygo_menu ul .sub-menu .sub-menu .sub-menu {
     right: 100%;
     left: auto;
     top: 130%;
     opacity: 0;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     visibility: hidden;
}

.prygo_menu ul .sub-menu .sub-menu li:hover>.sub-menu {
     opacity: 1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     visibility: visible;
     top: 0%;
}

/* sub menu 4 */

.prygo_menu ul .sub-menu .sub-menu .sub-menu li {
    position: relative;
}

.prygo_menu ul .sub-menu .sub-menu .sub-menu .sub-menu {
}

.prygo_menu ul .sub-menu .sub-menu .sub-menu li:hover>.sub-menu {
     opacity: 1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     visibility: visible;
     top: 0%;
}

.prygo_menu li a:hover:before{
    width:100%;
}

.prygo_nav_manu.sticky .logo_img {
    display: none;
}

.main_sticky {
    display: none;
}

.prygo_nav_manu.sticky .main_sticky {
    display: inherit;
}

.sticky .prygo_menu li a {
    color: #fff;
}

.prygo_nav_manu.sticky a.dtbtn {
    color: #fff;
    background: #F16722;
    border: 2px solid #F16722;
}

.prygo_nav_manu.sticky a.dtbtn:hover {
    color: #43baff;
}

.mobile-menu.mean-container {
    overflow: hidden;
}

/* Header Contact Right CSS */

.header-src-btn {
    display: inline-block;
    position: relative;
    padding-right: 30px;
}

.header-src-btn::before {
    position: absolute;
    content: "";
    right: 0;
    top: -55px;
    width: 2px;
    height: 70px;
    background: #ddd;
}

.header-contact-btc {
    float: right;
}

.search-box-btn.search-box-outer {
    position: absolute;
    bottom: 4px;
    right: 35px;
}

.header-contact {
    display: inline-block;
}

.header-contact-icon {
    display: inline-block;
}

.header-contact-text {
    display: inline-block;
}

.header-contact-icon {
    display: inline-block;
    padding-left: 25px;
    padding-right: 20px;
}

.header-contact-text p {
    font-size: 18px;
    color: #0E1317;
    font-weight: 700;
    margin-bottom: 0;
}

.header-contact-text span {
    font-size: 14px;
    font-weight: 700;
    color: #6D7A8E;
}

.header-contact-icon img {
    margin-top: -30px;
}

.sticky .search-box-btn.search-box-outer i {
    color: #fff;
}

.sticky  .header-contact-text p {
    color: #fff;
}

/* Style Two */

.prygo_nav_manu.style-two {
    padding: 0 100px;
    position: relative;
    margin-bottom: -100px;
    border-bottom: 1px solid #3C4E68;
    z-index: 4;
}

.prygo_nav_manu.style-two:before {
    height: 110%;
    width: 24%;
    background: #FFDA2B;
    clip-path: inherit;
    z-index: 1;
}

.prygo_nav_manu.style-two.inner-page:before {
    background: linear-gradient(to right, #629976 6%, #663366 96%);
}

.prygo_nav_manu.style-two .logo {
    position: inherit;
    margin-top: 0;
    z-index: 1;
}

.prygo_nav_manu.style-two .prygo_menu > ul > li > a {
    color: #fff;
    margin: 32px 10px 30px;
}

.prygo_nav_manu.style-two .header-src-btn {
    padding-right: 0;
}

.prygo_nav_manu.style-two .search-box-btn.search-box-outer {
    position: inherit;
    bottom: inherit;
    right: inherit;
    margin-left: 15px;
}

.prygo_nav_manu.style-two .search-box-btn.search-box-outer i {
    color: #fff;
}

.prygo_nav_manu.style-two .header-src-btn::before {
    display: none;
}

.prygo_nav_manu.style-two .header-contact-text span {
    color: #FFDA2B;
}

.prygo_nav_manu.style-two .header-contact-text p {
    color: #fff;
}

.prygo_nav_manu.style-two .header-contact-btc {
    position: relative;
}

.prygo_nav_manu.style-two .header-contact-btc::before {
    position: absolute;
    content: "";
    left: -10px;
    top: -17px;
    height: 155%;
    width: 1px;
    background: #3C4E68;
}

.prygo_nav_manu.style-two.inner-page .header-contact-text span {
    color: #6D7A8E;
}


/*
<!-- ============================================================== -->
<!-- Prygo Slider Area Css -->
<!-- ============================================================== -->*/

.banner-area {
    background: url(assets/images/slider/slider1.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 1000px;
    position: relative;
}

.banner-title h1 {
    font-size: 110px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 110px;
}

.banner-sub-title {
    padding-bottom: 20px;
}

.banner-sub-title h5 {
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    letter-spacing: 1px;
    padding-left: 8px;
}

.banner-sub-title h5:before {
    position: absolute;
    content: "";
    left: 0;
    top: -6px;
    width: 25px;
    height: 30px;
    background: #629976;
    z-index: -1;
}

.banner-text {
    padding: 35px 0 42px;
}

.banner-text p {
    font-size: 18px;
    color: #fff;
    width: 58%;
}

.button a {
    color: #fff;
    padding: 20px 41px;
    position: relative;
    z-index: 1;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
}

.button a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    z-index: -1;
    transition: .5s;
}

.button a i {
    margin-left: 8px;
    font-weight: 800;
}

.button a:hover:before{
    background: linear-gradient(to right, #663366 6%, #629976 96%);
}

/* Button Style Two */

.button.two a {
    background: #00AFF5;
    z-index: 1;
    position: relative;
    display: inline-block;
    transition: .5s;
    padding: 15px 35px;
    margin: 0 12px;
    border-radius: 3px;
}

.button.two a.active{
    background:#FFDA2B;
    color: #0E1317;
}

.button.two a:before {
    width: 0%;
    background:#FFDA2B;
    border-radius: 3px;
}

.button.two a.active:before {
    background:#00AFF5;
}

.button.two a:hover:before{
    width: 100%;
}

.button.two a:hover{
    color: #0E1317;
}

.button.two a.active:hover{
    color: #fff;
}

/* Slider Area CSS */

.slider-area {
    background: url(assets/images/slider/slider1.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 900px;
    position: relative;
}

.slider-content {
    text-align: center;
    margin-top: 110px;
}

.slider-sp-title {
    position: relative;
    z-index: 1;
}

.slider-sp-title h1 {
    color: transparent !important;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #fff;
    font-size: 300px;
    text-transform: uppercase;
    position: absolute;
    top: -160px;
    opacity: 0.2;
    left: 0;
    right: 0;
    z-index: -1;
}

.slider-title h1 {
    font-size: 95px;
    color: #fff;
    margin: 0;
}

.slider-sub-title h5 {
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    letter-spacing: 1px;
    padding-left: 8px;
    display: inline-block;
}

.slider-sub-title h5:before {
    position: absolute;
    content: "";
    left: 0;
    top: -6px;
    width: 25px;
    height: 30px;
    background: #00AFF5;
    z-index: -1;
}

.slider-button {
    margin-top: 54px;
}



/*
<!-- ============================================================== -->
<!-- Diseño boton background presupuestos Css -->
<!-- ============================================================== -->*/

.section-title {
    margin-bottom: 50px; /* Espacio entre el título y los botones */
}

.tabs li {
    margin-bottom: 20px; /* Espacio entre los elementos de la lista */
}

.tabs .service-btn {
    display: block;
    padding: 5px 40px; /* Menos relleno vertical y más relleno horizontal */
    background: linear-gradient(to right, #663366 6%, #629976 96%);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    text-align: center;
    transition: background 0.3s ease;
}

.tabs .service-btn:hover {
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    color: #fff; /* Mantener el color del texto en hover */
}



/*
<!-- ============================================================== -->
<!-- Formulario Css -->
<!-- ============================================================== -->*/

.custom-form-width {
    width: 100%; /* Ocupa todo el ancho del contenedor padre */
    margin: 0 auto; /* Centra el formulario horizontalmente */
    text-align: center; /* Asegura que el contenido dentro del formulario esté centrado */
}




/*
<!-- ============================================================== -->
<!-- Prygo Breadcumb Area Css -->
<!-- ============================================================== -->*/

.breadcumb-area {
    background: url(assets/images/slider/slider1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 200px 0 115px;
}

.breadcumb-area-nosotros {
    background: url(assets/images/slider/nosotros.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 200px 0 115px;
}

.breadcumb-area-mudanzas {
    background: url(assets/images/slider/mudanzas.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 200px 0 115px;
}

.breadcumb-area-transporte {
    background: url(assets/images/slider/transporte.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 200px 0 115px;
}

.breadcumb-area-vaciado {
    background: url(assets/images/slider/vaciado.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 200px 0 115px;
}

.breadcumb-area-presupuestos {
    background: url(assets/images/slider/presupuestos.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 200px 0 115px;
}

.breadcumb-area-contacto {
    background: url(assets/images/slider/contacto.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 200px 0 115px;
}

.breadcumb-area-politicas {
    background: url(assets/images/slider/politicas.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 200px 0 115px;
}

.breadcumb-content {
    text-align: center;
}

.breadcumb-title h1 {
    font-size: 90px;
    color: #fff;
}

.breadcumb-content-menu {
    padding-top: 10px;
}

.breadcumb-content-menu ul li {
    display: inline-block;
    list-style: none;
}

.breadcumb-content-menu ul li a {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

.breadcumb-content-menu ul li a i{
    margin-left: 10px;
}

.breadcumb-content-menu ul li span {
    color: #629976;
    font-size: 20px;
    font-weight: 500;
    margin-left: 10px;
}


/*
<!-- ============================================================== -->
<!-- Prygo Featrue Area Css -->
<!-- ============================================================== -->*/

.row.fcr-tp {
    background: #F3F3F5;
    padding: 50px 30px 20px;
    border-radius: 3px;
    position: relative;
    margin-top: -125px;
    z-index: 1;
}

.single-feature {
    background: #fff;
    padding: 32px 30px 44px;
    margin-bottom: 30px;
    transition: .5s;
    position: relative;
    z-index: 1;
}

.single-feature::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: url(assets/images/resource/fc1.png);
    z-index: -1;
    transition: .5s;
}

.feature-icon {
    float: left;
    margin-right: 28px;
    margin-top: 4px;
}

.feature-icon i {
    font-size: 36px;
    background: #F3F3F5;
    height: 70px;
    width: 70px;
    display: inline-block;
    text-align: center;
    border: 4px solid #E7E9EC;
    line-height: 74px;
    border-radius: 100%;
    transition: .5s;
}

.feature-title h2 {
    font-size: 22px;
}

/* Feature Hover CSS */

.single-feature:hover::before{
    width: 100%;
}

.single-feature:hover .feature-title h2{
    color: #fff;
}

.single-feature:hover .feature-icon i{
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    border-color: #fff;
    color: #fff;
}


/*
<!-- ============================================================== -->
<!-- Prygo Section Title Css -->
<!-- ============================================================== -->*/

.section-title {
    position: relative;
    z-index: 1;
}

.section-title h1 {
    margin: 0;
    font-weight: 800;
}

.section-title h5 {
    font-size: 16px;
    color: #0E1317;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    z-index: 1;
    letter-spacing: 1px;
    padding-left: 8px;
    margin-bottom: 15px;
}

.section-title h5:before {
    position: absolute;
    content: "";
    left: 0;
    top: -6px;
    width: 25px;
    height: 30px;
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    z-index: -1;
}

h2.shape-title {
    color: transparent !important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #0E1317;
    font-size: 120px;
    text-transform: uppercase;
    position: absolute;
    top: -31px;
    opacity: 0.1;
    left: 25px;
    z-index: -1;
}

.section-title p {
    padding-top: 24px;
}

.section-title.text-center {
    margin-bottom: 62px;
}

.section-title.text-center h2.shape-title {
    left: 0;
    right: 0;
}

/* Style Two */

.section-title.style-two p {
    padding-top: 24px;
    color: #6D7A8E;
}

.section-title.style-two h5:before {
    background:#00AFF5;
}

.about-area .section-title h5 {
    margin-top: 0;
}


/*
<!-- ============================================================== -->
<!-- Prygo About Area Css -->
<!-- ============================================================== -->*/

.about-area {
    padding: 120px 0 115px;
}

.about-content {
    padding-left: 20px;
}

.about-content-inner {
    padding-top: 16px;
}

.about-content-icon i {
    font-size: 20px;
    color: #629976;
    height: 45px;
    width: 45px;
    line-height: 43px;
    border: 1px solid #629976;
    text-align: center;
    border-radius: 50%;
}

.about-content-icon {
    float: left;
    margin-right: 25px;
}

.about-content-inner-text {
    overflow: hidden;
}

.about-content-inner-text p {
    width: 90%;
}

.about-content-inner-text h3 {
    font-size: 18px;
    padding-bottom: 10px;
    margin-top: 4px;
}

.about-button {
    padding-top: 32px;
}

/* Style Two */

.about-content-thumb {
    float: left;
    margin-right: 20px;
    margin-top: 5px;
}

.style-two .about-thumb img {
    width: 100%;
    margin-left: -25px;
}

.about-content-inner-text p {
    color: #6D7A8E;
}


/*
<!-- ============================================================== -->
<!-- Prygo Service Area Css -->
<!-- ============================================================== -->*/

.service-area {
    background: url(assets/images/resource/howit.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 115px 0 110px;
}

.single-service {
    overflow: hidden;
    background: #fff;
    margin-bottom: 30px;
}

.service-thumb {
    position: relative;
}

.service-thumb:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: rgba(0,0,0,0.3);
    transition: .5s;
}

.single-service:hover .service-thumb:before{
    width: 100%;
}

.service-content {
    text-align: center;
    padding: 0 38px 37px;
}

.service-content-icon {
    position: relative;
    margin-top: -44px;
}

.service-content-icon i {
    font-size: 40px;
    display: inline-block;
    height: 90px;
    width: 90px;
    text-align: center;
    line-height: 90px;
    color: #fff;
    border: 4px solid #fff;
    transition: .5s;
    position: relative;
    z-index: 1;
}

.service-content-icon i:after{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    transition: .5s;
    z-index: -1;
}

.service-content-inner h2 {
    font-size: 24px;
    padding-top: 12px;
}

.service-content-inner p {
    line-height: 26px;
    padding-top: 14px;
}

.service-content-button {
    padding-top: 15px;
}

.service-content-button a {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    border: 2px solid #629976;
    display: block;
    padding: 9px 20px;
    color: #629976;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.service-content-button a i {
    margin-left: 10px;
}

.service-content-button a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    z-index: -1;
    transition: .5s;
}

.single-service:hover .service-content-button a{
    color: #fff;
}

.single-service:hover .service-content-button a:before{
    width: 100%;
}

.single-service:hover .service-content-icon i:after{
    background: #629976;
}

.owl-dots {
    text-align: center;
    padding: 18px 0 0;
}

.owl-dot {
    display: inline-block;
    margin: 0 4px;
}

.owl-dot.active {
    display: inline-block;
    border: 2px solid #663366;
    border-radius: 50%;
    width: 24px;
    height: 24px;
}

.owl-dot.active span {
    border-radius: 50%;
    background-color: #629976;
    display: inline-block;
    position: relative;
    top: -3px;
    border: 2px solid #fff;
    width: 14px;
    height: 14px;
}

.owl-dot span{
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #629976;
    display: inline-block;
    position: relative;
    top: -3px;
}

/* Service Style Two */

.service-area.style-two {
    background: url(assets/images/resource/sr-bg2.jpg);
    padding: 115px 0 370px;
}

.style-two .service-thumb {
    position: relative;
}

.style-two .service-content-box {
    position: absolute;
    bottom: 20px;
}

.style-two .service-content-icon {
    position: absolute;
    left: 50px;
    top: -8px;
    z-index: 2;
}

.style-two .service-content-icon i {
    border-radius: 50%;
    font-size: 45px;
    line-height: 94px;
}

.style-two .service-content-icon i:after {
    background: #629976;
    border-radius: 50%;
}

.style-two .service-content-inner {
    background: #fff;
    margin: 0 20px;
    padding: 30px 30px 12px;
    clip-path: polygon(0% 0%, 70% 0%, 100% 100%, 0% 101%);
    transition: .5s;
    position: relative;
    z-index: 1;
}

.style-two .service-content-inner::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: #00AFF5;
    z-index: -1;
    transition: .5s;
}

.style-two .service-content-inner h2 {
    transition: .5s;
}

.style-two .service-content-inner p {
    width: 90%;
    transition: .5s;
    padding-top: 12px;
}

.style-two .service-sp-title {
    color: transparent !important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #0E1317;
    font-size: 120px;
    text-transform: uppercase;
    position: absolute;
    top: -16px;
    opacity: 0.1;
    font-size: 40px !important;
    right: 112px;
    z-index: 1;
}

.style-two .service-content-button {
    padding-top: 0;
    position: absolute;
    right: 18px;
    bottom: 32px;
}

.style-two .service-content-button a {
    display: inline-block;
    background: #FFDA2B;
    padding: 8px 16px;
    font-size: 16px;
    border: transparent;
    color: #0E1317;
}

.style-two .service-content-button a:before {
    display: none;
}

.style-two .service-content-button a i {
    margin-left: 0;
}

.style-two .single-service:hover .service-content-button a {
    color: #0E1317;
}

.style-two .single-service:hover .service-content-icon i:after{
    background: #FFDA2B;
}

.style-two .single-service:hover .service-content-inner::before {
    width: 100%;
}

.style-two .single-service:hover .service-content-inner h2,
.style-two .single-service:hover .service-content-inner p{
    color: #fff;
}

/* Style Three */

.service-area.style-two.three {
    padding: 115px 0 90px;
}

.style-two.three .service-content-inner::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    z-index: -1;
    transition: .5s;
}

.style-two.three .single-service:hover .service-content-icon i:after{
    background: #fff;
}

.style-two.three .single-service:hover .service-content-icon i{
    border-color: #629976;
    color: #629976;
}

.style-two.three .service-content-button a {
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    color: #FFF;
}

.style-two.three .single-service:hover .service-content-button a {
    background: #629976;
    color: #fff;
}

/*
<!-- ============================================================== -->
<!-- Prygo Service Details Area Css -->
<!-- ============================================================== -->*/

.service-detials-area {
    padding: 120px 0 90px;
}

/*widget search*/

.widget_search {
    padding: 30px 30px 30px;
    border-radius: 4px;
    margin-bottom: 30px;
    background: #fff;
    box-shadow: 0px 0px 70px rgb(0 0 0 / 5%);
}

.service-detials-area .widget_search {
    background: #F5F5F5;
    box-shadow: none;
}

.widget_search form {
    position: relative;
}

.widget_search input {
    border-radius: 4px;
    padding-left: 20px;
    height: 60px;
    width: 100%;
    position: relative;
    color: #0D0E14;
    border: 0;
    border: 2px solid #629976;
}

button.icons {
    border: 0;
    font-size: 18px;
    color: #fff;
    padding: 1px 15px;
    position: absolute;
    right: 0;
    top: 0;
    height: 60px;
    width: 60px;
    background: #629976;
    border-radius: 0 4px 4px 0;
}

/*widget categories box*/

.service-detials-area .widget-categories-box {
    background: #F5F5F5;
    padding: 42px 40px 25px;
    border-radius: 5px;
    margin-bottom: 30px;
    box-shadow: none;
}

.widget-categories-box {
    background: #fff;
    padding: 42px 40px 25px;
    border-radius: 5px;
    margin-bottom: 30px;
    box-shadow: 0px 0px 70px rgb(0 0 0 / 5%);
}

/*title*/

.categories-title h4 {
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    border-bottom: 2px solid #629976;
    padding: 0px 0 15px;
    margin: 0 0 30px;
    position: relative;
    padding-left: 10px;
}

.categories-title h4:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 24px;
    width: 3px;
    background: #629976;
}

/*categories menu*/

.widget-categories-menu ul {
    display: block;
}

.widget-categories-menu ul li {
    display: block;
    list-style: none;
    margin-bottom: 15px;
    background: transparent;
    padding: 16px 20px 16px;
    border-radius: 4px;
    transition: .5s;
    border: 2px solid #CED3D9;
    position: relative;
    z-index: 1;
}

.widget-categories-menu ul li:hover {
    border: 2px solid #629976;
}

.widget-categories-menu ul li:before{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    transition: .5s;
    z-index: -1;
}

.widget-categories-menu ul li:hover:before{
    width: 100%;
}

.widget-categories-menu ul li a {
    display: block;
    color: #0D0E14;
    transition: .5s;
}

.widget-categories-menu ul li a span {
    display: inline-block;
    float: right;
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    height: 22px;
    width: 22px;
    font-size: 12px;
    text-align: center;
    margin-top: 6px;
    color: #fff;
    line-height: 22px;
    transition: .5s;
}

.widget-categories-menu ul li:hover a span {
    background: #fff;
    color: #629976;
}

.widget-categories-menu ul li:hover a {
    color: #fff;
}

.pdf-button a {
    display: block;
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    padding: 15px 30px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.pdf-button a i {
    float: right;
    font-size: 20px;
    margin-top: 2px;
}

/* Sidber Recent Post */

.sidber-widget-recent-post {
    margin-bottom: 20px;
    background: #F3F3F5;
    overflow: hidden;
}

.sidber-widget-recent-post .recent-widget-content {
    padding-top: 20px;
}

.sidber-widget-recent-post .recent-widget-content a {
    color: #0E1317;
    font-size: 18px;
}

.sidber-widget-recent-post .recent-widget-content span i {
    margin-right: 7px;
    color: #629976;
}

/* Sidber Achivement CSS */

.widget-achivement ul li {
    list-style: none;
    margin-bottom: 6px;
}

.widget-achivement ul li a i {
    font-size: 17px;
    margin-right: 3px;
}

.widget-achivement ul li a {
    font-weight: 600;
    transition: .5s;
}

.widget-achivement ul li a span {
    float: right;
}

.widget-achivement ul li a:hover{
    color: #629976;
}

/* Sidber Widget Gallery CSS */

.widget-gallery {
    overflow: hidden;
}

.widget-gallery-thumb {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

/* Sidber Widget Tags CSS */

.widget-tags a {
    display: inline-block;
    border: 2px solid #9DA7B3;
    padding: 3px 20px;
    margin: 4px 3px;
    border-radius: 2px;
    color: #0E1317;
    font-weight: 500;
    position: relative;
    transition: .5s;
    z-index: 1;
}

.widget-tags a:before {
    position: absolute;
    content: "";
    left: -2px;
    top: 0px;
    height: 102%;
    width: 0%;
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.widget-tags a:hover{
    color: #fff;
    border-color: #629976;
}

.widget-tags a:hover:before{
    width: 102%;
}

/* Service Details Content CSS */

.service-details-main-title {
    padding: 20px 0 18px;
}

.service-details-main-title h1 {
    font-size: 36px;
}

.service-details-video-thumb {
    position: relative;
    padding-top: 20px;
}

.service-details-overview-title {
    padding: 22px 0 15px;
}

.service-details-overview-title h2 {
    font-size: 30px;
}

.service-details-overview-list ul li {
    list-style: none;
    position: relative;
    padding-left: 30px;
    padding-right: 12px;
    padding-bottom: 12px;
}

.service-details-overview-list ul li::before {
    position: absolute;
    content: "";
    left: 0;
    top: 9px;
    height: 12px;
    width: 12px;
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    border-radius: 50%;
}

.service-details-choose-us {
    padding-bottom: 10px;
}

.service-details-choose-us-title {
    padding: 5px 0 15px;
}

.service-details-choose-us-title h2 {
    font-size: 30px;
}

.service-details-box {
    background: #F3F3F5;
    padding: 30px 30px 10px;
    margin-bottom: 30px;
}

.service-details-number {
    position: absolute;
    right: 60px;
}

.service-details-number h2 {
    font-size: 48px;
    text-transform: none;
    margin: 0;
    margin: 0;
    color: transparent !important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #0E1317;
    opacity: .5;
}

.service-details-icon i {
    font-size: 50px;
    color: #629976;
}

.service-details-content h2 {
    font-size: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.service-details-thumb img {
    width: 100%;
}

.service-details-video-thumb-inner img {
    width: 100%;
}


/*
<!-- ============================================================== -->
<!-- Prygo Video Area Css -->
<!-- ============================================================== -->*/

.video-area {
    background: url(assets/images/background-inicio.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 105px 0 385px;
}

.video-button {
    padding-top: 42px;
}

.video-icon {
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    padding-top: 8px;
}

.video-icon a {
    width: 80px;
    height: 80px;
    line-height: 80px;
    display: inline-block;
    text-align: center;
    border-radius: 100%;
    position: relative;
    color: #0E1317;
    -webkit-animation: ripple-white 1s linear infinite;
    animation: ripple-blue 1s linear infinite;
    -webkit-transition: .5s;
    background: #fff;
    font-size: 25px;
    z-index: 1;
}

/* Video Style Two */

.video-area.style-two {
    background: url(assets/images/resource/video-bg2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 105px 0 435px;
}

.video-area.style-two .pr-video .video-icon {
    bottom: -110px;
    top: inherit;
}


@-webkit-keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0)
    }
}

@keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0);
        box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0)
    }
}



/*
<!-- ============================================================== -->
<!-- Prygo Why Choose Us Area Css -->
<!-- ============================================================== -->*/

.why-choose-us-area {
    padding: 0 100px 0 0;
    position: relative;
    z-index: 1;
}

.why-choose-us-area:before {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    height: 56%;
    width: 100%;
    background: url(assets/images/resource/howit.jpg);
    z-index: -1;
}

.row.upper-bx {
    background: #fff;
    padding: 30px 40px 30px 18px;
    position: relative;
    margin-top: -250px;
}

.choose-us-thumb img {
    width: 100%;
}

.icon-box {
    padding-right: 30px;
}

.icon-box-icon {
    float: left;
    margin-right: 20px;
    margin-top: 18px;
}

.icon-box-icon i {
    font-size: 48px;
    color: #629976;
}

.icon-box-content {
    overflow: hidden;
}

.icon-box-content h2 {
    font-size: 22px;
    padding-bottom: 10px;
}


/*
<!-- ============================================================== -->
<!-- Prygo How IT Work Area Css -->
<!-- ============================================================== -->*/

.how-it-work-area {
    background: url(assets/images/resource/howit.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 115px 0 82px;
}

.row.it-shape {
    position: relative;
    padding-top: 40px;
}

.row.it-shape:after {
    position: absolute;
    content: "";
    top: -7px;
    left: 162px;
    background: url(assets/images/resource/sp.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 10%;
    margin: auto;
}

.single-how-it-work {
    text-align: center;
    margin-bottom: 30px;
    padding: 0 10px;
}

.how-it-work-icon i {
    display: inline-block;
    height: 150px;
    width: 150px;
    text-align: center;
    line-height: 172px;
    background: #663366;
    font-size: 80px;
    color: #629976;
    border-radius: 100px 100px 100px 0;
    transition:.5s;
}

.how-it-work-content h2 {
    font-size: 22px;
    padding: 15px 0 12px;
}

.single-how-it-work:hover .how-it-work-icon i{
    background:#629976;
    color:#fff;
}
/*
<!-- ============================================================== -->
<!-- Prygo Portfolio Area Css -->
<!-- ============================================================== -->*/

.portfolio-area {
    padding: 115px 0 0;
}

.portfolio-area.style-three {
    padding: 115px 0 90px;
}

.row.port-bt {
    position: relative;
    margin-bottom: -120px;
}

.single-portfolio {
    margin-bottom: 30px;
}

.portfolio-thumb {
    position: relative;
    z-index: 1;
}

.portfolio-thumb:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    height: 0%;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 7, 15, 0.16) 0%, #00070F 100%);
    transition: .5s;
}

.portfolio-thumb img {
    width: 100%;
}

.portfolio-content {
    position: absolute;
    bottom: 0;
    padding: 0 40px;
    transition: .5s;
    opacity: 0;
}

.portfolio-area.style-three .portfolio-content {
    padding: 0 30px;
}

.portfolio-content span a{
    height: 60px;
    width: 60px;
    display: inline-block;
    text-align: center;
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    line-height: 60px;
    border-radius: 50%;
    font-size: 40px;
    color: #fff;
}

.portfolio-content h2 {
    font-size: 24px;
    padding: 14px 0 10px;
}

.portfolio-content h2 a {
    font-weight: 800;
    color: #fff;
}

.portfolio-content p {
    color: #fff;
}

.single-portfolio:hover .portfolio-thumb:before{
    height: 100%;
}

.single-portfolio:hover .portfolio-content{
    bottom: 20px;
    opacity: 1;
}

/* Style Two */

.portfolio-area.style-two {
    padding: 0 0 0 120px;
} 

.portfolio-area .row.prts-bgt {
    background: url(assets/images/resource/prts-bg.jpg);
    padding: 116px 0 90px 100px;
    position: relative;
    margin-top: -320px;
}

.style-two .portfolio-content span a {
    background: #FFDA2B;
    color: #0E1317;
}


/*
<!-- ============================================================== -->
<!-- Prygo Portfolio Details Area Css -->
<!-- ============================================================== -->*/

.portfolio-detials-area {
    padding: 95px 0 100px;
}

.portfolio-details-main-title {
    padding: 0 0 18px;
}

.portfolio-details-text {
    padding-bottom: 1px;
}

.portfolio-details-overview-title {
    padding: 22px 0 15px;
}

.portfolio-details-overview-title h2 {
    font-size: 30px;
    font-weight: 800;
}

.portfolio-details-overview-list ul li {
    list-style: none;
    position: relative;
    padding-left: 30px;
    padding-right: 12px;
    padding-bottom: 12px;
}

.portfolio-details-overview-list ul li::before {
    position: absolute;
    content: "";
    left: 0;
    top: 9px;
    height: 12px;
    width: 12px;
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    border-radius: 50%;
}

.portfolio-details-thumb img {
    width: 100%;
}

.portfolio-details-thumb {
    margin-top: 20px;
}

.portfolio-details-clients-title {
    padding-bottom: 10px;
}

.portfolio-details-clients-title h2 {
    font-size: 30px;
    font-weight: 800;
}


/*
<!-- ============================================================== -->
<!-- Prygo Testimonial Area Css -->
<!-- ============================================================== -->*/

.testimonial-area {
    background: url(assets/images/resource/test-bg.jpg);
    padding: 210px 0 120px;
}

.testimonial-area.style-two {
    padding: 120px 0 120px;
}

.single-testimonial {
    background: #fff;
    text-align: center;
    padding: 50px 10px 28px;
}

.testimonial-thumb img {
    text-align: center !important;
    display: inline-block !important;
}

.testimonial-content h2 {
    font-size: 22px;
    padding-top: 20px;
}

.testimonial-content span {
    color: #629976;
    font-weight: 500;
}

.testimonial-content p {
    padding-top: 20px;
}


/*
<!-- ============================================================== -->
<!-- Prygo Pricing Area Css -->
<!-- ============================================================== -->*/

.pricing-area {
    padding: 115px 0 90px;
}

.price-spt-thumb {
    position: relative;
}

.price-spt-thumb-inner {
    position: absolute;
    bottom: -200px;
    right: 0;
    left: 203px;
    margin: auto;
}

.single-pricing {
    box-shadow: 0 2px 4px #0003;
    margin-bottom: 30px;
}

.pricing-head-content {
    background: url(assets/images/resource/pr1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 40px 30px 85px;
    text-align: center;
    position: relative;
}

.single-pricing.two .pricing-head-content {
    background: url(assets/images/resource/pr3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.pricing-title {
    margin-bottom: 30px;
}

.pricing-title h2 {
    font-size: 30px;
    color: #fff;
}

.pricing-tk {
    height: 120px;
    width: 120px;
    display: inline-block;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    border: 8px solid #00AFF5;
    top: 120px;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 2;
    transition: .5s;
}

.pricing-tk h2 {
    font-weight: 800;
    padding-top: 15px;
    line-height: 32px;
}

.pricing-tk span {
    font-size: 14px;
    color: #0E1317;
    font-weight: 700;
}

.pricing-body {
    padding: 60px 45px 50px;
    position: relative;
    z-index: 1;
}

.pricing-body::before {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    background: #0E1317;
    z-index: -1;
    transition: .5s;
 }

.pricing-body::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url(assets/images/resource/pr-shape1.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    transition: .5s;
}

.pricing-body ul li {
    padding-bottom: 12px;
    list-style: none;
    transition: .5s;
}

.pricing-body ul li span {
    float: right;
}

.pricing-body ul li span i {
    color: #00AFF5;
    font-size: 12px;
    height: 25px;
    width: 25px;
    border: 2px solid #00AFF5;
    display: inline-block;
    text-align: center;
    line-height: 23px;
    border-radius: 50%;
}

.pricing-button {
    margin-top: 26px;
}

.pricing-button a {
    display: inline-block;
    padding: 14px 35px;
    background: #00AFF5;
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 3px;
    transition: .5s;
}

.pricing-button a i {
    margin-left: 5px;
}

/* Pricing Hover CSS */

.single-pricing:hover .pricing-body::before{
    height: 100%;
}

.single-pricing:hover .pricing-body::after{
    background: url(assets/images/resource/pr-shape.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.single-pricing:hover .pricing-body ul li{
    color: #fff;
}

.single-pricing:hover .pricing-tk {
    border-color: #FFDA2B;
}

.single-pricing:hover .pricing-button a {
    background: #FFDA2B;
    color: #0E1317;
}

/* Pricing Active */

.single-pricing.active .pricing-head-content {
    background: url(assets/images/resource/pr2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.single-pricing.active .pricing-tk {
    border: 8px solid #FFDA2B;
}

.single-pricing.active .pricing-button a {
    background: #FFDA2B;
    color: #0E1317;
}

.single-pricing.active .pricing-body::before {
    height: 100%;
}

.single-pricing.active  .pricing-body ul li{
    color: #fff;
}

.single-pricing.active .pricing-body::after{
    background: url(assets/images/resource/pr-shape.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.single-pricing.active:hover .pricing-tk {
    border: 8px solid #00AFF5;
}

.single-pricing.active:hover .pricing-button a {
    background: #00AFF5;
    color: #fff;
}


/*
<!-- ============================================================== -->
<!-- Prygo Skill Area Css -->
<!-- ============================================================== -->*/

.skill-area {
    padding: 0  115px 0 0;
}

.upper-bx.two {
    background: url(assets/images/resource/skill-bg.jpg);
    padding: 120px 90px 0 188px;
    position: relative;
    margin-top: -250px;
    background-repeat: no-repeat;
    background-size: cover;
}

.appointment-booking {
    background: #00AFF5;
    padding: 35px 50px 55px;
    margin-left: 75px;
}

.appointment-booking-title h2 {
    color: #fff;
    font-size: 30px;
    margin-bottom: 36px;
}

.appointment-booking .form_box input {
    height: 60px;
    width: 100%;
    padding-left: 15px;
    margin-bottom: 10px;
    outline: 0;
    border: none;
    border-radius: 3px;
}

.appointment-booking select.custom-select {
    height: 60px;
    width: 100%;
    margin-bottom: 10px;
}

.appointment-booking select.custom-select.slc {
    width: 48%;
    float: left;
}

.appointment-booking select.custom-select.slc.tbs {
    margin-right: 12px;
}

.appointment-booking .quote_button {
    margin-top: 20px;
}

.appointment-booking .quote_button button {
    display: inline-block;
    background: #FFDA2B;
    padding: 15px 35px;
    font-weight: 700;
    text-transform: uppercase;
}

.appointment-booking .quote_button button i {
    margin-left: 5px;
}

/* Process Bar CSS */

.prossess-ber-plugin span {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    color: #0E1317;
}

.barfiller {
    width: 100%;
    height: 8px;
    position: relative;
    margin-bottom: 25px;
    margin-top: 12px;
    border-radius: 5px;
    filter: drop-shadow(0px 10px 10px rgba(60,115,206,0.2));
    background-color: #fff;
}

.barfiller .fill {
  display: block;
  position: relative;
  width: 0px;
  height: 100%;
  background: #333;
  z-index: 1;
}

.barfiller .tipWrap { display: none; }

.barfiller .tip {
    font-size: 16px;
    left: 0px;
    border-radius: 2px;
    position: absolute;
    z-index: 2;
    top: -39px;
    font-weight: 700;
    color: #0E1317;
}

.stat-bar:nth-of-type(1) .stat-bar-rating {
  animation-delay: 0.25s;
  -webkit-animation-delay: 0.25s;
}

span.fill {
    background: #00AFF5 !important;
    border-radius: 5px;
}


/*
<!-- ============================================================== -->
<!-- Prygo Team Area Css -->
<!-- ============================================================== -->*/

.team-area {
    padding: 115px 0 90px;
}

.single-team {
    margin-bottom: 30px;
}

.team-thumb {
    position: relative;
}

.team-thumb img{
    width: 100%;
}

.team-content {
    position: absolute;
    bottom: 35px;
    left: 0;
    right: 0;
    width: 80%;
    margin: auto;
    text-align: center;
    background: #fff;
    padding: 25px 15px 32px;
    transition: .5s;
}

.team-content-inner h2 {
    font-size: 24px;
    transition: .5s;
}

.team-content-inner span {
    padding-top: 5px;
    display: inline-block;
    color: #6D7A8E;
    font-size: 14px;
    font-weight: 700;
    transition: .5s;
}

.team-icon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    transition: .5s;
    opacity: 0;
}

.team-icon a {
    height: 40px;
    width: 40px;
    display: inline-block;
    background: transparent;
    border: 2px solid #fff;
    line-height: 37px;
    border-radius: 50%;
    margin: 0 3px;
    transition: .5s;
    color: #fff;
}

.single-team:hover .team-content{
    padding: 25px 15px 92px;
    background: #00AFF5;
}

.single-team:hover .team-icon{
    bottom: 36px;
    opacity: 1;
}

.single-team:hover .team-content-inner h2,
.single-team:hover .team-content-inner span{
    color: #fff;
}

.team-icon a:hover{
    background: #FFDA2B;
    border-color: #FFDA2B;
}


/*
<!-- ============================================================== -->
<!-- Prygo Counter Area Css -->
<!-- ============================================================== -->*/

.counter-area {
    background: url(assets/images/resource/counter-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 120px 0 300px;
}

.single-counter {
    text-align: center;
    margin-bottom: 30px;
}

.counter-icon i {
    font-size: 60px;
    color: #fff;
}

.counter-content h2 {
    font-size: 48px;
    color: #fff;
    display: inline-block;
}

.counter-content span {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    display: inline-block;
}

.counter-content p {
    color: #E7E9EC;
    font-weight: 700;
    padding-top: 2px;
}

/* Style Two */

.counter-area.style-two {
    background: #fff;
    padding: 5px 0 80px;
}

.counter-area.style-two .counter-content h2 {
    color: #0E1317;
}

.counter-area.style-two .counter-content p {
    color: #3C4E68;
}

.counter-area.style-two .counter-icon i {
    color: #629976;
}

.counter-area.style-two .counter-content span {
    color: #0E1317;
}

/*
<!-- ============================================================== -->
<!-- Prygo Contact Area Css -->
<!-- ============================================================== -->*/

.row.contact-box {
    background: #fff;
    padding: 55px 40px 55px;
    box-shadow: 0px -20px 70px rgba(0, 0, 0, 0.05);
    position: relative;
    margin-bottom: -235px;
    z-index: 1;
}

.contact-title h2 {
    font-size: 36px;
    margin-bottom: 40px;
    margin-top: 0;
}

.contact-thumb {
    margin-right: 40px;
}

.contact-thumb img {
    width: 100%;
}

.input-box input {
    width: 100%;
    height: 54px;
    margin-bottom: 20px;
    padding-left: 15px;
    border: 2px solid #9DA7B3;
    transition: .5s;
}

.input-box textarea {
    width: 100%;
    height: 180px;
    padding-left: 15px;
    border: 2px solid #9DA7B3;
    padding-top: 12px;
    transition: .5s;
}

.input-button button {
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    display: inline-block;
    padding: 14px 40px;
    outline: 0;
    border: 0;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 1px;
    font-weight: 500;
}

.input-button {
    padding-top: 20px;
}

.input-button button i {
    margin-left: 7px;
}

.input-box input:focus, .input-box textarea:focus {
    border-color: #629976;
    outline: 0;
    box-shadow: 0 0 6px rgb(204, 48, 0, 0.6);
}

/* Map Area */

.map-area {
    position: relative;
    margin-bottom: -10px;
}

.map-area .container-fluid {
    padding: 0;
}

.map-area iframe {
    width: 100%;
    height: 650px;
}

.row.cnt-bx {
    position: relative;
    background: #fff;
    margin-top: -230px;
    padding: 30px 15px 20px;
    filter: drop-shadow(0px 20px 70px rgba(0, 0, 0, 0.05));
}

.google-map iframe {
    width: 100%;
    height: 560px;
}

.form-box {
    margin-bottom: 10px;
}

.form-box input {
    width: 100%;
    height: 60px;
    background: #F3F3F5;
    outline: 0;
    border: 0;
    padding-left: 20px;
}

.form-box textarea {
    background: #F3F3F5;
    border: 0;
    outline: 0;
    height: 170px;
    width: 100%;
    padding-top: 18px;
    padding-left: 20px;
}

.form-button button {
    display: inline-block;
    background: #FFDA2B;
    padding: 16px 36px;
    font-weight: 700;
    text-transform: uppercase;
    outline: 0;
}

.form-button button i {
    margin-left: 5px;
}


/*
<!-- ============================================================== -->
<!-- Prygo Llamada Area Css -->
<!-- ============================================================== -->*/

.mission-vision-call-area {
    background: url(assets/images/call.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 65px 0 65px;
}

/*tabe*/

.tab {
    padding-top: 50px;
    position: relative;
    left: 10px;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.tabs {
    display: table;
    position: relative;
    overflow: hidden;
    margin: 0;
    width: 100%;
}

.tabs li {
    float: left;
    line-height: 38px;
    overflow: hidden;
    padding: 0;
    position: relative;
}

.tabs li a {
    color: #fff;
    font-weight: 600;
    display: inline-block;
    outline: none;
    padding: 8px 38px;
    transition: all 0.2s ease-in-out;
    border: 2px solid #663366;
    margin-right: 25px;
}

.tabs_item {
    display: none;
    padding: 30px 0;

}

.tabs_item:first-child {
    display: block;
}

li.current a {
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    color: #fff;
}

.tabs-inner-text p {
    color: #fff;
}


/*
<!-- ============================================================== -->
<!-- Prygo Llamada Area Css -->
<!-- ============================================================== -->*/



/*
<!-- ============================================================== -->
<!-- Prygo Mission Vision Area Css -->
<!-- ============================================================== -->*/

.mission-vision-area {
    background: url(assets/images/background1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 115px 0 65px;
}

/*tabe*/

.tab {
    padding-top: 50px;
    position: relative;
    left: 10px;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.tabs {
    display: table;
    position: relative;
    overflow: hidden;
    margin: 0;
    width: 100%;
}

.tabs li {
    float: left;
    line-height: 38px;
    overflow: hidden;
    padding: 0;
    position: relative;
}

.tabs li a {
    color: #fff;
    font-weight: 600;
    display: inline-block;
    outline: none;
    padding: 8px 38px;
    transition: all 0.2s ease-in-out;
    border: 2px solid #663366;
    margin-right: 25px;
}

.tabs_item {
    display: none;
    padding: 30px 0;

}

.tabs_item:first-child {
    display: block;
}

li.current a {
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    color: #fff;
}

.tabs-inner-text p {
    color: #fff;
}


/*
<!-- ============================================================== -->
<!-- Prygo Mission Area Css -->
<!-- ============================================================== -->*/

.mission-area {
    padding: 115px 0 170px;
}

.row.mrc-mrgn {
    margin-top: 90px;
}

.mission-history-box {
    background: #F3F3F5;
    padding: 38px 45px 32px;
    width: 74%;
    margin-bottom: 25px;
    position: relative;
}

.mission-history-box::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    transition: .5s;
}

.mission-history-box:hover:before{
    width: 100%;
}

.mission-history-box:after {
    position: absolute;
    content: "";
    right: -11px;
    top: 76px;
    height: 22px;
    width: 22px;
    background: #F3F3F5;
    transform: rotate(45deg);
    transition: 1s;
    z-index: -1;
}

.mission-history-right .mission-history-box:after {
    right: inherit;
    top: 90px;
    left: -11px; 
}

.mission-history-right .mission-history-content h2::before {
    top: -12px;
    right: -45px;
    left: inherit;
}

.mission-history-box:hover:after{
    background: #663366;
}

.mission-history-right .mission-history-box:hover:after{
    background: #629976;
}

.mission-history-content h2 {
    font-size: 22px;
    position: relative;
    margin-bottom: 10px;
    transition: .5s;
}

.mission-history-content p {
    transition: .5s;
    position: relative;
}

.mission-history-years {
    text-align: right;
    margin-right: 145px;
    margin-bottom: 150px;
}

.mission-history-years h1 {
    font-size: 36px;
}

.mission-history-content h2::before {
    position: absolute;
    content: "";
    left: -44px;
    top: -12px;
    height: 30px;
    width: 2px;
    background: #f00;
}

.mission-history-box:hover .mission-history-content h2,
.mission-history-box:hover .mission-history-content p{
    color: #fff;
}

/* Mission Right Box CSS */

.mission-history-right {
    position: relative;
    padding-left: 70px;
}

.mission-history-right::before {
    position: absolute;
    content: "";
    left: -65px;
    top: -57px;
    height: 110%;
    width: 100%;
    background: url(assets/images/resource/line.png);
    background-repeat: no-repeat;
}

.mission-history-right .mission-history-years {
    text-align: left;
}

.line-button {
    position: absolute;
    top: -13%;
    left: -16%;
}

.line-button.two {
    top: inherit;
    bottom: -82px;
}

.line-button a {
    display: inline-block;
    height: 55px;
    width: 55px;
    line-height: 55px;
    border: 1px solid #629976;
    border-radius: 50%;
    text-align: center;
    position: relative;
    transition: .5s;
}

.line-button a::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    border-radius: 50%;
    z-index: -1;
    transition: .5s;
}

.line-button a:hover:before{
    width: 100%;
}

.line-button a:hover{
    color: #fff;
}


/*
<!-- ============================================================== -->
<!-- Prygo Contact Address Area Css -->
<!-- ============================================================== -->*/

.contact-address-area {
    padding: 120px 0 90px;
}

.contact-address-box {
    margin-left: 65px;
}

.contact-address-single-box {
    border: 2px solid #E5E5E5;
    padding: 30px 35px 30px;
    margin-bottom: 30px;
	transition:.5s;
}

.contact-address-icon {
    float: left;
    margin-right: 30px;
}

.contact-address-icon i {
    display: inline-block;
    background: #F3F3F5;
    height: 90px;
    width: 90px;
    text-align: center;
    line-height: 90px;
    font-size: 45px;
    color: #629976;
    border-radius: 50%;
}

.contact-address-content h5 {
    font-size: 16px;
    margin-top: 2px;
    margin-bottom: 6px;
}

.contact-address-content p {
    margin-bottom: 0;
    color: #0E1317;
}

.contact-address-button {
    padding-top: 40px;
}

.contact-address-single-box:hover{
	border: 2px solid #629976;
}


/*
<!-- ============================================================== -->
<!-- Prygo Blog Area Css -->
<!-- ============================================================== -->*/

.blog-area {
    padding: 115px 0 90px;
}

.single-blog {
    background: #fff;
    box-shadow: 0px 10px 70px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

.blog-thumb {
    position: relative;
}

.blog-thumb:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: rgba(0,0,0,0.3);
	transition:.5s;
}

.single-blog:hover .blog-thumb:before{
	width:100%;
}

.blog-thumb img {
    width: 100%;
}

.blog-meta-date {
    position: relative;
    margin-top: -28px;
    z-index: 1;
}

.blog-meta-date span {
    background: #629976;
    display: inline-block;
    padding: 3px 27px 1px;
    color: #fff;
    border-radius: 0 30px 30px 0;
    font-size: 14px;
}

.blog-meta-date span i {
    margin-right: 5px;
}

.blog-meta span {
    font-size: 14px;
    font-family: 'Open Sans';
    font-weight: 600;
    color: #0E1317;
}

.blog-meta span i {
    color: #629976;
    margin-right: 5px;
    font-size: 16px;
}

.blog-content {
    padding: 20px 35px 38px;
}

.blog-title h2 {
    font-size: 24px;
}

.blog-title h2 a {
    font-weight: 700;
    transition: .5s;
}

.blog-title h2 a:hover{
    color: #629976;
}

.blog-button {
    padding-top: 28px;
}

.blog-button a {
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 600;
    border: 2px solid #629976;
    display: inline-block;
    padding: 7px 26px;
    color: #0E1317;
    font-family: 'Open Sans';
    background: transparent;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.blog-button a:before {
    position: absolute;
    content: "";
    left: 0;
    top: -1px;
    height: 102%;
    width: 0%;
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    z-index: -1;
    transition: .5s;
}

.single-blog:hover .blog-button a:before{
    width: 101%;
}

.single-blog:hover .blog-button a{
    color: #fff;
}

.blog-button a i {
    margin-left: 5px;
    font-size: 14px;
}

/* Style Two */

.blog-area.style-two .blog-button a {
    border: 2px solid #00AFF5;
	background:#00AFF5;
	color:#fff;
}

.blog-area.style-two .blog-button a:before{
	background:#FFDA2B;
}

.blog-area.style-two .single-blog:hover .blog-button a{
	border:2px solid #FFDA2B;
}

.blog-area.style-two .blog-meta-date span {
    background: #FFDA2B;
	color:#3C4E68;
}

.blog-area.style-two .blog-meta span i {
    color: #00AFF5;
}

.blog-area.style-two .blog-title h2 a:hover {
    color: #FFDA2B;
}

.blog-area.style-two .owl-nav {
    position: absolute;
    bottom: 200px;
    left: -48%;
}

.blog-area.style-two .owl-prev i {
    border: 2px solid #f5f5f5;
	color:#0E1317;
	border-radius:0;
	background: #f5f5f5;
	line-height:60px;
}

.blog-area.style-two .owl-prev i:after {
    background: #FFDA2B;
	border-radius:0;
}

.blog-area.style-two .owl-next i {
    background: #FFDA2B;
    border: 2px #FFDA2B;
	border-radius:0;
	line-height:60px;
	color: #0E1317;
}

.blog-area.style-two .owl-next i:hover {
    color: #0E1317;
}

.blog-area.style-two .owl-prev i:after,
.blog-area.style-two .owl-next i:after{
	display:none;
}


/***
======================================================
<--  Prygo Blog Details Area Css -->
======================================================***/

.blog-detials-area {
    padding: 100px 0 100px;
}

.blog-grid-area {
    padding: 120px 0 90px;
}

.blog-details-main {
    background: #fff;
    padding: 30px;
    box-shadow: 0px 0px 70px rgba(0, 0, 0, 0.05);
}

.blog-details-meta {
    background: #F3F3F5;
    padding: 16px 30px;
}

.blog-details-meta span {
    margin-right: 30px;
}

.blog-details-meta span i {
    color: #629976;
    padding-right: 5px;
}

.blog-details-content {
    padding: 20px 0 18px;
}

.blog-details-content h2 {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 15px;
}

.blog-details-thumb img {
    width: 100%;
}

.blog-details-des {
    padding: 30px 0 10px;
}

.blog-details-blockquote {
    background: rgba(240,40,48,0.1);
    padding: 40px 38px 26px;
    position: relative;
    margin-bottom: 10px;
}

.blog-details-blockquote::before {
    position: absolute;
    content: "";
    background: url(assets/images/resource/quite.png);
    top: 40px;
    left: 60px;
    height: 75px;
    width: 75px;
    background-repeat: no-repeat;
}

.blog-details-blockquote blockquote {
    font-size: 18px;
    color: #0E1317;
    font-weight: 500;
    font-family: 'Open Sans';
}

.blog-details-video-thumb {
    margin-top: 30px;
}

.blog-details-video-thumb img {
    width: 100%;
}

.blog-details-video-thumb-inner img {
    width: 100%;
}

.blog-details-content h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 15px;
}

.blog-details-content-list p i {
    font-size: 14px;
    height: 32px;
    width: 32px;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 31px;
    border-radius: 100%;
    margin-right: 15px;
}

.blog-detials-area .blog-content {
    padding: 20px 30px 38px;
}

.blog-details-button a {
    display: inline-block;
    border: 2px solid #629976;
    padding: 3px 20px;
    position: relative;
    z-index: 1;
    color: #fff;
    border-radius: 3px;
    margin-bottom: 10px;
}

.blog-details-button a:before {
    position: absolute;
    content: "";
    left: -2px;
    top: -1px;
    height: 104%;
    width: 104%;
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.blog-details-button a.active {
    border-color: #9DA7B3;
    background: transparent;
    color: #0E1317;
    transition: .5s;
    margin-left: 10px;
}

.blog-details-button a.active:before{
    background: transparent;
}

.blog-details-button a.active:hover:before{
    background: linear-gradient(to right, #629976 6%, #663366 96%);
}

.blog-details-button a.active:hover{
    color: #fff;
    border-color: #629976;
}

.blog-details-social {
    text-align: right;
}

.blog-details-social a {
    display: inline-block;
    border: 2px solid #9DA7B3;
    height: 40px;
    width: 40px;
    line-height: 38px;
    text-align: center;
    border-radius: 100%;
    font-size: 14px;
    transition: .5s;
    margin-left: 5px;
}

.blog-details-social a:hover{
    background: #629976;
    border-color: #629976;
    color: #fff;
}

/* Blog Details Author */

.blog-details-author {
    border-top: 2px solid #CED3D9;
    padding-top: 40px;
    margin-top: 32px;
}

.blog-details-author-inner {
    background: #F3F3F5;
    padding: 30px 30px 25px;
}

.blog-details-author-thumb {
    float: left;
    margin-right: 30px;
}

.blog-details-author-content h2 {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 12px;
}

/* Comment CSS */

.blog-details-comment {
    margin-bottom: 10px;
}

.blog-details-comment-thumb {
    float: left;
    margin-right: 30px;
}

.blog-details-comment-content {
    overflow: hidden;
}

.blog-details-comment-content h2 {
    font-size: 18px;
    margin-top: 0;
}

.blog-details-comment-content span {
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
}

.blog-details-comment-reply {
    position: absolute;
    right: 25px;
}

.blog-details-comment-reply a {
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    padding: 3px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border-radius: 2px;
    display: inline-block;
}

.blog-details-comment.reply {
    margin-left: 70px;
    padding-top: 35px;
    border-top: 2px solid #9DA7B3;
}

/* Blog Details Contact */

.blog-details-contact {
    border-top: 2px solid #9DA7B3;
    margin: 12px 20px 10px;
    padding-top: 8px;
}


/*progress bar*/

.progress-box {
    width: 600px;
    margin: 35px auto 0 0px;
    font-family: 'Fira Sans';
}

.circle_percent {
    font-size: 90px;
    width: 87px;
    height: 87px;
    position: relative;
    background: #FFEAE3;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    margin: 0 20px 0 0;
    z-index: 1;
}

.circle_inner {position: absolute; left: 0; top: 0; width: 1em; height: 1em; clip:rect(0 1em 1em .5em);}
.round_per {position: absolute; left: 0; top: 0; width: 1em; height: 1em; background: #629976; clip:rect(0 1em 1em .5em); transform:rotate(180deg); transition:1.05s;}
.percent_more .circle_inner {clip:rect(0 .5em 1em 0em);}
.percent_more:after {position: absolute; left: .5em; top:0em; right: 0; bottom: 0; background: #629976; content:'';}
.circle_inbox {position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; background: #fff; z-index:3; border-radius: 50%;}

.percent_text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
    font-size: 22px;
    line-height: 26px;
    color: #232323;
    text-align: center;
}

/*circle progress title*/

.extra-progress {
    display: inline-block;
    padding: 0 0 0  70px;
}

.circle-progress-title {
    display: inline-block;
}

.circle-progress-title h4 {
    font-size: 18px;
    line-height: 28px;
    color: #232323;
    font-weight: 500;
    position: relative;
    top: -30px;
}

/***
======================================================
<--  Prygo Case Study Area Css -->
======================================================***/

/* Portfolio Nav */
.portfolio_nav {
    margin-bottom: 40px;
}

.portfolio_menu ul {
    text-align: center;
    list-style: none;
}

.portfolio_nav ul li {
    background: #F6F5F5;
    font-size: 15px;
    font-family: 'Fira Sans';
    transition: all 0.5s ease 0s;
    cursor: pointer;
    padding: 6px 25px;
    font-weight: 500;
    position: relative;
    margin: 0 3px;
    margin-bottom: 7px;
    display: inline-block;
    border-radius: 30px;
}

.portfolio_menu ul li a{
    display: block;
    color:#fff;
    text-transform:uppercase;
    position:relative;
    transition:.5s;
}

.portfolio_menu ul li a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 24px;
    height: 2px;
    width: 0%;
    background: #fff;
    transition:.5s;
}

.portfolio_nav ul li:hover, .portfolio_nav ul li.current_menu_item {
    color: #fff;
    background: #629976;
}

/***======================================================
<-- Prygo Faq Area Css -->
======================================================***/

.video-icon {
    display: inline-block;
}

.video-icon-cda a {
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 100%;
    color: #629976;
    background: #fff;
    display: inline-block;
    text-align: center;
    position: relative;
    -webkit-animation: hassan 1s linear infinite;
    animation: hassan 1.5s linear infinite;
    -webkit-transition: .5s;
    font-size: 28px;
    z-index: 1;
}

@-webkit-keyframes hassan {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.4),  0 0 0 5px rgba(255,255,255, 0.4);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.4),  0 0 0 5px rgba(255,255,255, 0.4)
    }
    100% {
        -webkit-box-shadow: 0 0 0 50px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3), 0 0 0 40px rgba(255, 255, 255, 0)
    }
}
@keyframes hassan {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.4), 0 0 0 5px rgba(255,255,255, 0.4);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.4), 0 0 0 5px rgba(255,255,255, 0.4)
    }
    100% {
        -webkit-box-shadow:0 0 0 0 rgba(255,255,255, 0.4), 0 0 0 40px rgba(255,255,255, 0);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.4), 0 0 0 40px rgba(255,255,255, 0)
    }
}

/*
<!-- ============================================================== -->
<!-- Prygo News Letter Area CSS -->
<!-- ============================================================== -->*/

.newsletter-area {
    padding: 0 0 0 397px;
}

.newsletter-area.style-two {
    padding: 0;
}

.newsletter-area.style-three {
    background: #629976;
    padding: 65px 0;
    position: relative;
    margin-bottom: -80px;
}

.newsletter-area .nsbg {
    background: url(assets/images/resource/ns-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center left;
    padding: 80px 235px 80px 30px;
    position: relative;
    margin-bottom: -90px;
}

.newsletter-area.style-two .row.nsbg {
    padding: 80px 0 80px 30px;
}

.newsletter-title h2 {
    font-size: 36px;
    color: #fff;
    margin-top: 5px;
}

.newsletter-form input {
    width: 70%;
    height: 60px;
    outline: 0;
    padding-left: 20px;
    border: 0;
}

.newsletter-form button {
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    border: 0;
    height: 60px;
    padding: 0 30px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    position: absolute;
    right: 158px;
}

.newsletter-area.home-two.style-two .newsletter-form button {
    background: #FFDA2B;
	color:#0E1317;
}


/*
<!-- ============================================================== -->
<!-- Prygo Footer Area CSS -->
<!-- ============================================================== -->*/

.footer-area {
    padding: 190px 0 10px;
    background: url(assets/images/resource/footer-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.footer-area.two {
    padding: 115px 0 10px;
}

.widget-title {
    padding-bottom: 46px;
}

.widget-title h2 {
    font-size: 20px;
    color: #fff;
}

.footer-widget-logo {
    margin-top: 6px;
}

.footer-widget-text {
    padding-top: 38px;
}

.footer-widget-text p {
    color: #E6E7E8;
    width: 96%;
}

.footer-widget-social {
    padding-top: 20px;
}

.footer-widget-social a {
    height: 40px;
    width: 40px;
    display: inline-block;
    border: 1px solid #fff;
    text-align: center;
    color: #fff;
    position: relative;
    line-height: 38px;
    border-radius: 50%;
    margin-right: 8px;
    z-index: 1;
    transition: .5s;
}

.footer-widget-social a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    border-radius: 50%;
    z-index: -1;
    transition: .5s;
}

.footer-widget-social a:hover:before {
    width: 100%;
}

.footer-widget-social a:hover {
    border-color: transparent;
}

/* Recent Post CSS */

.footer-widget-recent-post {
    margin-bottom: 25px;
}

.recent-widget-thumb {
    float: left;
    margin-right: 25px;
}

.recent-widget-content a {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    font-family: 'Open Sans';
    display: block;
    line-height: 26px;
    transition: .5s;
}

.recent-widget-content span {
    font-size: 14px;
    color: #9DA7B3;
    padding-top: 7px;
    display: block;
}

.recent-widget-content span i {
    margin-right: 10px;
    display: inline-block;
}

.recent-widget-content a:hover {
    color: #629976;
}

/* Footer Menu CSS */

.footer-menu {
    float: left;
    margin-right: 70px;
}

.footer-menu.two {
    margin-right: 0;
}

.footer-menu ul li {
    list-style: none;
    margin-bottom: 14px;
    transition: .5s;
}

.footer-menu ul li a {
    color: #9DA7B3;
    font-size: 16px;
    font-family: 'Open Sans';
    font-weight: 600;
    transition: .5s;
}

.footer-menu ul li a:hover {
    color: #629976;
}

.coppy-right-text {
    padding-top: 26px;
    border-top: 1px solid #524f4f;
    margin-top: 50px;
}

.coppy-right-text p {
    text-align: center;
    color: #fff;
}





/* Otros estilos CSS existentes... */

/* Home Two CSS */
.footer-area.home-two .recent-widget-content a:hover {
    color: #00AFF5;
}

.footer-area.home-two .footer-menu ul li a:hover {
    color: #00AFF5;
}

.footer-area.home-two .footer-widget-social a:before {
    background: #00AFF5;
}

/* CSS adicional para ajustar el espaciado del footer */
.footer-area {
    padding-top: 40px !important; /* Aumentar el relleno superior del footer */
    padding-bottom: 40px !important; /* Aumentar el relleno inferior del footer */
}

.widget-title {
    padding-bottom: 30px !important; /* Aumentar el padding-bottom */
    margin-top: 20px !important; /* Aumentar el margen superior */
}

.widget-title h2 {
    margin: 20px 0 !important; /* Aumentar el margen superior e inferior */
    padding-top: 0 !important; /* Eliminar el relleno superior */
    padding-bottom: 20px !important; /* Mantener el relleno inferior */
}

.footer-widget h2 {
    margin: 20px 0 !important; /* Aumentar el margen superior e inferior */
    padding-top: 0 !important; /* Eliminar el relleno superior */
}

.footer-widget-text {
    padding-top: 40px !important; /* Aumentar el relleno superior del texto */
}

.footer-widget {
    padding: 40px 40px !important; /* Aumentar el relleno del widget */
}

.footer-widget-logo-col {
    flex: 0 0 40% !important; /* Ajustar el ancho de la columna del logo */
    max-width: 40% !important;
    padding-top: 10px !important; /* Reducir drásticamente el relleno superior de la primera columna */
    margin-top: 5px !important; /* Asegura que el contenido de la primera columna esté alineado */
}

.footer-widget-col {
    flex: 0 0 30% !important; /* Ajustar el ancho de las columnas */
    max-width: 30% !important;
}

.footer-widget-col .widget-title {
    margin-top: 5px !important; /* Reducir la distancia de los títulos */
    padding-bottom: 5px !important; /* Reducir el padding-bottom */
}

.footer-widget h2 {
    white-space: nowrap; /* Evitar que los títulos se monten */
    overflow: hidden;
    text-overflow: ellipsis;
}

.footer-widget ul {
    list-style: none !important; /* Elimina los puntos delante de cada servicio */
    padding: 0;
}

.footer-widget ul li {
    margin-bottom: 10px;
}

.footer-widget ul li a,
.footer-widget ul li {
    color: white !important; /* Cambiar el color del texto en la columna de datos de contacto a blanco */
}

/* CSS adicional para el responsive */
@media (max-width: 767px) {
    .footer-widget-logo-col,
    .footer-widget-col {
        flex: 0 0 100% !important; /* Hacer que las columnas ocupen el ancho completo en móviles */
        max-width: 100% !important;
        padding-top: 10px !important; /* Ajustar el relleno superior de las columnas */
    }

    .footer-widget-logo-col .footer-widget,
    .footer-widget-col .footer-widget {
        padding-top: 10px !important; /* Ajustar el relleno superior de los widgets */
    }

    .coppy-right-text p {
        text-align: center !important; /* Centrar el texto en vista móvil */
    }
}

/* Copyright Text CSS */
.coppy-right-text {
    padding-top: 20px;
    border-top: 1px solid white; /* Cambiar el color de la línea divisoria a blanco */
    text-align: left; /* Alinear el texto a la izquierda */
    color: white;
}

.coppy-right-text p {
    margin: 0; /* Eliminar márgenes de los párrafos */
    text-align: left; /* Alinear los párrafos a la izquierda */
}









/*
<!-- ============================================================== -->
<!-- Prygo Scrollup Section -->
<!-- ============================================================== -->*/

.scroll-area{
  position: relative;
  z-index: 999;
 }

.scroll-area .go-top {
    position: fixed;
    cursor: pointer;
    top: 0;
    right: 30px;
    color: #ffffff;
    background-image: -moz-linear-gradient(0deg, #629976 0%, #629976 100%);
    background-image: -webkit-linear-gradient(0deg, #629976 0%, #629976 100%);
    z-index: 9999;
    width: 45px;
    text-align: center;
    height: 45px;
    line-height: 42px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.9s ease-out 0s;
    -moz-transition: all 0.9s ease-out 0s;
    border-radius: 10px; 
}

.scroll-area .go-top i {
      position: absolute;
      top: 50%;
      left: -4px;
      right: 0;
      margin: 0 auto;
      font-size: 15px;
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
      -webkit-transition: all 0.5s ease-out 0s;
      -moz-transition: all 0.5s ease-out 0s;
  }

.scroll-area .go-top i:last-child {
    opacity: 0;
    visibility: hidden;
    top: 60%; 
}

.scroll-area .go-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: linear-gradient(to right, #00132b 0%, #00132b 100%);
    background-image: -ms-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;;
    border-radius: 100%;
}

.scroll-area .go-top:focus, .scroll-area .go-top:hover {
      color: #fff; 
  }

.scroll-area .go-top:focus::before, .scroll-area .go-top:hover::before {
        opacity: 1;
        visibility: visible; 
}

.scroll-area .go-top:focus i:first-child, .scroll-area .go-top:hover i:first-child {
        opacity: 0;
        top: 0;
        visibility: hidden;
 }

.scroll-area .go-top:focus i:last-child, .scroll-area .go-top:hover i:last-child {
        opacity: 1;
        visibility: visible;
        top: 50%; 
}

.scroll-area .go-top.active {
    top: 95%;
    -webkit-transform: translateY(-98%);
    -moz-transform: translateY(-98%);
    opacity: 1;
    visibility: visible;
    border-radius: 0;
    right: 30px;
    border-radius:100%;
}

.top-wrap {
  position: relative; 
}

.top-wrap .go-top-button {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    top: 3px;
    z-index: 1;
    background: #629976;
}

 .top-wrap .go-top-button i {
      font-size: 20px;
      font-weight: 700;
      padding-left: 4px;
      color: #fff;
 }

.top-wrap .go-top-button::after {
    z-index: -1;
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 45px;
    height: 45px;
    -webkit-animation: ripple 1.6s ease-out infinite;
    -moz-animation: ripple 1.6s ease-out infinite;
    opacity: 0;
    background-image: -moz-linear-gradient(0deg, #629976 0%, #629976 100%);
    background-image: -webkit-linear-gradient(0deg, #629976 0%, #629976 100%);
    border-radius: 100%;
}

.top-wrap .go-top-button:hover {
      background-color: #222;
      color: #fff; 
  }
  
.scroll-area.home-two .top-wrap .go-top-button {
    background: #00AFF5;
}
 .scroll-area.home-two .top-wrap .go-top-button::after {
    background-image: -moz-linear-gradient(0deg, #00AFF5 0%, #00AFF5 100%);
    background-image: -webkit-linear-gradient(0deg, #00AFF5 0%, #00AFF5 100%);
}

@keyframes ripple {
  0%, 35% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1; }
  50% {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0.8; }
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2); } }


/*==========================================
    Prygo Search Popup Css
=========================================*/

.search-popup{
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    margin-top: -540px;
    transform: translateY(-100%);
    background-color: rgba(0,0,0,0.90);
    -webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
    -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
}

.search-popup{
    width: 100%;
}

.search-active .search-popup{
    transform: translateY(0%);
    margin-top: 0;
}

.search-popup .close-search {
    position: absolute;
    left: 0;
    right: 0;
    top: 75%;
    margin: 0 auto;
    margin-top: -200px;
    border-radius: 50%;
    text-align: center;
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    width: 70px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    border-bottom: 3px solid #ffffff;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    opacity: 0;
    visibility: hidden;
    height: 70px;
    line-height: 70px;
    text-align: center;
}

.search-popup .close-search i{
    position: relative;
    font-size: 30px;
    color: #ffffff;
}

.search-active .search-popup .close-search{
    visibility: visible;
    opacity: 1;
    top: 50%;
    -webkit-transition-delay: 1500ms;
    -moz-transition-delay: 1500ms;
    -ms-transition-delay: 1500ms;
    -o-transition-delay: 1500ms;
    transition-delay: 1500ms;
}

.search-popup form{
    position: absolute;
    max-width: 700px;
    top: 50%;
    left: 15px;
    right: 15px;
    margin:-35px auto 0;
    transform: scaleX(0);
    transform-origin: center;
    background-color: #111111;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.search-active .search-popup form{
    transform: scaleX(1);
    -webkit-transition-delay: 1200ms;
    -moz-transition-delay: 1200ms;
    -ms-transition-delay: 1200ms;
    -o-transition-delay: 1200ms;
    transition-delay: 1200ms;
}

.search-popup .form-group{
    position:relative;
    margin:0px; 
    overflow: hidden;
}

.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"]{
    position:relative;
    display:block;
    font-size:18px;
    line-height: 50px;
    color:#000000;
    height:70px;
    width:100%;
    padding: 10px 30px;
    background-color: #ffffff;
    -webkit-transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease;
    font-weight:500;
    text-transform:capitalize;
}

.search-popup .form-group input[type="submit"], .search-popup .form-group button {
    position: absolute;
    right: 30px;
    top: 0px;
    height: 70px;
    line-height: 70px;
    background: transparent;
    text-align: center;
    font-size: 24px;
    color: #000000;
    padding: 0;
    cursor: pointer;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    border: none;
}

.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover{
    color: #000000;
}

.search-popup input::placeholder,
.search-popup textarea::placeholder{
    color:#000000;
}

.search-popup .close-search.style-two{
    position: absolute;
    right: 25px;
    left: auto;
    color:#ffffff;
    width:auto;
    height:auto;
    top:25px;
    margin:0px;
    border:none;
    background:none !important;
    box-shadow:none !important;
    -webkit-transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease;
}

.search-popup .close-search.style-two i{
    font-size:20px;
    color:#ffffff;
}

.search-box-btn.search-box-outer i {
    font-size: 15px;
    display: inline-block;
    color: #0a2c3d;
    cursor: pointer;
}


/*=============================
<--  Coursol Nav Css -->
===============================*/

.owl-nav {
    position: absolute;
    bottom: 90px;
    left: -48%;
}

.owl-prev {
    display: inline-block;
    margin-right: 12px;
}

.owl-next {
    display: inline-block;
}

.owl-prev i {
    height: 60px;
    width: 60px;
    display: inline-block;
    position: relative;
    text-align: center;
    line-height: 58px;
    font-size: 20px;
    border-radius: 50%;
    font-weight: 800;
    background: transparent;
    border: 2px solid #629976;
    color: #629976;
}

.owl-prev i:after{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    transition: .5s;
    z-index: 1;
    border-radius: 50%;
}

.owl-prev i:hover:after{
    width: 100%;
    z-index: -1;
}

.owl-prev i:hover{
    color: #fff;
}

.owl-next i {
    height: 60px;
    width: 60px;
    display: inline-block;
    background: transparent;
    text-align: center;
    line-height: 60px;
    font-size: 18px;
    color: #fff;
    border-radius: 50%;
    border: 2px transparent;
    transition: .5s;
    position: relative;
    z-index: 1;
}
.owl-next i:hover{
    color: #629976;
}

.owl-next i:after{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, #629976 6%, #663366 96%);
    z-index: -1;
    border-radius: 50%;
}

.owl-next i:hover:after{
    background: transparent;
    border: 2px solid #629976;
}

/*===========================
<-- Prygo Loader Css -->
=============================*/

.loader-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s 1s ease;
    z-index: 666;
}

.loader {
  position: relative;
  display: block;
  z-index: 201;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  transition: all 1s 1s ease;
  border: 3px solid transparent;
  border-top-color: #629976;
  -webkit-animation: spin 1.5s linear infinite;
  -moz-animation: spin 1.5s linear infinite;
  -o-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

.loader:before {
  position: absolute;
  content: '';
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-left-color: #629976;
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  -o-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.loader:after {
  position: absolute;
  content: '';
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-right-color: #fff;
  -webkit-animation: spin 2.5s linear infinite;
  -moz-animation: spin 2.5s linear infinite;
  -o-animation: spin 2.5s linear infinite;
  animation: spin 2.5s linear infinite;
}

/*/ Here comes the Magic /*/

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loader-wrapper .loder-section {
    position: fixed;
    top: 0;
    width: 52%;
    height: 100%;
    background: #111;
    z-index: 2;
}

.loader-wrapper .loder-section.left-section {
  left: 0;
  transition: 1s 1.4s ease;
}

.loader-wrapper .loder-section.right-section {
  right: 0;
  transition: 1s 1.4s ease;
}

/*/ When page loaded /*/
.loaded .loder-section.left-section {
  left: -100%;
}

.loaded .loder-section.right-section {
  right: -100%;
}

.loaded .loader-wrapper {
  visibility: hidden;
}

.loaded .loader {
  top: -100%;
  opacity: 0;
}