/* ======================
   Index
   1. Default css
   2. Preloader css
   3. Button css
   4. Breadcrumb
   5. Header
   6. Menu css
   7. Hero Section
   8. About Section
   9. Why Choose Section
   10. Products Section
   11. Products Details
   12. Rating css
   13. FAQ Section
   14. Contact Section
   15. Footer Section
   16. Entry css
   17. Layer Bounce
   
   ====================== */

/* ======================
   Default css
   ====================== */

* {
    margin: 0;
    padding: 0;
    outline: 0;
}
body {
    font-family: var(--primary-font-family);
    font-weight: normal;
    font-style: normal;
    color: var(--color-gray-dark);
    font-size: 16px;
    line-height: 1.5;
}
.img,
img {
    max-width: 100%;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
a,
.button {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
a:focus,
.button:focus {
    text-decoration: none;
    outline: none;
}
a {
    text-decoration: none;
    display: inline-block;
    color: var(--color-gray-dark);
}
a:focus,
a:hover {
    text-decoration: none;
    color: var(--theme-color);
}
a,
button {
    outline: medium none;
}
.relative {
    position: relative;
}
table {
    width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--secondary-font-family);
    color: var(--color-black);
    margin-top: 0px;
    font-style: normal;
    font-weight: 700;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
}
h1 {
    font-size: 40px;
}
h2 {
    font-size: 35px;
}
h3 {
    font-size: 28px;
}
h4 {
    font-size: 22px;
}
h5 {
    font-size: 18px;
}
h6 {
    font-size: 16px;
}
ul {
    margin: 0px;
    padding: 0px;
}
li {
    list-style: none;
}
p {
    color: var(--color-gray-dark);
    font-family: var(--secondary-font-family);
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 15px;
}
label {
    color: var(--color-gray-dark);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

*::-moz-selection {
    background: var(--theme-color);
    color: var(--color-white);
    text-shadow: none;
}
::-moz-selection {
    background: var(--theme-color);
    color: var(--color-white);
    text-shadow: none;
}
::selection {
    background: var(--theme-color);
    color: var(--color-white);
    text-shadow: none;
}

*::-moz-placeholder {
    color: var(--color-gray-400);
}
*::placeholder {
    color: var(--color-gray-400);
}

.red {
	color: #f25961;
}
input:hover,
input:active,
input:focus,
textarea:hover,
textarea:active,
textarea:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active {
    outline: 0px !important;
    box-shadow: none !important;
}
.form-control,
.form-group input,
input,
input.form-control,
.form-select,
.form-control textarea,
.form-group textarea,
textarea {
    padding: 8px 10px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border-color: var(--color-gray-400);
    height: auto;
    color: var(--color-gray-dark);
    font-size: 14px;
}
input.form-control:focus,
.form-group input:focus,
.form-group textarea:focus,
input:focus,
textarea:focus,
.form-control textarea:focus,
.form-control:focus {
    box-shadow: none;
    color: var(--color-gray-dark);
    border-color: var(--theme-color);
}
.form-select:focus {
    border-color: var(--theme-color);
    box-shadow: none;
}
.form-control:-moz-focusring {
    color: var(--color-gray-dark);
    text-shadow: none;
}
.form-control:disabled, 
.form-control[readonly] {
	background-color: #e9ecef;
	opacity: 1;
}
main {
    display: block;
}
.section {
    padding: 80px 0;
}
.theme-color {
	color: var(--theme-color);
}
.mb20 {
	margin-bottom: 20px;
}

.section-heading {
    text-align: center;
    margin-bottom: 60px;
}
.section-heading h5 {
    color: var(--theme-color);
    font-size: 18px;
}
.section-heading h2 {
    margin: 15px 0;
}

a.scroll-to-top {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    color: var(--color-white);
    background-color: var(--theme-color);
    text-align: center;
    font-size: 18px;
    z-index: 9999;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
}
a.scroll-to-top:hover {
    background: var(--color-black);
}

.sticky {
    left: 0;
    margin: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
	border-bottom: 1px solid var(--color-gray-400);
    -webkit-animation: fadeInDown 0.7s ease-in-out 0s 1 normal none running;
    animation: fadeInDown 0.7s ease-in-out 0s 1 normal none running;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.header-menu.sticky {
	padding: 0px 0px;
}
.header-menu.sticky .logo {
	width: 140px;
}

.page-item.active .page-link {
	color: var(--color-white);
	background-color: var(--theme-color);
	border-color: var(--theme-color);
}
.page-link {
	color: var(--theme-color);
}
.page-link:hover {
	color: var(--theme-color);
}
.page-link:focus {
	color: var(--theme-color);
}

/* ======================
   Preloader css
   ====================== */
.tw-loader {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 9999999;
    width: 100%;
    height: 100vh;
    background: var(--color-white);
}
.tw-ellipsis {
    position: relative;
    width: 80px;
    height: 15px;
    top: 50%;
    margin: auto;
}
.tw-ellipsis div {
    position: absolute;
    top: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
    background: var(--theme-color);
}
.tw-ellipsis div:nth-child(1) {
    left: 8px;
    animation: tw-ellipsis1 0.6s infinite;
}
.tw-ellipsis div:nth-child(2) {
    left: 8px;
    animation: tw-ellipsis2 0.6s infinite;
}
.tw-ellipsis div:nth-child(3) {
    left: 32px;
    animation: tw-ellipsis2 0.6s infinite;
}
.tw-ellipsis div:nth-child(4) {
    left: 56px;
    animation: tw-ellipsis3 0.6s infinite;
}

@keyframes tw-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes tw-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}
@keyframes tw-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(24px, 0);
    }
}

/* ======================
   Button css
   ====================== */
.btn {
	-moz-user-select: none;
	border: none;
	border-radius: 50px;
	padding: 15px 30px;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	font-family: var(--secondary-font-family);
	font-weight: 800;
	line-height: 1;
	margin-bottom: 0;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	position: relative;
	z-index: 2;
	overflow: hidden;
	-moz-transition: all ease 400ms;
	-webkit-transition: all ease 400ms;
	transition: all ease 400ms;
}
.btn.focus, 
.btn:focus {
	box-shadow: none;
}
.btn.theme-btn {
	color: var(--color-white);
	background-color: var(--theme-color);
}
.btn.theme-btn:hover {
	color: var(--color-white);
	background: var(--color-light);
}
.tp-menu li a.support-btn {
	background: var(--theme-color);
	color: var(--color-white);
	border-radius: 5px;
	padding: 10px 25px;
	margin-top: 15px;
	margin-left: 15px;
	box-shadow: 0px 15px 29px rgb(249, 245, 242);
	-webkit-transition: all .5s linear;
	transition: all .5s linear;
	-moz-transition: all ease 400ms;
	-webkit-transition: all ease 400ms;
	transition: all ease 400ms;
}
.tp-menu li:hover a.support-btn {
	color: var(--color-white);
	background: var(--color-light);
}

/* ======================
   Breadcrumb
   ====================== */
.breadcrumb-section {
	background-position: 50%;
	background-size: cover;
	height: 100%;
	min-height: 250px;
	position: relative;
	display: flex;
	align-items: center;
	text-align: center;
	background: radial-gradient(at center, rgba(255, 247, 241, 1.0), rgba(255, 255, 255, 1.0));
	border-bottom:1px solid var(--color-gray-400);
}
.breadcrumb-section .breadcrumb-card {
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.breadcrumb-section .breadcrumb-card h2 {
	font-size: 25px;
	margin-bottom: 5px;
	line-height: 1.5;
	color: var(--color-black);
	letter-spacing: 1px;
}
.breadcrumb-section .breadcrumb-card nav ol {
	justify-content: center;
}
.breadcrumb-section .breadcrumb-card nav ol li, 
.breadcrumb-section .breadcrumb-card nav ol li a {
	color: var(--color-black);
	font-size: 18px;
	font-weight: 600;
	transition: all .6s ease-in-out;
}
/* ======================
   Header
   ====================== */
.header {
    display: block;
    background-color: var(--color-white);
}
.header .logo {
    width: 170px;
    padding: 10px 0;
    float: left;
}
.header .logo img {
    width: 100%;
    height: auto;
}

/* ======================
   Menu css
   ====================== */
.header-menu {
    height: auto;
    padding: 0px 0px;
    background-color: var(--color-white);
	border-bottom: 1px solid var(--color-gray-400);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
.tp-mega-full {
    position: relative;
    width: 100%;
    line-height: 1;
}
.tp-menu {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
}
.tp-menu nav {
    float: left;
    padding-top: 0px;
}
.tp-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tp-menu ul li {
    float: left;
    position: relative;
}
.tp-menu ul li a.tp-updown {
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.tp-menu ul > li > a.tp-updown::before {
    position: absolute;
    content: "\F282";
    right: 0px;
    top: 26px;
    bottom: 24px;
    font-family: "bootstrap-icons";
    color: var(--color-black);
    font-size: 14px;
}
.tp-menu ul > li:hover > a.tp-updown::before {
    position: absolute;
    content: "\F286";
    right: 0px;
    top: 26px;
    bottom: 24px;
    font-family: "bootstrap-icons";
    color: var(--theme-color);
    font-size: 14px;
}
.tp-menu ul li a {
    font-family: var(--secondary-font-family);
    color: var(--color-black);
    font-size: 16px;
    font-weight: 700;
    display: block;
    padding: 25px 20px;
    text-decoration: none;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
.tp-menu ul li:hover > a,
.tp-menu ul li.active > a {
    color: var(--theme-color);
}

/*submenu*/
.tp-menu ul li ul.submenu {
    position: absolute;
    top: 110%;
    left: 0;
    width: 220px;
    padding: 15px 15px;
    border-radius: 0px 0px 10px 10px;
    background: var(--color-white);
    z-index: 999999;
    visibility: hidden;
    opacity: 0;
    -webkit-box-shadow: 0px 17px 42px rgba(93, 93, 93, 0.14);
    -moz-box-shadow: 0px 17px 42px rgba(93, 93, 93, 0.14);
    box-shadow: 0px 17px 42px rgba(93, 93, 93, 0.14);
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.tp-menu ul li:hover ul.submenu {
    visibility: visible;
    opacity: 1;
    top: 100%;
}
.tp-menu ul li ul.submenu li {
    float: none;
    margin: 0;
}
.tp-menu ul li ul.submenu li:last-child {
    border-bottom: none;
}
.tp-menu ul li ul.submenu li a {
    font-size: 14px;
    font-weight: 700;
    padding: 12px 15px;
    color: var(--color-black);
    text-transform: capitalize;
}

/*three level menu*/
.tp-menu ul li ul.submenu li ul.submenu {
    left: 100%;
    top: 0;
    opacity: 0;
    visibility: hidden;
}
.tp-menu ul li ul.submenu li:hover > ul.submenu {
    opacity: 1;
    visibility: visible;
}

/*mega-menu*/
.tp-menu ul li .mega-menu {
    position: absolute;
    top: 110%;
    left: 0;
    width: 500px;
    background: var(--color-white);
    border-radius: 0px 0px 10px 10px;
    padding: 30px 15px 18px 15px;
    z-index: 999999;
    visibility: hidden;
    opacity: 0;
    -webkit-box-shadow: 0px 17px 42px rgba(93, 93, 93, 0.14);
    -moz-box-shadow: 0px 17px 42px rgba(93, 93, 93, 0.14);
    box-shadow: 0px 17px 42px rgba(93, 93, 93, 0.14);
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.tp-menu ul li:hover .mega-menu {
    visibility: visible;
    opacity: 1;
    top: 100%;
}
.tp-menu ul li .mega-menu ul {
    float: left;
}
.tp-menu ul li .mega-menu ul li {
    float: none;
    margin-right: 0;
}
.tp-menu ul li .mega-menu ul li a {
    padding: 12px 0px;
    text-transform: capitalize;
    color: var(--color-black);
    font-size: 14px;
    font-weight: 700;
    font-family: var(--secondary-font-family);
}

.tp-menu ul li ul.submenu li:hover > a,
.tp-menu ul li ul.submenu li.active > a,
.tp-menu ul li .mega-menu ul li:hover a,
.tp-menu ul li .mega-menu ul li.active > a {
	color: var(--theme-color);
	background: transparent;
}
.tp-menu ul li .mega-menu ul li.mega-title {
    padding: 0px 0px 5px 0px;
    color: var(--theme-color);
    font-weight: 800;
    font-size: 14px;
    font-family: var(--secondary-font-family);
    position: relative;
    margin-bottom: 10px;
}
.tp-menu ul li .mega-menu ul li.mega-title::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--theme-color);
}

.tp-menu ul li .mega-menu ul.megafixed-col-1 {
    width: 100%;
}
.tp-menu ul li .mega-menu ul.megafixed-col-2 {
    width: 50%;
}
.tp-menu ul li .mega-menu ul.megafixed-col-3 {
    width: 33.33333333333333%;
}
.tp-menu ul li .mega-menu ul.megafixed-col-4 {
    width: 25%;
}
.tp-menu ul li .mega-menu ul.megafixed-col-5 {
    width: 20%;
}
.tp-menu ul li .mega-menu ul.megafixed-col-6 {
    width: 16.66666666666667%;
}

/*mega-menu full*/
.tp-menu ul li.tp-static {
    position: static;
}
.tp-menu ul li .mega-menu.mega-full {
    width: 100%;
}
.tp-menu ul li .mega-menu ul {
    padding: 0px 15px;
}
.tp-menu ul li .mega-menu ul:last-child {
    border-right: none;
}
.tp-menu ul li .mega-menu ul li.mega-col-image {
    overflow: hidden;
    padding: 0px 10px 0px 0px;
}
.tp-menu ul li .mega-menu ul li.mega-col-image a {
    padding: 0;
}
.tp-menu ul li .mega-menu ul li.mega-col-image img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.tp-menu ul li .mega-menu.mega-full ul.mega-col-1 {
    width: 100%;
}
.tp-menu ul li .mega-menu.mega-full ul.mega-col-2 {
    width: 50%;
}
.tp-menu ul li .mega-menu.mega-full ul.mega-col-3 {
    width: 33.33333333333333%;
}
.tp-menu ul li .mega-menu.mega-full ul.mega-col-4 {
    width: 25%;
}
.tp-menu ul li .mega-menu.mega-full ul.mega-col-5 {
    width: 20%;
}
.tp-menu ul li .mega-menu.mega-full ul.mega-col-6 {
    width: 16.66666666666667%;
}

/*mobile menu*/
.icon-bars-card {
    width: auto;
    float: right;
    display: none;
}
.icon-bars-card a i {
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 20px;
    display: inline-block;
    text-align: center;
    background: var(--theme-color);
    color: var(--color-white);
    border-radius: 50%;
    margin-top: 5px;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    -webkit-box-shadow: 0px 0px 25px 4px rgba(87, 87, 87, 0.3);
    -moz-box-shadow: 0px 0px 25px 4px rgba(87, 87, 87, 0.3);
    box-shadow: 0px 0px 25px 4px rgba(87, 87, 87, 0.3);
}

.mobile-menu-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    z-index: 99999;
}
.mobile-menu-wrapper.open {
    opacity: 1;
    visibility: visible;
}
.mobile-menu-wrapper .off-canvas-overlay {
    background-color: rgba(0, 0, 0, 0.4);
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}
.mobile-menu-wrapper .offcanvas-body {
    background-color: var(--color-black);
    width: 300px;
    height: 100%;
    padding: 0px 0px 100px 0px;
    position: relative;
    -webkit-transform: translateX(calc(-100% - 50px));
    -ms-transform: translateX(calc(-100% - 50px));
    transform: translateX(calc(-100% - 50px));
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.mobile-menu-wrapper.open .offcanvas-body {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}
.offcanvas-body .offcanvas-top {
    width: 100%;
    padding: 20px 20px;
    border-bottom: 1px solid var(--color-gray-dark);
    margin-bottom: 15px;
    height: auto;
    transform: none;
}
.offcanvas-top .offcanvas-btn-close {
    width: 30px;
    height: 30px;
    font-size: 14px;
    color: var(--color-black);
    line-height: 29px;
    text-align: center;
    cursor: pointer;
    background: var(--color-white);
    border-radius: 50%;
}
.mobile-navigation {}
.mobile-navigation nav {
    height: 100%;
}
.mobile-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.mobile-menu li > a {
    font-size: 14px;
    color: var(--color-gray);
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding: 10px 10px 10px 20px;
    width: 100%;
    font-family: var(--secondary-font-family);
    font-weight: 700;
}
.mobile-menu li > a:hover {
    color: var(--theme-color);
    text-decoration: none;
}
.mobile-menu li.has-children-menu.active > a {
    color: var(--theme-color);
}
.mobile-menu li.has-children-menu ul.dropdown,
.mobile-menu li.has-children-menu.active ul.dropdown,
.mobile-menu li ul.megamenu {
    margin: 0px;
    padding: 0px;
    background-color: rgba(255, 255, 255, 0.05);
}
.mobile-menu li ul li {
    border: none;
}
.mobile-menu li ul li a {
    font-size: 14px;
    padding: 10px 10px 10px 20px;
    width: 100%;
}
.mobile-menu li.has-children-menu {
    display: block;
    position: relative;
    width: 100%;
}
.mobile-menu li.has-children-menu .menu-expand {
    top: 10px;
    right: 20px;
    width: 14px;
    position: absolute;
    height: 20px;
    text-align: center;
    cursor: pointer;
}
.mobile-menu li.has-children-menu .menu-expand i {
    display: block;
    position: relative;
    width: 100%;
    margin-top: 10px;
    border-bottom: 1px solid var(--color-gray);
    -webkit-transition: all 250ms ease-out;
    transition: all 250ms ease-out;
}
.mobile-menu li.has-children-menu .menu-expand i:before {
    top: 0;
    width: 100%;
    content: "";
    display: block;
    position: absolute;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    border-bottom: 1px solid var(--color-gray);
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.mobile-menu li.has-children-menu.active > .menu-expand i:before {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}

/* ======================
   Hero Section
   ====================== */
.hero-section {
	padding: 0px;
	position: relative;
	background: rgba(255, 247, 241, 1.0);
	background: radial-gradient(at center, rgba(255, 247, 241, 1.0), rgba(255, 255, 255, 1.0));
}
.hero-screen {
	background-position: 50%;
	background-size: cover;
	height: 100%;
	width: 100%;
	padding: 260px 0px 270px 0px;
	position: relative;
}
.hero-screen .hero-content {
	text-align: center;
	position: relative;
	z-index: 2;
}
.hero-screen .hero-content h1 {
	font-size: 45px;
	font-weight: 900;
	margin-bottom: 25px;
	color: var(--color-black);
	line-height: 1.5;
}
.hero-screen .hero-content p {
	margin-bottom: 40px;
	font-weight: 500;
	font-size: 16px;
	line-height: 2;
}

.tech-logo {
	position: absolute;
	z-index: 1;
	width: 50px;
	height: 50px;
	background: #fff;
	border-radius: 50%;
	overflow: hidden;
	padding: 10px;
	text-align: center;
	box-shadow: 0px 15px 29px rgb(242, 242, 242);
}
.tech-logo img {
	width: 100%;
	height: 100%;
}
.tech-logo.laravel {
	left: 0;
	top: -110px;	
}
.tech-logo.php {
	left: 47%;
	top: -180px;
}
.tech-logo.mysql {
	right: 0;
	top: -110px;
}
.tech-logo.react {
	left: -110px;
	top: 34%;
}
.tech-logo.wordpress {
	right: -110px;
	top: 34%;
}
.tech-logo.excel {
	left: 0;
	bottom: -50px;
}
.tech-logo.nextjs {
	left: 47%;
	bottom: -130px;
}
.tech-logo.figma {
	right: 0;
	bottom: -50px;
}

/* ======================
   About Section
   ====================== */
.about-section {
	padding: 80px 0;
}   
.about-section .ab-image-card {
	width: 100%;
	position: relative;
	margin-bottom: 15px;
} 
.about-section .ab-image-card img {
	width: 100%;
} 
.about-section .ab-content-card {
	width: 100%;
	margin-top: 30px;
}  
.about-section .ab-content-card .about-title {
	width: 100%;
}  
.about-section .ab-content-card .about-title h2 {
	font-size: 30px;
} 
.about-section .ab-content-card .about-title h3 {
	color: var(--theme-color);
	font-size: 18px;
	margin-bottom: 20px;	
}  
.about-section .ab-content-card p {}  
.about-section .ab-content-card ul.ab-service-list {
	width: 100%;
	margin-bottom: 20px;
} 
.about-section .ab-content-card ul.ab-service-list li {
	width: 100%;
	display: inline-block;
	margin-bottom: 5px;
	color: var(--color-gray-dark);
}  
.about-section .ab-content-card ul.ab-service-list li span {
	width: 16px;
	height: 16px;
	background-color: var(--theme-color);
	border-radius: 50%;
	line-height: 16px;
	font-size: 16px;
	text-align: center;
	color: var(--color-white);
	margin-right: 8px;
	display: block;
	float: left;
	margin-top: 4px;
}

/* ======================
   Why Choose Section
   ====================== */
.whychoose-section {
	padding: 80px 0;
}     
.whychoose-card {
    padding: 24px;
    background: var(--color-white);
    -webkit-box-shadow: 0px 0px 35px 13px rgba(230, 230, 230, 0.4);
    -moz-box-shadow: 0px 0px 35px 13px rgba(230, 230, 230, 0.4);
    box-shadow: 0px 0px 35px 13px rgba(230, 230, 230, 0.4);
    margin-bottom: 24px;
    position: relative;
    display: inline-block;
    text-align: center;
	border-radius: 10px;
}
.whychoose-card .whychoose-icon {
	width: 60px;
	height: 60px;
	margin: 0 auto;
	background-color: var(--theme-color);
	color: var(--color-white);
	border-radius: 50%;
	font-size: 26px;
	line-height: 40px;
	text-align: center;
	padding: 10px;
	margin-bottom: 20px;
    -webkit-transition: 0.4s;
    transition: 0.4s;	
}
.whychoose-card:hover .whychoose-icon {
	background-color: #f9f2ee;
	color: var(--color-black);
}
.whychoose-card h4 {}
.whychoose-card p {
	margin: 0;
}

/* ======================
   Products Section
   ====================== */
.products-section {
	padding: 80px 0;
}
.product-card {
    padding: 15px 15px 6px 15px;
    background: var(--color-white);
    -webkit-box-shadow: 0px 0px 35px 13px rgba(230, 230, 230, 0.4);
    -moz-box-shadow: 0px 0px 35px 13px rgba(230, 230, 230, 0.4);
    box-shadow: 0px 0px 35px 13px rgba(230, 230, 230, 0.4);
    margin-bottom: 24px;
    position: relative;
    display: inline-block;
	border-radius: 10px;
}
.product-card .image-card {
	width: 100%;
	overflow: hidden;
}
.product-card .image-card img {
	width: 100%;
	height: auto;
}
.product-card .product-title {
	font-size: 16px;
	margin-top: 15px;
	margin-bottom: 10px;
	width: 100%;
	overflow: hidden;
}
.product-card .pricesale-card {
	width: 100%;
	display: inline-block;
	margin-bottom: 0px;
}
.product-card .pricesale-card .price {
	float: left;
	color: var(--color-black);
	font-size: 20px;
	font-weight: 500;
}
.product-card .pricesale-card .sales {
	float: right;
	color: var(--color-black);
	font-size: 16px;
	margin-top: 3px;
}
.product-card .bottom-card {
	width: 100%;
	display: inline-block;
}
.product-card ul.product-btn {
	float: right;
}
.product-card ul.product-btn li {
	float: left;
	margin-left: 10px;
}
.product-card ul.product-btn li a {
	padding: 5px 10px;
	background-color: #f7eee7;
	border-radius: 2px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.product-card ul.product-btn li:hover a {
	background-color: var(--theme-color);
	color: var(--color-white);
}
.more-btn {
	text-align: center;
	margin-top: 25px;
}

/* ======================
   Products Details
   ====================== */
.products-details-card {
	padding: 20px;
	border: 1px solid var(--color-gray-400);
	margin-bottom: 24px;
	position: relative;
	display: inline-block;
	border-radius: 5px;
	width: 100%;
}
.products-details-card .details-title {
	font-size: 20px;
	margin-bottom: 15px;
	color: var(--color-black);
	font-weight: 600;
	margin-top: 15px;
	font-family: var(--secondary-font-family);
}
.products-details-card .details-img-box {
	width: 100%;
	overflow: hidden;
}
.products-details-card .details-img-box img {
	width: 100%;
	border: 1px solid var(--color-gray-400);
}
.products-details-card .details {
	width: 100%;
	margin-top: 15px;
}
.products-details-card .bottom-card {
	width: 100%;
	display: inline-block;
	margin-top: 15px;
}
.products-details-card ul.product-btn {
	display: inline-block;
}
.products-details-card ul.product-btn li {
	float: left;
	margin-right: 20px;
}
.products-details-card ul.product-btn li a {
	padding: 5px 10px;
	background-color: #f7eee7;
	border-radius: 2px;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}
.products-details-card ul.product-btn li:hover a {
	background-color: var(--theme-color);
	color: var(--color-white);
}
.products-details-card ul.product-btn li a.theme-color {
	background-color: var(--theme-color);
	color: var(--color-white);	
}
.products-details-card ul.product-btn li:hover a.theme-color {
	color: var(--color-white);
	background-color: var(--color-light);
}

.widget {
	padding: 15px;
	border: 1px solid var(--color-gray-400);
	margin-bottom: 24px;
	position: relative;
	display: inline-block;
	border-radius: 5px;
	width: 100%;
}
.widget h3 {
	font-size: 18px;
	margin-bottom: 20px;
}
.widget p {
	font-size: 14px;
}
.widget ul.tagslist {
	width: 100%;
}
.widget ul.tagslist li {
	float: left;
}
.widget ul.tagslist li a {
	padding: 8px 15px;
	color: var(--color-black);
	background: #f4f4f4;
	margin: 5px 10px 5px 0px;
}
.widget ul.tagslist li a:hover {
	color: #fff;
	background: var(--theme-color);
}

/* ======================
   Entry css
   ====================== */
.entry-bg {
	height: 100%;
	position: relative;
}
.min-height {
	min-height: 400px;
}
.entry {
	line-height: 2;
}
.entry p {
	margin: 0 0 10px;
	font-family: var(--primary-font-family);
	line-height: 2;
}
.entry p a {
	color: var(--theme-color);
}
.entry img,
.entry p img {
	width: 100%;
}
.entry ol,
.entry ol li,
.entry ul,
.entry ul li {
	list-style: none;
}
.entry ol, .entry ul {
	margin: 0px 0px 15px 0px;
	padding-left: 0;
}
.entry ol li, .entry ol li a, 
.entry ul li, .entry ul li a {
	line-height: 2;
}
.entry ol li i, 
.entry ol li a i, 
.entry ul li i, 
.entry ul li a i {
	margin-right: 5px;
}

.entry h1 {
	font-size: 40px;	
}
.entry h2 {
	font-size: 33px;
}
.entry h3 {
	font-size: 16px;
}
.entry h4 {
	font-size: 23px; 
}
.entry h5 {
	font-size: 20px; 
}
.entry h6 {
	font-size: 17px; 
}
.entry h1,
.entry h2,
.entry h3,
.entry h4,
.entry h5,
.entry h6 {
	margin-bottom: 10px;
}
.entry .blockquote {
	padding: 10px 20px;
	font-size: 14px;
	border-left-width: 5px;
	border-left-style: solid;
	border-color: #a6a6a6;
	letter-spacing: 0.05em;
}
.entry .blockquote p {
	margin: 0;
}
.entry pre {
	padding: 10px;
	margin: 10px 0px;
	line-height: 2;
	background: #f9f9f9;
	border: 1px solid #d4d4d4;
}
.entry b {
	font-weight: bold;
}
.entry u {
	text-decoration: underline;
}
.entry table tr th,
.entry table tr td {
	font-family: var(--primary-font-family);
	color: var(--color-gray-dark);
	padding: 5px;
}
 
/* ======================
   Rating css
   ====================== */
.rating-wrap {
	line-height: 1;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	position: relative;
	float: left;
	margin-top: 8px;
}
.rating-wrap .stars-outer {
    display: inline-block;
    position: relative;
    font-family: bootstrap-icons !important;
    margin-right: 5px;
}
.rating-wrap .stars-outer:before {
    content: "\f588 \f588 \f588 \f588 \f588";
    color: #d2d2d2;
    font-size: 14px;
    letter-spacing: 2px;
}
.rating-wrap .stars-inner {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
}
.rating-wrap .stars-inner::before {
    content: "\f586 \f586 \f586 \f586 \f586";
    color: #f8ce0b;
    font-size: 14px;
    letter-spacing: 2px;
}

/* ======================
   FAQ Section
   ====================== */
.faq-section {
	padding: 80px 0;
}
.faq-card {}
.faq-card .accordion {
	--bs-accordion-border-color: var(--color-gray-400);
	--bs-accordion-border-width: 0px;
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff6b01'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.faq-card .accordion .accordion-item {
	color: var(--color-gray-dark);
	border: 1px solid var(--color-gray-400);
	margin-bottom: 10px;
	border-radius: var(--bs-accordion-border-radius);
}
.faq-card .accordion .accordion-item .accordion-button {
	color: var(--color-gray-dark);
	background-color: transparent;
	font-weight: 600;
}
.faq-card .accordion .accordion-item .accordion-button:focus {
	box-shadow: none;
}
.faq-card .accordion .accordion-item .accordion-body {
	border-top: 1px solid var(--color-gray-400);
}

/* ======================
   Contact Section
   ====================== */
.contact-card {
	padding: 80px 0 100px 0;
}
.contact-card .contact-image {
	padding-right: 30px;
	padding-top: 50px;
	position: relative;
}
.contact-card .contact-image img {
	width: 100%;
}
.contact-form {
	width: 100%;
	background: #fff;
	padding: 30px;
	margin-bottom: 15px;
	-webkit-box-shadow: 0px 15px 66px 5px rgba(217,217,217,0.3);
	-moz-box-shadow: 0px 15px 66px 5px rgba(217,217,217,0.3);
	box-shadow: 0px 15px 66px 5px rgba(217,217,217,0.3);
}
.contact-form .contact-title {
	width: 100%;
}
.contact-form .contact-title h2 {
	font-size: 30px;
}
.contact-form p {}
.contact-form input, 
.contact-form textarea {
	font-size: 14px;
	-webkit-box-shadow: none;
	box-shadow: none;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	border-color: #dbdbdb;
	color: #232323;
}
.contact-form input {
	height: 45px;
}
.contact-form textarea {
	height: 150px;
}
.error_card {
	text-align: center;
	padding: 80px 0px 220px 0px;
}
.error_card .error_img {
	width: 100%;
	margin-bottom: 70px;
}
.error_card .error_img img {
	width: 100%;
}
.error_card p {
	margin-bottom: 30px;
	margin-top: 25px;
	font-size: 16px;
}
.get-connect {
	position: absolute;
	right: 10px;
	background: var(--theme-color);
	color: var(--color-white);
	padding: 8px 20px;
	bottom: -30px;
	z-index: 999;
	border-radius: 5px;
}
.get-connect .text {
	width: 100%;
}
.get-connect .text i {
	font-size: 30px;
	line-height: 1;
}
.get-connect .text span {
	font-size: 18px;
	line-height: 1;
}
.get-connect .text span a {
	color: var(--color-white);
}
.get-connect .text span a:hover {
	color: var(--color-white);
	text-decoration: underline;
}
.mt15 {margin-top: 15px;}

/* ======================
   Parsley css
   ====================== */
.parsley-error:focus {
    border-color: #f53535 !important;
    box-shadow: none !important;
}
.parsley-error {
    border-color: inherit;
    color: inherit;
}
.parsley-error-list {
    margin: 0px 0px 0px 0px !important;
    padding: 0px 0px 0px 0px !important;
}
.parsley-error-list li {
    color: #dc3545;
}
.parsley-error-list {
    list-style: outside none none;
}
.parsley-error {
    border-color: #f53535;
    color: #dc3545;
}
.parsley-error:focus {
    border-color: #f53535 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 2px rgba(245, 53, 53, 0.6) !important;
}
.errorMgs {
	color: #dc3545;
}
.card-errors {
	color: #dc3545;
}
.policy_terms_card {}
.policy_terms_card .policy_terms_item {
	margin-bottom: 20px;
}
.policy_terms_card .policy_terms_item h3 {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 18px;
}
.policy_terms_card .policy_terms_item h4 {
	font-size: 18px;
	font-weight: 600;
}
.policy_terms_card ul.terms_list {
	padding-left: 35px;
}
.policy_terms_card ul.terms_list li {
	list-style: disc;
	width: 100%;
	margin-bottom: 5px;
    color: var(--color-gray-dark);
    font-family: var(--secondary-font-family);
    font-size: 16px;
    font-weight: normal;
}

/* ======================
   Footer Section
   ====================== */
.footer-section {} 
.footer-section .footer-bottom {
	padding: 30px 0px 20px 0px;
	border-top: 1px solid var(--color-gray-400);
}  
.footer-bottom .copy-right {
	text-align: center;
}

ul.footer-nav {
	float: right;
}
ul.footer-nav li {
	float: left;
	margin: 0px 15px;
}
ul.footer-nav li a {}

/* ======================
   Layer Bounce
   ====================== */
.layer-laravel {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.layer-php {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.layer-mysql {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.layer-react {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.layer-wordpress {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-animation-duration: 9s;
    animation-duration: 9s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.layer-excel {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.layer-nextjs {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.layer-figma {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* ======================
   Bounce Keyframes
   ====================== */
@-webkit-keyframes rotation {
    0% {
        transform: rotate(0);
    }

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

@keyframes rotation {
    0% {
        transform: rotate(0);
    }

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

@-webkit-keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Left to right */
@-webkit-keyframes leftToRight {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(80px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes leftToRight {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(80px);
    }
    100% {
        transform: translateX(0);
    }
}
/* ======================
   Shadows Keyframes
   ====================== */

@-webkit-keyframes shadows {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2),
            0 0 0 30px rgba(255, 255, 255, 0.2),
            0 0 0 50px rgba(255, 255, 255, 0.2);
    }
    100% {
        box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.2),
            0 0 0 50px rgba(255, 255, 255, 0.2), 0 0 0 70px transparent;
    }
}

@keyframes shadows {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2),
            0 0 0 30px rgba(255, 255, 255, 0.2),
            0 0 0 50px rgba(255, 255, 255, 0.2);
    }
    100% {
        box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.2),
            0 0 0 50px rgba(255, 255, 255, 0.2), 0 0 0 70px transparent;
    }
}

/* ======================
   fadeInDown Keyframes
   ====================== */

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}