/* ===== header-start======= */

 nav {
   color: white;
   display: flex;
   justify-content: space-between;
   padding: 20px 0px;
 }

 .nav-menu ul {
   display: flex;
   list-style: none;
   gap: 20px;
 }

 .nav-menu ul li a {
   text-decoration: none;
   color: white;
 }
 #active {
   color: #e2fe38;
 }

 /* ===== header-end======= */
 /* ============ vision-section-start ============= */
 .vision-bg {
   background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
     url(../images/bg-1.png) no-repeat;
   background-position: center;
   background-size: cover;
 }
 .vision-bg img {
   width: 100%;
 }

 .vision-content {
   gap: 22px;
   color: white;
   padding: 130px 74px;
   width: 742px;
   max-width: 100%;
   display: flex;
   flex-direction: column;
 }

 .vision-content h1 {
   font-size: 35px;
 }
 .vision-content p {
   line-height: 24px;
   letter-spacing: 1px;
 }

 /* ========================== vision-plain-section  ================== */

 .vision-plain-wrapper {
   margin-top: -85px;
   position: relative;
   /* bottom: 120px; */
   color: white;
   background: url(../images/bg-2.png) no-repeat;
   background-position: center;
   background-size: 100% 100%;
 }

 .vision-cont {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 80px 10px 0 10px;
   gap: 50px;
 }

 .vision-cont2 {
   display: flex;
   gap: 80px;
   justify-content: center;
   flex-wrap: wrap;
 }

 .vision-box-1,
 .vision-box-2,
 .vision-box-3 {
   width: 280px;
   display: flex;
   flex-direction: column;
   gap: 20px;
 }

 .vision-box-1,
 .vision-box-2,
 .vision-box-3 p {
   line-height: 25px;
 }
 .vision-img-box {
   display: flex;
 }

 .vision-img-box img {
   width: 100%;
   object-fit: contain;
 }

 /* ==================== unlock section ========================== */

 .unlock {
   position: relative;
   background-position: center;
   background-size: 100% 100%;
 }
 .unlock-wrapper {
   align-items: center;
   justify-content: center;
   padding-left: 79px;
   background: black;
   height: 100%;
   display: flex;
 }
 .unlock-wrapper h1 {
   color: white;
   font-size: 50px;
   font-family: "Poppins", sans-serif;
   width: 100%;
   text-align: center;
   line-height: 16rem;
 }

 /* ======================= footer section =================== */

 .qr-code-img {
   width: 60px;
 }
 footer {
   background: white;
   color: black;
 }
 .footer-wrapper {
   padding: 25px 20px;
   display: flex;
   justify-content: space-between;
 }

 .fot-cont {
   display: flex;
   align-items: center;
   flex-direction: column;
 }
 .font-cont-1 {
   gap: 10px;
 }
 .font-cont-2 {
   gap: 40px;
   justify-content: space-between;
 }
 .font-cont-2 h1 {
   letter-spacing: 12px;
 }
 .fot-liks ul {
   display: flex;
   list-style: none;
   gap: 50px;
 }

 .fot-liks > ul > li > a {
   text-decoration: none;
   color: black;
 }
 .font-cont-3 {
   gap: 20px;
 }

 /* Media query start here */

 @media(min-width: 320px) and (max-width: 767px){
   .vision-content p {
     line-height: 21px;
     letter-spacing: 0;
     font-size: 12px;
 }
 .vision-content {
   gap: 12px;
   padding: 120px 3px 30px;
   width: 100%;
   max-width: 100%;
 }
 .vision-content h1 {
   font-size: 18px;
   line-height: 22px;
 }
 .unlock-wrapper h1 {
   font-size: 15px;
   line-height: 60px;
 }
 body section.unlock {
   height: 100%;
 }
 .unlock-wrapper {
   padding-left: 0px;
 }
 }


 @media(min-width: 768px) and (max-width: 991px){
   .vision-content h1 {
     font-size: 24px;
 }
 .vision-content p {
   line-height: 25px;
   letter-spacing: 0px;
   font-size: 15px;
 }
 .vision-content h1 {
   font-size: 25px;
 }
 .unlock-wrapper {
   padding-left: 0;
 }
 body section.unlock {
   height: 100%;
 }
 .unlock-wrapper h1 {
   font-size: 24px;
   line-height: 8rem;
 }
 }

 @media(min-width: 992px) and (max-width: 1023px){
 .unlock-wrapper {
   padding-left: 0;
 }
 body section.unlock {
   height: 100%;
 }
 .unlock-wrapper h1 {
   font-size: 36px;
   line-height: 10rem;
 }
 }

 /* End here */