html, .form-group, #i1,#c1,nav{
        scroll-behavior: smooth;
     /*   background: linear-gradient(33deg,  rgba(47, 157, 201, 0.993) 65%, rgb(214, 92, 76)35%);
      */
      background: linear-gradient(33deg,  rgba(47, 157, 201, 0.993) 65%, rgb(238, 33, 5)35%);
        /* main color application here   background: linear-gradient(33deg, rgba(2,0,36,1) 0%, rgba(117,28,58,1) 44%, rgba(22,61,106,1) 59%, rgba(31,96,167,1) 85%, rgba(107,135,1,1) 100%);
         */
        background-attachment: fixed;
        font-size:16px;
        position: sticky;

      }
                         /*   color for mobile responsiveness  */
      @media (max-width: 767px) {
        html, .form-group, #i1,#c1,nav{
      /*    background: linear-gradient(33deg,  rgba(47, 157, 201, 0.993) 50%, rgb(214, 92, 76)35%);   */
          background: linear-gradient(33deg,  rgba(47, 157, 201, 0.993) 65%, rgb(238, 33, 5)35%);

        }
      }

      #mainbody{          /* web developement  card color     */
       background-color:#d3d3d3;
/*     background: linear-gradient(33deg, rgba(2,0,36,1) 0%, rgba(117,28,58,1) 44%, rgba(22,61,106,1) 59%, rgba(31,96,167,1) 85%, rgba(107,135,1,1) 100%);
    */  height: 200vh;
       padding-left: 1.2px;
      }


      * {
        margin: 0;
        padding: 0;
        font-family: 'Raleway', sans-serif !important;
        font-weight: 600;

      }
      body{

     /*   background: rgba(0, 0, 0, 0.62);   */
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        overflow: auto;
      }


    .card1 {
			margin: 1%;
			position: relative;
            align-content: center ;
            display: inline-block;
		    }


    .ii2{

      /* width: 100%; */
      margin-top: 16px;
      margin-left: 2px;
      margin-right: 2px;
      border-radius: 45px;
      box-shadow: 5px 5px 30px rgba(64, 71, 104, 0.966);

    }

    .overlay-img {
      position: absolute;
      top: 40px;
      right: 23px;
      width: 130px;
      border-radius: 22px;
      /* height: 100px; */
      }

      .image-container {
        position: relative; /* Make the container relative for positioning */
        width: fit-content; /* Adjust width as needed */
        height: fit-content; /* Adjust height as needed */
      }

		/*This CSS code is defining the
		styles for a container that holds text*/
		.text-container{

      margin-top: 7px;
			position: absolute;
			color: rgb(255, 255, 255);
			left: 51px;
			top: 10px;
      color: black;
      font-size: smaller;
			padding: 0;
      margin: 0;
      width: 200px;
		}
    .text-container h3{
      font-size: 12px;
      font-weight: bold;
    }


    .top-left{
      width: 150px;
      position: absolute;
			color: rgb(255, 255, 255);
			left: 26px;
			top: 102px;
      color: black;
      font-size: 12px;

    }

    .top-left img{
      width: 83px;
      height: auto;
    }

    .top-left2{
      position: absolute;
			color: rgb(184, 159, 51);
			left: 25px;
			top: 190px;
      font-size: 18px;
			padding: 0 0rem;
      width: 200px;

    }

    .top-left2 h1{
      font-size: 18px;
    }

    .top-left3{
      position: absolute;
			color: rgb(184, 159, 51);
			left: 25px;
			top: 260px;
     font-size: 10px;
			padding: 0 0rem;
      width: 230px;
    }
    .top-left3 p{
      font-size: 11.5px;
      text-align: left;
    }

    .top-left21{
      position: absolute;
			color: rgb(24, 22, 13);
			left: 255px;
			top: 255px;
      width: 80px;
      text-align: center;
    }
    .top-left21 h1{
       font-weight: bold;
      font-size: 10px;
       line-height: 1.5;
    }


    .top-left4{
      position: absolute;
			color: rgb(214, 214, 213);
			left: 11px;
			top: 330px;
      font-size: 10px;
			padding: 0 1rem;
      line-height: 1.5;
      width: 300px;
    }
    .top-left4 p{
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;

    }


    .bottom-left{
      position: absolute;
      color: rgb(184, 159, 51);
       left: 25px;
			 top: 420px;

     font-size: 10px;
			padding: 0 0rem;
    }
    .bottom-left span{
      font-size: 12px;

    }
    .botton-le{
        position: absolute;
        color: rgb(184, 159, 51);
        left: 140px;
        top: 420px;
        font-size: 10px;
        padding: 0 0rem;
      }
      .botton-le h1{
        font-size: 18px;
      }

    .bottom-right{
     position: absolute;
     left: 255px;
     top: 420px;
    }

   #BUTTON {


     width: 69px;
     height: 35px;
     font-size: 10px;
     align-items: center;
     padding-left: 6px;
     font-weight: bold;
     border-radius: 12px;
   }
/*
   .centered{
     position: absolute;
     top: 52%;
     left: 84%;
     transform: translate(-50%, -50%);
     font-size: 25px;
     color: black;
     padding: 0 1rem;
}
*/