@media (max-width:1200px){
.counter {margin-right: 70px; }
.fun-fact-sec.up > .counter {margin-left: 70px; }
.my-skill {margin-left: 17px; }
.full-title {font-size: 100px; }
.text-title > p {padding: 0; }
.text-title2 > p {padding: 0; }
.option-isotop.style2 li a {font-size: 27px; line-height: 35px; }
.option-isotop.style2 li a.selected {padding: 0 10px; }
.option-isotop.style2 {padding-left: 30px; }
.box-detail {padding-left: 40px; }
.box-detail::before {left: 40px; }
.boxed-padding {padding: 10px; }
.boxed-padding > header.still.minimal-header {background: #161616 none repeat scroll 0 0; height: 100%; left: -270px; overflow-y: scroll; position: fixed; top: 0; }
.open-fixed-menu {background: #303030 none repeat scroll 0 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; display: block; height: 50px; overflow: hidden; position: fixed; right: 20px; text-align: center; top: 20px; width: 50px; }
.open-fixed-menu > .wrapper-menu::before {display: none; }
.open-fixed-menu > .wrapper-menu {float: none; position: relative; top: -6px; }
.boxed-padding > header.still.minimal-header.slidein {left: 0; }
.grid-portfolio-sec .load-more-btn {margin-bottom: 50px; }
.single-portfolio-detail.color-post {padding: 0 0 0 40px; }

}

@media (max-width:980px){
header {padding: 40px 0 0; }
.my-self {margin-top: 50px; padding: 0; }
.text-block > p {padding: 0; }
.block .container {padding: 0 15px; }
.container {padding: 0 15px; }
.fun-fact-sec {padding: 0; text-align: center; }
.counter {display: inline-block; float: none; margin: 0 20px; text-align: center; width: auto; }
.counter > h3 {width: 100%; }
.fun-fact-sec.up > .counter {float: none; margin: 0 20px; text-align: center; }
.counter > h3 {font-size: 25px; }
.full-title {font-size: 79px; letter-spacing: -3px; line-height: 65px; margin: 0 0 -20px; }
.column {margin-top: 90px; }
.column:first-child {margin-top: 0; }
.skills-sec {text-align: center; }
.skills-sec > .my-skill {display: inline-block; float: none; margin: 0 20px; text-align: left; }
.text-title h2 {font-size: 59px; }
.container{max-width: 100%; }
.container.fluid {padding: 0; }
.full-portfolio-nav {left: 20px; }
.full-portfolio-nav span {font-size: 25px; line-height: 33px; }
.full-portfolio-nav .slick-slide.slick-active.slick-center span {font-size: 35px; }
header {padding: 20px 20px 0; }
.full-portfolio-images li > div a {background-position: center center; }
.text-title {padding-left: 30px; }
.text-title2 {padding-left: 30px; }
.option-isotop.style2 ul > li {display: inline-block; float: none; width: auto; }
.option-isotop.style2 {padding: 0 20px; text-align: center; }
.option-isotop.style2 ul > li a {font-size: 20px; padding: 5px 10px; }
.text-style3 {padding-left: 30px; }
.fancy-portfolio {margin-top: 80px; text-align: center; width: 100%; }
.fancy-portfolio > img {display: inline-block; float: none; }
.fancy-portfolio-title, .fancy-portfolio.flip .fancy-portfolio-title {display: inline-block; float: none; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 20px; padding: 0 30px; position: static; text-align: center; width: 100%; }
.fancy-portfolio-title .item-cat, .fancy-portfolio.flip .fancy-portfolio-title .item-cat {display: inline-block; float: none; }
.blog-post {text-align: center; }
.blog-post > a {display: inline-block; float: none; }
.vertical-portfolio > h3 {font-size: 33px; letter-spacing: -2px; line-height: 41px; opacity: 1; }
.heading-mini {margin-bottom: 50px; }
.hover-box-white h3 {font-size: 25px; }
.single-portfolio-detail {margin-top: 40px; padding: 0; }
.portfolio-detail {margin-top: 40px; }
.contact-form form button {right: 15px; }
.contact-us {padding-left: 0; padding-top: 0; }
.my-contact-boxes {margin-bottom: 0; }

/* Blog Sidebar - Tablet */
.blog-sidebar {
    position: relative;
    top: 0;
    margin-top: 40px;
}

}

@media (max-width:767px){
.skills-sec > .my-skill {margin: 0 10px; }
.container{max-width: 100%; }
.text-title h2 {font-size: 49px; }
.text-block > i {font-size: 268px; }
.single-post-detail blockquote {padding: 50px; }
.single-main-infos {padding: 50px 0 36px; }
.single-main-infos > .posted-by {float: left; position: static; }
.countdown-sec > ul > li > span {font-size: 40px; }
.countdown-sec li p {font-size: 13px; }
.countdown-sec > ul > li {margin: 0; }
.page-not-found > h3 {font-size: 168px; font-weight: 400; }
.text-title > span {font-size: 20px; }
.text-title h2 {font-size: 42px; }
.text-title > p {font-size: 16px; line-height: 29px; }
.text-style3 h1 {font-size: 61px; letter-spacing: -2px; line-height: 61px; }
.text-rotator > span {font-size: 23px; }
.text-rotator div span, .text-rotator div {font-size: 23px; }
.box-portoflio.with-img img {width: 100%; }
.text-title.center p {padding: 0; }
.text-style4 > p {padding: 0; }
.text-style4 h1 {font-size: 44px; }
.h-title {float: left; margin-top: 30px; padding: 0; position: static; width: 100%; }
.h-title > h3 {font-size: 24px; }
.h-portfolio::before {background-position: left top; background-repeat: no-repeat; background-size: auto auto; }
.h-portfolio.down {margin-top: 0; }

}

@media (max-width:520px){
.text-title h2 {font-size: 41px; }
.text-block > h3 {font-size: 20px; font-weight: 500; }
.text-block > span {font-size: 12px; line-height: 25px; margin-bottom: 10px; }
.full-title {font-size: 42px; }
.footer-social > li {margin: 0; }
.footer-social a {font-size: 13px; padding: 6px 23px; }
.block {padding: 150px 0; }
.block.less-bottom {padding-bottom: 80px; }
.block.less-top {padding-top: 80px; }
.bottom-line {line-height: 30px; }
.single-title-metas > h2 {font-size: 24px; font-weight: 500; line-height: 34px; margin: -17px 0 20px; }
.countdown > li > span {font-size: 25px; }
.countdown > li > p {font-size: 14px; margin: 0; }
.countdown > li {padding: 0 8px; }
.app-soon-sec h1 {font-size: 30px; margin: 15px 0 0; width: 100%; }
.countdown {margin: 30px 0 0; }
.countdown-sec > ul > li > span {font-size: 17px; line-height: 3px; margin-top: 64px; }
.countdown-sec li p {font-size: 9px; }
.countdown-sec > ul > li {padding-left: 7px !important; width: 64px; }
.countdown-sec > ul > li::before {width: 2px; }
.countdown-sec > ul > li::after {width: 2px; }
.coming-sson-sec .text-title h2 {font-size: 60px; line-height: 60px; }
.page-not-found > h3 {font-size: 128px; }
.portfolio-nav > li {padding: 0; text-align: center; width: 100%; }
.skills-sec {margin-bottom: -50px; }
.skills-sec > .my-skill {margin: 0 10px 50px; }
.fancy-portfolio-title > h3 {font-size: 27px; letter-spacing: -1px; line-height: 29px; margin: 8px 0 0; }
.vertical-portfolio {width: 300px; }
.h-portfolio-sec {padding-left: 110px; }
.side-bar {width: 50px; }
.side-bar .logo a i {left: 0; position: relative; top: 12px; }
.bottom-text {-webkit-transform: rotate(-90deg) translateX(180px) translateY(-120px); -moz-transform: rotate(-90deg) translateX(180px) translateY(-120px); -ms-transform: rotate(-90deg) translateX(180px) translateY(-120px); -o-transform: rotate(-90deg) translateX(180px) translateY(-120px); transform: rotate(-90deg) translateX(180px) translateY(-120px); }
header.minimal-header.active .minimal-menu {left: 50px; }
.minimal-menu {padding: 0 0 0 40px; width: 270px !important; }
footer.footer-top {padding-left: 70px; padding-top: 40px; }
.footer-top .footer-social a {padding-bottom: 0; padding-left: 0; padding-right: 4px; }
footer.style2.footer-top .footer-social {text-align: left; }
.h-portfolio-sec {padding-left: 70px; }
.grid-portfolio-sec {padding: 0; }
.portfolio-detail > ul > li span {font-size: 13px; width: 160px; }
.single-portfolio-detail.color-post {padding: 0; }
.logo {height: 55px; }
.logo > a {font-size: 22px; padding: 8px 0; }
header #open-full-screen.wrapper-menu {margin-top: 9px; }
.full-screen-menu > ul > li > a {font-size: 30px; }
.full-screen-menu > ul > li.menu-item-has-children > a::before {font-size: 23px; top: 7px; }
.full-screen-menu > ul > li.menu-item-has-children > a::after {font-size: 23px; top: 7px; }
.full-screen-menu > ul > li.menu-item-has-children > a {padding: 0 32px; }
.contact-title > p {padding: 0; }

/* Mobile parallax position */
.parallax-home {
    background-image: url('../images/resource/parallax3.jpg');
    background-position: left center !important;
}

/* Mobile certifications */
.certifications-grid {
    gap: 15px;
}
.cert-badge {
    width: 160px;
    padding: 20px 15px;
}
.cert-badge .cert-img {
    width: 70px;
    height: 70px;
}
.cert-badge h5 {
    font-size: 12px;
}
.cert-badge .cert-expiry {
    font-size: 10px;
}
.fun-fact {
    padding: 25px 20px;
}
.fun-fact-icon {
    width: 40px;
    height: 40px;
    top: 15px;
    right: 15px;
}
.fun-fact-icon svg {
    width: 24px;
    height: 24px;
}
.fun-fact-content h2 {
    font-size: 36px;
}
.fun-fact-content span {
    font-size: 11px;
    letter-spacing: 1px;
}

/* Blog Cards Responsive */
.blog-card-thumb img {
    height: 180px;
}
.blog-card-info {
    padding: 20px;
}
.blog-card-info h3 {
    font-size: 16px;
}
.blog-card-info p {
    font-size: 13px;
}

/* Blog Sidebar Responsive */
.blog-sidebar {
    position: relative;
    top: 0;
    margin-top: 50px;
}
.blog-pagination {
    flex-wrap: wrap;
    gap: 15px;
}
.pagination-btn {
    padding: 10px 20px;
    font-size: 13px;
}
.popular-post-item {
    gap: 12px;
}
.post-thumb img {
    width: 60px;
    height: 60px;
}
.pagination-numbers a {
    width: 35px;
    height: 35px;
    font-size: 13px;
}

/* Blog Detail Responsive */
.reading-progress-title {
    font-size: 12px;
    max-width: 70%;
}
.blog-post-title h1 {
    font-size: 28px;
}
.blog-post-content .lead-paragraph {
    font-size: 16px;
}
.blog-post-content h2 {
    font-size: 24px;
}
.blog-post-content h3 {
    font-size: 20px;
}
.blog-quote p {
    font-size: 16px;
}
.author-bio-box {
    flex-direction: column;
    text-align: center;
    padding: 25px;
}
.author-social {
    justify-content: center;
}
.share-buttons {
    justify-content: center;
}
.blog-detail-sidebar {
    position: relative;
    top: 0;
    margin-top: 50px;
}
.code-block code {
    font-size: 12px;
}

/* Experience Page Responsive */
.experience-stats {
    gap: 20px;
}

.stat-item {
    padding: 20px 30px;
    min-width: 150px;
}

.stat-number {
    font-size: 36px;
}

/* Timeline adjustments for mobile */
.experience-timeline::before {
    left: 30px;
    transform: none;
}

.timeline-item-wrapper {
    flex-direction: column !important;
    padding-left: 60px;
    margin-bottom: 50px;
}

.timeline-content {
    width: 100%;
}

.timeline-content::before {
    left: -30px !important;
    right: auto !important;
}

.timeline-dot {
    left: 30px !important;
    transform: translateY(-50%);
}

.experience-header {
    flex-direction: column;
    gap: 15px;
}

.experience-title-group {
    width: 100%;
}

.experience-meta {
    text-align: left;
    width: 100%;
}

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

.experience-period,
.experience-location {
    white-space: normal;
}

.experience-section-header h2 {
    font-size: 32px;
}

.experience-section-header p {
    font-size: 16px;
}

.experience-card {
    padding: 25px;
}

.experience-title-group h3 {
    font-size: 20px;
}

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

/* Modal responsive */
.experience-modal-content {
    margin: 20px;
    max-height: calc(100vh - 40px);
}

.experience-modal-body {
    padding: 30px 20px;
}

.experience-modal-header h3 {
    font-size: 22px;
    padding-right: 30px;
}

.experience-modal-header h4 {
    font-size: 18px;
}

.modal-meta {
    flex-direction: column;
    gap: 10px;
}

/* Project Detail Responsive */
.single-portfolio-detail.color-post {
    padding: 0;
    margin-top: 30px;
}

.single-portfolio-detail.color-post > h3 {
    font-size: 28px;
}

.project-hero-banner {
    height: 250px;
}

.project-hero-overlay {
    padding: 25px;
}

.project-hero-overlay h3 {
    font-size: 22px;
}

.portfolio-detail.color-post,
.tech-stack-box {
    margin-top: 30px;
}

.project-info-section h4 {
    font-size: 18px;
}

.wide-detail .single-portfolio-detail {
    padding: 0;
}

/* Navigation Post Mobile */
.navigation-post {
    margin-bottom: 20px;
}
.navigation-post > a {
    padding: 20px 30px 20px 60px;
}
.navigation-post.next > a {
    padding-left: 30px;
    padding-right: 60px;
}
.navigation-post i {
    left: 20px;
    top: 22px;
}
.navigation-post.next > a i {
    right: 20px;
}
.navigation-post h5 {
    font-size: 14px;
}
.navigation-post span {
    font-size: 12px;
}
.nav-center {
    padding: 15px 0;
    margin-bottom: 20px;
}

/* Related Work Mobile */
.related-carousel .col-lg-3 {
    margin-bottom: 20px;
}
.grid-title > h3 {
    font-size: 16px;
}
.portfolio-gallery > a img {
    width: 70px;
    height: 70px;
}

/* Poptrox Lightbox Mobile */
.poptrox-popup {
    max-width: 90vw !important;
    margin: 0 auto;
}

.poptrox-popup .nav-previous,
.poptrox-popup .nav-next {
    width: 28px;
    height: 28px;
}

.poptrox-popup .nav-previous {
    left: 10px;
}

.poptrox-popup .nav-next {
    right: 10px;
}

.poptrox-popup .nav-previous::before,
.poptrox-popup .nav-next::before {
    width: 6px;
    height: 6px;
}

.poptrox-popup .closer {
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
}

.poptrox-popup .closer::before,
.poptrox-popup .closer::after {
    width: 12px;
}

.poptrox-popup .caption {
    font-size: 12px;
    padding: 10px 8px 5px;
}

}

/* Professional Contact Popup - Responsive */
@media (max-width: 991px) {
    .contact-info-panel {
        padding: 60px 20px 30px;
    }

    .contact-form-panel {
        padding: 30px 20px 60px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .contact-info-header h3,
    .contact-form-header h3 {
        font-size: 26px;
    }
}

@media (max-width: 767px) {
    .contact-info-panel {
        padding: 50px 15px 20px;
    }

    .contact-form-panel {
        padding: 20px 15px 50px;
    }

    .contact-info-header h3,
    .contact-form-header h3 {
        font-size: 22px;
    }

    .contact-info-item {
        padding: 15px;
        margin-bottom: 20px;
    }

    .contact-info-icon {
        width: 45px;
        height: 45px;
        margin-right: 15px;
    }

    .contact-info-icon i {
        font-size: 16px;
    }

    .contact-info-value {
        font-size: 14px;
    }

    .contact-social-icons .contact-social-icon {
        width: 45px;
        height: 45px;
    }

    .contact-social-panel h4 {
        font-size: 14px;
    }

    /* Close button for contact popup on mobile */
    .close-contact-popup {
        right: 15px;
        top: 15px;
        z-index: 10;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .close-contact-popup .line-menu {
        width: 20px;
    }

}