@media (min-width: 1025px) and (max-width: 1170px) {
.primary-nav.desktop .nav-list {
    gap: 20px;
}
}


/* For tablets (portrait and landscape) */
@media (max-width: 1024px) {
    
    .primary-nav.mobile{
        display: block;
    }

.tab-mob-btn {
    display: flex !important;
    gap: 10px;
    align-items: center;
}
#tab-btn {
    display: flex !important;
    align-items: center;
}

#mbl-view{
    justify-content: flex-start;
}
a#mob-full {
    width: 100%;
}



a#mob-none {
    display: none;
}



h1{
    font-size: 42px;
    font-weight: 800;
    line-height: 1.1;
     font-family: "Figtree";
}
h2{
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 10px;
    margin-top: 10px;
      font-family: "Figtree";
}

h3{
     font-size: 25px;
}



p{
     font-size: 14px;
}

a{
    font-size: 14px;
}
li{
    font-size: 14px;
}





/* When toggle is active */


body{
    overflow-x: hidden;
}

  .primary-nav.desktop {
    display: none;
  }
.nav-toggle {
    display: block;
    padding: 0;
    margin: 0;
}

  .mobile-nav-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #ebe4e4;
    margin-bottom: 20px;
}
ul.nav-list li a {
    display: -webkit-inline-box;
    width: 94%;
    padding: 15px 0;
    /* border-bottom: 1px solid gray; */
    background-color: rgb(238, 237, 234);
    margin: 10px 0;
    border-radius: 8px;
    padding-left: 15px;
}
.nav-actions {
    margin: 0 auto;
}
#nav-icon {
    margin: 25px auto;
    justify-content: center;
    gap: 20px;
}


.nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0px;
    padding: 0;
    margin: 0;
    width: 100%;
}

 
    .hero-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-primary {
        width: 100%;
        max-width: 300px;
    }
    
    .hero-stats {
        flex-direction: row;
        gap: 1.5rem;
    }
    
    .offer-content {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .offer-text {
        font-size: 1rem;
    }


      .presentation-nav {
        padding: 1rem 0;
    }
    
    .nav-links {
        display: none;
    }
    
    .nav-actions {
        flex-direction: row;
        gap: 0.5rem;
    }
    
   
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-description {
        font-size: 1.1rem;
    }
    
    .hero-actions {
        flex-direction: row;
        align-items: center;
    }
    
    .btn-primary {
        width: 100%;
        max-width: 100px;
    }
    
    section.hero-sec::before {
    inset: -681px 0px;
}
    

.features-grid {
    grid-template-columns: repeat(2, 1fr);
}

.footer-grid{
    grid-template-columns: repeat(3, 1fr);
}
.cta-sec-main {
    
    background-color: var(--dark-blue);
    background-image: none;
}
#cta-act img {
    right: 10%;
    filter: brightness(10);
}



 .templates-grid {grid-template-columns: repeat(3, 1fr);} 
  


    .brand-mark {
    width: 200px;
}

.pricing-grid{grid-template-columns:repeat(2,1fr)}

.mission-grid{grid-template-columns:1fr;gap:20px}
.values-grid{grid-template-columns:repeat(2,1fr);gap:24px}

.con-main {
    grid-template-columns: 48% 48%;
    gap: 25px;
}
.mf__ai__recommend__grid {
    grid-template-columns: 1fr 1fr;
}
.step-block-num {
    padding: 7px 15px;
    display: flex;
    justify-content: center;
}
.step-block-con span {
    font-size: 18px;
}
}


/* For mobile devices (portrait and small screens) */

@media (max-width: 767px) {

section{
    overflow-x: hidden;
}


body{
    overflow-x: hidden;
}

.nav-toggle .close {
    top: 5%;
}

.contact-container {
    grid-template-columns: 2fr;
}
.contact-form {
    padding: 20px 40px 40px 15px;
}
.tpl-card img {
    height: auto;
}

    .tab-mob-btn {
    display: flex !important;
    gap: 10px;
    align-items: center;
}
#tab-btn {
    display: flex !important;
    align-items: center;
}

a#mob-none {
    display: none;
}


.grid-2 {
    grid-template-columns: repeat(1, 1fr);
    gap: 15px 20px;
}
.grid-2 input, textarea, select {
    width: 100%;
}
textarea {
    width: 100%;
}


section.con-sec {
    padding: 2rem 0 4rem 0;
}
.offer-cta {
    max-width: 190px;
}
    .primary-nav.desktop {
    display: none;
}
    

    ul.nav-list {
    padding: 0;
    width: 100%;
}
.nav-toggle {
    display: block;
}
    .modern-hero {
        padding: 1rem 0 2rem;
    }

    .hero-stats {
    display: grid;
    gap: 1.5rem;
    justify-items: center;
}
    
  

     .presentation-ai-hero {
        padding: 0;
    }
    
    .hero-title {
        font-size: 2rem;
    }
   


    .features-grid {
    grid-template-columns: repeat(1, 1fr);
}
.think-chatgpt-main {
    grid-template-columns: 100%;
}
.footer-grid {
    grid-template-columns: repeat(1, 1fr);
}


.templates-grid {grid-template-columns: repeat(1,1fr);} 

  .primary-nav.open {
    padding: 1rem;               
  }


  .brand-mark {
    width: 50px;
}
  .mobile-nav-header a img {
    width: 40px;
}

.nav-actions img {
    position: absolute;
    width: 100px;
    top: 0px;
    right: 10px;
    rotate: 14deg;
    filter: brightness(0);
}


#cta-act img {
    right: -10px;
}

.pricing-grid{grid-template-columns:1fr}
.values-grid{grid-template-columns:1fr}.value-icon img{width:36px;height:36px}

/* about page */

.mission {
    background-image: none;
}
.con-main {
    grid-template-columns: 100%;
   
}
.counter-grid {
    grid-template-columns: repeat(2,2fr);
    gap: 10px;
}

.hero-template-main {
    grid-template-columns: 100%;
}




  .mf__box__cs {
    grid-template-columns: 100% !important;
}

.mf__left {
    display: none;
}
.step-grid {
    grid-template-columns: 100%;
}
.feature-grid {
    grid-template-columns: 1fr;
}
.feature-grid-framer {
    gap: 30px;
}
.mf__ai__recommend__grid {
    grid-template-columns: 1fr;
}
.grid-3 input {
    width: 93%;
}
}