:root {
    --dark: #212428;
    --light: #ffffff;
    --text: #c4cfde;
    --background-color-1: linear-gradient(145deg, #1e2024, #23272b);
    --shadow-1: 10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
    --border-bottom: #2f2e2e;
    --red: #c4cfde;
    --shadow-2: inset 21px 21px 19px #181a1d, inset -21px -21px 19px #202225;
    --background: linear-gradient(145deg, #f02981 0%, #c81901 100%);
    --progress-bar-shadow: inset 8px 8px 16px rgba(0, 0, 0, 0.4588235294), inset -8px -8px 16px rgba(56, 62, 69, 0.4588235294);
    --highlight: #ffc107;
    --text-dark: #878e99;
    --inner-shadow: 1px 4px 2px -3px rgba(0, 0, 0, 0.7) inset, -1px -3px 3px -2px rgb(255 255 255) inset;
    --input: #191b1e;
    --input-shadow: 1px 4px 2px -3px rgba(0, 0, 0, 0.7) inset, -1px -3px 3px -2px rgb(255 255 255 /18%) inset;
}

header .bg-dark {
    background: var(--background-color-1) !important;
}

body {
    background-color: var(--dark);
    color: var(--light);
    font-family: system-ui !important;
}

html {
    scroll-behaviour: smooth;
}

.navbar a {
    color: var(--text);
    font-weight: 400;
    font-size: 14px;
}

.navbar-nav .nav-link.active {
    color: var(--light);
}

.navbar a:hover {
    color: var(--light);
}

.nav-link:focus {
    color: var(--light);
}

.hero {
    padding-bottom: 3.5rem;
    margin-top: 8rem;
}

.hero-img {
    /* height: 500px; */
    width: 100% !important;
}

.hero_icons {
    margin-top: 100px;
}

.hero-Cv h1 {
    font-size: 57px;
}

.hero-Cv p {
    font-size: 18px;
    color: var(--text);
}

.social-links {
    color: white;
    margin: 0 10px;
    background-color: var(--background-color-1) !important;
    box-shadow: var(--shadow-1);
    transition: 0.30s ease;
    padding: 10px 23px !important;
    font-size: 17px;
}
.social-links:hover {
    /*color: var(--highlight) !important;*/
    transform: translate3d(0, -10%, 0);
}

.social-links img {
    width: 20px;
    height: 20px;
}

.hero-img-main {
    position: relative;
}

.hero-img-main::before {
    content: "";
    /* top: 0; */
    left: 0;
    position: absolute;
    background-color: var(--background-color-1);
    /* right: 0; */
    height: 230px;
    width: 100%;
    bottom: 0%;
    z-index: -10;
    box-shadow: var(--shadow-1);
}

.heading-features p {
    font-size: 15px;
    font-weight: 500;
    color: var(--red);
}

.heading-features h1 {
    font-size: 60px;
    color: var(--text);
}

.features-card {
    background-color: var(--background-color-1) !important;
    box-shadow: var(--shadow-1);
    padding: 37px;
    padding-top: 35px;
    padding-bottom: 10px;
}

logo-features-card iconify-icon {

}

.logo-features-card i {
    font-size: 35px;
    color: var(--highlight) !important;
}

.logo-content i {
    font-size: 25px;
    color: var(--highlight) !important;
}

.logo-features-card iconify-icon {
    color: var(--highlight) !important;
    font-size: 33px;
}

.features-card:hover .detail_arrow {
    opacity: 1 !important;
}

.features-card-content {
    transition: 0.4s ease;
}

.icon-color:hover {
    color: var(--highlight);
}

.features-card-content:hover {
    transform: translate3d(0, -5%, 0);
}

.logo-features-card img {
    width: 40px;
}

.portfolio-heading p {
    font-size: 14px;
    color: var(--red);
}

.portfolio-heading h1 {
    font-size: 60px;
    color: var(--text);
}

.portfolio-img {
    overflow: hidden;
    border-radius: 10px;
}

.portfolio-img img {
    width: 100%;
    height: 270px;
    object-fit: cover;
    border-radius: 10px;
    transition: 0.7s ease;
}

.portfolio-img img:hover {
    transform: scale(1.1);
    /* border-radius: ; */
}

.portfolio-inner {
    padding: 24px 27px;
    background-color: var(--background-color-1);
    box-shadow: var(--shadow-1);
    border-radius: 20px;
}

.portfolio-inner:hover
.icon-arrow {
    opacity: 1 !important;
}

.inner-main {
    text-decoration: none;
    color: var(--red);
    cursor: pointer;
}

.nav-tabs .button-1 {
    padding: 20px 100px;
    color: var(--red);
    border: none !important;
}

.nav-tabs .button-1:hover {
    box-shadow: var(--shadow-1) !important;
    border: none !important;
    color: var(--highlight);

}

.nav-tabs {
    box-shadow: var(--shadow-1);
}

.button-2 {
    padding: 20px 55px;
    color: var(--red);
    border: none !important;
}

.nav-tabs .button-2:hover {
    box-shadow: var(--shadow-1) !important;
    border: none !important;
    color: var(--red);
}

.resume-heading h1 {
    font-size: 60px;
}

.resume-content {
    border-left: 5px solid #17191c;
}

.heading-resume-child-1 p {
    font-size: 15px;
    margin-bottom: 4px;
    font-weight: 500;
    color: var(--highlight);
}

.resume-content-child-1 {
    position: relative;
    margin-left: 42px !important;
    padding: 15px 40px;
    background: #212427 !important;
    box-shadow: var(--shadow-1);
}

.resume-content-child-1:hover {
    background: linear-gradient(to right bottom, #212428, #16181c) !important;
}

.resume-content-child-1::before {
    content: '';
    position: absolute;
    top: 106px;
    left: -23px;
    width: 48px;
    height: 5px;
    background-color: #17191c;
    transform: translateX(-50%);
}

.resume-content-child-1::after:hover {

}

.resume-content-child-1::after {
    content: '';
    position: absolute;
    top: 99px;
    left: -52px;
    border: 5px solid #17191c;
    padding: 4px;
    border-radius: 100%;
    background: var(--highlight);
}

.resume-content-child-1:hover .resume-content-child-1::after {
    background-color: red;
}

.resume-content-child-1::after:hover {
    background-color: #1e2024;
}

.content-resume {
    border-top: 1px solid var(--border-bottom);
}

.tab-content-heading p {
    margin-bottom: 0.2rem !important;
}

.button-resume {
    box-shadow: var(--shadow-1);
    padding: 10px 15px !important;
    border-radius: 10px;
    columns: var(--text);
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    box-shadow: var(--shadow-1) !important;
    background: none;
    color: var(--highlight);
}

.tab-content-heading p {
    color: var(--highlight);
}

.tab-pane {
    color: var(--text);
}

.resume {
    border-bottom: 1px solid var(--border-bottom) !important;
}

.progress {
    height: 0.5rem;
    background: #212428;
    box-shadow: var(--progress-bar-shadow);
}

.percentage {
    position: absolute;
    top: 28px;
    right: 0;
    font-weight: 500;
}

.perc_rel {
    position: relative;
    font-weight: 500;
}

.progress-bar {
    background: var(--background);
    position: relative;
}

.tab-content-heading h1, .tab-content-heading p {
    font-weight: 700;
}

.testmonial-heading h1 {
    font-size: 60px;
    color: var(--text);
}

.content-testimonial h3 {
    color: var(--text);
}

.testmonial-heading p {
    font-size: 15px;
    color: var(--red);
    font-weight: 500;
}

.carousel-cell {
    width: 100%;
    height: 550px;
    margin-right: 10px;
    border-radius: 5px;
}

.carousel-cell:before {
    display: block;
    text-align: center;
    line-height: 200px;
    font-size: 80px;
    color: white;
}

.carsoul-image img {
    border-radius: 10px;
    width: 100%;
    transition: 0.50s ease;
    overflow: hidden;
}

.carsoul-image img:hover {
    transform: scale(1.1);
}

.carsoul-image .image {
    overflow: hidden;
}

.content-testimonial p {
    color: white;
    font-size: 13px;
    color: var(--text);
}

content-testimonial h1 {
    color: var(--text) !important;
    color: white;
}

content-testimonial article {
}

.carsoul-image {
    box-shadow: var(--shadow-1);
    padding: 28px 28px;
    position: relative;
    background: var(--dark);
    border-radius: 10px;
}

.image-section {
    padding: 82px 35px;
}

.testimonial {
    border-bottom: 1px solid var(--border-bottom);
    overflow: hidden;
}

.carsoul-image::before {
    content: '';
    position: absolute;
    top: 202px;
    right: -105px;
    background: #17191c;
    height: 7px;
    width: 124px;
    z-index: -34;
}

.main-testimonial {
    margin-top: 60px;
    padding: 82px 10px 30px 0px;
    position: relative;
}

.heading-testimonial-text-content .row {
    border-bottom: 1px solid var(--border-bottom);
    color: var(--text);
    padding: 15px 0px;
}

.heading-testimonial-text-content .row .col-9 h1 {
    font-size: 32px;
    font-weight: 400;
}

.paragraph-testimonial {
    padding-top: 10px;
    color: var(--text-dark);
}

.testimonial-text-content {
    padding: 28px 45px;
    box-shadow: var(--shadow-1);
    border-radius: 10px;
    background: var(--dark);
}

.testimonial-text-content {

    line-height: 30px;
    letter-spacing: 1px;
}

.flickity-page-dots .dot.is-selected {
    opacity: unset;
    background: var(--highlight);
}

.flickity-page-dots .dot {
    background: var(--background-color-1);
    box-shadow: var(--inner-shadow);
}

.rating {
    box-shadow: var(--shadow-1);
}

.rating iconify-icon {
    font-size: 13px;
}

.card-heading h1 {
    font-size: 22px;
    font-weight: 700;
}

.card-heading p {
    font-size: 15px;
}

/*--------------clients--start-----------*/
.client-heading {
    letter-spacing: 1px;
    padding-top: 10px;
}

.client-heading p {
    color: var(--highlight);
    margin-bottom: 0;
    font-weight: 300;
}

.client-heading h1 {
    color: var(--text);
    font-size: 70px;
    font-weight: 700;
}

.nav-pills .nav-link {
    padding: 25px 75px;
    font-size: 18px;
    color: var(--red);
}

.client-card {
    box-shadow: var(--shadow-1);
    border-radius: 10px;
}

.border-divide {
    border-bottom: 1px solid var(--border-bottom);
}

.nav-pills {
    top: 40px !important;
    box-shadow: var(--shadow-1);
    margin-top: 16px;
    border-radius: 10px;
}

.client-name {
    padding: 10px !important;
    color: var(--text) !important;
}

.client-name h3 {
    font-size: 19px;
    font-weight: normal;

}

.client-image {
    padding: 20px 35px !important;
}

.client-image img {
    width: 100% !important;
}

.btn-pricing {
    padding: 12px 15px;
    color: white;
    box-shadow: var(--shadow-1);
    border-radius: 10px;
    font-size: 28px;
}

.pricing-heading p {
    font-weight: 400;
    letter-spacing: 1px;
    color: var(--text-dark);
}

.pricing-heading h1 {
    font-size: 34px;
}

.order-button a {
    color: var(--highlight);
    box-shadow: var(--shadow-1);
    padding: 15px 0;
    border-radius: 10px;
    transition: 0.50s ease;
    background: linear-gradient(145deg, #1e2024, #23272b);
    font-size: 18px;
}

.order-button a:hover {
    transform: translateY(-5px);
    color: var(--highlight);
    outline: none;
}

.plugin p {
    font-size: 18px;
    letter-spacing: 1px;
    color: var(--text);
}

.client {
    padding-bottom: 3.5rem;
    border-bottom: 1px solid var(--border-bottom);
}

.form-control:focus {
    color: var(--bs-body-color);
    background-color: #212428;
    border: 0.1px solid #daa70c !important;
    outline: 0;
    box-shadow: none;
}

.social-media-buttton p {
    color: var(--text);
}

.form-control {
    border: var(--bs-border-width) solid #212428 !important;
    background-color: var(--input);
    box-shadow: var(--input-shadow);
    padding: 13px 10px;
    color: white !important;
}

.pricing {
    box-shadow: var(--shadow-1);
}

.nav-pills .nav-link.active {
    background: var(--dark);
    color: var(--highlight);
    box-shadow: var(--shadow-1);
}

.font-size {
    font-size: 12px;
    font-weight: bold;
    color: var(--highlight);
}

.font-size-1 {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--highlight) !important;
}

.blog-decripition h4:hover {
    color: var(--highlight) !important;
}

.blog {
    border-bottom: 1px solid var(--border-bottom);
}

.contact-descripition p {
    color: var(--text-dark);
}

.contact-descripition h1 {
    color: var(--text);
}

.contact-hand-img img {
    width: 100%;
    border-radius: 10px;
    transition: 0.30s ease;
}

.contact-hand-img img:hover {
    transform: scale(1.1);
}

.contact-hand-img {
    overflow: hidden;
    border-radius: 10px;
}

.contact-main {
    padding: 27px 15px;
}

.main-contact {
    border-radius: 12px;
    padding: 30px 30px;
    box-shadow: var(--shadow-1);
}

.detail {
    color: var(--text);
    text-decoration:none;
}

.detail:hover {
    color: var(--highlight);
}

.send-button {
    padding: 34px 0;
}

.form label {
    padding: 13px 0 !important;
    color: var(--text);
}

.send-button a {
    color: var(--highlight);
    font-size: 18px;
    font-weight: bolder;
    transition: 0.40s ease;
}

.send-button a:hover {
    color: var(--highlight) !important;
    transform: translateY(-5px);
    box-shadow: var(--);
}

.button-social-links .row .col-7 .btn {
    transition: 0.30s ease;
    padding: 10px 23px !important;
    font-size: 17px;
}

.button-social-links .row .col-7 .btn:hover {
    /*color: var(--highlight) !important;*/
    transform: translate3d(0, -10%, 0);
}

.modal .modal-dialog .modal-content {
    padding: 30px;
    border-radius: 10px;
    border: none;
    z-index: 1;
    background: var(--background-color-1);
    box-shadow: 10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
}

.btn-close {
    background-image: url('../img/download.svg') !important;
    opacity: 1 !important;

}

.modal-header, .modal-footer {
    border: none;
    padding: 0rem;
}

.modal {
    z-index: 99999999;
    background: #212428;
    padding: 30px 6px !important;
}

.navbar {
    background-color: rgba(33, 36, 40, 0.8705882353);
    box-shadow: 10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
    backdrop-filter: blur(15px);
    transition: .7s;
}
.navbar-toggler {
    border:none;
}
.navbar-toggler:focus{
    box-shadow: 0px 0px 0px 0px gray;
}
.navbar-brand img{
    border-radius: 50%;
    height: 60px;
}