:root{
    --alpha: 1;
    --rbg: 0 192 255;
    --white: #fff; 
    --dark0: #181f25;
    --dark1: #11191c;
    --dark2: #2d383c;
    --dark3: #414c50;
    --pre-blue: #39ace7;
    --sec-blue: #0784b5;
    --sec-color: #ff0000;
    --shade: rgba(0, 0, 0, 0.2);
    --splash-color: rgb(0, 0, 0, 0.2);
    --border-color:rgba(255, 255, 255, 0.15);
    --text-gradient: linear-gradient(45deg, var(--pre-blue) 20%, var(--sec-color) 90%);
    --skill-gradient: linear-gradient(90deg, var(--sec-color) 55%, var(--sec-blue) 65%);
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    background: linear-gradient(100deg, var(--dark3), var(--dark1));
}

a {
    color: var(--sec-blue);
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
    margin-bottom: 10px;
}


h2 {
    font-size: 36px;
}

h4 {
    font-size: 20px;
}

p {
    opacity: 0.8; 
    margin-bottom: 20px;
}

ul,
ol {
    margin-bottom: 20px;
}
img {
    height: auto;
    max-width: 100%; 
}
section {
    position: relative;
    min-height: 100vh;
}
.border {
    border-right: 1px solid var(--border-color);
}
/* flex */
.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap { 
    flex-wrap: wrap;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-space-around {
    justify-content: space-around;
}

.align-items-start {
    align-items: flex-start;
}

.align-items-end {
    align-items: flex-end;
}

.align-items-center {
    align-items: center;
}

.align-baseline {
    align-items: baseline;
}

.align-stretch {
    align-items: stretch;
}

.align-start {
    align-content: flex-start;
}

.align-end {
    align-content: flex-end;
}

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

.align-space-between {
    align-content: space-between;
}

.align-space-around {
    align-content: space-around;
}

.align-stretch {
    align-content: stretch;
}
.gap-10{
    gap: 10px;
}
.gap-30{
    gap: 30px;
}

/* overflow */
.overflow-hidden {
    overflow: hidden;
}

.overflow-scroll {
    overflow: scroll;
}

.overflow-auto {
    overflow: auto;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

.overflow-x-scroll {
    overflow-x: scroll;
}

.overflow-y-scroll {
    overflow-y: scroll;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}


.round {
    border-radius: 50%;
}

.fadeOut{
    opacity: 0 !important;
}
.fadeIn{
    opacity: 1 !important;
}

.wrapper {
    position: relative;
  /*  background: #00a1b5;*/
}
.wrapper:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(media/img/v.png);
    background-size: contain;
    background-attachment: fixed;
    opacity: 0.3;
    z-index: -1;
}
.wrap {
    position: relative;
}
.header-fixed {    
    position: sticky;
    top: 0;
    height: 100vh;
    min-width: 110px;
    max-width: 135px;
    padding: 20px;
    z-index: 9;
}
.header-fixed > div{
    height: 100%;
    background: var(--dark1);
    border-radius: 100px;
    overflow: hidden;
}

.header-fixed .logo {
	margin: 10px;
}
.header-fixed .logo:hover a {
    transform: scaleY(0.5) translateY(50%);
}
.header-fixed .logo:hover img {
    transform: scaleY(1.7) translateY(-50%);
}

.header-fixed .logo a {
	display: block;
	padding: 10px;
	text-align: center;
	background: rgb(var(--rbg)/ var(--alpha));
    transform: scaleY(1) translateY(0);
    transition: 1s;
}

.header-fixed .logo img {
    position: relative;
    left: -3%;
    width: 58px;
    max-height: 50px;
    transform: scaleY(1) translateY(0);
    transition: inherit;
}

.header-fixed .social { 
	padding-bottom: 20px;
} 

header.header-fixed .menu li {
	display: block;
}

.header-fixed .menu a {
	position: relative;
	display: block;
	border-top: 1px solid var(--border-color);
	padding: 15px;
    text-align: center;
}

.header-fixed .menu li:first-child a {
	border: none;
}

.header-fixed .menu a img {
	font-weight: 100;
	font-size: 30px;
}

.menu-name {
	font-size: 14px;
}

.header-fixed .menu a .menu-name {
	position: absolute;
	display: block;
	padding: 19px 0;
	width: 100%;
	height: 100%;
	top: 50%;
	left: -30px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
	transform: translateY(-50%);
	transition: all 0.35s ease-in-out;
	opacity: 0;
	visibility: hidden;
}

.header-fixed .menu a:hover .menu-name {
	left: 0;
	opacity: 1;
	visibility: visible;
}

.header-fixed .menu a img {
	transition: all 0.35s ease-in-out;
	position: relative;
	left: 0;
}

.header-fixed .menu a:hover img {
	left: 40px;
	opacity: 0;
	visibility: hidden;
} 

.attr-nav li.side-menu a {
	padding: 7px 20px !important;
	display: block;
}

.navbar.no-background.dark1 .attr-nav .side-menu span {
	background-color: red;
}

.dark1-layout header.header-fixed {
    background: black;
}

.dark1-layout header.header-fixed .menu a {
    border-color: rgba(255, 255, 255, 0.15);
}

.dark1-layout header.header-fixed .menu a .menu-name {
    background: transparent;
    color: white;
}

.dark1-layout header.header-fixed .menu a img {
    color: white;
}


/* Video Play Button  */
.social_profile {
    --alpha: 0.2;
    position: relative;
    height: 50px;
    width: 50px;
    padding: 15px;
    background: rgb(var(--rbg) / var(--alpha));
    border-radius: 50%;
}

.social_profile svg {
    transition: 0.5s;
}

.social_profile:hover svg {
    fill: var(--dark1);
}

.social_profile:before {
    content: "";
    position: absolute;  
    top: 50%;
    left: 50%;
    height: inherit;
    width: inherit;
    background: inherit;
    border-radius: inherit;
    transform: translateX(-50%) translateY(-50%);
    animation: pulse-border 1500ms ease-out infinite;
}


.wp_page {
    max-width: 89%;
}
.section-one { 
    justify-content: flex-end;
}
.container {
    max-width: 1200px;
}
.section-one .wlc_display {
    width: 95.4%;
    justify-content: flex-end;
}
.info {
    position: absolute;
    left: 4.5%;
    top: 0;
    bottom: 0; 
    justify-content: center;
    z-index: 1;
}
.section-one .info h2 {
    font-size: 55px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}
.section-one .info h3 {
    font-weight: 800;
    font-size: 30px;
    margin: 0; 
    margin-top: -15px;
}

.rotating-text {
    /* background-image: var(--text-gradient); */
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-size: 100% 5px;
    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !important;
    /* text-decoration: underline; */
    /* text-decoration-thickness: 5px; */
    /* text-decoration-color: var(--pre-blue); */
}
.cursor {
    background-color: var(--border-color);
    width: 2px;
    height: 90%;
    display: inline-block;
    vertical-align: bottom;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}
  
.section-one .info .button {
    position: relative; 
    margin-top: 20px; 
}
.section-one .info .button a {
    position: relative;
    display: inline-block;
    padding: 15px 25px;
    color: var(--white);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    border: 2px solid var(--pre-blue);
    border-radius: 15px; 
}
.section-one .info .button a:after {
    content: '';
    position: absolute;
    background: linear-gradient(135deg, var(--sec-blue), var(--pre-blue));
    top: 0;
    right: 100%;
    width: 140%;
    height: 100%;
    opacity: 0;
    transform: skewX(40deg);
    transition: all 0.35s ease-in-out;
    z-index: -1;
}
.section-one .info .button a:hover:after {
    opacity: 1;
    right: 0%;
}

/* wlc img  */
.section-one .thumbnail {
    position: relative;
    width: 50%;
    width: 52.4%;
    min-width: 520px;
    padding: 70px;
    padding-bottom: 0;
    margin-bottom: -10px;
    z-index: -1;
} 
.section-one .thumbnail > img, .thumb img {
    filter: blur(0.4px);
}
.section-one .thumbnail .shape-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    width: 120%;
} 
#splash{
    transition: 0.5s;
}
.section-two .expertise {
    position: relative; 
    max-width: 90%;
    margin: auto;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}  
.sub-title {
    display: inline;
    color: var(--pre-blue);
    font-weight: 700;
    background: var(--text-gradient);
    text-transform: uppercase;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; 
}
.section-two .heading { 
    width: 100%;
    padding-top: 120px;
    padding-bottom: 45px;  
    background: linear-gradient(var(--dark1), transparent);
}
.section-two .heading .title {
    font-weight: 700;
    margin-bottom: 0;
}

.divider {
    gap: 5px;
}
.divider:before, .divider:after {
    content: "";
    width: 10px;
    height: 2px;
    background: var(--pre-blue);
}
.divider:after { 
    width: 50px;
}


.service-items {
    padding: 15px 50px 100px; 
    flex-direction: row; 
} 
.service-item, .price-item {
    position: relative;
    flex: 1 1 230px;
    text-align: center;
    border-radius: 10px;
    padding: 10px 37px;
    background-color: var(--dark1); 
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .6); 
} 
.service-item .icon img {
    height: 60px;
    margin: 20px; 
}
.service-item p {
    font-size: 15px;
    border-top: dotted 2px var(--border-color);
    padding-top: 20px;
}
.item-shadow {
    position: absolute;
    gap: inherit;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: inherit;
    z-index: -1;
    flex-direction: inherit;
    mix-blend-mode: hard-light;
}
.item-shadow:before {
    content: '';
    position: absolute;
    top: -60%;
    height: 200%;
    width: inherit;
    background: var(--splash-color);
    transition: 4s;
}
.item-shadow div { 
    position: relative;
    top: -15px;
    height: inherit;
    width: inherit;
    padding: 0 20px;
    flex: 1 1 230px; 
}
.item-shadow div::before {
    content: '';
    height: inherit;
    width: inherit;
    border-radius: 10px;
    background-color: #808080;
    border: 1px solid var(--border-color);
    display: block;
}
.portfolio {
    position: relative;
    gap: 80px;
    padding: 120px 25px;
}
.heading-shape {
    position: absolute;
    left: -45px;
    top: -30px;
    width: 50px;
}
.shape-animated-right {
    position: absolute;
    right: 5%;
    top: -60px;
    max-width: 200px;
} 
.portfolio .title {
    max-width: 420px;
    margin: 0;
}
.portfolio .fun-factor{ 
    row-gap: 10px;
    column-gap: 30px;
    flex-grow: 1;
    justify-content: center;
} 
.portfolio .counter {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 45px;
    font-weight: 900;
    color: var(--white);
    line-height: 1;
    margin-bottom: 5px;
}
.collection_list {
    display: flex;
    min-width: 260vw;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    transform: rotateY(355deg);
    transform-origin: left;
}

 
.prof-item {
    position: relative;
    width: 33%; 
    min-width: 270px;
    padding: 10px;
    padding-bottom: 15px; 
    background: var(--dark1);
    border-radius: 16px;
    border: 1px solid var(--border-color);
}
.prof-item img {   
    position: relative;
    width: 100%;
    border-radius: 12px;
    transition: .5s 25ms;
    z-index: 1;
}
.prof-item:hover img {
    width: 80%;
}
.portfolio .content {
    position: absolute;
    margin: 0;
    left: 0;
    right: 0;
    opacity: 0;
    bottom: 10px;
    padding: 0 20px;
    transition: 1s 25ms;
}

.prof-item:hover .content {    
    opacity: 1;
}



.about {
    position: relative;
    background: linear-gradient(90deg, rgb(4 8 54 / 0%), var(--dark1));
    padding: 80px 30px;
    -webkit-clip-path: polygon(0 0, 20% 5%, 100% 0, 100% 100%, 80% 95%, 0 100%);
    clip-path: polygon(0 0, 20% 5%, 100% 0, 100% 100%, 80% 95%, 0 100%);
}

.about .wrap {
    flex-basis: 40%;
}
.about .wrap:last-child {
    flex-basis: 50%;
}
.about .thumb {
    position: relative;
    padding: 0 20px 30px;
    z-index: 1;
} 
.about .thumb .math { 
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;   
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 100 100" xml:space="preserve"><style type="text/css">.blur{filter:url(%23softedge);}</style><filter id="softedge"><feGaussianBlur stdDeviation="3.5"></feGaussianBlur></filter><g class="blur"><rect x="10" y="10" width="80" height="80"/></g></svg>');
    -webkit-mask-size: cover;
    filter: brightness(2);
    transition: 0.5s;
    z-index: 1;
}
.about .thumb .math.a {
    left: 0;
}
.about .thumb .math.b {
    opacity: 0.7; 
    right: 0;
}
.about .thumb .math.c {
    margin-top: 20%;
    left: -5%;
    width: 40%;
}
.skill-list ul {
    margin-top: 30px;
    position: relative;
    z-index: 1;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.skill-list li {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--border-color);
    margin-top: 15px;
    padding-top: 15px;
}
.skill-list li i {
    display: inline-block;
    height: 70px;
    width: 70px;
    text-align: center;
    line-height: 70px;
    background: var(--pre-blue);
    margin-right: 20px;
    border-radius: 50%;
    font-size: 40px;
    color: var(--white);
}




.section-five .resume {
    position: relative;
}

.resume-area {
    padding-top: 120px;
}

.right-top-shape {
    position: absolute;
    right: 5%;
    top: 0;
    max-width: 10%;
}
.experience-content .nav-tabs { 
    min-width: 420px;
}
.nav-tabs { 
    position: relative;
    width: 60%;
    gap: 15px;
    padding: 10px;
    margin: auto;
    margin-bottom: 50px;
    background: var(--dark2);
    box-shadow: 0 0 1rem 0 rgb(0 0 0 / 10%);
    border: 1px solid var(--border-color); 
    border-radius: 20px;
    z-index: 1;
}
.nav-tabs .btn-bg { 
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: inherit;
}
.nav-tabs .btn-bg:before { 
    content: '';
    display: inherit;
    position: relative; 
    width: 50%;
    height: 100%; 
    border-radius: 15px;
    border: 2px solid var(--pre-blue);
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all
}  
.w-100.btn-bg:before {
    width: 100%;
} 
.nav-tabs button {    
    position: relative;
    gap: 60px;
    flex-basis: 50%;
    padding: 15px 0;
    color: var(--white);
    background: none;
    font-size: 15px;
    font-weight: 700; 
    text-transform: uppercase;
    border-radius: 15px;
    border: none;
    transition: all 0.35s ease-in-out;
    overflow: hidden;
}
.nav-tabs .nav-link:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent , var(--dark1) 40%, var(--dark1) 60%, transparent);
    opacity: 0;
    transition: all 0.35s ease-in-out;    
    z-index: -1;
}
.nav-tabs .nav-link:hover:after { 
    opacity: 0.5;
}
.nav-tabs button strong { 
    font-size: 25px; 
}

.experience-content {
    position: relative;
    width: 95%;
    margin: 0 auto 50px;
    padding: 20px 80px 60px;
    background: var(--shade);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    z-index: 1; 
} 
.tab-content>.tab-pane {
    display: none;
}

.tab-content>.active {
    display: block;
}
ul.biography-table {
    display: flex;
    flex-wrap: wrap;
    column-gap: 70px;
    overflow: hidden;
    padding-left: 0;
    margin-bottom: 0;
    justify-content: space-between;
}
ul.biography-table li {
    display: flex;
    flex: 1 1 300px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 10px 0;
    z-index: 1;
}
ul.biography-table li::after {
    position: absolute;
    left: 0;
    top: -1px;
    content: "";
    height: 1px;
    width: 100%;
    opacity: 0.2;
    background: #cfd4d6;
}
ul.biography-table li h5, ul.biography-table li p {
    margin: 0;
}

.skill-table { 
    position: relative;  
    gap: 10px;
    list-style: none;
    margin: 0;
}
.skill-table .icon { 
    height: 65px;
    width: 65px; 
    margin-right: 20px; 
    background: #fb503b;
    border-radius: 50%;
}
.p_lang {
    display: flex;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
}
.skill-table h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
}

.skill-table .progress-box { 
    width: 50%;
}
.skill-table .progress {
    position: relative;
    display: inherit;
    height: 8px;
    width: 100%;
    background-color: #e5ebec;
    border-radius: 50px;
    align-items: inherit;
}
.progress-bar {
    width: 54%;
    height: 170%;
    color: #fff;
    white-space: nowrap;
    background: var(--skill-gradient);
    border-radius: inherit;
    background-attachment: fixed;
    transition: width .6s ease;
}
.skill-table .progress-box h5 {
    padding: 3px 7px;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    background: inherit;
    background-attachment: fixed;
    border-radius: 10px;
}

.pricing {
    --prism-size: 300px;
    --prism-height: 300px;
    padding: 120px 0;
    margin: 50px 0;
}
.pricing .wrap {
    flex-basis: 40%;
    text-align: center;
}
.pricing .sub-title {
    font-size: 40px;
    font-weight: 800;
}
.pricing .heading p {
    margin: 20px 0 0;
    font-size: 18px;
    line-height: 2;
}

.pricing .nav-tabs { 
    width: var(--prism-size);
}
.pricing .nav-tabs .btn-bg:before {
    width: calc(100% / 2.5); 
}
.pricing .btn-bg.justify-start:before {
    width: calc(100% / 3.5);
    border-color: #53793a;
} 
.pricing .btn-bg.justify-end:before {
    width: calc(100% / 3.5);
    border-color: #c77e4e;
}
.pricing .w-100.btn-bg:before { 
   width: 90%;
} 

.prism-scene { 
    --translateZ: translateZ(calc(var(--prism-size) / 3.43));
    width: var(--prism-size); 
    height: var(--prism-height);
    perspective: 1200px;
}
.price-items {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: transform 1s;
    perspective: 80000px;
}
.price-item {
    position: absolute;
    width: 100%;  
    padding: 0;
    color: var(--dark1);
    background: linear-gradient(var(--white) 30%,var(--shade));
    backdrop-filter: blur(3px);
    transform-origin: center bottom;
} 
.price-item.center  { transform: rotateY(  0deg) var(--translateZ)}
.price-item.left   { transform: rotateY( -120deg) var(--translateZ)}
.price-item.right  { transform: rotateY( 120deg) var(--translateZ)}

.price-item img:not(:first-child) {  
    position: absolute;
    width: 80%;
    opacity: 0;

}
.price-item .img-1 {  
    border-radius: 10px;
} 
.price-item .img-3 { 
   transform-origin: left;
} 
.price-item .img-6 { 
    filter: brightness(1.1); 
}
.price-item .img-7 {  
    transform-origin: left bottom;
}
 
.price-item h4:before {
    position: absolute;
    content: '';
    z-index: -1;
    background: linear-gradient(217deg, #448ad5, #b8eaf9);
    width: 50px;
    height: 50px; 
    top: 30%;
    left: 0;
    right: 0;
    margin: auto;
    box-shadow: 0 6px 20px 0 rgba(16, 39, 112, .3);
    animation: border-transform 6s linear infinite;
}
.price-item.left h4:before { 
    background: linear-gradient(217deg, #315327, #8da572);
}
.price-item.right h4:before { 
    background: linear-gradient(217deg, #573722, #f59c6b);
}
h4.mb-5 {
    letter-spacing: 3px;
    font-size: 15px;
}
h2.mb-2 {
    margin: 0;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.1;
}
p.mb-4 {
    font-weight: 500;
    font-size: 14px;
}
.price-item .link { 
    padding: 10px;
    margin-bottom: 25px;
    border-radius: 15px; 
    color: var(--pre-blue);
    /*background: rgb(255 255 255 / 70%);*/
    border: 2px solid var(--pre-blue);
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
.price-item.left .link {
    color: #5b8f45;
    border-color: #5b8f45;
}
.price-item.right .link {
    color: #c77e4e;
    border-color: #c77e4e;
}
.img-8 {
    position: absolute;
    right: -5px;
    bottom: -10px;
    width: calc(15% + 30px);
    transform: scale(0.5);
    opacity: 0;
}


/* Video Paly */
@keyframes pulse-border {
	0% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		opacity: 0;
	}
}

@keyframes border-transform{
    0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
    14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
    28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
    42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
    56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
    70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
    84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}

@media (max-width: 1181px) {
    .section-one .info h2 {
        font-size: 45px;
    }
    .section-one .info h3 {
        font-size: 25px;
    }
    .item-shadow div {
        display: none;
    }
}

@media (max-width: 1010px) {
    .section-one .info h2 {
        font-size: 40px;
    }
    .skill-table h4 {
        font-size: 16px;
    }
    .skill-table .progress-box {
        width: 100%;
    }
}
/* Portrait tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {


}
/* (portrait and landscape) */
@media (max-width: 767px) {
    .section-one .info h2 {
        font-size: 35px;
    }
    .section-one .info h3 {
        font-size: 20px;
    }
    .section-one .info .button { 
        margin-top: 15px;
    }
    .section-one .info .button a { 
        padding: 13px 22px; 
        font-size: 13px;
        font-weight: 100; 
    }
    .section-two .heading { 
        padding-top: 100px;
    }
    .about {
        flex-direction: column;
    }
    .about .wrap:not(:last-child) {
        width: 90%;
    }
    .experience-content {
        width: 90%;
        padding-right: 30px;
        padding-left: 30px;
    }
    .experience-content .nav-tabs {
        min-width: 350px;
    }
    .nav-tabs button { 
        gap: 30px;
        font-size: 12px;
    }
    .nav-tabs button strong { 
        font-size: 18px; 
    }
    .pricing {
        row-gap: 60px; 
        padding-right: 30px;
        padding-left: 30px;
        flex-direction: column;
        align-items: center;
    }
}


@media (max-width: 650px) {
    .header-fixed {
        position: absolute;
        left: 0;
    }
    .header-fixed > div {
        height: auto;
        background: unset;
    }
    .header-fixed .logo a { 
        background: unset;
    }
    .header-fixed div > div:not(.logo) {
        display: none;
    }
    .wp_page {
        max-width: 100%;
    }
    .section-one {
        align-items: center;
        justify-content: center;
    }
    .section-one .wlc_display {
        width: auto;
    }
    .info {    
        margin: 30px 0;
        justify-content: flex-end;
    }
    .section-one .thumbnail {
        min-width: unset;
        width: 100%;
    }
    
}


@media (max-width: 550px) {    
    .section-one .thumbnail {
        padding: 35px;
        padding-bottom: 0; 
        min-width: 450px;
    }
    .section-one .thumbnail .shape-center {
        width: 130%;
    }
}

@media (max-width: 500px) {    
    .service-items {
        padding: 10px 25px 70px; 
    }
    .experience-content .nav-tabs {
        width: 100%;
        min-width: unset;
    }
}