/*!
Theme Name: afsarme
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: afsarme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

afsarme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

body,nav,h1,h2,h3,h4,h5,h6,p, ul, figure{
    margin: 0;
}
ul {
    padding: 0;
    list-style: none;
}
main {
    max-width: 1920px;
    margin: 0 auto;
}

nav, section {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}
body {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
}
img {
    max-width: 100%;
}
/* header */
.afsarme-header {
    border-bottom: 1px solid #ddd;
}
.afsarme-header ul {
    list-style: none;
    text-align: center;
}
.afsarme-header ul li {
    display: inline-block;
}
.afsarme-header ul li a {
    color: #313131;
    display: inline-block;
    font-size: 18px;
    margin: 5px;
    padding: 10px;
    text-decoration: none;
}
section{
    margin-top: 40px;
}
.box {
    padding: 50px;
    box-shadow: 0px 30px 60px 10px rgba(14, 54, 101, 0.06);
    border-radius: 50px;
    background: #fff;
    border: 2px solid rgba(229, 220, 250, 0.5);
}
.box h3 {
    font-size: 24px;
    margin-bottom: 15px;
}
.box ul li {
    line-height: 40px;
}
a {
    color: #313131;
}

/* hero */
.hero-container,
.hero-bottom {
    display: flex;
}
.hero-right-head ul,
.hero-bottom-right ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
}
.hero-left {
    width: 28%;
}
.hero-right {
    width: 72%;
}
.hero-bottom-left {
    padding: 0 15px;
    width: 60%;
}
.hero-bottom-right {
    width: 40%;
}
.hero-right-head ul li {
    background: rgba(250, 245, 219, 0.7);
    /* flex: 1; */
    text-align: center;
    display: inline-block;
    padding: 10px;
    border-radius: 4px;
}
.hero-right-head ul li a {
    text-decoration: none;
    font-weight: 500;
    color: #313131;
    display: block;
}
.hero-right-head {
    padding-left: 15px;
    margin-bottom: 30px;
}
.hero-right-head ul {
    gap: 15px;
}
.hero-bottom-left span {
    font-size: 12px;
    display: inline-block;
}
.hero-bottom-left h2 {
    margin-bottom: 10px;
}
.hero-bottom-left img {
    max-width: 50%;
}
.hero-bottom-right ul li {
    flex: 1;
    text-align: center;
    background: rgba(250, 245, 219, 0.7);
    padding: 5px 0;
    border-radius: 4px;
}
.hero-bottom-right ul {
    gap: 10px;
    margin-bottom: 10px;
}
.hero-bottom-right img {
    border-radius: 4px;
}
.hero-left img {
    border-radius: 4px;
}
.hero-container,
.skills-container,
.portfolio-container,
.contact-container {
    position: relative;
    z-index: 1;
}
.hero-container:after,
.skills-container:after,
.portfolio-container:after,
.contact-container:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    z-index: -1;
    border-radius: 50px;
}
/* summary */
.summary-container,
.learning-container {
    background: linear-gradient(102.47deg, #f8f3ff 5.44%, #fffaf3 42.63%, #ecf4e0 66.77%, #e4f5fd 95.61%);
}
/* skills */

/* experience */
.experience-container {
    background: linear-gradient(102.47deg, #f8f3ff 5.44%, #fffaf3 42.63%, #ecf4e0 66.77%, #e4f5fd 95.61%);
}
.exp-cards {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.exp-card {
    flex: 1;
    background: rgba(255, 255, 255, 0.5);
    padding: 15px;
    border-radius: 4px;
}
.exp-card ul {
    max-height: 250px;
    overflow-y: scroll;
    height: 100%;
}
.exp-card ul {
    overflow-y: auto;
  }
  .exp-card ul::-webkit-scrollbar {
    width: 2px;
  }
  .exp-card ul::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 100px;
  }
  .exp-card ul li {
    line-height: 24px;
    display: flex;
    margin-bottom: 10px;
}
.exp-card ul li span img {
    max-width: 15px;
}
.exp-card ul li span {
    height: 20px;
    width: 20px;
    margin-right: 5px;
}
.exp-card p {
    font-size: 14px;
    line-height: 24px;
    padding-bottom: 10px;
}
/* portfolio */
.d-none {
    display: none;
}
.stack-portfolio h4 {
    text-align: center;
}
/* .portfolio-container:after {
} */
.portfolio-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
}
.portfolio-item {
    flex: 0 0 15%;
    text-align: center;
}
.portfolio-item a {
    display: block;
    padding: 20px 10px;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid #ddd;
    background: rgba(255, 255, 255, 0.4);
    font-size: 15px;
    border-radius: 4px;
}
.stack-portfolio {
    margin-bottom: 40px;
}
.stack-portfolio:last-child {
    margin-bottom: 0;
}

/* contact */
.wpcf7 form.invalid .wpcf7-response-output {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    border-radius: 8px;
    border-color: red;
}
/* .am-contact-form {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.3);
    padding: 50px;
    border-radius: 8px;
} */
.am-2col {
    display: flex;
    gap: 20px;
    
}
/* .am-input {
    margin-bottom: 25px;
}
.am-input label span {
    display: block;
    margin-bottom: 10px;
    color: #fff;
}
.am-2col .am-input {
    flex: 1;
}
.am-input input {
    width: 100%;
    border: 1px solid #ddd;
    padding: 15px 10px;
    border-radius: 8px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.7);
}
.am-input textarea {
    width: 100%;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 8px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.7);
}
.am-contact-form input[type="submit"] {
    padding: 15px 40px;
    display: inline-block;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.7);
	margin-top: 20px;
}
.am-input .wpcf7-not-valid-tip {
    color: red;
} */
.contact-container h3 {
    max-width: 900px;
    margin: 0 auto;
    margin-bottom: 30px;
}
.learning-container .current {
    margin-bottom: 30px;
}
/* footer */
.footer {
    background: #fff;
    text-align: center;
    padding: 40px 0;
    border: 1px solid #ddd;
    margin-top: 40px;
}
.footer section {
    margin: 0;
}
/* posts */
.afsarme-posts article {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 4px;
}
.wp-block-code code {
    background: #000;
    color: #fff;
    padding: 15px;
    border-radius: 4px;
}
a#back2home {
    position: fixed;
    top: 50%;
    left: -28px;
    z-index: 999;
    background: #ddd;
    transform: rotate(-90deg) translateY(-50%);
    text-decoration: none;
    padding: 20px;
    text-transform: uppercase;
    font-weight: 600;
    background: rgba(250, 245, 219, 0.7);
}
.afsarme-single-post {
    max-width: 1100px;
    margin: 40px auto 0 auto;
}
.get-in-touch {
    margin-top: 40px;
}
.am-pub-cat-meta {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}
.single-format-standard .am-pub-cat-meta {
    margin-bottom: 10px;
}
form#searchform,
.afsarme-posts {
    max-width: 1100px;
    margin: 0 auto;
}
form#searchform input {
    width: 100%;
    padding: 15px;
    border: 1px solid #313131;
    border-radius: 4px;
    box-sizing: border-box;
}
.afsarme-posts article {
    margin: 15px 0;
}
.am_post_nav .nav-links {
    display: flex;
    justify-content: space-between;
}
.archive-posts {
    margin-top: 30px;
}
.afsarme-single-post .entry-header h1 {
    font-size: 34px;
}
.search-results header.page-header, .search-results article {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
    margin-top: 30px;
}
@media only screen and (max-width: 992px) {
    .hero-right-head ul li {display: block;margin-bottom: 10px;}
    .hero-right-head ul {
        display: block;
    }
    .exp-card {
        flex: 40%;
    }
    .portfolio-item {
        flex: 0 0 20%;
    }
}
@media only screen and (max-width: 768px) {
    .portfolio-item {
        flex: 0 0 30%;
    }
    .exp-card {
        flex: 100%;
    }
    .hero-container {
        display: block;
    }
    .hero-left {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }
    .hero-right {
        width: 100%;
    }
    .am-2col .am-input {
        flex: 100%;
        margin-bottom: 0;
    }
    .am-contact-form {
        padding: 25px;
    }
    .am-pub-cat-meta {
        display: block;
    }
    .am-pub-cat-meta div {
        margin-bottom: 5px;
    }
    .portfolio-container {
        overflow: hidden;
    }
    .portfolio-container:after {
        height: 113%;
        top: -50px;
    }
}
@media only screen and (max-width: 575px) {
    .portfolio-item {
        flex: 0 0 40%;
    }
    .box {
        padding: 30px;
        border-radius: 30px;
    }
    .hero-bottom {
        display: block;
    }
    .hero-bottom-left {
        padding: 0;
        width: 100%;
    }
    .hero-bottom-right {
        width: 100%;
    }
    .hero-container:after, .skills-container:after, .portfolio-container:after, .contact-container:after {
        border-radius: 30px;
    }
}

/* new afsarme cv home page */
.am-headerr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 70vh;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 15px;
}
.am-headerr h1 {
    margin-bottom: 20px;
}
.am-headerr p {
    line-height: 28px;
}
.portfolio-container h3 {
    text-align: center;
}
footer {
    text-align: center;
}
.am-quick-contact {
    width: 100%;
    margin-top: 30px;
}

.am-quick-contact strong {
    margin-bottom: 20px;
    display: block;
    text-transform: capitalize;
}

.am-quick-contact p {
    display: flex;
    align-items: center;
    line-height: 1;
    gap: 10px;
    margin-bottom: 10px;
}

.am-quick-contact p a {
    text-decoration: none;
    line-height: 1;
}

.am-quick-contact p span {
    line-height: 0;
}
@media only screen and (max-width: 768px) {
    .am-headerr {
        height: auto;
    }
}