/* Table of Content
==================================================
	
	1. Body and Core Css
	2. Profile Section
	3. Navigation
	4. Home Section
	5. Resume Section
    6. Portfolio Section
    7. Blog Section
    8. Testimonial Section
    9. Contact Section
    10. Footer Section
    11. Realtor Portfolio 
    12. Photo Gallery Widgets
    13. Table Widget
    14. Pricing Widget
    15. Events Widget
    16. Discography Widget
    17. Responsive
 */


/*------------------------ 0 Color -------------------------------- */

.estate figure .imgout .price, .site-btn, nav ul li a:after, .owl-theme .owl-controls .owl-page span, .skill-list .progress .percentage, ul.profile-information li:first-child:before {
    background: #ffc500 !important;
}


ul.profile-information li:before {
    border-color: #ffc500;
}

#portfolio .cbp-item .portfolio-image .icon i, #portfolio .cbp-item figure .icon i {
    background: rgb(255, 197, 1);
}

#certificates .cbp-item .portfolio-image .icon i, #certificates .cbp-item figure .icon i {
    background: rgb(255, 197, 1);
}

.tab.active a, #blog-post .post-list ul li a, #blog-post .post-comment ul li .comment-content a {
    color: #ffb100;
}

/*------------------------ 1 Body and Core Css ------------------------*/

:root {
    --main-color: #151515;
    --text-color: #c9d3b3;
    --border-color: #363408;
    --second-color: rgb(28, 25, 25);
}

.google-map {
    border-radius: 15px;
}

ul li a {
    color: var(--text-color);
}

svg {
    width: 20px;
    height: 20px;
    fill: #947507;
    margin-right: 3px;
}

#home {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

#home .row {
    background-color: var(--main-color);
    border-radius: 8px;
}

.portfolio img.item {
    width: 100%;
}

.certificates img.item {
    width: 100%;
}

body {
    background-color: #11232B;
    background-image: url(../images/bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text-color);
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

.geometric-shapes {
    position: absolute;
    width: 100%;
}

html {
    height: 100%;
}

/* Typography */

hr {
    width: 100%;
    background: #efefef;
}

.blog-title {
    font-size: 26px;
    font-weight: bold;
    line-height: 30px;
}

.education-title {
    font-size: 18px;
    font-weight: 500;
    margin-left: 30px;
    margin-top: 10px;
    line-height: 30px;
}

.work-title {
    font-size: 18px;
    font-weight: 500;
    margin-left: 23px;
    margin-top: 10px;
    line-height: 30px;
}

.section-title {
    position: relative;
    display: inline-block;
    padding: 0 3px;
}

.section-title h1, .section-title h2, .section-title h3, .section-title h4, .section-title h5 {
    font-size: 18px;
    font-weight: 600;
    position: relative;
}

.section-title span {
    position: absolute;
    height: 7px;
    width: 100%;
    bottom: 0;
    opacity: 0.4;
    left: 0;
}

.site-btn {
    color: black;
    font-size: 14px;
    font-weight: 500;
    border: 0;
    border-radius: 8px;
    padding: 1px 29px;
    line-height: 35px;
}

.site-btn.black {
    background: #000 !important;
}

.cbp-l-loadMore-link.site-btn {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 0 !important;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    padding: 1px 29px !important;
    line-height: 35px !important;
}

.site-btn.icon i {
    color: #000;
    font-size: 18px;
    width: 27px;
    float: right;
    line-height: 29px;
    margin-top: 2px;
    padding-left: 12px;
}

p {
    font-size: 13px;
    line-height: 24px;
}

.little-text {
    color: #989898;
    font-weight: 400;
    line-height: 18px;
}

blockquote {
    font-weight: 600;
    font-size: 18px;
    line-height: 30px;
}

h1 {
    font-size: 50px;
    font-weight: 500;
}

h2 {
    font-size: 43px;
    font-weight: 500;
}

h3 {
    font-size: 37px;
    font-weight: 500;
}

h4 {
    font-size: 32px;
    font-weight: 500;
}

h5 {
    font-size: 26px;
    font-weight: 500;
}

h6 {
    font-size: 20px;
    font-weight: 500;
}


/* Margins & Paddings */

.top_15 {
    margin-top: 15px;
}

.top_30 {
    margin-top: 30px;
}

.top_45 {
    margin-top: 45px;
}

.top_60 {
    margin-top: 60px;
}

.top_90 {
    margin-top: 90px;
}

.top_120 {
    margin-top: 120px;
}

.padding_30 {
    padding-top: 30px;
}

.padding_45 {
    padding-top: 45px;
}

.padding_50 {
    padding-top: 50px;
}

.padding_60 {
    padding-top: 60px;
}

.padding_90 {
    padding-top: 90px;
}

.bottom_15 {
    margin-bottom: 15px;
}

.bottom_30 {
    margin-bottom: 30px;
}

.bottom_45 {
    margin-bottom: 45px;
}

.bottom_60 {
    margin-bottom: 60px;
}

.bottom_90 {
    margin-bottom: 90px;
}

.bottom_120 {
    margin-bottom: 120px;
}

.padbot_15 {
    padding-bottom: 15px;
}

.padbot_30 {
    padding-bottom: 30px;
}

.padbot_45 {
    padding-bottom: 45px;
}

.padbot_50 {
    padding-bottom: 50px;
}

.padbot_60 {
    padding-bottom: 60px;
}

/*------------------------ 2 Profile Section ------------------------*/

.profile {
    background: var(--main-color);
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
    width: 100%;
    display: inline-block;
    box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.07);
    -webkit-box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.07);
}

.profile-name {
    line-height: 18px;
    padding: 20px 20px 5px 20px;
}

.profile .name {
    text-transform: uppercase;
    font-size: 17px;
    font-weight: bold;
}

.profile .job {
    font-size: 13px;
    color: #afb998;
}

.profile-image {
    margin: 20px;
}

.profile-image img {
    width: 100%;
    border-radius: 100px;
    border: 2px solid var(--border-color);
}

ul.profile-information {
    list-style: none;
    margin: 8px 0px 8px 35px;
}

ul.profile-information li {
    padding: 0 0 13px 10px;
    font-size: 14px;
}

ul.profile-information li p {
    font-size: 13.5px;
    color: #7F7F7F;
    line-height: 12px;
}

ul.profile-information li:last-child {
    border: 0;
    margin-top: -2px;
}

ul.profile-information li span {
    vertical-align: super;
    color: var(--text-color);
    font-size: 16px;
}


ul.profile-information li:first-child {
    padding-top: 30px;
    position: relative;
}


ul.profile-information li:first-child:before {
    margin-left: -51px;
    margin-top: -30px;
    margin-bottom: 20px;
    position: relative;
    border: 0;
    width: 40px;
    height: 40px;
    padding: 11px 14px;
    box-shadow: 0px 2px 32px 0px rgba(4, 123, 248, 0.3);
}

.profile .site-btn {
    margin: 18px auto 30px;
    display: block;
}


/*------------------------ 3 Navigation ------------------------*/

header nav {
    background: var(--main-color);
    display: inline-block;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    height: 70px;
    width: 100%;
    margin-bottom: 15px;
    line-height: 70px;
    box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.07);
    -webkit-box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.07);
}

header nav ul li {
    float: left;
}

header nav ul li a {
    color: var(--text-color);
    padding: 0 10px;
    line-height: 73px;
    display: block;
    font-family: Roboto, serif;
    font-weight: 700;
    font-size: 16px;
}

header nav ul li a:hover {
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
}

header nav ul li a:after {
    border-right: 1px solid #dfdfdf;
}

header nav a.home-btn {
    color: rgba(255, 197, 0, 1);
    border-radius: 6px 0 0 6px;
    -webkit-border-radius: 6px 0 0 6px;
    -moz-border-radius: 6px 0 0 6px;
    padding: 0px 24px;
    float: left;
    height: 70px;
    line-height: 70px;
    margin-right: 10px;
    transition: all ease 0.4s;
    line-height: 77px;
}

header nav a.home-btn:hover {
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
}

header nav a.home-btn i {
    font-size: 32px;
}

header nav .site-btn {
    margin: 18px 18px 0 5px;
}

.social-icons a {
    color: var(--text-color);
    font-size: 16px;
    transition: all ease 0.2s;
    width: 24px;
    height: 18px;
    display: inline-block;
}


.social-icons a:hover {
    font-size: 14px;
}

.fb:hover {
    color: #3b5998 !important;
    transition: all ease 0.2s;
}

.tw:hover {
    color: #55acee !important;
    transition: all ease 0.2s;
}

.ins:hover {
    color: #cd486b !important;
    transition: all ease 0.2s;
}

.bh:hover {
    color: #1769ff !important;
    transition: all ease 0.2s;
}

.dr:hover {
    color: #ea4c89 !important;
    transition: all ease 0.2s;
}

header nav .menuout {
    z-index: 10
}

header nav .menuout {
    display: none;
}

/*------------------------ 4 Home Section ------------------------*/

#content {
    margin-right: -15px;
    margin-left: -15px;
    min-height: 500px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    padding: 15px;
}

section {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

section.line {
    border-bottom: solid 1px #efefef;
}

section:last-child {
    border: 0;
}

section.graybg {
    background: #fafafa;
}

.services .service span.title {
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
}

.clients .client {
    background: #fff;
    padding: 18px;
    border-radius: 8px;
    box-shadow: 0px 0px 48px 0px rgba(4, 6, 4, 0.08);
    width: 100%;
    padding: 26px 16px;
}

/*
.clients .col-md-3:nth-child(2) .client {
    padding: 23px 18px;
}*/


.clients .client img {
    width: 100%;
}

.service .icon i:before {
    font-size: 44px;
    margin-left: 0;
}

.service {
    background: #fff;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    padding: 20px;
    box-shadow: 0px 0px 48px 0px rgba(4, 6, 4, 0.08);
    min-height: 186px;
}


/*------------------------ 5 Resume Section ------------------------*/

ul.timeline {
    margin-left: 10px;
}

.timeline li {
    border-left: solid 2px rgb(72, 70, 70);
    list-style: none;
    padding: 0 0 40px 30px;
}

.timeline li:first-child {
    border-left: none;
}


.timeline li:before {
    content: "";
    border: solid 2.2px;
    width: 8px;
    height: 8px;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    font-size: 8px;
    margin-left: -35px;
    font-weight: 400;
    background: var(--main-color);
    display: block;
    position: absolute;
    margin-top: -1px;
}

.timeline li .line-title {
    font-size: 16px;
    line-height: 6px;
}

.timeline li:first-child {
    padding: 0 0 60px 19px;
    margin-left: -9px;
}

.timeline li:first-child i {
    color: #ffc500;
    font-size: 40px;
}

.timeline li:first-child:before {
    border: 0;
    background: none;
    position: relative;
}

.timeline li:first-child i {
    float: left;
    padding: 18px 16px;
    border-radius: 30px;
    margin: -13px -45px;
    width: 53px;
    text-align: center;
}

.timeline li .section-title {
    padding-left: 20px;
}

.timeline li span {
    font-size: 12px;
    padding: 9px 0;
    display: block;
}

.timeline li:last-child {
    border: 0;
    margin-left: 2px;
}

/* Skills */

.skill-list li {
    list-style: none;
}

.skill-list h3 {
    font-size: 14px;
}

.skill-list .progress {
    margin: 10px 0 20px;
    display: block;
    height: 5px;
    position: relative;
    width: 100%;
    overflow: visible;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    background: #dfdfdf;
    box-shadow: 0;
}

.skill-list .progress .percentage {
    border-radius: 50px 0 0 50px;
    -moz-border-radius: 50px 0 0 50px;
    -webkit-border-radius: 50px 0 0 50px;
    -ms-border-radius: 50px 0 0 50px;
    -o-border-radius: 50px 0 0 50px;
    bottom: 0;
    position: absolute;
    top: 0;
}


/*------------------------ 6 Portfolio Section ------------------------*/


#portfolio .cbp-item {
    padding: 15px !important;
}

#portfolio section {
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-bottom: 80px;
}

#portfolio .cbp-item-wrapper {
    border: solid var(--border-color) 2px;
    background-color: var(--second-color);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    display: inline-block;
    overflow: hidden;
    box-shadow: 0px 0px 48px 0px rgba(4, 6, 4, 0.08);
    -webkit-box-shadow: 0px 0px 48px 0px rgba(4, 6, 4, 0.08);
    -moz-box-shadow: 0px 0px 48px 0px rgba(4, 6, 4, 0.08);
}

.content-header {
    z-index: 5;
}

#portfolio .cbp-item-wrapper:hover {
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    box-shadow: 0px 0px 20px 0px rgba(4, 6, 4, 0.08);
    -webkit-box-shadow: 0px 0px 20px 0px rgba(4, 6, 4, 0.08);
    -moz-box-shadow: 0px 0px 20px 0px rgba(4, 6, 4, 0.08);
}

#portfolio .cbp-item figure img, .work figure {
    border: solid var(--border-color) 2px;
    border-radius: 8px;
    height: auto;
    display: block;
}

#portfolio .cbp-item figure {
    padding: 5px;
}

#portfolio .cbp-item figcaption .title {
    font-size: 14px;
    color: var(--text-color);
}

#portfolio .cbp-item figcaption {
    padding: 14px;
}

#portfolio .cbp-item figcaption .info {
    font-size: 13px;
    color: var(--text-color);
    line-height: 18px;
    display: block;
}

#portfolio .filters-container .cbp-filter-item {
    font-size: 14px;
    color: #787878;
    cursor: pointer;
    float: left;
    margin-right: 15px;
}

#portfolio .cbp-item:hover figure .icon {
    opacity: 0.9;
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transform: translate(0, -25px);
    -webkit-transform: translate(0, -25px);
    -moz-transform: translate(0, -25px);
}

#portfolio .cbp-item figure .icon {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    opacity: 0;
    display: table-cell;
    vertical-align: middle;
    top: 50%;
    margin-top: -20px;
    transition: all ease 0.3s;
}

#portfolio .cbp-item figure .icon i {
    color: #fff;
    padding: 17px 0 16px;
    min-width: 50px;
    border-radius: 50px;
    text-align: center;
    transition: all ease 0.3s;
    text-align: center;
    background: rgba(3, 122, 249, 0.80);
}

#portfolio .cbp-item figure .icon i:before {
    font-size: 18px;
}

/*------------------------ 7 certificates Section ------------------------*/

#certificates .cbp-item {
    padding: 15px !important;
}

#certificates section {
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-bottom: 80px;
}

#certificates .cbp-item-wrapper {
    border: solid var(--border-color) 2.4px;
    background-color: var(--second-color);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    display: inline-block;
    overflow: hidden;
    box-shadow: 0px 0px 48px 0px rgba(4, 6, 4, 0.08);
    -webkit-box-shadow: 0px 0px 48px 0px rgba(4, 6, 4, 0.08);
    -moz-box-shadow: 0px 0px 48px 0px rgba(4, 6, 4, 0.08);
}

.content-header {
    z-index: 5;
}

#certificates .cbp-item-wrapper:hover {
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    box-shadow: 0px 0px 20px 0px rgba(4, 6, 4, 0.08);
    -webkit-box-shadow: 0px 0px 20px 0px rgba(4, 6, 4, 0.08);
    -moz-box-shadow: 0px 0px 20px 0px rgba(4, 6, 4, 0.08);
}

#certificates .cbp-item figure img, .work figure {
    border: solid var(--border-color) 2px;
    border-radius: 8px;
    height: auto;
    display: block;
}

#certificates .cbp-item figure {
    padding: 5px;
}

#certificates .cbp-item figcaption .title {
    font-size: 14px;
    color: var(--text-color);
}

#certificates .cbp-item figcaption {
    padding: 14px;
}

#certificates .cbp-item figcaption .info {
    font-size: 13px;
    color: var(--text-color);
    line-height: 18px;
    display: block;
}

#certificates .filters-container .cbp-filter-item {
    font-size: 14px;
    color: #787878;
    cursor: pointer;
    float: left;
    margin-right: 15px;
}

#certificates .cbp-item:hover figure .icon {
    opacity: 0.9;
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transform: translate(0, -25px);
    -webkit-transform: translate(0, -25px);
    -moz-transform: translate(0, -25px);
}

#certificates .cbp-item figure .icon {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    opacity: 0;
    display: table-cell;
    vertical-align: middle;
    top: 50%;
    margin-top: -20px;
    transition: all ease 0.3s;
}

#certificates .cbp-item figure .icon i {
    color: #fff;
    padding: 17px 0 16px;
    min-width: 50px;
    border-radius: 50px;
    text-align: center;
    transition: all ease 0.3s;
    text-align: center;
    background: rgba(3, 122, 249, 0.80);
}

#certificates .cbp-item figure .icon i:before {
    font-size: 18px;
}

/* Form */

.site-form .site-input {
    width: 100%;
    height: 45px;
    border: 0;
    background-color: var(--text-color);
    color: var(--main-color);
    border-bottom: solid 1px var(--second-color);
    border-radius: 15px;
    font-size: 13px;
    padding-left: 10px;
    margin-bottom: 15px;
    outline: 0;
}

.site-form .site-area {
    width: 100%;
    border: 0;
    background-color: var(--text-color);
    color: var(--main-color);
    border-radius: 15px;
    font-size: 13px;
    padding: 20px 0 0 10px;
    min-height: 100px;
    margin-bottom: 15px;
    resize: none;
}

.site-form .site-area::placeholder, .site-form .site-input::placeholder {
    color: rgba(var(--main-color), 0.7);
}

.site-form .site-area:-webkit-autofill, .site-form .site-input:-webkit-autofill {
    background-color: var(--text-color) !important;
    color: var(--main-color) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--text-color) inset !important;
}

.site-form .site-area {
    width: 100%;
    border: 0;
    border-bottom: solid 1px var(--second-color);
    font-size: 13px;
    padding: 20px 0 0 10px;
    min-height: 100px;
    margin-bottom: 15px;
}

/*------------------------ 9 Contact Section ------------------------*/

.contact-info ul li {
    list-style: none;
    font-size: 14px;
    color: var(--text-color);
    line-height: 34px;
}

.contact-info ul li span {
    color: var(--text-color);
}

.contact-map iframe {
    width: 100%;
}

/*------------------------ 10 Footer ------------------------*/

footer {
    margin-right: -15px;
    margin-left: -15px;
}

footer .footer {
    background: var(--main-color);
    min-height: 70px;
    color: #fff;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    line-height: 72px;
}

footer .footer .name {
    color: var(--text-color);
    font-size: 15px;
}

footer .footer .copyright {
    color: var(--text-color);
    font-size: 12px;
    text-align: right;
}

footer .footer .copyright a {
    color: var(--text-color);
}

footer .footer .copyright a:hover {
    color: #dfdfdf;
    transition: all ease 0.3s;
}

/*------------------------ 17 Responsive ------------------------*/

@media (max-width: 1199px) {
    footer .footer .copyright {
        text-align: center;
    }
}

@media (max-width: 991px) {

    .wrapper.top_60 {
        margin-top: 30px;
    }

    .services .service {
        margin-bottom: 30px;
    }

    .code-skills {
        padding-top: 0;
    }

    #content {
        padding-bottom: 45px;
    }

    ul.profile-information li:first-child {
        padding-bottom: 10px;
        padding-left: 30px;
    }

    ul.profile-information {
        list-style: none;
        margin: 0 auto 30px;
        display: table;
    }

    footer .footer .copyright {
        text-align: center;
    }

    .clients .client {
        margin-bottom: 30px;
    }

    .events ul li .site-btn {
        float: none;
        margin-top: 15px;
    }

}

@media screen and (max-width: 991px) and (min-width: 769px) {

    header nav {
        margin-top: 30px;
    }

    nav .social-icons {
        display: none;
    }

    nav .hamburger {
        display: none;
    }

}


@media screen and (max-width: 991px) and (min-width: 576px) {

    .profile .name {
        font-size: 20px;
        margin-top: 11px;
    }

    .profile-image {
        margin-top: -18px;
        -webkit-clip-path: polygon(0 9%, 100% 0, 100% 94%, 0% 100%);
        clip-path: polygon(0 9%, 100% 0, 100% 94%, 0% 100%);
        margin-top: -40px;
    }

}

@media (max-width: 768px) {

    header {
        margin-top: 30px;
    }

    header nav ul {
    }

    header nav ul.tabs li:first-child, header nav .menuout ul.tabs li {
        display: block;
    }

    header nav ul.tabs li {
        display: none;
    }

    header nav .menuout {
        width: 100%;
        position: relative;
    }

    header nav .menuout .menuin {
        width: 100%;
        background: #fff;
        position: absolute;
        z-index: 4;
        margin-top: 25px;
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.05);
        -webkit-box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.05);
    }

    header nav .menuout .menuin ul.tabs li:first-child {
        display: none;
    }

    header nav .menuout .menuin ul.tabs li {
        float: none;
        text-align: center;
        border-bottom: solid 1px #efefef;
    }

    header nav .menuout .menuin ul.tabs li a {
        width: 100%;
        display: block;
        cursor: pointer;
        line-height: 58px;
    }


    header nav .hamburger {
        font-size: 20px;
        margin-right: 23px;
        cursor: pointer;
        line-height: 71px;
        border-left: solid 1px #eaeaea;
        padding-left: 21px;
    }

    header nav .menuout {
        display: block;
    }

    .social-icons {
        margin-right: 14px;
        line-height: 67px;
    }

    .portfolio-content .namenprice .blog-title {
        width: 100%;
    }

    .portfolio-content .namenprice .price {
        float: left !important;
        margin-top: 14px;
    }

}

@media (max-width: 321px) {

    .social-icons {
        display: none;
    }

    header nav .hamburger {
        border: 0;
    }

    footer .footer {
        line-height: 19px;
        padding-top: 14px;
    }

    .timeline li .line-title {
        line-height: 20px;
    }


}

.show-credential-button {
    background-color: #0073e6; /* Цвет фона */
    color: #fff; /* Цвет текста */
    border: none; /* Убираем границу */
    padding: 10px 20px; /* Внутренний отступ */
    border-radius: 5px; /* Скругленные углы */
    font-weight: bold; /* Полужирный текст */
    cursor: pointer; /* Изменение курсора при наведении */
}

.show-credential-button:hover {
    background-color: #005bb7; /* Измененный цвет фона при наведении */
}

figcaption {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.show-credential-button {
    background-color: #ffc500;
    color: black;
    border: none;
    padding: 6px 10px; /* Уменьшаем размер кнопки */
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none; /* Убираем подчеркивание текста */
    transition: background-color 0.3s; /* Плавное изменение цвета фона при наведении */
    margin-top: -15px;
}

.show-credential-button:hover {
    background-color: #ffb100;
    color: black;
}

.user-select-none {
    user-select: none;
}

.black-link {
    color: black
}

.font-16 {
    font-size: 16px;
}