/*
Theme Name: Vietcoder Theme
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.18.6
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
	--color-primary: 136, 252, 97;	
	--color-border-1: 255, 255, 255;
	--color-border-opposite: 23, 23, 23;
	--bg: 23, 23, 23;
	--bg-opposite: 255, 255, 255;
	--color-text-sub: 255, 255, 255;
	--color-text-title: 255, 255, 255;
	
	--opacity-text-sub: 0.5;
	--radius-section: 56px; 
}


/* Btn ------- */
#wrapper .button.btn {
    --btn-shadown: unset;
    --btn-shadown-hover: inset 0 0 200px rgb(0,0,0,20%);
    --btn-bg: rgb(var(--color-primary));
    --btn-bg-hover: rgb(var(--color-primary));
    --btn-color: rgb(var(--bg));
    --btn-color-hover: rgb(var(--bg));
    --btn-border: unset;
    --btn-border-hover: unset;
}


#wrapper .button.btn:not(.is-link, .is-underline) {
    font-size: 1rem;
    min-height: unset;
    line-height: 1.2;
    padding: 16px 24px;
    font-weight: 500;
    letter-spacing: 0;
    border-radius: 300px;
}

#wrapper .button.btn:not(.is-link, .is-underline).is-small {
	padding: 10px 20px; 
}

#wrapper .btn.white {
    --btn-shadown: unset;
    --btn-shadown-hover: inset 0 0 200px rgb(0, 0, 0, 7%);
    --btn-bg: rgb(var(--bg-opposite));
    --btn-bg-hover: rgb(var(--bg-opposite));
    --btn-color: rgb(var(--bg));
    --btn-color-hover: rgb(var(--bg));
}

#wrapper .is-outline.btn.opposite {
    --btn-shadown: unset;
    --btn-shadown-hover: unset;
    --btn-bg: transparent;
    --btn-bg-hover: transparent;
    --btn-color: rgb(var(--bg-opposite));
    --btn-color-hover: rgb(var(--bg-opposite));
    --btn-border: 1px solid rgb(var(--bg-opposite), 0.15);
    --btn-border-hover: 1px solid rgb(var(--bg-opposite));
}

/* Header -------- */
.header-main {
    border-bottom: 1px solid rgb(var(--color-border-1), 10%);
    background-color: rgb(var(--bg));
	
	--color-menu: rgb(var(--color-text-title));
    --color-menu-hover: rgb(var(--color-text-title));
	--cta-h: 36px;
}

.nav-icon .qodef-m-lines {
    flex-direction: column;
    justify-content: space-around;
    width: 54px;
    height: var(--cta-h);
    padding: 6px 16px;
    border-radius: 100px;
    border: 1px solid rgb(var(--color-border-1), 0.15);
	transition: 220ms all;
}

.nav-icon:hover .qodef-m-lines {
    border-color: rgb(var(--color-border-1),0.8);
}

.nav-icon .qodef-m-line {
    height: 2px;
    border-radius: 50px;
}

.header-main .button.primary {
	width: max-content;
    height: calc(var(--cta-h) + 2px);
    border: unset;
    min-height: unset;
    line-height: 1.3;
    display: flex;
    align-items: center;
    font-weight: 500;
    padding: 5px 24px;
    background-color: rgb(var(--color-primary));
    color: rgb(var(--bg));
    letter-spacing: 0;	
}


/* Header - Mobile aside --------- */
.mfp-wrap .mfp-content {
    background-color: var(--background);
    width: 100%;
    max-width: var(--drawer-width, 500px);
    --px: 26px;
    --background: rgb(var(--bg-opposite));
    --on-background: rgb(var(--bg));
    --color-border: rgb(var(--color-border-opposite), 0.1);
}

.mfp-content .nav-sidebar li+li {
    border-top: 0;
}

.mfp-content .nav-sidebar>li.menu-item.active,
.mfp-content .nav-sidebar>li.menu-item:hover {
    background-color: transparent;
}

.mfp-content .nav-sidebar .children {
    padding-bottom: 10px !important;
    padding-left: 0;
}


.off-canvas .mfp-content .nav .menu-item>a {
    color: var(--on-background);
    font-size: var(--size-4);
    font-weight: 500;
    text-transform: capitalize;
    transition: 300ms all;
    padding: 12px var(--px);
	letter-spacing: 0;
    text-decoration: underline 1px;
    text-underline-offset: 3px;
    text-decoration-color: transparent;	
}

.off-canvas .mfp-content .nav .menu-item>a:hover {
    text-decoration-color: currentColor;
}

.off-canvas .mfp-content .nav .menu-item .menu-item>a {
    font-weight: normal;
    font-size: 16px;
    text-transform: capitalize;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    padding: 9px var(--px);
    opacity: 0.72;

}

.off-canvas .mfp-content .nav .menu-item .menu-item {
    margin: 0;
    padding: 0;
} 


.mfp-content .aside-logo  {
    text-align: center;
    padding: 5px var(--px) 35px;
    border-bottom: 1px solid var(--color-border);	
	margin-bottom: 30px;
}

.mfp-content .aside-logo img {
    margin: auto;
    height: 42px;
    width: auto;
    object-fit: contain;
}

.mfp-bg.mfp-ready ~ #wrapper {
	filter: blur(1px);
}


/* Home - Hero ----------- */
.home-hero h1 {
	font-size: var(--size-8);
	font-weight: 500;
	line-height: 1.3;
	margin-bottom: 12px;	
}

.home-hero p {
    line-height: 1.5;
    font-size: var(--size-4);	
}

.home-hero p strong {
    opacity: var(--opacity-text-sub);
	font-weight: inherit;
}

.home-hero .el-imgs {
    display: flex;
    gap: 16px 20px;
    align-items: stretch;	
}

.home-hero .img-inner  {
    padding-top: 600px!important;
    border-radius: var(--radius-4);
    overflow: hidden;	
    transition: 320ms all;		
}

.home-hero .img {
    flex: 1;
    transition: 320ms all;	
}

.home-hero .img.active {
    flex: 2;
}

/* Home - title ------ */
.home-title h2 {
    font-weight: 500;
    font-size: var(--size-7);
    line-height: 1.5;
    margin-bottom: 11px;	
}

.home-title h6{
    text-transform: unset;
    letter-spacing: 0;
    font-weight: 500;
    font-size: var(--size-2);
    line-height: 1.5;
    margin-bottom: 16px;
    opacity: 0.5;	
}

.home-title p {
	font-size: var(--size-2);
    line-height: 1.6;
    margin-bottom: 16px;
}

.home-title strong {
	opacity: var(--opacity-text-sub);
	font-weight: inherit;	
}


/* Home - About ------ */
.home-about .el-count {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    text-align: center;	
}

.home-about .el-count p {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: var(--size-7);
    line-height: 1;	
}

.home-about .el-count h6 {
	font-size: var(--size-small);
    margin: 0;
    opacity: 1;
    line-height: 1.3;
}

.home-about .el-text {
    flex: 1;	
}


/* Home - Capabilities --- */
.home-capabi  {
	--border-color: rgb(var(--color-border-1),10%);
	--text-color: rgb(var(--color-text-title));
	--box-bg: rgb(var(--bg));
}

.home-capabi.light {
	--border-color: rgb(var(--color-border-opposite),10%);
	--text-color: rgb(var(--bg));
	--box-bg: rgb(var(--bg-opposite));	
}

.home-capabi.light .section-content {
    background-color: rgb(var(--bg-opposite), 97%);
    border-radius: var(--radius-section);
    padding: 70px 0 60px;	
}

.home-capabi h2 {
	color: var(--text-color);
    font-size: var(--size-8);
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 11px;	
}

.home-capabi .el-box-area  {
    display: flex;
    gap: 20px;	
}

.home-capabi  .icon-box {
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 24px 24px 90px;
    border-radius: var(--radius-4);
    background-color: var(--box-bg);
    position: relative;	
	flex: 2;
    transition: 240ms all;
	min-height: 370px;
	overflow: hidden;
}

.home-capabi  .icon-box.active {
	flex: 3;
}

.home-capabi  .icon-box:after {
    content: '\e941';
    display: flex;
    height: 48px;
    width: 48px;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    position: absolute;
    right: 24px;
    bottom: 24px;
    font-family: var(--ff-material-outline);
    font-size: 24px;
    line-height: 1;
	font-weight: 300;
}

.home-capabi  .icon-box.active:after {
    content: '\e145';
}

.home-capabi  .icon-box  h5 {
    color: var(--text-color);
    font-size: var(--size-3);
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 12px;	
}

.home-capabi  .icon-box p {
	line-height: 1.4;
    opacity: 0;
    transition: 120ms opacity;
	color: var(--text-color);
}

.home-capabi  .icon-box.active p {
    opacity: 1;	
}

.home-capabi  .icon-box-img {
    width: 56px!important;
    margin-bottom: 5px;	
}


/* Ux - Portfolio -------- */
.portfolio-box.box .image-cover {
	padding-top: 100%!important;
    border-radius: var(--radius-4);
    overflow: hidden;
}

.portfolio-box.box .box-text {
	padding: 24px 16px ;
	text-align: left;
}

.portfolio-box.box .portfolio-box-title {
	text-transform: unset;
    letter-spacing: 0;
    opacity: 1;
    font-weight: 500;
    font-size: var(--size-4);
    line-height: 1.3;
    margin: 0 0 13px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;	
}

.portfolio-box.box .portfolio-box-excerpt p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;	
}

.portfolio-box.box .portfolio-box-category {
	display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin-top: 20px;
    gap: 10px 18px;
}

.portfolio-box.box .el-cat-item {
    font-size: var(--size-small);
    text-transform: capitalize;
    letter-spacing: 0;
    font-weight: 400;	
}

.portfolio-box.box .el-cat-item:first-child {
	border: 1px solid rgb(var(--color-border-1), 0.15);
    padding: 7px 18px;
    border-radius: 100px;
}

.home-project .row-project > .col:nth-child(2) .portfolio-box.box .image-cover {
    padding-top: 72% !important;	
}


/* Home - Testimonial --- */
.home-testi  {
	overflow: hidden;
	
	--item-w: calc(100% / 3);
	--item-p: 0px 0 0 15px ;	
	--border-color: rgb(var(--color-border-1),10%);
	--text-color: rgb(var(--color-text-title));
	--box-bg: rgb(var(--bg-opposite),8%);
}

.home-testi.light {
	--border-color: rgb(var(--color-border-opposite),10%);
	--text-color: rgb(var(--bg));
	--box-bg: rgb(var(--bg-opposite));	
}

.home-testi.light .section-content {
    background-color: rgb(var(--bg-opposite), 97%);
    border-radius: var(--radius-section);
    padding: 70px 0 ;	
}

.home-testi h2 {
    font-size: var(--size-8);
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 11px;
	color: var(--text-color);
}

.home-testi .slider .box-content {
    background: var(--box-bg);
    border-radius: var(--radius-3);
    padding: 24px;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
	min-height: 100%;
}

.home-testi p {
    font-size: var(--size-2);
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 30px;	
}

.home-testi h5 {
    font-size: 1rem;
    color: var(--text-color);
    font-weight: 500;
    text-transform: capitalize;
    margin-bottom: 5px;
    line-height: 1.3;	
}

.home-testi h6 {
    font-size: var(--size-small);
    color: var(--text-color);
    font-weight: normal;
    text-transform: unset;
    line-height: 1.3;
    letter-spacing: 0;
    opacity: var(--opacity-text-sub);	
}


/* Ux - Slider infinite -- */

#wrapper .slider-infinity .slider-item,
#wrapper .slider-infinity .post-item {
  opacity: 1;
  max-width: var(--item-w)!important;
  padding: var(--item-p);
	min-height: 100%;
} 


/* Ux - Partners --- */
.partner-area {
	justify-content: center;
}

.partner-area .box-text {
	display: none;
}


/* Home - News ------ */
.box-blog-post.box .is-divider {
	display: none;
}

.box-blog-post.box .cat-label-area {
    opacity: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0 0 12px;
    align-items: baseline;	
}

.box-blog-post.box  .cat-label {
    font-size: var(--size-small);
    display: inline-block;
    width: fit-content;
    margin: 0;
	text-transform: capitalize;
    letter-spacing: 0;
}

.box-blog-post.box  .cat-label:first-child {
    border: 1px solid rgb(var(--color-border-1), 0.1);
    opacity: 1;
    padding: 8px 18px;
    border-radius: 200px;
}

.box-blog-post .post-title {
    margin: 0 0 12px;
}

.box-blog-post .post-title a {
    line-height: 1.3;
    font-weight: 500;
    font-size: var(--size-4);
    margin: 0;
}

.box-blog-post.box  .post-meta {
    opacity: 1;
    font-size: var(--size-small-a);
    color: currentColor;
	font-weight: 500; 
}
.box-blog-post .from_the_blog_excerpt {
    font-size: 1rem;
    line-height: 1.6;
}


/* ---- --- */

.blog-no-thumb .box-image {
	display: none;
}

.blog-no-thumb .box-text {
    border-top: 1px solid rgb(var(--color-border-1), 0.15);
    padding: 30px 0 0;
}

.blog-no-thumb .box-text-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;	
	align-items: center;
}


/* Ux - Banner cta contact ----- */
.banner-cta-contact {
    background-color: rgb(var(--color-primary));
    padding: 80px 0 50px;
    border-radius: var(--radius-section);	
}

.banner-cta-contact h6 {
    font-size: var(--size-8);
    letter-spacing: 0;
    opacity: 1;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 12px;
    text-transform: unset;	
	color: rgb(var(--bg));
}

.banner-cta-contact p {
    font-weight: 500;
    font-size: var(--size-2);
    line-height: 1.4;
    margin-bottom: 14px;
	color: rgb(var(--bg));
}


/* Service Page - Services ------- */
.service-services h6 {
	font-size: var(--size-2);
    text-transform: unset;
    opacity: var(--opacity-text-sub);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
    margin-bottom: 14px;	
}

.service-services .el-item {
	border-top: 1px solid rgb(var(--color-border-1), 0.15);
    padding-top: 32px;
    margin-top: 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 30px;	
}

.service-services p {
	margin-bottom: 20px;
}

.service-services h4 {
    font-size: var(--size-5);
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 10px;	
}

.service-services .ux-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 10px;
    margin-top: 16px;
	
}

.service-services .ux-menu .ux-menu-link__link {
	font-size: var(--size-small-a);
    border: 1px solid rgb(var(--color-border-1), 0.2);
    padding: 5px 16px;
    border-radius: 300px;
    color: rgb(var(--color-text-title));	
}

.service-services .ux-menu .ux-menu-link__link:hover {
    border: 1px solid rgb(var(--color-border-1));
    color: rgb(var(--color-text-title));		
}


/* About Page - Team -------- */
.about-team .el-item {
    display: flex;
    gap: 20px 40px;
    align-items: center;
    border-bottom: 1px solid rgb(var(--color-border-1), 0.15);
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.about-team .el-item:last-child {
	border: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

.about-team .el-thumb {
	flex: 0 0 240px;	
}

.about-team .el-thumb .img-inner {
	padding-top: 110%!important;
    border-radius: var(--radius-3);
    overflow: hidden;
    transition: 320ms all;
    transform: translateY(25%) rotate(-6deg);
    opacity: 0;
    visibility: hidden;
	position: absolute;
    left: 0;
    width: 100%;
}

.about-team .el-item:hover .img-inner {
    transform: translateY(-50%) rotate(6deg);
    opacity: 1;
    visibility: visible;
}

.about-team .el-item-info {
	flex: 0 0 200px;
}

.about-team .el-item h5 {
	font-size: var(--size-4);
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: capitalize;
    line-height: 1.3;
}

.about-team .el-item h6 {
    opacity: var(--opacity-text-sub);
    text-transform: unset;
    letter-spacing: 0;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    font-size: var(--size-small);	
}

.about-team .el-item .btn{
    margin: 0 0 14px;	
}

.about-team .el-desc {
	flex: 1 1;
	font-size: var(--size-2);
}

.about-team .el-desc p {
	margin-bottom: 0;
}


/* About - Jobs ------- */
.about-jobs .el-item {
    border-bottom: 1px solid rgb(var(--color-border-1), 15%);
    padding-bottom: 30px;
    margin-bottom: 30px;
    display: flex;
    gap: 15px 20px;
    align-items: center;	
}

.about-jobs .el-item:last-child {
	border: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

.about-jobs .el-info {
	flex: 1;
}

.about-jobs .el-info h6 {
	font-size: var(--size-3);
    opacity: 1;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: unset;
    line-height: 1.4;
    margin-bottom: 6px;
}

.about-jobs .el-info p {
    opacity: var(--opacity-text-sub);
    font-size: 1rem;
    margin: 0;	
}


/* Archive Portfolio -------- */
.portfolio-page-wrapper {
	padding-top: 2rem;
}

.page-title .entry-title {
    font-size: var(--size-7);
    line-height: 1.3;	
}

.portfolio-element-wrapper .nav {
	display: flex;
    flex-wrap: nowrap;
}

.portfolio-element-wrapper .nav li {
	margin: 0;
	list-style: none;
}

.portfolio-element-wrapper .nav a {
	font-size: 1rem;
    text-transform: capitalize;
    letter-spacing: 0;
    font-weight: 400;
    border: 1px solid rgb(var(--color-border-1), 0.15);
    min-height: unset;
    padding: 7px 24px;
    border-radius: 300px;
    transition: 320ms all;	
	width: max-content;
	display: block;

}

.portfolio-element-wrapper .nav a:hover {
    border-color: rgb(var(--color-border-1), 0.5);	
}

.portfolio-element-wrapper .nav .active a {
    border-color: rgb(var(--color-border-1));	
}

.portfolio-element-wrapper .swiper-slide {
	width: max-content;
}

.portfolio-element-wrapper .swiper {
	overflow: hidden;
	width: 100%;
	margin-bottom: 20px;
}

/* Single portfolio ------------ */
.portfolio-single-page {
    padding-top: 30px;
    padding-bottom: 30px;	
}

.portfolio-single-page .portfolio-summary .col-fit {
	display: none;
}

.portfolio-single-page .portfolio-summary .col {
	border: 0;
    max-width: 100%;
    flex: 1 1 100%;
    margin-bottom: 10px;	
}

.portfolio-single-page .featured_item_cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 5px;
    align-items: baseline;	
	margin-bottom: 18px;
}

.portfolio-single-page .featured_item_cats a {
    border: 1px solid transparent;
    font-size: var(--size-small);
    font-weight: 400;
    opacity: 1;
    padding: 8px 14px;
    border-radius: 100px;
    line-height: 1.3;	
	transition: 200ms all;
}

.portfolio-single-page .featured_item_cats a:first-child {
    border-color: rgb(var(--color-border-1), 0.15);
}

.portfolio-single-page .featured_item_cats a:hover {
    border-color: rgb(var(--color-border-1), 0.5);
}

.portfolio-single-page .featured_item_cats .divider {
	display: none;
}

.portfolio-single-page .entry-title {
	font-size: var(--size-6);
    line-height: 1.2;
    text-transform: unset;
    letter-spacing: 0;
    font-weight: 500;
    margin-bottom: 18px;	
}

.portfolio-single-page .portfolio-related h3 {
    font-size: var(--size-7);
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 500;
    border-top: 1px solid rgb(var(--color-border-1), 0.15);
    padding-top: 35px;	
}


/* Archive Post --------- */
.blog-archive.page-wrapper {
	padding-top: 45px;
}

.archive-page-header .page-title {
	font-size: var(--size-5);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    margin-bottom: 18px;	
}

.box-vertical.box-blog-post .box-image {
	min-width: 240px;
}

.box-vertical.box-blog-post {
	align-items: center;
	gap: 14px 20%;
}

.box-vertical.box-blog-post .image-cover {
	padding-top: var(--blog-img-ratio) !important;	
	border-radius: var(--radius-3);
}

.box-blog-post.box-vertical .box-text {
	padding: 0;
    order: -1;
}

.post-item + .post-item .box-vertical.box-blog-post {
	border-top: 1px solid rgb(var(--color-border-1), 0.12);
    padding-top: 30px;
}

.box-vertical.box-blog-post .el-excerpt-area {
	margin-top: 14px;
}

.page-numbers li .page-number {
	background-color: rgb(var(--bg-opposite), 5%); 
}


/* Single Post ---------- */
.blog-single.page-wrapper {
	padding-top: 45px;
}

.entry-header .entry-title {
    font-size: var(--size-6);
}

.entry-header .entry-category {
    margin-bottom: 2px;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
}

.entry-header .entry-category a {
	font-size: var(--size-small);
    opacity: 1;
    font-weight: 400;
    border: 1px solid rgb(var(--color-border-1), 0.15);
    padding: 8px 14px;
    border-radius: 200px;
    text-decoration: unset;
    transition: 320ms all;	
	margin: 0 10px 14px 0;
}

.entry-header .entry-category a:hover {
    border-color: rgb(var(--color-border-1), 0.4);
	text-decoration: unset;
}

.single-blog_release .box-vertical.box-blog-post {
    border-top: 1px solid rgb(var(--color-border-1), 0.12);
    padding-top: 30px;
    margin-top: 5px;
}






/* Footer - Info ------------ */
footer .absolute-footer {
	display: none;
}

.footer-info {
	font-size: 14px;
	border-top: 1px solid rgb(var(--color-border-1),0.08);
}

.footer-info p a {
	text-decoration: underline 1px;
}

.footer-info .menu-vertical  {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: baseline;
    justify-content: flex-start;	
}

.footer-info .ux-menu-link__link {
	min-height: unset;
    line-height: 1.4;
    padding: 0;
    transition: 220ms all;
    text-decoration: underline 1px;
    text-underline-offset: 3px;
    text-decoration-color: transparent;
	color: rgb(var(--color-text-title));
}

.footer-info .ux-menu .ux-menu-link__link:hover {
    text-decoration-color: currentColor;
	color: rgb(var(--color-text-title));
}

.social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;	
}

.social-icons .icon.plain {
    margin: 0;
    display: flex;
    width: 40px;
    height: 40px;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgb(var(--color-border-1), 15%);
    transition: 220ms all;	
}


.footer-info .menu-vertical.menu-center {
	justify-content: center;	
}


.footer-info .row .col {
	padding-bottom: 15px;
}
























/* Responsive ---------------- */
@media only screen and (min-width: 1025px) and (max-width: 1600px) {}

@media only screen and (max-width: 1024px) {}

@media only screen and (max-width: 849px) {
	:root {
		font-size: 14px;
		
		--radius-3: 14px;
		--radius-4: 24px;
		--radius-section: 32px;
		--size-ratio: 1.14;
		
	}

	#logo {
		width: 140px;
	}
	
	#wrapper .button.btn:not(.is-link, .is-underline) {
		padding: 12px 22px; 
	}
	

	.home-hero h1 br {
		display: none;
	}
	.home-hero p {
		line-height: 1.6;
		font-size: 18px;
	}
	.home-hero .el-imgs {
		flex-direction: column;
	}
	.home-hero .img-inner {
		padding-top: 150px !important;
	}
	.home-hero .img.active .img-inner {
		padding-top: 300px !important;
	}
	
	.home-capabi .el-box-area {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.home-capabi .icon-box {
		min-height: unset;
		padding: 20px 20px 70px;
	}
	.home-capabi .icon-box:after {
		height: 38px;
		width: 38px;
		font-size: 20px;
		right: 20px;
		bottom: 20px;
	}
	.home-capabi.light .section-content {
		padding: 40px 10px 20px;
	}
	
	.portfolio-box.box .box-text {
		padding: 22px 0px 15px;
	}
	
	.home-testi.light .section-content {
		padding: 40px 10px ;
	}
	.home-testi  {
		--item-w: calc(100% / 2);
	}
	
	.blog-no-thumb .box-text-inner {
		grid-template-columns: 1fr;
	}
	.blog-no-thumb .el-excerpt-area {
		display: none;
	}
	
	.md-text-center {
		text-align: center;
	}
	
	.banner-cta-contact {
		padding: 45px 0 10px; 
	}
	
	.footer-info .menu-vertical.menu-center {
		justify-content: flex-start;
	}
	
	.service-services .el-item {
		grid-template-columns: 1fr; 
	}
	
	.about-team .el-item {
		flex-direction: column;
		align-items: stretch;
	}
	.about-team .el-thumb {
		flex: unset;
		order: -1;
	}
	.about-team .el-thumb .img-inner {
		position: relative;
		opacity: 1;
		visibility: visible;
		transform: unset;
	}
	.about-team .el-item-info {
		flex: unset;
	}
	
	.box-vertical.box-blog-post {
		gap: 14px 30px;
	}

	
	
}

@media only screen and (max-width: 549px) {
	.home-capabi .el-box-area {
		grid-template-columns:  1fr;
	}
	
	.home-testi  {
		--item-w: calc(100% / 1.3);
	}
	
	.box-vertical.box-blog-post .box-image {
		display: none;
	}
}