/* -----------------------google-font---------------------- */
    @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap');
/* -----------------------main-style---------------------- */

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --main-clr-1: #FFFFFF;
      --main-clr-2: #000000;
      --main-clr-3 : #010101;
      --header-bg : rgba(194, 194, 194, 01);
      --Inter-font : "Inter", sans-serif;
      --Rethink_Sans-font : "Rethink Sans", sans-serif;
      --Poppins-font: "Poppins", sans-serif;
    }

    body {
      height: 100vh;
      background: var(--main-clr-1);
      overflow-x: hidden;
    }


/* ---------------------------navbar-css-style----------------------------- */
  
  header {
     width: 100%;
     height: 120px;
     display: flex;
     justify-content: center;
     align-items: center;  
     position: fixed;
     font-family: var(--Rethink_Sans-font);
     z-index: 1;
  }

  header nav.navbar  {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     max-width: 1000px;
     background-color: rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(10px);
     border-radius: 999px;
     padding-left: 30px;
     padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
     border: 1px solid #e9e9e9;
     font-size: 1.1rem;
     z-index: 1;
   }

   .textContainer .headerText {
      font-weight: 600;
   }

   .btnSection .loginBtn {
      background-color: #010101;
      color: var(--main-clr-1);
      outline: none;
      border: none;
      padding: 10px 15px;
      border-radius: 500px;
      font-size: 1.01rem;
   }


/* responsive layout */

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

    header nav.navbar {
        max-width: 950px;
    }

}

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

    header nav.navbar {
        max-width: 800px;
    }

}

@media screen and (max-width: 866px) {
   
   header nav.navbar {
        max-width: 600px;
    }

    .textContainer .headerText {
         display: none;
      }

}

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

      header nav.navbar {
        max-width: 450px;
      }

      .logo .logoImg2 {
        display: none;
     }
    
        .btnSection .loginBtn {
           font-size: 0.8rem;
        }
}

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

      .textContainer .headerText {
         display: none;
      }

}



/* ---------------------------main-css-style-start----------------------------- */

 main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 80px;
 }

/* ---------------------------main-css-style-end----------------------------- */

/* ---------------------------heroSection-css-style----------------------------- */

 main section.heroSection {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 15px;
 }

 .mainHero .heroImg {
    width: 300px;
 }

 section.heroSection .heroBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    border-radius: 20px;
    background-color: #F1F1F1;
    outline: none;
    border: 0.57px solid rgba(160, 160, 160, 0.15);
    font-family: var(--Inter-font);
    margin-bottom: 5px;
 }

 .heroBtn .heroChildBtn {
    font-size: 0.8rem;
    background-color: var(--main-clr-2);
    color: var(--main-clr-1);
    font-size: 10px;
    padding: 3px  6px;
    border-radius: 10px;
    margin-right: 8px;
    font-weight: 500;
 }

 .heroBtn .btnText {
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inter;
 }

 section.heroSection .hero-subtitle {
    font-size: 5.2rem;
    font-family: var(--Rethink_Sans-font);
    font-weight: 750;
    text-align: center;
    width: 1000px;
    line-height: 4.8rem;
 }

 .hero-subtitle #highlightText {
    font-weight: bold;
    background: radial-gradient(circle, #d8d1d1, #000000);
    background-clip: text;
   -webkit-text-fill-color: transparent;
 }

 section.heroSection .hero-description {
      font-family: var(--Poppins-font);
      font-size: 1.3rem;
      text-align: center;
      font-weight: medium;
      color: #8D8D8D;
      width: 500px;
      margin-top: 10px;
 }

 section.heroSection .generatBtn {
      background-image: linear-gradient(to right, #000000, #737373);
      outline: none;
      border: none;
      color: var(--main-clr-1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 10px 20px;
      border-radius: 50px;
      font-family: var(--Inter-font);
      font-weight: 500;
      margin-top: 10px;
 }
 
 .generatBtn .generatText {
      font-size: 0.95rem;
 }

 .generatBtn .generatImg {
      width: 14px;
 }

 /* responsive layout */

@media screen and (max-width: 1067px) {
      .main {
          gap: 40px;
      }
      
       main section.heroSection {
            gap: 5px;
      }
      
       section.heroSection .hero-subtitle {
            font-size: 4rem;
            width: 700px;
            line-height: 4rem;
       }

        section.heroSection .hero-description {
            font-size: 1rem;
            width: 500px;
            margin-top: 0px;
        }

         /* section.heroSection .generatBtn {
              gap: 10px;
              margin-top: 10px;
         }
          */
         .generatBtn .generatText {
              font-size: 0.9rem;
         }
        
         .generatBtn .generatImg {
              width: 14px;
         }
}


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

         .main {
             gap: 20px;
         }

          .mainHero .heroImg {
             width: 250px;
          }
   
         section.heroSection .hero-subtitle {
            font-size: 3rem;
            width: 500px;
            line-height: 3rem;
       }

         section.heroSection .hero-description {
            font-size: 0.8rem;
            width: 300px;
        }

         section.heroSection .generatBtn {
              gap: 10px;
              padding: 8px 15px;
              margin-top: 10px;
         }
         
         .generatBtn .generatText {
              font-size: 0.7rem;
         }
        
         .generatBtn .generatImg {
              width: 13px;
         }
}


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

        main {
            gap: 50px;
        }

          .mainHero .heroImg {
             width: 250px;
          }

          section.heroSection .heroBtn {
             padding: 5px 10px;
             margin-bottom: 5px;
          }
         
          .heroBtn .heroChildBtn {
             font-size: 9px;
             padding: 2px  5px;
             margin-right: 8px;
          }
         
          .heroBtn .btnText {
             font-size: 0.6rem;
             font-weight: 600;
             font-family: inter;
          }
   
         section.heroSection .hero-subtitle {
            font-size: 2.1rem;
            width: 302px;
            line-height: 2rem;
       }

         section.heroSection .hero-description {
            font-size: 0.7rem;
            width: 250px;
        }

         section.heroSection .generatBtn {
              gap: 10px;
              padding: 6px 10px;
              margin-top: 3px;
              gap: 5px;
         }
         
         .generatBtn .generatText {
              font-size: 0.68rem;
         }
        
         .generatBtn .generatImg {
              width: 12px;
         }
}

/* ---------------------------worksSection-css-style----------------------------- */

main section.worksSection {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 70px;
}

.worksSection .workHeading {
     font-size: 4rem;
     font-family: var(--Rethink_Sans-font);
     font-weight: bold;
     color: #2C2C2C;
     /* margin-bottom: 30px; */
}

.worksSection .works {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: row;
     gap: 30px;
     flex-wrap: wrap;
}

.works .work .workImg {
     max-width: 350px;
     border: 2px solid rgba(52, 50, 50, 0.2);
     border-radius: 26px;
     transition: transform 0.5s ease;
}

.works .work .workImg:hover {
     transform: scale(1.02);
     filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.2));
}


 /* responsive layout */

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

    .worksSection .workHeading {
        font-size: 3.8rem;
    }

    .worksSection .works {
        width: 100%;
        position: 20px;
        padding: 20px;
        padding-bottom: 0px;
    }

    .works .work .workImg {
        width: 350px;
    }

}

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

    main section.worksSection {
        gap: 40px;
    }
    
    .worksSection .workHeading {
        font-size: 3.5rem;
    }

    .works .work .workImg {
        width: 300px;
    }

}

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

    
    .worksSection .workHeading {
        font-size: 3.3rem;
    }

    .works .work .workImg {
        width: 400px;
    }

}

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

    main section.worksSection {
        gap: 30px;
    }

    .worksSection .workHeading {
        font-size: 2.3rem;
    }

    .works .work .workImg {
        width: 300px;
    }

}

/* ---------------------------featureSection-css-style----------------------------- */

 main section.featureSection {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
 }

 .featureSection .featureHeading {
    color: #2C2C2C;
    font-family: var(--Rethink_Sans-font);
    font-size: 3.2rem;
    font-weight: bold;
    text-align: center;
 }

 .featureSection .featurePara {
    width: 600px;
    text-align: center;
    font-family: var(--Poppins-font);
    font-size: 1rem;
    color: #8D8D8D;
    font-weight: 410;
    line-height: 22.5px;
 }

 .featureSection .feature_btn_panel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-top: 10px;
    font-family: var(--Poppins-font);
 }

 .feature_btn_panel .action_link {
     background: white;
     border: 2px solid #e2e8f0;
     border-radius: 12px;
     padding: 18px 24px;
     font-size: 0.95rem;
     font-weight: 550;
     color: #000;
     cursor: pointer;
     transition: all 0.3s ease;
     text-decoration: none;
     display: block;
 }

   .action_link:hover {
    background: #010101;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

/* responsive layout */

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

      .featureSection .feature_btn_panel {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }

}

@media screen and (max-width: 930px) {
    
     .featureSection .featurePara {
        font-size: 14px;
     }

     .featureSection .featureHeading {
        font-size: 2.5rem;
     }

}

@media screen and (max-width: 680px) {
    
     .featureSection .featurePara {
        font-size: 12px;
        width: 450px;
     }

     .featureSection .featureHeading {
        font-size: 2.1rem;
     }

}

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

        .featureSection .featurePara {
           font-size: 12px;
           width: 400px;
       }

      .featureSection .featureHeading {
         font-size: 2rem;
      }

      .featureSection .feature_btn_panel {
        width: 400px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
      }

}

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

         main section.featureSection {
            gap: 15px;
         }

        .featureSection .featurePara {
           font-size: 12px;
           width: 350px;
           line-height: 15px;
           font-weight: 400;
       }

      .featureSection .featureHeading {
         font-size: 1.3rem;
      }

      .featureSection .feature_btn_panel {
        width: 300px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
      }

       .feature_btn_panel .action_link { 
        font-size: 0.8rem;
       }

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

         main section.featureSection {
            gap: 15px;
         }
         
         .featureSection .featureHeading {
            font-size: 1.4rem;
            margin-left: 10px;
            margin-right: 10px;
         }

        .featureSection .featurePara {
           font-size: 10px;
           width: 250px;
           line-height: 15px;
           font-weight: 400;
       }

      .featureSection .feature_btn_panel {
        width: 250px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
      }

       .feature_btn_panel .action_link { 
        font-size: 0.8rem;
       }

}

/* ---------------------------CTASection-css-style----------------------------- */

 main section.CTASection {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .CTASection .CTABody {
   width: 80%;
   background-color: #010101;
   border-radius: 30px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 10px;
   padding: 40px 100px;
   max-width: 900px;
 }

 .CTABody .CTAHeading {
   font-family: var(--Rethink_Sans-font);
   font-size: 30px;
   color: #fff;
   font-weight: bold;
   text-align: center;
 }

 .CTABody .CTAPara {
   font-family: var(--Poppins-font);
   font-size: 12.71px;
   color: #fff;
   font-weight: 400;
   text-align: center;
 }

 .CTABody .CTABtn {
   font-family: var(--Poppins-font);
   font-size: 12.71px;
   color: #000;
   font-weight: 600;
   text-align: center;
   padding: 10px 20px;
   border-radius: 15px;
   border: none;
   margin-top: 5px;
 }

/* responsive layout */

@media screen and (max-width: 830px) {
      
    .CTABody .CTAHeading {
         font-size: 25px;
    }

   .CTABody .CTAPara {
       font-size: 11px;
    }

     .CTABody .CTABtn {
        font-size: 11px;
     }

      .CTABody .CTABtn {
         padding: 8px 26px;
      }

}

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

      
    .CTABody .CTAHeading {
         font-size: 20px;
    }

   .CTABody .CTAPara {
       font-size: 9px;
    }

     .CTABody .CTABtn {
        font-size: 9px;
     }

      .CTABody .CTABtn {
         padding: 6px 22px;
      }

}

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

    .CTASection .CTABody {
         padding: 30px 80px;
    }
      
    .CTABody .CTAHeading {
         font-size: 15 px;
    }

   .CTABody .CTAPara {
       font-size: 9px;
    }

     .CTABody .CTABtn {
        font-size: 9px;
     }

      .CTABody .CTABtn {
         padding: 6px 22px;
      }

}

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

    .CTASection .CTABody {
         padding: 30px 50px;
         width: 90%;
         border-radius: 20px;
    }
      
    .CTABody .CTAHeading {
         font-size: 18px;
    }

   .CTABody .CTAPara {
       font-size: 9px;
    }

     .CTABody .CTABtn {
        font-size: 9px;
     }

      .CTABody .CTABtn {
         padding: 6px 22px;
      }

}