/* =====================================================
   Mr.aiwithmahdi
   PROFESSIONAL MOBILE RESPONSIVE SYSTEM
   PART 1 : CORE MOBILE FOUNDATION
===================================================== */


/* ---------- GLOBAL MOBILE RESET ---------- */

@media screen and (max-width: 768px){


    *,
    *::before,
    *::after{
    
    box-sizing:border-box;
    
    }
    
    
    
    html{
    
    overflow-x:hidden;
    
    scroll-behavior:smooth;
    
    }
    
    
    
    body{
    
    width:100%;
    
    max-width:100%;
    
    overflow-x:hidden;
    
    font-size:15px;
    
    }
    
    
    
    img{
    
    max-width:100%;
    
    height:auto;
    
    display:block;
    
    }
    
    
    
    a{
    
    max-width:100%;
    
    }
    
    
    
    button,
    input,
    textarea,
    select{
    
    font-family:inherit;
    
    }
    
    
    
    section{
    
    width:100%;
    
    overflow:hidden;
    
    }
    
    
    
    /* ---------- CONTAINER CONTROL ---------- */
    
    
    .navbar,
    .hero,
    .about,
    .experience,
    .identity,
    .services,
    .projects,
    .request,
    .contact,
    .creative-contact,
    .faq-section,
    .web-special{
    
    padding-left:20px !important;
    
    padding-right:20px !important;
    
    }
    
    
    
    
    
    /* ---------- TYPOGRAPHY ---------- */
    
    
    h1{
    
    font-size:34px !important;
    
    line-height:1.7 !important;
    
    }
    
    
    
    h2{
    
    font-size:28px !important;
    
    line-height:1.7 !important;
    
    }
    
    
    
    h3{
    
    line-height:1.6;
    
    }
    
    
    
    p{
    
    font-size:15px;
    
    line-height:2;
    
    }
    
    
    
    /* ---------- SECTION TITLE ---------- */
    
    
    .section-heading{
    
    width:100%;
    
    text-align:center;
    
    }
    
    
    
    .section-heading span{
    
    font-size:11px;
    
    letter-spacing:2px;
    
    }
    
    
    
    .section-heading h2{
    
    margin-top:15px;
    
    }
    
    
    
    .section-heading p{
    
    padding:0 5px;
    
    }
    
    
    
    
    /* ---------- REMOVE DESKTOP EFFECT PROBLEMS ---------- */
    
    
    .ambient-light{
    
    opacity:.4;
    
    filter:blur(50px);
    
    }
    
    
    
    .backdrop-filter{
    
    backdrop-filter:none;
    
    }
    
    
    
    
    
    }
     
/* =====================================================
   PART 2 : MOBILE HEADER + HERO SYSTEM
===================================================== */


@media screen and (max-width:768px){



    /* ================= NAVBAR ================= */
    
    
    .navbar{
    
    height:auto !important;
    
    min-height:75px;
    
    padding-top:15px !important;
    
    padding-bottom:15px !important;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    position:relative;
    
    z-index:1000;
    
    }
    
    
    
    .logo{
    
    font-size:22px !important;
    
    font-weight:800;
    
    letter-spacing:-.5px;
    
    text-align:center;
    
    }
    
    
    
    .logo span{
    
    font-size:24px;
    
    }
    
    
    
    /* مخفی کردن منوی دسکتاپ */
    
    .navbar nav{
    
    display:none !important;
    
    }
    
    
    
    
    
    /* ================= OWNER MENU ================= */
    
    
    /* سه خط مدیریت */
    
    .owner-menu-btn{
    
    position:fixed !important;
    
    top:18px !important;
    
    right:18px !important;
    
    width:48px !important;
    
    height:48px !important;
    
    border-radius:16px !important;
    
    font-size:23px !important;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    z-index:99999;
    
    }
    
    
    
    
    
    .owner-panel{
    
    top:75px !important;
    
    right:15px !important;
    
    width:calc(100% - 30px) !important;
    
    border-radius:25px !important;
    
    }
    
    
    
    
    
    /* ================= HERO ================= */
    
    
    .hero{
    
    padding-top:60px !important;
    
    padding-bottom:50px !important;
    
    }
    
    
    
    .hero-content{
    
    width:100% !important;
    
    text-align:center;
    
    }
    
    
    
    .brand-title{
    
    font-size:32px !important;
    
    font-weight:900;
    
    line-height:1.2;
    
    margin-bottom:20px;
    
    }
    
    
    
    .badge{
    
    display:inline-flex;
    
    padding:8px 18px !important;
    
    font-size:10px !important;
    
    border-radius:30px;
    
    margin-bottom:20px;
    
    }
    
    
    
    
    .hero h1{
    
    font-size:33px !important;
    
    font-weight:900;
    
    line-height:1.8 !important;
    
    margin:15px 0;
    
    }
    
    
    
    .hero h1 span{
    
    display:inline-block;
    
    }
    
    
    
    
    
    .hero p{
    
    font-size:15px !important;
    
    line-height:2.1;
    
    margin-top:20px;
    
    }
    
    
    
    
    /* ================= HERO BUTTONS ================= */
    
    
    .hero-actions{
    
    display:flex !important;
    
    flex-direction:column !important;
    
    width:100%;
    
    gap:14px;
    
    margin-top:30px;
    
    }
    
    
    
    .hero-actions .btn{
    
    width:100% !important;
    
    height:55px;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:15px;
    
    border-radius:18px;
    
    }
    
    
    
    
    
    /* ================= BRAND CARD ================= */
    
    
    .brand-card{
    
    width:100% !important;
    
    margin-top:45px;
    
    padding:25px 18px !important;
    
    border-radius:30px !important;
    
    }
    
    
    
    .card-header{
    
    font-size:13px !important;
    
    letter-spacing:1px;
    
    }
    
    
    
    .brand-card h2{
    
    font-size:23px !important;
    
    margin:15px 0;
    
    }
    
    
    
    .brand-card p{
    
    font-size:13px;
    
    }
    
    
    
    
    
    .stats{
    
    display:grid !important;
    
    grid-template-columns:repeat(3,1fr);
    
    gap:8px !important;
    
    margin-top:25px;
    
    }
    
    
    
    .stats div{
    
    text-align:center;
    
    }
    
    
    
    .stats strong{
    
    font-size:25px !important;
    
    }
    
    
    
    .stats span{
    
    font-size:11px !important;
    
    display:block;
    
    }
    
    
    
    
    
    .online-status{
    
    font-size:12px !important;
    
    margin-top:25px;
    
    padding:12px;
    
    border-radius:20px;
    
    }
    
    
    
    
    
    /* ================= HERO IMAGE FIX ================= */
    
    
    .hero img{
    
    max-width:100%;
    
    height:auto;
    
    }
    
    
    
    
    }
    /* =====================================================
   PART 3 : MOBILE CONTENT SYSTEM
   SERVICES + PROJECTS + FORMS
===================================================== */


@media screen and (max-width:768px){



    /* ================= EXPERIENCE CENTER ================= */
    
    
    .experience-grid{
    
    display:grid !important;
    
    grid-template-columns:1fr !important;
    
    gap:20px !important;
    
    }
    
    
    
    .experience-card{
    
    width:100% !important;
    
    padding:25px 20px !important;
    
    border-radius:25px !important;
    
    text-align:center;
    
    }
    
    
    
    .experience-number{
    
    font-size:30px !important;
    
    margin-bottom:15px;
    
    }
    
    
    
    .experience-card h3{
    
    font-size:18px !important;
    
    }
    
    
    
    
    
    /* ================= IDENTITY SECTION ================= */
    
    
    .identity-wrapper{
    
    display:flex !important;
    
    flex-direction:column !important;
    
    gap:30px !important;
    
    }
    
    
    
    .identity-image{
    
    width:100% !important;
    
    }
    
    
    
    .image-frame{
    
    width:100% !important;
    
    min-height:250px;
    
    border-radius:30px !important;
    
    }
    
    
    
    .identity-content{
    
    text-align:center;
    
    }
    
    
    
    .identity-content h3{
    
    font-size:25px !important;
    
    }
    
    
    
    
    
    .identity-stats{
    
    display:grid !important;
    
    grid-template-columns:repeat(3,1fr);
    
    gap:10px !important;
    
    }
    
    
    
    .identity-stats strong{
    
    font-size:25px !important;
    
    }
    
    
    
    .identity-stats span{
    
    font-size:11px !important;
    
    }
    
    
    
    
    
    /* ================= SERVICES ================= */
    
    
    .services-grid{
    
    display:grid !important;
    
    grid-template-columns:1fr !important;
    
    gap:18px !important;
    
    }
    
    
    
    .service-card{
    
    padding:25px 20px !important;
    
    border-radius:25px !important;
    
    text-align:center;
    
    }
    
    
    
    .service-icon{
    
    font-size:25px;
    
    margin-bottom:15px;
    
    }
    
    
    
    .service-card h3{
    
    font-size:20px !important;
    
    }
    
    
    
    
    
    /* ================= PROJECTS ================= */
    
    
    .projects-grid{
    
    display:grid !important;
    
    grid-template-columns:1fr !important;
    
    gap:25px !important;
    
    }
    
    
    
    
    
    .project-card{
    
    width:100% !important;
    
    border-radius:28px !important;
    
    overflow:hidden;
    
    }
    
    
    
    .project-image{
    
    width:100%;
    
    }
    
    
    
    .project-image img{
    
    width:100% !important;
    
    height:auto !important;
    
    object-fit:contain !important;
    
    }
    
    
    
    
    
    .project-info{
    
    padding:22px !important;
    
    text-align:center;
    
    }
    
    
    
    .project-info h3{
    
    font-size:21px !important;
    
    }
    
    
    
    
    
    .project-info p{
    
    font-size:14px !important;
    
    }
    
    
    
    
    
    /* ================= REQUEST FORM ================= */
    
    
    .request-box{
    
    width:100% !important;
    
    padding:25px 18px !important;
    
    border-radius:30px !important;
    
    }
    
    
    
    .project-form{
    
    width:100%;
    
    }
    
    
    
    .input-group{
    
    width:100% !important;
    
    }
    
    
    
    .input-group input,
    .input-group textarea,
    .input-group select{
    
    
    width:100% !important;
    
    font-size:14px;
    
    padding:15px !important;
    
    border-radius:15px !important;
    
    }
    
    
    
    
    
    textarea{
    
    min-height:130px;
    
    }
    
    
    
    
    .submit-btn{
    
    width:100% !important;
    
    height:55px;
    
    border-radius:20px !important;
    
    }
    
    
    
    
    
    /* ================= CONTACT ================= */
    
    
    .contact-buttons{
    
    display:flex !important;
    
    flex-direction:column !important;
    
    gap:15px;
    
    }
    
    
    
    .contact-buttons .btn{
    
    width:100% !important;
    
    text-align:center;
    
    }
    
    
    
    
    .contact-cards{
    
    display:grid !important;
    
    grid-template-columns:1fr !important;
    
    gap:20px !important;
    
    }
    
    
    
    .contact-card{
    
    width:100% !important;
    
    padding:25px 20px !important;
    
    border-radius:28px !important;
    
    text-align:center;
    
    }
    
    
    
    .contact-card a{
    
    display:block;
    
    margin-top:20px;
    
    padding:14px;
    
    border-radius:15px;
    
    }
    
    
    
    
    
    /* ================= WEB SPECIAL ================= */
    
    
    .web-special-box{
    
    display:flex !important;
    
    flex-direction:column !important;
    
    padding:30px 20px !important;
    
    text-align:center;
    
    }
    
    
    
    .web-icon{
    
    font-size:55px !important;
    
    }
    
    
    
    .web-content h2{
    
    font-size:27px !important;
    
    }
    
    
    
    .web-btn{
    
    width:100%;
    
    text-align:center;
    
    }
    
    
    
    
    }
    /* =====================================================
   PART 4 : FINAL MOBILE POLISH SYSTEM
   FAQ + FOOTER + AI + FINAL FIXES
===================================================== */


@media screen and (max-width:768px){



    /* ================= FAQ ================= */
    
    
    .faq-container{
    
    width:100% !important;
    
    display:block !important;
    
    }
    
    
    
    .faq-item{
    
    width:100% !important;
    
    margin-bottom:15px;
    
    border-radius:20px !important;
    
    overflow:hidden;
    
    }
    
    
    
    .faq-question{
    
    width:100% !important;
    
    padding:18px 15px !important;
    
    font-size:14px !important;
    
    display:flex;
    
    align-items:center;
    
    justify-content:space-between;
    
    text-align:right;
    
    }
    
    
    
    .faq-answer{
    
    padding:0 18px;
    
    }
    
    
    
    .faq-answer p{
    
    font-size:14px !important;
    
    line-height:2;
    
    }
    
    
    
    .show-more-faq{
    
    width:100% !important;
    
    height:50px;
    
    border-radius:18px;
    
    margin-top:20px;
    
    font-size:15px;
    
    }
    
    
    
    
    
    /* ================= FLOATING CONTACT ================= */
    
    
    .floating-contact{
    
    right:15px !important;
    
    bottom:20px !important;
    
    }
    
    
    
    .floating-btn{
    
    width:55px !important;
    
    height:55px !important;
    
    border-radius:50% !important;
    
    font-size:24px !important;
    
    }
    
    
    
    .floating-panel{
    
    width:calc(100vw - 40px) !important;
    
    right:0 !important;
    
    bottom:75px !important;
    
    border-radius:25px !important;
    
    }
    
    
    
    .floating-panel a{
    
    padding:15px !important;
    
    font-size:14px;
    
    }
    
    
    
    
    
    /* ================= AI ASSISTANT ================= */
    
    
    .ai-assistant{
    
    right:15px !important;
    
    left:15px !important;
    
    bottom:15px;
    
    }
    
    
    
    .ai-chat{
    
    width:100% !important;
    
    max-width:none !important;
    
    border-radius:25px !important;
    
    }
    
    
    
    .ai-header{
    
    padding:15px !important;
    
    }
    
    
    
    .ai-messages{
    
    max-height:260px !important;
    
    overflow-y:auto;
    
    }
    
    
    
    .ai-options{
    
    display:grid !important;
    
    grid-template-columns:1fr 1fr;
    
    gap:10px;
    
    }
    
    
    
    .ai-options button{
    
    font-size:12px !important;
    
    padding:12px 8px !important;
    
    }
    
    
    
    
    
    .ai-input-box{
    
    width:100% !important;
    
    }
    
    
    
    .ai-input-box input{
    
    font-size:13px;
    
    }
    
    
    
    
    /* ================= FOOTER ================= */
    
    
    footer{
    
    padding:45px 20px !important;
    
    text-align:center;
    
    }
    
    
    
    .footer-logo{
    
    font-size:28px !important;
    
    }
    
    
    
    .footer-copy{
    
    font-size:12px;
    
    margin-top:25px;
    
    }
    
    
    
    
    
    /* ================= CONTACT FINAL ================= */
    
    
    .contact-final{
    
    text-align:center;
    
    padding:25px 15px;
    
    }
    
    
    
    .contact-final h3{
    
    font-size:22px !important;
    
    }
    
    
    
    .contact-final p{
    
    font-size:14px;
    
    }
    
    
    
    
    /* ================= MOBILE SPACING ================= */
    
    
    .timeline{
    
    display:block !important;
    
    }
    
    
    
    .timeline-item{
    
    margin-bottom:25px;
    
    padding:20px !important;
    
    border-radius:20px;
    
    }
    
    
    
    
    /* ================= BUTTON GLOBAL FIX ================= */
    
    
    .btn{
    
    max-width:100%;
    
    overflow:hidden;
    
    white-space:nowrap;
    
    }
    
    
    
    button{
    
    max-width:100%;
    
    }
    
    
    
    /* ================= SMALL PHONES ================= */
    
    
    @media(max-width:390px){
    
    
    .logo{
    
    font-size:19px !important;
    
    }
    
    
    
    .hero h1{
    
    font-size:28px !important;
    
    }
    
    
    
    .brand-title{
    
    font-size:26px !important;
    
    }
    
    
    
    .stats strong{
    
    font-size:22px !important;
    
    }
    
    
    
    }
    
    
    
    }
    /* =====================================================
   HEADER FINAL MOBILE FIX
   Mr.aiwithmahdi
===================================================== */


@media screen and (max-width:768px){


    /* ================= MAIN HEADER ================= */
    
    
    .navbar{
    
    position:relative !important;
    
    width:100% !important;
    
    height:75px !important;
    
    padding:0 20px !important;
    
    display:flex !important;
    
    align-items:center !important;
    
    justify-content:center !important;
    
    z-index:1000;
    
    }
    
    
    
    /* لوگوی اصلی */
    
    .logo{
    
    position:relative !important;
    
    right:auto !important;
    
    left:auto !important;
    
    margin:auto !important;
    
    font-size:21px !important;
    
    line-height:1 !important;
    
    transform:none !important;
    
    }
    
    
    
    /* جلوگیری از چسبیدن AI */
    
    .logo span{
    
    display:inline !important;
    
    }
    
    
    
    
    
    /* ================= THREE LINE BUTTON ================= */
    
    
    /* دکمه ☰ */
    
    .owner-menu-btn{
    
    position:fixed !important;
    
    top:16px !important;
    
    right:16px !important;
    
    width:44px !important;
    
    height:44px !important;
    
    padding:0 !important;
    
    border-radius:14px !important;
    
    font-size:0 !important;
    
    background:rgba(15,23,42,.9) !important;
    
    display:flex !important;
    
    flex-direction:column;
    
    align-items:center;
    
    justify-content:center;
    
    gap:5px;
    
    }
    
    
    
    
    
    /* ساخت سه خط واقعی */
    
    .owner-menu-btn::before,
    .owner-menu-btn::after{
    
    
    content:"";
    
    width:20px;
    
    height:2px;
    
    background:white;
    
    border-radius:10px;
    
    display:block;
    
    }
    
    
    
    .owner-menu-btn{
    
    
    }
    
    
    
    .owner-menu-btn{
    
    line-height:0;
    
    }
    
    
    
    
    
    /* خط وسط */
    
    .owner-menu-btn span{
    
    display:block;
    
    width:20px;
    
    height:2px;
    
    background:white;
    
    }
    
    
    
    
    
    /* ================= OWNER PANEL ================= */
    
    
    .owner-panel{
    
    top:70px !important;
    
    right:15px !important;
    
    width:calc(100% - 30px) !important;
    
    max-width:350px;
    
    }
    
    
    
    /* ================= HERO فاصله از هدر ================= */
    
    
    .hero{
    
    padding-top:35px !important;
    
    }
    
    
    
    
    /* ================= حذف حالت روی هم افتادن ================= */
    
    
    .brand-title{
    
    margin-top:10px !important;
    
    }
    
    
    
    
    }
    
    
    /* ================= VERY SMALL PHONES ================= */
    
    
    @media(max-width:390px){
    
    
    .navbar{
    
    height:65px !important;
    
    }
    
    
    
    .logo{
    
    font-size:18px !important;
    
    }
    
    
    
    .owner-menu-btn{
    
    width:40px !important;
    
    height:40px !important;
    
    }
    
    
    
    }
    /* =====================================================
   PART 6 : FLOATING BUTTONS MOBILE SYSTEM
   QUICK CONTACT + AI ASSISTANT
===================================================== */


@media screen and (max-width:768px){



    /* ================= QUICK CONTACT ================= */
    
    
    .floating-contact{
    
    position:fixed !important;
    
    right:18px !important;
    
    left:auto !important;
    
    bottom:20px !important;
    
    z-index:9998 !important;
    
    }
    
    
    
    .floating-btn{
    
    width:58px !important;
    
    height:58px !important;
    
    display:flex !important;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:24px !important;
    
    border-radius:50% !important;
    
    }
    
    
    
    
    
    .floating-panel{
    
    
    position:fixed !important;
    
    right:15px !important;
    
    bottom:90px !important;
    
    width:calc(100vw - 30px) !important;
    
    max-width:340px !important;
    
    border-radius:25px !important;
    
    z-index:9999 !important;
    
    }
    
    
    
    
    
    /* ================= AI BUTTON ================= */
    
    
    .ai-assistant{
    
    
    position:fixed !important;
    
    left:18px !important;
    
    right:auto !important;
    
    bottom:20px !important;
    
    z-index:9997 !important;
    
    }
    
    
    
    /* دکمه باز کردن AI */
    
    .ai-button{
    
    
    width:58px !important;
    
    height:58px !important;
    
    border-radius:50% !important;
    
    font-size:25px !important;
    
    display:flex !important;
    
    align-items:center;
    
    justify-content:center;
    
    }
    
    
    
    
    
    /* ================= AI CHAT BOX ================= */
    
    
    .ai-chat{
    
    
    position:fixed !important;
    
    left:15px !important;
    
    right:15px !important;
    
    bottom:95px !important;
    
    width:auto !important;
    
    max-width:none !important;
    
    height:auto !important;
    
    max-height:70vh !important;
    
    border-radius:28px !important;
    
    overflow:hidden !important;
    
    }
    
    
    
    
    
    .ai-header{
    
    
    padding:15px !important;
    
    }
    
    
    
    .ai-header strong{
    
    
    font-size:16px !important;
    
    }
    
    
    
    .ai-header span{
    
    
    font-size:11px !important;
    
    }
    
    
    
    
    .ai-messages{
    
    
    max-height:35vh !important;
    
    padding:15px !important;
    
    overflow-y:auto !important;
    
    }
    
    
    
    
    .ai-message{
    
    
    font-size:14px !important;
    
    line-height:1.9 !important;
    
    }
    
    
    
    
    
    .ai-options{
    
    
    padding:12px !important;
    
    display:grid !important;
    
    grid-template-columns:1fr 1fr !important;
    
    gap:8px !important;
    
    }
    
    
    
    .ai-options button{
    
    
    font-size:12px !important;
    
    padding:12px 5px !important;
    
    border-radius:15px !important;
    
    }
    
    
    
    
    
    .ai-input-box{
    
    
    position:relative !important;
    
    padding:10px !important;
    
    }
    
    
    
    
    
    .ai-input-box input{
    
    
    height:45px !important;
    
    font-size:13px !important;
    
    }
    
    
    
    
    
    .ai-input-box button{
    
    
    height:45px !important;
    
    padding:0 18px !important;
    
    }
    
    
    
    
    
    /* جلوگیری از برخورد با فوتر */
    
    footer{
    
    
    padding-bottom:100px !important;
    
    }
    
    
    
    
    }
    
    
    
    
    /* گوشی های کوچک */
    
    @media(max-width:390px){
    
    
    
    .floating-contact{
    
    right:12px !important;
    
    bottom:15px !important;
    
    }
    
    
    
    .ai-assistant{
    
    left:12px !important;
    
    bottom:15px !important;
    
    }
    
    
    
    .ai-chat{
    
    
    left:10px !important;
    
    right:10px !important;
    
    bottom:85px !important;
    
    }
    
    
    
    .ai-options button{
    
    
    font-size:11px !important;
    
    }
    
    
    
    }
    /* ==========================================
   MR.AIWITHMAHDI - HEADER FINAL OPTIMIZATION
   ========================================== */


.navbar{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:18px 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    z-index:999;
}


/* لوگو */

.logo{
    white-space:nowrap;
    font-size:26px;
    font-weight:900;
    letter-spacing:-1px;
}



/* منوی دسکتاپ */

.navbar nav{
    display:flex;
    align-items:center;
    gap:25px;
}


.navbar nav a{
    font-size:15px;
    white-space:nowrap;
}



/* جلوگیری از بیرون زدن دکمه سفارش */

.navbar nav .btn,
.navbar nav a.primary{
    padding:10px 18px;
    border-radius:25px;
    font-size:14px;
}



/* ================= MOBILE ================= */

@media(max-width:768px){


.navbar{

padding:15px 18px;

height:70px;

}


/* لوگو کوچکتر و مرتب */

.logo{

font-size:20px;

}



/* جلوگیری از خراب شدن منو */

.navbar nav{

position:absolute;

top:70px;

right:15px;

left:15px;

padding:20px;

border-radius:25px;

flex-direction:column;

gap:15px;

background:
rgba(2,6,23,.95);

backdrop-filter:blur(20px);

display:none;

}


/* وقتی منو فعال شد */

.navbar nav.active{

display:flex;

}



.navbar nav a{

width:100%;

text-align:center;

padding:12px;

}



/* دکمه سفارش */

.navbar nav .btn{

width:100%;

text-align:center;

}



/* جلوگیری از سه خط کنار لوگو */

.owner-menu-btn{

top:12px;

right:15px;

width:45px;

height:45px;

font-size:22px;

border-radius:15px;

}



}


/* موبایل خیلی کوچک */

@media(max-width:420px){


.logo{

font-size:18px;

}


.navbar{

padding-left:12px;
padding-right:12px;

}

}
/* ==========================================
   MR.AIWITHMAHDI - HERO FINAL RESPONSIVE
   ========================================== */


   .hero{

    overflow:hidden;
    position:relative;
    
    }
    
    
    
    /* محتوای اصلی */
    
    .hero-content{
    
    max-width:700px;
    
    }
    
    
    
    /* عنوان برند داخل هیرو */
    
    .brand-title{
    
    font-size:38px;
    
    font-weight:900;
    
    letter-spacing:-1px;
    
    }
    
    
    
    /* Badge */
    
    .badge{
    
    display:inline-flex;
    
    align-items:center;
    
    justify-content:center;
    
    padding:8px 18px;
    
    border-radius:30px;
    
    font-size:12px;
    
    letter-spacing:1px;
    
    margin-bottom:20px;
    
    }
    
    
    
    /* تیتر اصلی */
    
    .hero h1{
    
    font-size:58px;
    
    line-height:1.35;
    
    font-weight:900;
    
    letter-spacing:-2px;
    
    }
    
    
    
    .hero h1 span{
    
    display:inline-block;
    
    }
    
    
    
    /* توضیح */
    
    .hero p{
    
    max-width:620px;
    
    font-size:18px;
    
    line-height:2;
    
    }
    
    
    
    /* دکمه ها */
    
    .hero-actions{
    
    display:flex;
    
    gap:15px;
    
    flex-wrap:wrap;
    
    margin-top:35px;
    
    }
    
    
    
    .hero-actions .btn{
    
    min-width:160px;
    
    height:55px;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    border-radius:30px;
    
    font-weight:800;
    
    }
    
    
    
    /* کارت معرفی */
    
    .brand-card{
    
    max-width:390px;
    
    }
    
    
    
    .brand-card h2{
    
    font-size:28px;
    
    }
    
    
    
    .stats{
    
    display:grid;
    
    grid-template-columns:repeat(3,1fr);
    
    gap:15px;
    
    }
    
    
    
    .online-status{
    
    font-size:13px;
    
    }
    
    
    
    /* ==================================
                MOBILE
    ================================== */
    
    
    @media(max-width:768px){
    
    
    
    .hero{
    
    padding-top:30px;
    
    }
    
    
    
    .hero-content{
    
    width:100%;
    
    text-align:center;
    
    }
    
    
    
    .brand-title{
    
    font-size:28px;
    
    }
    
    
    
    .badge{
    
    font-size:10px;
    
    padding:7px 15px;
    
    }
    
    
    
    .hero h1{
    
    font-size:34px;
    
    line-height:1.5;
    
    letter-spacing:-.5px;
    
    margin-top:15px;
    
    }
    
    
    
    .hero p{
    
    font-size:15px;
    
    line-height:2;
    
    padding:0 10px;
    
    }
    
    
    
    /* دکمه ها */
    
    .hero-actions{
    
    justify-content:center;
    
    flex-direction:column;
    
    align-items:center;
    
    gap:12px;
    
    }
    
    
    
    .hero-actions .btn{
    
    width:90%;
    
    max-width:330px;
    
    height:52px;
    
    }
    
    
    
    /* کارت */
    
    .brand-card{
    
    width:90%;
    
    margin:35px auto 0;
    
    padding:25px;
    
    }
    
    
    
    .brand-card h2{
    
    font-size:22px;
    
    }
    
    
    
    .stats{
    
    grid-template-columns:repeat(3,1fr);
    
    gap:8px;
    
    }
    
    
    
    .stats strong{
    
    font-size:22px;
    
    }
    
    
    
    .stats span{
    
    font-size:11px;
    
    }
    
    
    
    }
    
    
    
    /* گوشی های کوچک */
    
    @media(max-width:420px){
    
    
    .hero h1{
    
    font-size:29px;
    
    }
    
    
    
    .brand-title{
    
    font-size:24px;
    
    }
    
    
    
    .stats{
    
    grid-template-columns:1fr;
    
    }
    
    
    }
    /* ==========================================
   MR.AIWITHMAHDI - INNER SECTIONS MOBILE PRO
   ABOUT / EXPERIENCE / IDENTITY
========================================== */


/* جلوگیری از بیرون زدگی */

section,
div{

max-width:100%;

}


/* ABOUT */

.about{

padding-left:20px;

padding-right:20px;

}



.about-box{

max-width:900px;

margin:auto;

line-height:2;

}



/* EXPERIENCE CARDS */

.experience-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}



.experience-card{

height:100%;

}



/* IDENTITY */

.identity-wrapper{

display:flex;

align-items:center;

gap:50px;

}



.identity-image,
.identity-content{

width:50%;

}



/* آمار برند */

.identity-stats{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

}



/* Timeline */

.timeline{

max-width:900px;

margin:auto;

}



/* =================================
            TABLET
================================= */


@media(max-width:900px){


.experience-grid{

grid-template-columns:repeat(2,1fr);

}



.identity-wrapper{

flex-direction:column;

gap:35px;

}



.identity-image,
.identity-content{

width:100%;

}



.identity-content{

text-align:center;

}



.identity-stats{

max-width:500px;

margin:auto;

}


}



/* =================================
            MOBILE
================================= */


@media(max-width:600px){



.section-heading{

padding:0 15px;

}



.section-heading h2{

font-size:28px;

line-height:1.6;

}



.section-heading p{

font-size:14px;

line-height:2;

}



/* ABOUT */


.about{

padding-top:40px;

}



.about-box{

padding:25px;

font-size:14px;

}



/* EXPERIENCE */


.experience{

padding:40px 15px;

}



.experience-grid{

grid-template-columns:1fr;

gap:18px;

}



.experience-card{

padding:25px;

border-radius:25px;

}



.experience-card h3{

font-size:18px;

}



.experience-card p{

font-size:14px;

line-height:2;

}



/* BRAND IDENTITY */


.identity{

padding:50px 15px;

}



.image-frame{

min-height:250px;

}



.identity-content h3{

font-size:28px;

}



.identity-content p{

font-size:15px;

line-height:2.1;

}



.philosophy{

padding:20px;

}



.philosophy h4{

font-size:16px;

line-height:2;

}



.identity-stats{

grid-template-columns:1fr;

gap:15px;

}



.identity-stats div{

padding:20px;

}



/* TIMELINE */


.timeline{

padding:20px 0;

}



.timeline-item{

padding:20px;

margin-bottom:15px;

}



.timeline-item p{

font-size:14px;

line-height:2;

}



}



/* گوشی خیلی کوچک */

@media(max-width:380px){


.section-heading h2{

font-size:24px;

}


.experience-card h3{

font-size:16px;

}


.identity-content h3{

font-size:24px;

}


}
/* ==========================================
   MR.AIWITHMAHDI - SERVICES + PORTFOLIO PRO
========================================== */


/* SERVICES DESKTOP */

.services-grid{

    display:grid;
    
    grid-template-columns:repeat(4,1fr);
    
    gap:25px;
    
    }
    
    
    
    .service-card{
    
    height:100%;
    
    display:flex;
    
    flex-direction:column;
    
    }
    
    
    
    
    .service-card p{
    
    line-height:2;
    
    }
    
    
    
    
    /* PROJECTS */
    
    .projects-grid{
    
    display:grid;
    
    grid-template-columns:repeat(3,1fr);
    
    gap:30px;
    
    }
    
    
    
    .project-card{
    
    overflow:hidden;
    
    display:block;
    
    }
    
    
    
    .project-image{
    
    width:100%;
    
    aspect-ratio:16/10;
    
    overflow:hidden;
    
    }
    
    
    
    .project-image img{
    
    width:100%;
    
    height:100%;
    
    object-fit:cover;
    
    display:block;
    
    }
    
    
    
    .project-info{
    
    padding:25px;
    
    }
    
    
    
    .project-info h3{
    
    line-height:1.6;
    
    }
    
    
    
    .project-info p{
    
    line-height:2;
    
    }
    
    
    
    
    
    /* =================================
            TABLET
    ================================= */
    
    
    @media(max-width:1000px){
    
    
    .services-grid{
    
    grid-template-columns:repeat(2,1fr);
    
    }
    
    
    
    .projects-grid{
    
    grid-template-columns:repeat(2,1fr);
    
    }
    
    
    }
    
    
    
    /* =================================
            MOBILE
    ================================= */
    
    
    @media(max-width:600px){
    
    
    
    .services{
    
    padding:50px 15px;
    
    }
    
    
    
    .services-grid{
    
    grid-template-columns:1fr;
    
    gap:18px;
    
    }
    
    
    
    .service-card{
    
    padding:25px;
    
    border-radius:25px;
    
    }
    
    
    
    .service-icon{
    
    width:55px;
    
    height:55px;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    margin-bottom:15px;
    
    }
    
    
    
    .service-card h3{
    
    font-size:20px;
    
    line-height:1.6;
    
    }
    
    
    
    .service-card p{
    
    font-size:14px;
    
    line-height:2;
    
    }
    
    
    
    /* PORTFOLIO */
    
    
    .projects{
    
    padding:50px 15px;
    
    }
    
    
    
    .projects-grid{
    
    grid-template-columns:1fr;
    
    gap:22px;
    
    }
    
    
    
    .project-card{
    
    border-radius:25px;
    
    }
    
    
    
    .project-image{
    
    aspect-ratio:4/3;
    
    }
    
    
    
    .project-info{
    
    padding:22px;
    
    }
    
    
    
    .project-info span{
    
    font-size:11px;
    
    }
    
    
    
    .project-info h3{
    
    font-size:21px;
    
    }
    
    
    
    .project-info p{
    
    font-size:14px;
    
    line-height:2;
    
    }
    
    
    
    }
    
    
    
    /* گوشی کوچک */
    
    
    @media(max-width:380px){
    
    
    .project-info h3{
    
    font-size:18px;
    
    }
    
    
    
    .service-card h3{
    
    font-size:18px;
    
    }
    
    
    }
    /* ==========================================
   MR.AIWITHMAHDI - ORDER CONTACT FAQ FOOTER
========================================== */


/* REQUEST FORM */

.request-box{

    max-width:1000px;
    
    margin:auto;
    
    }
    
    
    
    .project-form{
    
    display:grid;
    
    gap:20px;
    
    }
    
    
    
    .input-group{
    
    display:flex;
    
    flex-direction:column;
    
    gap:10px;
    
    }
    
    
    
    .input-group input,
    .input-group textarea,
    .input-group select{
    
    width:100%;
    
    box-sizing:border-box;
    
    }
    
    
    
    
    /* CONTACT CARDS */
    
    
    .contact-cards{
    
    display:grid;
    
    grid-template-columns:repeat(3,1fr);
    
    gap:25px;
    
    }
    
    
    
    .contact-card{
    
    height:100%;
    
    display:flex;
    
    flex-direction:column;
    
    align-items:center;
    
    text-align:center;
    
    }
    
    
    
    
    /* FAQ */
    
    
    .faq-container{
    
    max-width:900px;
    
    margin:auto;
    
    }
    
    
    
    .faq-question{
    
    width:100%;
    
    text-align:right;
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    }
    
    
    
    .faq-answer p{
    
    line-height:2;
    
    }
    
    
    
    
    /* FOOTER */
    
    
    footer{
    
    text-align:center;
    
    padding:40px 20px;
    
    }
    
    
    
    
    
    /* =================================
              TABLET
    ================================= */
    
    
    @media(max-width:900px){
    
    
    
    .contact-cards{
    
    grid-template-columns:1fr;
    
    }
    
    
    
    .request{
    
    padding:40px 15px;
    
    }
    
    
    
    }
    
    
    
    /* =================================
              MOBILE
    ================================= */
    
    
    @media(max-width:600px){
    
    
    
    .request-box{
    
    padding:25px 15px;
    
    }
    
    
    
    .project-form{
    
    gap:15px;
    
    }
    
    
    
    .input-group label{
    
    font-size:14px;
    
    }
    
    
    
    .input-group input,
    .input-group textarea,
    .input-group select{
    
    font-size:14px;
    
    padding:14px;
    
    border-radius:15px;
    
    }
    
    
    
    .submit-btn{
    
    width:100%;
    
    padding:16px;
    
    font-size:16px;
    
    border-radius:18px;
    
    }
    
    
    
    
    
    /* CONTACT */
    
    
    .contact{
    
    padding:50px 15px;
    
    }
    
    
    
    .contact h2{
    
    font-size:26px;
    
    line-height:1.8;
    
    }
    
    
    
    .contact p{
    
    font-size:14px;
    
    line-height:2;
    
    }
    
    
    
    .contact-buttons{
    
    flex-direction:column;
    
    gap:15px;
    
    }
    
    
    
    .contact-buttons .btn{
    
    width:100%;
    
    text-align:center;
    
    }
    
    
    
    
    
    /* CONTACT HUB */
    
    
    .creative-contact{
    
    padding:50px 15px;
    
    }
    
    
    
    .contact-card{
    
    padding:25px 18px;
    
    border-radius:25px;
    
    }
    
    
    
    .contact-card h3{
    
    font-size:20px;
    
    }
    
    
    
    .contact-card p{
    
    font-size:14px;
    
    line-height:2;
    
    }
    
    
    
    
    
    /* FAQ */
    
    
    .faq-section{
    
    padding:50px 15px;
    
    }
    
    
    
    .faq-question{
    
    font-size:14px;
    
    padding:18px;
    
    line-height:1.8;
    
    }
    
    
    
    .faq-answer p{
    
    font-size:14px;
    
    padding:15px;
    
    line-height:2;
    
    }
    
    
    
    
    
    /* FOOTER */
    
    
    .footer-logo{
    
    font-size:26px;
    
    }
    
    
    
    .footer-copy{
    
    font-size:13px;
    
    }
    
    
    }
    
    
    
    /* گوشی خیلی کوچک */
    
    @media(max-width:380px){
    
    
    .contact h2{
    
    font-size:22px;
    
    }
    
    
    .faq-question{
    
    font-size:13px;
    
    }
    
    
    }
    /* ==========================================
   MR.AIWITHMAHDI - FINAL MOBILE POLISH
   ASSISTANT + FLOATING + OWNER MENU
========================================== */


/* FLOATING CONTACT */

.floating-contact{

    position:fixed;
    
    bottom:25px;
    
    left:25px;
    
    z-index:9998;
    
    }
    
    
    
    .floating-btn{
    
    width:60px;
    
    height:60px;
    
    border-radius:50%;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:25px;
    
    }
    
    
    
    /* FLOATING PANEL */
    
    .floating-panel{
    
    max-width:280px;
    
    }
    
    
    
    
    /* AI ASSISTANT */
    
    .ai-assistant{
    
    z-index:9997;
    
    }
    
    
    
    .ai-chat{
    
    max-width:380px;
    
    overflow:hidden;
    
    }
    
    
    
    .ai-messages{
    
    overflow-y:auto;
    
    }
    
    
    
    
    /* OWNER MENU */
    
    .owner-menu-btn{
    
    z-index:9999;
    
    }
    
    
    
    .owner-panel{
    
    max-width:calc(100vw - 40px);
    
    box-sizing:border-box;
    
    }
    
    
    
    
    /* =================================
                MOBILE
    ================================= */
    
    
    @media(max-width:600px){
    
    
    
    /* دکمه ارتباط */
    
    .floating-contact{
    
    bottom:20px;
    
    left:15px;
    
    }
    
    
    
    .floating-btn{
    
    width:55px;
    
    height:55px;
    
    }
    
    
    
    
    
    .floating-panel{
    
    width:260px;
    
    left:0;
    
    bottom:70px;
    
    right:auto;
    
    }
    
    
    
    
    /* دستیار هوشمند */
    
    
    .ai-chat{
    
    position:fixed;
    
    bottom:20px;
    
    left:10px;
    
    right:10px;
    
    width:auto;
    
    max-width:none;
    
    height:75vh;
    
    border-radius:25px;
    
    }
    
    
    
    .ai-header{
    
    padding:18px;
    
    }
    
    
    
    .ai-messages{
    
    height:calc(75vh - 150px);
    
    padding:15px;
    
    }
    
    
    
    .ai-options{
    
    display:grid;
    
    grid-template-columns:1fr 1fr;
    
    gap:10px;
    
    padding:15px;
    
    }
    
    
    
    .ai-options button{
    
    font-size:13px;
    
    padding:12px;
    
    }
    
    
    
    
    
    /* ورودی چت */
    
    .ai-input-box{
    
    position:relative;
    
    width:100%;
    
    box-sizing:border-box;
    
    }
    
    
    
    .ai-input-box input{
    
    min-width:0;
    
    font-size:14px;
    
    }
    
    
    
    .ai-input-box button{
    
    padding:10px 14px;
    
    }
    
    
    
    
    
    /* OWNER MENU */
    
    
    .owner-menu-btn{
    
    top:15px;
    
    right:15px;
    
    width:50px;
    
    height:50px;
    
    font-size:24px;
    
    border-radius:15px;
    
    }
    
    
    
    .owner-panel{
    
    top:75px;
    
    right:15px;
    
    left:15px;
    
    width:auto;
    
    }
    
    
    
    
    
    /* جلوگیری از بهم ریختن دکمه‌ها */
    
    
    .btn{
    
    max-width:100%;
    
    box-sizing:border-box;
    
    }
    
    
    
    .hero-actions{
    
    flex-direction:column;
    
    gap:15px;
    
    }
    
    
    
    .hero-actions .btn{
    
    width:100%;
    
    text-align:center;
    
    }
    
    
    
    
    
    /* پایان صفحه */
    
    
    footer{
    
    padding-bottom:100px;
    
    }
    
    
    
    }
    
    
    
    
    
    /* گوشی خیلی کوچک */
    
    @media(max-width:380px){
    
    
    
    .ai-options{
    
    grid-template-columns:1fr;
    
    }
    
    
    
    .floating-panel{
    
    width:230px;
    
    }
    
    
    
    .owner-panel{
    
    padding:18px;
    
    }
    
    
    }