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

@media (max-width:992px){

  /* HERO */

  .hero .container{

    flex-direction:column;

    text-align:center;
  }

  .hero-image img{

    width:320px;
  }


  /* NAVBAR */

  .navbar .container{

    flex-direction:row;

    justify-content:space-between;

    align-items:center;

    gap:20px;
  }

  .stats-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  /* this is code  is to solve stats grid problem for tablet in future if it helps is ok , if not  i delet it */



  /* ABOUT */
  .about .container{
    flex-direction:column;
    text-align:center;
  }

  .about-content{
    display:contents;
  }

  .about-content .section-subtitle{
    order:1;
  }

  .about-content .section-title{
    order:2;
  }

  .about-image{
    order:3;
    width:100%;
    display:flex;
    justify-content:center;
  }

  .about-image img{
    width:280px;
    margin:0 auto;
  }

  .about-content .about-text{
    order:4;
  }

  .about-content .about-info{
    order:5;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
    gap:20px;
    margin-top:25px;
  }

  .info-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  /* ===========================
    PRICING - TABLET
  =========================== */

  .pricing-grid {

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

    gap: 25px;

  }


  .pricing-card.featured {

    transform: none;

  }


  .pricing-card.featured:hover {

    transform: translateY(-8px);

  }


 /* PROJECTS */

  .projects-grid{

    /* grid-template-columns:1fr; */
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .project-card img{
    height: 200px;
    object-fit: cover;
    width: 100%;
    display: block;
  }



  /* CONTACT */

  .contact-content{

    grid-template-columns:1fr;
   
  }
 
 

  /* FOOTER */

  .footer-content{

    grid-template-columns:1fr;

    text-align:center;
  }

}



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

@media (max-width:768px){

  h1{

    font-size:2.5rem;
  }


  h2{

    font-size:1.6rem;
  }


  /* NAVBAR */

  .navbar .container{

    flex-direction:row;

    justify-content:space-between;

    align-items:center;
  }


  .nav-links{

    flex-direction:column;

    align-items:center;

    gap:15px;
  }


  .menu-toggle{

    display:flex;
  }


  .nav-links{

    display:none;
  }


  .work-with-me-btn{
    /* display:none; */

    padding:8px 14px;
    font-size:0.85rem;
    margin-right:10px; 
  }


  .nav-links.active{

    display:flex;

    flex-direction:column;

    position:absolute;

    top:80px;

    left:0;

    width:100%;

    background:white;

    padding:30px;

    gap:20px;

    text-align:center;

    box-shadow:0 10px 20px rgba(0,0,0,.08);
  }



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

  .about .container{

    display:grid;

    grid-template-columns:1fr;

    gap:30px;

    text-align:center;
  }


  /* About content */

  .about-content{

    display:contents;
  }


  /* About subtitle */

  .about-content .section-subtitle{

    order:1;
  }


  /* About heading */

  .about-content .section-title{

    order:2;

    font-size:2rem;

    line-height:1.2;

    margin-bottom:10px;
  }


  /* About image */

  .about-image{

    order:3;

    width:100%;

    display:flex;

    justify-content:center;

    margin-bottom:10px;
  }


  .about-image img{

    width:280px;

    max-width:80%;

    height:auto;

    margin:0 auto;
  }


  /* About paragraphs */

  .about-content .about-text{

    order:4;

    width:100%;

    max-width:100%;

    text-align:center;

    overflow-wrap:break-word;

    word-wrap:break-word;

    line-height:1.7;
  }


  /* About information */

  .about-content .about-info{

    order:5;

    width:100%;

    display:grid;

    grid-template-columns:1fr;

    gap:20px;

    margin-top:25px;
  }


  .info-card{

    width:100%;

    text-align:center;
  }


  /* ===========================
    SKILLS GRID - MOBILE
  =========================== */

  .skills-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:25px;

    width:100%;

    padding:0 12px;

  }

  .skill-card{

    width:100%;

    padding:35px 25px;

  }

  /* ===========================
   SERVICES - MOBILE
=========================== */

.services-grid{

  display:grid;

  grid-template-columns:1fr;

  gap:30px;

  width:100%;

  max-width:100%;

}


  /* ===========================
    SERVICE CARDS
  =========================== */

  .service-card{

    width:100%;

    max-width:100%;

    box-sizing:border-box;

    padding:30px 20px;

    overflow:hidden;

  }


  /* ===========================
    SERVICE ICON
  =========================== */

  .service-icon{

    font-size:2.5rem;

    margin-bottom:15px;

    text-align:center;

  }



  /* ===========================
    PRICING - MOBILE
  =========================== */

  .pricing {

    padding: 80px 0;

  }


  .pricing-intro {

    width: 100%;

    padding: 0 15px;

    margin-bottom: 45px;

  }


  .pricing-grid {

    grid-template-columns: 1fr;

    width: 100%;

    gap: 30px;

  }


  .pricing-card {

    width: 100%;

    max-width: 100%;

    padding: 35px 25px;

  }


  .pricing-card.featured {

    transform: none;

  }


  .pricing-card.featured:hover {

    transform: translateY(-8px);

  }


  .pricing-header {

    min-height: auto;

  }


  .pricing-note {

    width: 100%;

    padding: 20px;

  }


  /* ===========================
    PROJECTS - MOBILE
  =========================== */

  .projects-grid{

    display:grid;

    grid-template-columns:1fr;

    width:100%;

    max-width:100%;

    gap:30px;

  }


  /* ===========================
    PROJECT CARD
  =========================== */

  .project-card{

    width:100%;

    max-width:100%;

    box-sizing:border-box;

    overflow:hidden;
  }


  /* ===========================
    PROJECT IMAGE
  =========================== */

  .project-card img{

    display:block;

    width:100%;

    max-width:100%;

    height:auto;

    object-fit:contain;
  }


  /* ===========================
    PROJECT CONTENT
  =========================== */

  .project-content{

    width:100%;

    max-width:100%;

    box-sizing:border-box;

    padding:25px 20px;

    overflow-wrap:break-word;
  }


  /* ===========================
    PROJECT BUTTONS
  =========================== */

  .project-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

  }


  /* ===========================
    CONTACT - MOBILE
  =========================== */

  .contact-content{

    display:grid;

    grid-template-columns:1fr;

    gap:40px;

    width:100%;

    max-width:100%;
  }


  /* ===========================
    CONTACT INFORMATION
  =========================== */

  .contact-info{

    width:100%;

    max-width:100%;

    text-align:center;
  }

  .contact-info h3{

    font-size:1.7rem;

    margin-bottom:15px;
  }

  .contact-info p{

    margin-bottom:20px;

    overflow-wrap:break-word;
  }


  /* ===========================
    CONTACT ITEMS
  =========================== */

  .contact-item{

    width:100%;

    margin-bottom:20px;
  }

  .contact-item h4{

    margin-bottom:5px;
  }


  /* ===========================
    CONTACT FORM
  =========================== */

  .contact-form{

    width:100%;

    max-width:100%;

    box-sizing:border-box;

    gap:15px;
  }


  /* ===========================
    FORM INPUTS
  =========================== */

  .contact-form input,
  .contact-form textarea{

    width:100%;

    max-width:100%;

    box-sizing:border-box;

    padding:14px;

    font-size:1rem;
  }


  /* ===========================
    MESSAGE BOX
  =========================== */

  #form-message{

    width:100%;

    max-width:100%;

    box-sizing:border-box;

    overflow-wrap:break-word;
  }



  /* ===========================
    FOOTER - MOBILE
  =========================== */

  .footer{

    width:100%;

    max-width:100%;

    padding:50px 0 25px;

  }

  .footer-logo{
    margin: 0 auto 15px;
  }


  /* ===========================
    FOOTER CONTENT
  =========================== */

  .footer-content{

    display:grid;

    grid-template-columns:1fr;

    gap:35px;

    width:100%;

    max-width:100%;

    margin-bottom:30px;

    text-align:center;

  }


  /* ===========================
    FOOTER HEADINGS
  =========================== */

  .footer h3,
  .footer h4{

    margin-bottom:15px;

  }


  /* ===========================
    FOOTER TEXT
  =========================== */

  .footer p{

    overflow-wrap:break-word;

    word-wrap:break-word;

    line-height:1.7;

  }


  /* ===========================
    FOOTER LINKS
  =========================== */

  .footer-links ul{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

  }


  /* ===========================
    FOOTER LINKS
  =========================== */

  .footer-links a{

    display:inline-block;

  }


  /* ===========================
    FOOTER DIVIDER
  =========================== */

  .footer hr{

    margin:25px 0;

  }


  /* ===========================
    FOOTER BOTTOM
  =========================== */

  .footer-bottom{

    width:100%;

    text-align:center;

    padding:0 15px;

  }

  .footer-bottom p{

    font-size:.9rem;

  }










  /* ===========================
    MOBILE SECTION BACKGROUNDS
  =========================== */

  section{
    width:100%;
    min-height:auto;
    padding:80px 0;
  }


  .about,
  .services {
    width: 100%;
    background: var(--surface-color);
  }

  
  .skills,
  .pricing,
  .contact {
    width: 100%;
    background: var(--background-color);
  }

  
  .projects {
    width: 100%;
    background: var(--surface-color);
  }

  /* .about,
  .services,
  .contact{
    width:100%;
    background:var(--surface-color);
  }

  .skills,
  .projects{
    width:100%;
    background:var(--background-color);
  } */

  /* ===========================
    MOBILE WIDTH FIX
  =========================== */

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  section {
    width: 100%;
    max-width: 100%;
  }
}





/* ===========================
    DARK MODE MOBILE MENU
=========================== */

body.dark-mode .nav-links.active{

  background:#153986;
}


body.dark-mode .nav-links.active a{

  color:#f9fafb;
}


body.dark-mode .nav-links.active a.active{

  color:var(--primary-color);
}


body.dark-mode .nav-links.active a:hover{

  color:var(--primary-color);
}


/* HERO BUTTONS */

.hero-buttons{

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:15px;
}


/* HERO IMAGE */

.hero-image img{

  width:260px;
}


/* SECTIONS */

section{

  padding:80px 0;
}




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

@media (max-width:480px){

  .logo{

    font-size:1.7rem;
  }


  .hero{

    padding-top:120px;
  }


  .hero-description{

    font-size:.95rem;
  }


  .primary-btn,
  .secondary-btn{

    width:100%;

    text-align:center;
  }

}