/* ---------------------------------------

[Master Stylesheet]

Project:    DaVinci Solutions - HTML Template
Version:    1
Last Change:    04/02/2026
Primary Use:    Architecture and Renovation

------------------------------------------

[Table of contents]

1. Fonts
2. Resources / Css Files
3. Reset
4. Global Settings
5. Buttons Style
6. Social Icons
7. Scroll To Top style
8. Section Title
9. Main Header
10. Main Slider Section
11. Services Section
12. Services Section Two
13. Counter Section
14. Work Section
15. Testiomonial Section
16. Fluid Section Two
17. Team Section
18. News Section
19. Sponsors Section
20. Contact Info Section
21. Main Slider Two
22. Experts Section
23. Business Section
24. Benefits Section
25. Call To Action Section
26. Fluid Section Two
27. Accordion Style
28. Default Form
29. Default Form
30. Newsletter Section
31. Page Title
32. About Section
33. Choose Section
34. Work Section Two
35. Services Page Section
36. Sidebar Page Container
37. Comments Area
38. Contact Message Section
39. Map Section
40. Contact Form
41. Colors

-------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Montserrat:400,400i,500,500i,600,600i,700,700i');

/***

====================================================================
	3. Reset
====================================================================


====================================================================
	4. Global Settings
====================================================================

 ***/

* {
    margin: 0px;
    padding: 0px;
    border: none;
    outline: none;
}

:root {
    --color-primary: #A15A95;
    --color-primary-alt: #8A3A7E;
    --color-primary-highlight: #C69CBF;

    --color-bg-light: #f5f7fa;
    --color-bg-white: #ffffff;
    --color-bg-dark: #222222;
    
    --color-text-light: var(--color-bg-white);
    --color-text-dark: var(--color-bg-dark);    
    --color-text-gray: #595959;
    
    --color-border-light: var(--color-bg-white);
    --color-border-gray: var(--color-text-gray);
    --color-border-dark: var(--color-bg-dark);
        
    --color-success: #28a745;
    --color-error: #ff0000;
    --color-link: #55acee;

    --color-artist: #;
    --color-organizer: #;

    --color-compilero: #0085CA;
    --color-compilero-radio: #F0005C;
}

body {
    font-family: 'Titillium Web', sans-serif;
    font-size: 20px;
    color: var(--color-text-gray);
    /* line-height: 1.7em; */
    font-weight: 400;
    background: var(--color-bg-light);
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: var(--color-text-gray);
}

button,
a:hover,
a:focus,
a:visited {
    text-decoration: none;
    outline: none !important;
}

a:hover {
    color: var(--color-primary) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    font-weight: normal;
    margin: 0px;
    background: none;
    line-height: 1.6em;
    font-family: 'Titillium Web', sans-serif;
    color: var(--color-text-dark);
}

/* Typography */

h1 {
    font-size: 60px;
    font-weight: bold;
}

h2 {
    font-size: 40px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 18px;
}

input,
button,
select,
textarea {}

textarea {
    overflow: hidden;
}

p {
    position: relative;
    line-height: 1.2;
    font-size: 18px;
    margin: 0;
}

.auto-container {
    position: static;
    max-width: 1300px;
    padding: 0px 15px;
    margin: 0 auto;
}

ul,
li {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

img {
    display: inline-block;
    max-width: 100%;
}

.row {
    margin-left: auto;
    margin-right: auto;
}

.centered {
    text-align: center;
}

.ellipsis {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
}

/***

====================================================================
	5. Buttons Style
====================================================================

 ***/

/*Btn Style One*/

.btn-style-one {
    position: relative;
    line-height: 24px;
    color: var(--color-text-light);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    background-color: var(--color-primary);
    padding: 12px 31px !important;
    text-transform: uppercase;
    border: 2px solid var(--color-primary);
    font-family: 'Titillium Web', sans-serif;

}

.btn-style-one:hover {
    color: var(--color-primary);
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.20);
    border-color: var(--color-primary);
    background: var(--color-bg-light);
}

/*Btn Style Two*/

.btn-style-two {
    position: relative;
    line-height: 24px;
    background: none;
    color: var(--color-text-dark);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 12px 32px 12px;
    border: 2px solid var(--color-bg-dark);
    text-transform: uppercase;
    font-family: 'Titillium Web', sans-serif;

}

.btn-style-two:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-light);
}

/* List Style One */

/* List Style Two */

/***

====================================================================
	6. Social Icons
====================================================================

 ***/

/*Social Icon One*/

.preloader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background-color: var(--color-text-light);
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(/images/icons/preloader.svg);
}

.spinner {
    width: 70px;
    height: 70px;
    z-index: 999999;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(/images/icons/preloader.svg);
}

img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

/***

====================================================================
	Progress Ring
====================================================================

 ***/
.loader {
    
}

.circular {
    animation: rotate 2s linear infinite;
    height: 100px;
    position: relative;
    width: 100px;
}

.path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke: var(--color-primary);
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}

/***

====================================================================
	7. Scroll To Top style
====================================================================

***/

.scroll-to-top {
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    color: var(--color-primary);
    font-size: 24px;
    text-transform: uppercase;
    line-height: 50px;
    text-align: center;
    z-index: 100;
    cursor: pointer;
    background: var(--color-bg-light);
    display: none;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
    border: 2px solid var(--color-primary);

}

.scroll-to-top:hover {
    color: var(--color-text-light);
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
}

/***

====================================================================
	8. Section Title
====================================================================

***/

.sec-title {
    position: relative;
    margin-bottom: 10px;
}

.sec-title .big-title {
    position: absolute;
    left: 0px;
    right: 0px;
    top: -100px;
    color: var(--color-text-light);
    font-size: 164px;
    line-height: 1em;
    font-weight: 800;
}

.sec-title .inner-title {
    position: relative;
}

.sec-title .title {
    position: relative;
    color: var(--color-primary);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.sec-title h2 {
    position: relative;
    color: var(--color-text-dark);
    font-weight: 700;
    line-height: 1.3em;
    font-size: 34px;
    display: inline-block;
    text-transform: unset;
}

.sec-title .text {
    position: relative;
    color: var(--color-text-gray);
    font-weight: 500;
    line-height: 1.8em;
    font-size: 14px;
    margin-top: 15px !important;

}

.sec-title h2:before {
    position: absolute;
    content: '';
    left: -65px;
    top: 22px;
    height: 2px;
    width: 50px;
    background-color: var(--color-primary);
    display: none;
}

.sec-title.style-two h2:before {
    display: none;
}

.sec-title.centered {
    text-align: center;
}

.sec-title.centered .text {
    max-width: 580px;
    margin: 0 auto;
}

.sec-title.light h2,
.sec-title.light .text {
    color: var(--color-text-light);
}

/* Sec Title Two */

/***

====================================================================
	9. Main Header
====================================================================

***/

.main-header {
    /*position:absolute;*/
    z-index: 999;
    width: 100%;
    -ms-animation-duration: 500ms;
    -moz-animation-duration: 500ms;
    -op-animation-duration: 500ms;
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
}

/* Header Top */

/* Top Right */

.main-header .header-upper {
    position: relative;
    background: var(--color-bg-white);
}

.main-header .nav-outer {
    /*position:relative;
	float: left;
	width:100%;
	/*margin-top:-100px;*/
    /*text-align:center;
	transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
	display: flex;
	align-items: center;*/
    position: relative;
    float: left;
    width: 100%;
    /*margin-top: 15px;*/
    text-align: right;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    display: block;
}

.main-header .header-upper .logo-box {
    position: relative;
    z-index: 20;
    display: flex;
    padding: 20px 0;
    align-self: center;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    column-gap: 20px;
}

.main-header .header-upper .logo-box .logo {
    position: relative;
    width: 229px;
}


.main-header .nav-outer .search-box-btn,
.mobile-menu .search-box-btn,
.sticky-header .search-box-btn {
    display: inline-block;
    margin-left: 30px;
}

.main-header .nav-outer .search-box-btn .icon,
.mobile-menu .search-box-btn,
.sticky-header .search-box-btn .icon {
    position: relative;
    top: 2px;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
}

.main-menu {
    position: relative;
    display: inline-block;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}

.main-menu .navbar-collapse {
    padding: 0px;
    width: 100%;
}

.main-menu .navigation {
    position: relative;
    margin: 0px;
    text-align: center;
    width: 100%;
    font-family: 'Titillium Web', sans-serif;
}

.main-menu .navigation>li {
    position: relative;
    display: inline-block;
    padding: 20px 0px;
    margin: 0px 15px;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}


.main-menu .navigation>li:last-child {
    margin-right: 0px;
}

.main-menu .navigation>li>a {
    position: relative;
    display: block;
    color: var(--color-text-dark);
    text-align: center;
    line-height: 30px;
    text-transform: capitalize;
    letter-spacing: 0px;
    opacity: 1;
    font-weight: 300;
    padding: 15px 0px;
    font-size: 21px;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}

.main-menu .navigation>li>a:before {
    position: absolute;
    content: '';
    left: 0px;
    bottom: 12px;
    height: 2px;
    width: 0%;
    background-color: var(--color-primary);
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}

.main-menu .navigation>li.current>a:before,
.main-menu .navigation>li:hover>a:before {
    width: 100%;
}

.main-menu .navigation>li:hover>a,
.main-menu .navigation>li.current>a {
    opacity: 1;
    color: var(--color-primary);
}

.main-menu .navigation>li>ul {
    position: absolute;
    left: 0px;
    top: 100%;
    margin-top: 10px;
    width: 210px;
    z-index: 100;
    display: none;
    opacity: 0;
    visibility: hidden;
    padding: 10px 0px;
    background: var(--color-bg-light);
    text-align: left;
    border-radius: 3px;
    -moz-transform: translateY(30px);
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
    -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
    -ms-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
    -o-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
}

.main-menu .navigation>li>ul:before {
    position: absolute;
    content: '';
    left: 0px;
    top: -30px;
    width: 100%;
    height: 30px;
    display: block;
}

.main-menu .navigation>li>ul>li {
    position: relative;
    width: 100%;
    padding: 0px 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 0px;
}

.main-menu .navigation>li>ul>li:last-child {
    margin-bottom: 0px;
    border-bottom: none;
}

.main-menu .navigation>li>ul>li>a {
    position: relative;
    display: block;
    padding: 8px 0px;
    line-height: 24px;
    font-weight: 600;
    font-size: 14px;
    text-transform: capitalize;
    color: var(--color-text-dark);
    transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
}

.main-menu .navigation>li>ul>li:hover>a {
    color: var(--color-primary);
    padding-left: 5px;
}

.main-menu .navigation>li>ul>li.dropdown>a:after {
    font-family: 'FontAwesome';
    content: "\f105";
    position: absolute;
    right: 0px;
    top: 9px;
    width: 10px;
    display: block;
    line-height: 24px;
    font-size: 16px;
    font-weight: normal;
    text-align: center;
    z-index: 5;
}

.main-menu .navigation>li>ul>li>ul {
    position: absolute;
    left: 100%;
    top: 0px;
    width: 210px;
    z-index: 100;
    display: none;
    opacity: 0;
    visibility: hidden;
    padding: 10px 0px;
    background: var(--color-bg-light);
    text-align: left;
    border-radius: 3px;
    -moz-transform: translateY(30px);
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
    -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
    -ms-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
    -o-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
}

.main-menu .navigation>li>ul>li>ul>li {
    position: relative;
    width: 100%;
    padding: 0px 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 0px;
}

.main-menu .navigation>li>ul>li>ul>li:last-child {
    margin-bottom: 0px;
    border-bottom: none;
}

.main-menu .navigation>li>ul>li>ul>li>a {
    position: relative;
    display: block;
    padding: 8px 0px;
    line-height: 24px;
    font-weight: 600;
    font-size: 14px;
    text-transform: capitalize;
    color: var(--color-text-dark);
    transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
}

.main-menu .navigation>li>ul>li>ul>li:hover>a {
    color: var(--color-primary);
    padding-left: 5px;
}

.main-menu .navigation>li.dropdown:hover>ul {
    visibility: visible;
    opacity: 1;
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;

}

.main-menu .navigation li>ul>li.dropdown:hover>ul {
    visibility: visible;
    opacity: 1;
    top: 0;
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}

.main-menu .navbar-collapse>ul li.dropdown .dropdown-btn {
    position: absolute;
    right: 10px;
    top: 6px;
    width: 30px;
    height: 30px;
    text-align: center;
    color: var(--color-text-light);
    line-height: 28px;
    border: 1px solid var(--color-text-light);
    background-size: 20px;
    cursor: pointer;
    z-index: 5;
    display: none;
}

/*Sticky Header*/

.stick {
    position: fixed;
    top: 0;
    width: 100%;
}

.sticky-header {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    left: 0px;
    top: 0px;
    width: 100%;
    padding: 0px 0px;
    background: var(--color-bg-dark);
    z-index: 0;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}

.fixed-header .sticky-header {
    z-index: 999;
    opacity: 1;
    visibility: visible;
    -ms-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -op-animation-name: fadeInDown;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -ms-animation-duration: 500ms;
    -moz-animation-duration: 500ms;
    -op-animation-duration: 500ms;
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
    -ms-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -op-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -ms-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -op-animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

.sticky-header .main-menu {
    margin-top: 0px;
}

.sticky-header .main-menu .navigation>li {
    position: relative;
    margin: 0 15px;
    padding: 0;
}

.sticky-header .main-menu .navigation>li:before,
.sticky-header .main-menu .navigation>li:after {
    display: none;
}

.sticky-header .main-menu .navigation>li>a {
    color: var(--color-text-light) !important;

}

.sticky-header .main-menu .navigation>li:hover>a,
.sticky-header .main-menu .navigation>li.current>a {
    color: var(--color-primary) !important;
    background-color: inherit !important;
}

.sticky-header .logo-box {
    column-gap: 20px;
    padding: 10px 0px;
}

.sticky-header .logo {
    width: 229px;
}

.sticky-header .main-menu .navigation>li>a {
    padding: 30px 0px;
}

.sticky-header .main-menu .navigation>li>a {
    padding: 19px 0px !important;
}

.sticky-header .main-menu .navigation>li>a:before {
    display: none;
}


/***

====================================================================
			Mobile Menu

====================================================================

***/

.nav-outer .mobile-nav-toggler {
    position: relative;
    float: right;
    font-size: 30px;
    line-height: 40px;
    cursor: pointer;
    color: var(--color-primary);
    padding: 10px 0px;
    display: none;
    text-align: right;
}

.mobile-menu {
    position: fixed;
    right: 0;
    top: 0;
    width: 300px;
    padding-right: 30px;
    max-width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    z-index: 999999;
}

.mobile-menu .nav-logo {
    position: relative;
    padding: 20px 20px;
    text-align: center;
}

.mobile-menu .nav-logo img {
    width: 220px;
}

.mobile-menu-visible {
    overflow: hidden;
}

.mobile-menu-visible .mobile-menu {
    opacity: 1;
    visibility: visible;
}

.mobile-menu .menu-backdrop {
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.90);
    -webkit-transform: translateX(101%);
    -ms-transform: translateX(101%);
    transform: translateX(101%);
}

.mobile-menu-visible .mobile-menu .menu-backdrop {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}

.mobile-menu .menu-box {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    background: var(--color-bg-light);
    padding: 0px 0px;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    border-radius: 0px;
    -webkit-transform: translateX(101%);
    -ms-transform: translateX(101%);
    transform: translateX(101%);
}

.mobile-menu-visible .mobile-menu .menu-box {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.7s ease 500ms;
    -moz-transition: all 0.7s ease 500ms;
    -ms-transition: all 0.7s ease 500ms;
    -o-transition: all 0.7s ease 500ms;
    transition: all 0.7s ease 500ms;
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}

.mobile-menu .close-btn {
    position: absolute;
    right: 3px;
    top: 3px;
    line-height: 30px;
    width: 30px;
    text-align: center;
    font-size: 14px;
    color: var(--color-text-dark);
    cursor: pointer;
    z-index: 10;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
}

.mobile-menu-visible .mobile-menu .close-btn {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}

.mobile-menu .close-btn:hover {
    color: var(--color-primary);
}

.mobile-menu .navigation {
    position: relative;
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.mobile-menu .navigation li {
    position: relative;
    display: block;
    font-family: 'Titillium Web', sans-serif;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.mobile-menu .navigation li>ul>li:last-child {
    border-bottom: none;
}

.mobile-menu .navigation li>ul>li:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.mobile-menu .navigation li>a {
    position: relative;
    display: block;
    line-height: 24px;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 15px;
    color: var(--color-text-dark);
    text-transform: capitalize;
}

.mobile-menu .navigation li>a:hover,
.mobile-menu .navigation li.current>a {
    color: var(--color-primary);
}

.mobile-menu .navigation li.dropdown .dropdown-btn {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 44px;
    height: 44px;
    text-align: center;
    font-size: 16px;
    line-height: 44px;
    color: var(--color-text-dark);
    cursor: pointer;
    z-index: 5;
}

.mobile-menu .navigation li.dropdown .dropdown-btn:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 10px;
    width: 1px;
    height: 24px;
    border-left: 1px solid rgba(0, 0, 0, 0.10);
}

.mobile-menu .navigation li>ul,
.mobile-menu .navigation li>ul>li>ul {

    display: none;
}


/***

====================================================================
	10. Main Slider
====================================================================

***/

.main-slider {
    position: relative;
}

.main-slider .title {
    position: relative;
    font-size: 22px;
    color: var(--color-text-light);
    font-family: 'Titillium Web', sans-serif;
    padding-bottom: 18px;

}

.main-slider .title:before {
    position: absolute;
    content: '';
    left: 50%;
    bottom: 0px;
    height: 2px;
    width: 50px;
    margin-left: -25px;
    background-color: var(--color-primary);
}

.main-slider h2 {
    position: relative;
    display: block;
    font-size: 60px;
    color: var(--color-text-light);
    font-weight: 600;
    line-height: 1.2em;
    font-family: 'Titillium Web', sans-serif;
    z-index: 1;
}

.main-slider h2.style-two {
    color: var(--color-text-dark);
}

.main-slider .text.style-two {
    color: var(--color-text-dark);
}

.main-slider .text {
    position: relative;
    font-size: 20px;
    color: var(--color-text-light);
    font-weight: 400;
    line-height: 1.14em;
    padding: 30px 0;
    text-transform: capitalize;
    display: inline-block;
    z-index: 1;

}

.main-slider .content-column {
    border-left: 5px solid var(--color-primary);
    text-align: left;
}

.main-slider .image {
    max-width: 500px;
    margin: auto;
}

@media only screen and (max-width: 991px) {
    .main-slider .content-column {
        border-left: none;
        text-align: center;
    }
}

.main-slider h2 {
    font-weight: normal !important;
    padding: 8% 0 !important;
}

.main-slider h2 p {
    line-height: 1.2 !important;
}

/***

====================================================================
	Search Popup
====================================================================

***/

.search-popup {
    position: fixed;
    left: 0px;
    top: -100%;
    width: 100%;
    height: 100%;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    overflow: auto;
    background: rgba(0, 0, 0, 0.80);
    transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -webkit-transition: all 700ms ease;
    -ms-transition: all 700ms ease;
    -o-transition: all 700ms ease;
}

.search-popup .overlay-layer {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    display: block;
}

.search-popup.popup-visible {
    top: 0;
    visibility: visible;
    opacity: 1;
}

.search-popup .close-search {
    position: absolute;
    right: 25px;
    top: 25px;
    font-size: 22px;
    color: var(--color-text-light);
    cursor: pointer;
    z-index: 5;
}

.search-popup .close-search:hover {
    opacity: 0.70;
}

.search-popup h3 {
    font-size: 24px;
    color: var(--color-text-light);
    margin-bottom: 20px;
    text-align: center;
}

/***

====================================================================
	11. About Section
====================================================================

***/

.about-section {
    position: relative;
    padding: 70px 0;
}

.about-section .title-box {
    position: relative;
    /*margin-bottom:100px;*/
}

.about-section .title-box .bold-text {
    position: relative;
    color: var(--color-text-dark);
    font-size: 16px;
    line-height: 1.6em;
    margin-top: 40px;
    margin-bottom: 20px;
}

.about-section .title-box .text {
    position: relative;
    color: var(--color-text-gray);
    font-size: 14px;
    line-height: 1.9em;
    margin-bottom: 35px;

}

.about-section .pattern-layer {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 100%;
    /*height: 500px;*/
}

/* Services Block */

.services-block {
    position: relative;
    /*margin-bottom: 30px;*/
}

.services-block .inner-box {
    position: relative;
}

.services-block .inner-box .image {
    position: relative;
    display: block;
    background: #000000;
    overflow: hidden;
}

.services-block .inner-box:hover .image {
    -webkit-transition: all 1000ms ease;
    -moz-transition: all 1000ms ease;
    -ms-transition: all 1000ms ease;
    -o-transition: all 1000ms ease;
    transition: all 1000ms ease;
    transform: rotateY(180deg);
}

.services-block .inner-box .image a {
    position: relative;
    display: block;
}

.services-block .inner-box .image a:before {
    content: "\f0c1";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -30px 0px 0px -30px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background: var(--color-bg-light);
    color: var(--color-primary);
    font-size: 20px;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -moz-transform: translateY(30px);
    transform: translateY(30px);
}

.services-block .inner-box .image img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease;
}

.services-block .inner-box:hover .image img {
    opacity: .30;
}

.services-block .inner-box:hover .image a:before {
    -webkit-transition: all 700ms ease 700ms;
    -moz-transition: all 700ms ease 700ms;
    -ms-transition: all 700ms ease 700ms;
    -o-transition: all 700ms ease 700ms;
    transition: all 700ms ease 700ms;
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}

.services-block .inner-box .lower-box {
    position: relative;
    padding-top: 6px;
    text-align: center;
    padding-bottom: 6px;
    margin-top: 20px;
}

.services-block .inner-box .lower-box:before {
    position: absolute;
    content: '';
    left: 50%;
    bottom: 0px;
    height: 2px;
    width: 50px;
    margin-left: -25px;
    background-color: var(--color-primary);
    display: none;
}

.services-block .inner-box .lower-box h3 {
    position: relative;
    font-size: 24px;
    /*font-weight:700;*/
    line-height: 1.3em;
}

.services-block .inner-box .lower-box h3 a {
    position: relative;
    color: var(--color-text-dark);
    transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
}

.services-block .inner-box .lower-box h3 a:hover {
    color: var(--color-primary);
}

.services-block .inner-box .lower-box .text {
    position: relative;
    color: var(--color-text-gray);
    font-size: 14px;
    margin-top: 4px;

}

.calls-separator-r {
    border-right: 3px solid var(--color-primary);
}

.calls-separator-l {
    border-left: 3px solid var(--color-primary);
}

@media only screen and (max-width: 992px) {
    .calls-separator-r {
        border-right: none;
    }

    .calls-separator-l {
        border-left: none;
    }
}

/***

====================================================================
	Fullwidth Section
====================================================================

 ***/

.container-fluid {
    position: relative;
    padding: 0px 0px;
    background-color: var(--color-primary);
}

.container-fluid .pattern-layer {
    position: absolute;
    content: '';
    left: 0px;
    bottom: 0px;
    width: 600px;
    height: 460px;
    background-repeat: no-repeat;
    background-position: left bottom;
}

/* Services Block Two */

/***

====================================================================
	Story Section
====================================================================

 ***/


/***

====================================================================
	News Section
====================================================================

***/

.news-section {
    position: relative;
    padding: 95px 0px 60px;
}

.news-section .sec-title {
    margin-bottom: 45px;
}

.news-section .row {
    margin: 0px -28px;
}

.news-section .news-column {
    padding: 0px 28px;
}

/* News Block */

.news-block {
    position: relative;
    margin-bottom: 40px;
}

.news-block .inner-box {
    position: relative;
}

.news-block .inner-box .image {
    position: relative;
    overflow: hidden;
    background-color: transparent;
}

.news-block .inner-box .image a {
    position: relative;
    display: block;

}

.news-block .inner-box .image a:before {
    content: "\f0c1";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -30px 0px 0px -30px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background: var(--color-bg-light);
    color: var(--color-primary);
    font-size: 20px;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -moz-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease;
}

.news-block .inner-box .image img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease;
}

.news-block .inner-box:hover .image img {
    opacity: 0.30;
    -webkit-transform: rotate(3deg) scale(1.1, 1.1);
    -ms-transform: rotate(3deg) scale(1.1, 1.1);
    transform: rotate(3deg) scale(1.1, 1.1);
}

.news-block .inner-box:hover .image a:before {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}

.news-block .inner-box .lower-content {
    position: relative;
}

.news-block .inner-box .lower-content .post-date {
    position: relative;
    color: var(--color-text-light);
    top: -20px;
    font-size: 14px;
    margin-left: 30px;
    margin-top: -10px;
    padding: 10px 17px;
    display: inline-block;
    background-color: var(--color-primary);

}

.news-block .inner-box .lower-content h3 {
    position: relative;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3em;
}

.news-block .inner-box .lower-content h3 a {
    position: relative;
    color: var(--color-text-dark);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.news-block .inner-box .lower-content h3 a:hover {
    color: var(--color-primary);
}

.news-block .inner-box .lower-content .text {
    position: relative;
    color: var(--color-text-gray);
    font-size: 14px;
    line-height: 1.9em;
    margin-top: 18px;

}

/* News Block Two */

.news-block-two {
    position: relative;
    margin-bottom: 60px;
}

.news-block-two .inner-box {
    position: relative;
}

.news-block-two .inner-box .image-column {
    position: relative;
}

.news-block-two .inner-box .image-column .image {
    position: relative;
    overflow: hidden;
    background-color: transparent;
}

.news-block-two .inner-box .image-column .image img {
    position: relative;
    width: 100%;
    display: block;
    transition: all 600ms ease;
    -webkit-transition: all 600ms ease;
    -ms-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
}

.news-block-two .inner-box:hover .image-column .image img {
    opacity: 0.4;
    -webkit-transform: rotate(5deg) scale(1.2, 1.2);
    -ms-transform: rotate(5deg) scale(1.2, 1.2);
    -moz-transform: rotate(5deg) scale(1.2, 1.2);
    transform: rotate(5deg) scale(1.2, 1.2);
}

.news-block-two .inner-box .content-column {
    position: relative;
}

.news-block-two .inner-box .content-column .inner-column {
    position: relative;
}

.news-block-two .inner-box .content-column .post-date {
    position: relative;
    color: var(--color-text-light);
    font-size: 14px;
    padding: 10px 17px;
    display: inline-block;
    background-color: var(--color-primary);
}

.news-block-two .inner-box .content-column h3 {
    position: relative;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3em;
    margin-top: 18px;
}

.news-block-two .inner-box .content-column h3 a {
    position: relative;
    color: var(--color-text-dark);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.news-block-two .inner-box .content-column h3 a:hover {
    color: var(--color-primary);
}

/***

====================================================================
	Newsletter Section
====================================================================

***/

/*Subscribe Form*/

.form-group-white .form-control {
    background: var(--color-bg-light) !important;
}

.form-control:focus {
    background-color: var(--color-text-light);
    outline: 0;
    border-color: inherit;
    box-shadow: 0 0 0 0.2rem var(--color-primary-highlight);
}

.newsletter-form-control:focus {
    background-color: unset;
    outline: 0;
    border-color: inherit;
    box-shadow: none;
}

.form-group-white .contact-form-control {
    border: 1px solid var(--color-border-dark) !important;
}

/***

====================================================================
Main Footer
====================================================================

***/

.main-footer .fa-angle-right:before {
    color: var(--color-primary);
}

.main-footer {
    /*position:relative;*/
    color: var(--color-text-light);
    background-color: var(--color-bg-dark);
    font-size: 20px;

    position: absolute;
    left: 0;
    /*bottom: 0;*/

    width: 100%;
    overflow: hidden;
}

.main-footer .footer-widget {
    display: flex;
    justify-content: center;
    position: relative;
    /*margin-bottom:40px;*/
}

.main-footer .widgets-section {
    position: relative;
    padding: 5% 0 2% 0;
}

.main-footer .footer-widget h2 {
    position: relative;
    font-weight: 600;
    color: var(--color-text-light);
    font-size: 16px;
    line-height: 1.2em;
    margin-bottom: 24px;
    padding-bottom: 14px;
    text-transform: uppercase;
}

.main-footer .footer-widget h2:before {
    position: absolute;
    content: '';
    left: 0px;
    bottom: 0px;
    height: 2px;
    width: 50px;
    background-color: var(--color-primary);
}

/* Footer List */

.footer-list {
    position: relative;
}

.footer-list li {
    position: relative;
    line-height: 1.2;
    list-style: none;
    float: left;
    clear: left;
    padding: 0;
    margin: 0;
}

.footer-list li a,
.footer-list li span {
    position: relative;
    color: var(--color-text-light);
    font-size: 17px;
    font-weight: 200;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}

.footer-list li strong a {
    font-weight: 600;
}

.footer-list li a:hover {
    color: var(--color-text-light);
}

/* Contact List */

.main-footer .contact-list {
    position: relative;
}

.main-footer .contact-list li,
.social-icon li {
    height: 42px;
    width: 42px;
    text-align: center;
    border: 2px solid;
    border-radius: 50%;
}


.main-footer .contact-list li:hover,
.social-icon li:hover {
    color: var(--color-primary);
}

.contact-list.social-icon li {
    display: inline-grid;
    align-content: center;
    align-items: center;
}

.main-footer .contact-list li a {
    color: var(--color-text-light);
}

.main-footer .contact-list li a:hover {
    text-decoration: underline;
}

.main-footer .contact-list li span {
    color: var(--color-text-light);
    font-size: 18px;
    display: block;

}

/***

====================================================================
	Architecture Section
====================================================================

***/

/***

====================================================================
	Gallery Section
====================================================================

***/

/* Project Item */

.sortable-masonry .items-container {
    position: relative;
}

/***

====================================================================
	Services Section
====================================================================

***/

/***

====================================================================
	Planning Section
====================================================================

***/

.planning-section {
    position: relative;
    padding: 100px 0;
    background-size: cover;
    background-attachment: fixed;
}

.planning-section:before {
    position: absolute;
    content: '';
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: block;
}

.planning-section .image-column {
    position: relative;
    margin-bottom: 40px;
}

.planning-section .image-column .inner-column {
    position: relative;
}

.planning-section .image-column .inner-column .image {
    position: relative;
}

.planning-section .image-column .inner-column .image img {
    position: relative;
    width: 100%;
    display: block;
}

.planning-section .content-column {
    position: relative;
}

.planning-section .content-column .inner-column {
    position: relative;
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
}

.planning-section .content-column .inner-column .text {
    position: relative;
}

.planning-section .content-column .inner-column .text p {
    position: relative;
    font-size: 40px;
    line-height: 1.5;
    color: var(--color-text-light);
    font-weight: 300;

}

.planning-section .content-column .inner-column .text p a {
    font-size: 20px;
    color: var(--color-text-light);
    font-weight: 700;
}

.fas.fa-chevron-right {
    font-size: 20px;
}

.planning-section .content-column .inner-column .text p:last-child {
    margin-bottom: 0px;
}

.planning-section .content-column .inner-column .text p span {
    font-weight: 600;
}

.planning-section .content-column,
.planning-section .image-column {}

.image-column {
    display: flex;
    align-content: center;
    align-items: center;
    padding-right: 40px;
}

/***

====================================================================
	Services Section Two
====================================================================

***/

/*Skills Section*/

/* Services Block Five */

/***

====================================================================
	Fullwidth Section Two
====================================================================

 ***/

/* Testimonial Block Two */

/***

====================================================================
	Project Contact Section
====================================================================

 ***/

/***

====================================================================
	Project Form
====================================================================

 ***/

/***

====================================================================
	Sponsors Section Two
====================================================================

***/

/***

====================================================================
	About Section Two
====================================================================

***/

/***

====================================================================
	Services Section Four
====================================================================

***/

/* Services Block Six */

/*.services-block-six .inner-box .overlay-box:before{
	position: absolute;
    content: '';
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -webkit-transition: all 700ms ease;
    -ms-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    background:var(--color-primary);
	transform-origin:top;
	-moz-transform: rotateX(-180deg);
    -webkit-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
}

.services-block-six .inner-box:hover .overlay-box:before{
	-moz-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
    opacity: 1;
    visibility: visible;
}

.services-block-six .inner-box:hover .overlay-box{
	opacity:1;
}*/

/*.services-block-six .inner-box:hover .overlay-box .overlay-inner{
	top:0;
	opacity:1;
	transition-delay:700ms;
}*/

/***

====================================================================
	Counter Section Two
====================================================================

***/

/* Counter Block */

/***

====================================================================
	Project Section Two
====================================================================

***/

/* Project Block */

/***

====================================================================
	Branded Section
====================================================================

***/

/* Brand Block */

/***
====================================================================
	Subscribe Section
====================================================================

***/

/* Subscribe Form Two */

/***

====================================================================
	Page Title
====================================================================

***/

.page-title {
    position: relative;
    padding: 70px 0px 70px;
    background-size: cover;
    background-repeat: no-repeat;
}

.page-title .content {
    position: relative;
    padding-left: 195px;
}

.page-title:before {
    position: absolute;
    content: '';
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

.page-title h2 {
    position: relative;
    color: var(--color-text-light);
    font-weight: 600;
    font-size: 48px;
    line-height: 1.3em;
}

.page-title .text {
    position: relative;
    color: var(--color-text-light);
    font-size: 22px;
    margin-top: 5px;
    line-height: 1.3em;

}

/* Brand Block Two */

/***

====================================================================
	Solution Section
====================================================================

***/

/* Price Page Section */

.price span {
    color: var(--color-primary);
}

.price-discount del {
    /*color: rgba(255, 165, 0, 0.5);*/
    text-decoration: none;
    position: relative;
}

.price-discount del:before {
    content: " ";
    display: block;
    width: 100%;
    border-top: 2px solid;
    height: 4px;
    position: absolute;
    bottom: 12px;
    left: 0;
    transform: rotate(-11deg);
}


/****************************************
    discount v1.0
*****************************************/
.bs-discount {
    position: absolute;
    z-index: 1000;
    font-size: 0.75rem;
}

@media screen and (min-width: 768px) {
    .bs-discount {
        font-size: 1rem;
    }
}

@media screen and (min-width: 992px) {
    .bs-discount {
        font-size: 1.25rem;
    }
}

.bs-discount.right {
    right: 8px;
}

.bs-discount.bottom {
    bottom: 0;
}

.bs-discount span,
.bs-discount strong {
    box-sizing: border-box;
}


/*************************************
  flag
**************************************/
.bs-discount.flag-down {
    background: var(--red);
    color: white;
    text-align: center;
    width: 3em;
    font-size: 25px;
    font-weight: bold;
    line-height: 3em;
}

/*************************************
    flag-down
**************************************/
.bs-discount.flag-down::after {
    content: " ";
    border-left: 1.5em solid var(--red);
    ;
    border-right: 1.5em solid var(--red);
    ;
    border-bottom: 1em solid transparent;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}


/***

====================================================================
	Branded Section
====================================================================

***/

/* Price Block Two */

/***

====================================================================
	Services Section Six
====================================================================

***/

/***

====================================================================
	Accordion Style
====================================================================

***/

.accordion-box {
    position: relative;
}

.accordion-box .block {
    position: relative;
    border-bottom: 1px solid var(--color-border-light);
}

.accordion-box .block.active-block {}

.accordion-box .block .acc-btn {
    position: relative;
    font-size: 24px;
    cursor: pointer;
    line-height: 34px;
    color: var(--color-text-dark);
    font-weight: 600;
    font-family: 'Titillium Web', sans-serif;
    padding: 20px 0px 20px 0px;
    transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
}

.accordion-box .block .acc-btn.active {
    color: var(--color-primary);
}

.accordion-box .block .acc-content {
    position: relative;
    display: none;
}

.accordion-box .block .acc-content.current {
    display: block;
}

.accordion-box .block .content {
    position: relative;
    font-size: 14px;
    padding: 0px 0px 30px 0px;
}

.accordion-box .block .content .text {
    position: relative;
    color: var(--color-text-gray);
    line-height: 1.9em;

}

.accordion-box .block .content p:last-child {
    margin-bottom: 0px;
}

.accordion-box.style-two .block .acc-btn {
    font-size: 20px;
}

/***

====================================================================
	Branded Section Two
====================================================================

***/

/***

====================================================================
	Services Section Seven
====================================================================

***/

/***

====================================================================
	Services Section Eight
====================================================================

***/

/***

====================================================================
	Fluid Section Two
====================================================================

***/

/*Content Column*/

/***

====================================================================
	Call To Action Section
====================================================================

***/

/***

====================================================================
	About Section Three
====================================================================

***/

/***

====================================================================
	Contact Form Section
====================================================================

***/

.contact-form-section {
    position: relative;
    padding: 80px 0px 70px;
}

.contact-form-section .pattern-layer {
    position: absolute;
    left: 0px;
    top: 40px;
    width: 960px;
    height: 785px;
}

.contact-form-section .sec-title {
    margin-bottom: 50px;
}

.contact-form-section .sec-title .text {
    max-width: 750px;
}

.contact-form-section .contact-form {
    max-width: 950px;
    margin: 0 auto;
}

.contact-form-section.style-two {
    padding-top: 90px;
}

/***

====================================================================
	Contact Form
====================================================================

 ***/

.contact-form {
    position: relative;
}

.contact-form .form-group {
    position: relative;
    margin-bottom: 30px;
}

.contact-form .form-group input[type="text"],
.contact-form .form-group input[type="tel"],
.contact-form .form-group input[type="email"],
.contact-form .form-group select,
.contact-form .form-group textarea {
    position: relative;
    display: block;
    width: 100%;
    line-height: 28px;
    padding: 10px 25px;
    color: var(--color-text-dark);
    height: 55px;
    font-size: 15px;
    background: var(--color-bg-light);
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;

}

.contact-form .form-group input[type="text"]:focus,
.contact-form .form-group input[type="tel"]:focus,
.contact-form .form-group input[type="email"]:focus,
.contact-form .form-group textarea:focus {

}

.contact-form .form-group textarea::-webkit-input-placeholder,
.contact-form .form-group input::-webkit-input-placeholder {
    color: var(--color-text-gray);
}

.contact-form .form-group textarea {
    height: 130px;
    resize: none;
}

.contact-form button {
    cursor: pointer;
}

.contact-form input.error,
.contact-form select.error,
.contact-form textarea.error {
    border-color: var(--color-error) !important;
}

.contact-form label.error {
    display: block;
    line-height: 24px;
    padding: 5px 0px 0px;
    margin: 0px;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--color-error);
    font-weight: 600;
}

.contact-form .form-group input[type="email"] {
    position: relative;
    display: block;
    width: 100%;
    line-height: 28px;
    padding: 10px 25px;
    color: var(--color-text-dark);
    height: 55px;
    font-size: 15px;
    background: var(--color-bg-light);
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}

/***

====================================================================
	Contact Info Section
====================================================================

 ***/

/***

====================================================================
	Blog Page Section
====================================================================

 ***/

/* News Block Three */


/***

====================================================================
	Feature Section
====================================================================

***/

.feature-section {
    position: relative;
    padding-top: 80px;
    padding-bottom: 80px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}

.feature-section:before {
    position: absolute;
    content: '';
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

.feature-section p,
.feature-section h1,
.feature-section h3 {
    color: var(--color-text-light);
}

.feature-section h1 {
    font-weight: 600;
    font-size: 50px;
}


/* Feature Block */

.feature-block {
    position: relative;
    margin-bottom: 45px;
}

.feature-block .inner-box {
    position: relative;
    text-align: center;
}

.feature-block .inner-box .icon-box {
    position: relative;
    color: var(--color-primary);
    font-size: 50px;
    line-height: 1em;
    text-align: center;
}

.feature-block .inner-box h3,
.feature-block .inner-box h4 {
    position: relative;
    font-size: 24px;
    color: var(--color-text-light);
    line-height: 1.3em;
    margin-top: 25px;
    margin-bottom: 10px;

}

.feature-block .inner-box .text {
    position: relative;
    font-size: 16px;
    color: var(--color-text-light);
    line-height: 1.9em;

}

/***

====================================================================
	Sidebar Page Container
====================================================================

***/

/*Sidebar Title*/

/*Search Box Widget*/

/* Category List */

/*Post Widget*/

/* About Widget */

/* Popular Tags */

/* Newsletter Widget */

/* Subscribe Form Two*/

/* News Block */

/***

====================================================================
	Styled Pagination
====================================================================

***/

/***

====================================================================
	Blog Detail
====================================================================

***/

/*News Posts*/

/***

====================================================================
	Comments Area
====================================================================

 ***/

/***

====================================================================
	Modal Dialog
====================================================================

 ***/


.modal-dialog {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1000;
    /* Sit on top */
    left: 0;
    top: 0;
    user-select: none;
    margin: 0;
    max-width: 100%;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.6);
    /* Black w/ opacity */
    pointer-events: all !important;
}

/* Modal Content/Box */
.modal-content {
    background-color: var(--color-bg-light);
    margin: 15% auto;
    /* 15% from the top and centered */
    margin-top: 200px;
    padding: 20px;
    border: 1px solid var(--color-border-light);
    min-width: 400px;
    max-width: 500px;
    width: 25%;
    /* Could be more or less, depending on screen size */
}

/***

====================================================================
	Breadcrumbs
====================================================================

 ***/

.rs-breadcrumbs.img3,
.page-title {
    position: relative;
}

.rs-breadcrumbs.img3:before {
    background-color: rgba(75, 71, 138, 0.50);
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/***

====================================================================
	RECAPTCHA
====================================================================

 ***/

.g-recaptcha div {
    margin: 0 auto;
}

/***

====================================================================
	CHECKOUT
====================================================================

 ***/

.checkout-main-content-area {
    display: flex;
    flex-wrap: wrap;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--color-bg-light);
    min-height: 736px;
    height: auto;
    justify-content: center;
    align-items: stretch;
}

.checkout-main-column {
    box-sizing: border-box;
    margin: 10px 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    width: 400px;
}

.checkout-main-column.data {
    width: 450px;
    row-gap: 35px;
}

.checkout-main-column>.row {
    margin-left: 0;
    margin-right: 0;

}

.checkout-plan-name {
    font-weight: 600;
}

.checkout-plan-resume {
    margin-top: 10px;
    margin-bottom: 20px;
    column-gap: 10px;
}

.bg-payment-gradient {
    background: white;
    box-shadow: 5px 0 20px rgb(0 0 0 / 10%);
    border-radius: 10px;
    padding: 0;
}


.heading--subtitle {
    font-weight: 500;
    font-size: 1.175rem;
    line-height: 1.25rem;
    margin-bottom: 6px;
}

.card-shadow {
    background: linear-gradient(-35deg, rgb(248, 249, 250), rgba(255, 255, 255, 0.8));
    box-shadow: 5px 0 20px rgb(0 0 0 / 10%);
    border-radius: 10px;
}

.middle-section {
    background: var(--color-bg-light);
}

h3 {
    margin: 0;
}

.dropbtn {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-gray);
    background-clip: padding-box;
    border: 1px solid var(--color-border-light);
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

    box-sizing: border-box;
    margin-top: 6px;
    resize: vertical;
    background: var(--color-bg-white);
}

.custom-checkbox input:checked~.form-check-input {
    background-color: red;
}

.custom-checkbox {
    display: block;
    position: relative;
    padding-left: 40px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 4px;
    left: 0.4rem;
    height: 25px;
    width: 25px;
    background-color: transparent;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
}

/* On mouse-over, add a grey background color */
.custom-checkbox:hover input~.checkmark {
    background-color: var(--color-bg-light);
}

/* When the checkbox is checked, add a blue background */
.custom-checkbox input:checked~.checkmark {
    background-color: var(--color-primary);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.custom-checkbox input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.custom-checkbox .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


.radio-input:checked,
.radio-input:not(:checked) {
    position: absolute;
    left: -9999px;
    width: 0;
    height: 0;
    visibility: hidden;
}


label~.radio-input:checked,
label~.radio-input:not(:checked),
.radio-input:checked+label,
.radio-input:not(:checked)+label {
    margin: 0 auto;
    overflow: hidden;
    cursor: pointer;
}

label>.radio-input:checked,
.radio-input:checked+label {
    border: 2px solid var(--color-primary);
}

.radio-input:checked+label>div {}


/* Show the tooltip text when you mouse over the tooltip container */
.tooltip-info:hover .tooltiptext {
    visibility: visible;
}

.form-control:disabled {
    background-color: var(--color-bg-light) !important;
}


.checkout-tab-link {
    border-bottom: 2px solid;
    background: none;
    text-align: center;
}

.checkout-tab-link.active {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
}

.checkout-nav {
    font-size: 18px;
    display: inline-flex !important;
    justify-content: space-around;
    width: 100%;
}

/*********

FORM CONTROL

**********/


.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-gray);
    background-color: transparent;
    background-clip: padding-box;
    border: none;
    border-bottom: 1px solid var(--color-border-gray);
    border-radius: 0;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control-with-icon {
    color: var(--color-text-gray);
    background-color: transparent;
    background-clip: padding-box;
    font-size: 16px;
    border: none;
    border-bottom: 1px solid var(--color-border-dark);
    border-radius: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control-with-icon input {
    width: 88%;
    display: inline-block;
    background: transparent;
    padding: 0.375rem 0.75rem;
    height: 35px;
}

.form-control-with-icon:focus-within {
    color: var(--color-text-gray);
    background-color: var(--color-text-light);
    border-color: inherit;
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--color-primary-highlight);
}

.form-control-with-icon:focus-within input {
    color: var(--color-text-gray);
}

.form-quantity {
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    padding: 15px 0 15px 10px;
    height: 25px;
    width: 55px;
}


/***

====================================================================
	ToolTip
====================================================================

 ***/

.tooltip-info {
    color: var(--color-primary);
}

.tooltip-info {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip-info .tooltiptext {
    visibility: hidden;
    width: 180px;
    background-color: var(--color-primary);
    color: var(--color-text-light);
    text-align: center;
    padding: 10px;
    border-radius: 4px;
    position: absolute;
    right: 25px;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
    z-index: 1;
}

/* Tooltip text */
.invoiceDataTooltip .tooltiptext {
    visibility: hidden;
    width: 260px;
    background-color: var(--color-bg-white);
    border: 2px solid var(--color-primary);
    text-align: start;
    padding: 10px;
    border-radius: 6px;
    font-size: 18px;
    position: absolute;
    right: 0;
    z-index: 1;
}

/***

====================================================================
	Comment Form
====================================================================

 ***/

.news-block .lower-content p a {
    font-size: 15px;
}

.news-block .lower-content i {
    font-size: 12px;
    color: var(--color-primary);
}

.news-block-two .content-column .inner-column p a {
    font-size: 15px;
}

.news-block-two .content-column .inner-column i {
    font-size: 12px;
    color: var(--color-primary);
}

.sticky-header .auto-container {
    padding: 0.4% 15px;
}

.sticky-header .auto-container .main-menu .navigation>li>a {
    font-size: 21px;
}

.pt-60 {
    padding-top: 60px;
}

.pb-60 {
    padding-bottom: 60px;
}

.mt-30 {
    margin-top: 30px;
}

a.primary-btn,
.primary-btn a,
button.primary-btn {
    color: var(--color-text-light);
    background-color: var(--color-primary);
    padding: 2px 12px;
    border-radius: 5px;
    border: 2px solid var(--color-primary);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

a.primary-btn:hover,
.primary-btn a:hover,
button.primary-btn:hover {
    color: var(--color-primary);
    background-color: var(--color-text-light);
    padding: 2px 12px;
    border-radius: 5px;
    border: 2px solid var(--color-primary);
    transition: all 0.2s ease-in-out;
}

a.secondary-btn,
.secondary-btn a,
a.secondary-btn,
button.secondary-btn {
    color: var(--color-primary);
    background-color: var(--color-text-light);
    padding: 2px 12px;
    border-radius: 5px;
    border: 2px solid var(--color-bg-white);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    line-height: 38px;
}

a.secondary-btn:hover,
.secondary-btn a:hover,
a.secondary-btn:hover,
button.secondary-btn:hover {
    color: var(--color-text-light) !important;
    background-color: var(--color-primary);
    padding: 2px 12px;
    border-radius: 5px;
    border: 2px solid var(--color-bg-white);
    transition: all 0.2s ease-in-out;
}

a.primary-btn.disabled,
.primary-btn a.disabled,
button.primary-btn:disabled,
a.secondary-btn:disabled,
.secondary-btn a.disabled,
button.secondary-btn:disabled {
    color: var(--color-text-light);
    cursor: auto;
    background-color: grey;
    padding: 2px 12px;
    border-radius: 5px;
    border: 2px solid grey;
    transition: all 0.2s ease-in-out;
}

button.primary-btn.btn--loading:hover::after {
    border-top-color: var(--color-primary);
}

button.primary-btn.btn--loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 4px solid transparent;
    border-top-color: var(--color-text-light);
    border-radius: 50%;
    animation: button-loading-spinner 1s ease infinite;
}


button.secondary-btn.btn--loading:hover::after {
    border-top-color: var(--color-text-light);
}

button.secondary-btn.btn--loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 4px solid transparent;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: button-loading-spinner 1s ease infinite;
}


.btn--loading .button__text {
    visibility: hidden;
    opacity: 0;
}

@keyframes button-loading-spinner {
    from {
        transform: rotate(0turn);
    }

    to {
        transform: rotate(1turn);
    }
}

.blog-button.inner-blog:hover .fas.fa-long-arrow-alt-right {
    margin-right: 0;
    transition: all 0.2s ease-in-out;
}

.blog-button.inner-blog .fas.fa-long-arrow-alt-right {
    transition: all 0.2s ease-in-out;
}

.blog-button.inner-blog {
    text-align: right;
}

.blog-button.inner-blog .fas.fa-long-arrow-alt-right {
    margin-right: 15px;
}

.bs {
    box-shadow: 0px 0px 5px -4px;
}

.bs-top-left {
    box-shadow: -2px -2px 5px -4px;
}

.bg-gradient {
    background: linear-gradient(-35deg, rgb(248, 249, 250), rgba(255, 255, 255, 0.8));
}

.mr-10 {
    margin-right: 10px;
}

.ml-10 {
    margin-left: 10px;
}

.br-10 {
    border-radius: 10px;
}

.pt-15 {
    padding-top: 15px;
}

.hide {
    display: none;
}

.compilero:hover,
.compilero:hover>i {
    color: var(--color-compilero) !important;
}

.compileroxradio:hover,
.compileroxradio:hover>i {
    color: var(--color-compilero-radio) !important;
}