* {
                  margin: 0;
                  padding: 0;
            }

            /*--CSS Navbar --*/
            .navbar {
                  display: flex;
                  align-items: center;
                  justify-content: center;body-id
                  position: sticky;
                  top: 0;
                  cursor: pointer;
            }

           /*--CSS Navbar-bg --*/
            .background {
                  background:#fff;
                  background-blend-mode: darken;
                  background-size: cover;
                  z-index:99;
            }

               /*--CSS footer-bg --*/
         .background1 {
                  background: -webkit-linear-gradient(3deg,#ff0000,#ffe300,#14ff00,#00fffb,#787eb900);
                  background-blend-mode: darken;
                  background-size: cover;
            }

                     /*--CSS Navbar-list --*/
            .nav-list {
                  width: 70%;
                  display: flex;
                  align-items: center;
            }

              /*--CSS Navbar-logo --*/
            .logo {
                  display: flex;
                  justify-content: center;
                  align-items: center;
            }

             /*--CSS Navbar-logo-image --*/
            .logo img {
                  width: 180px;

                  border-radius: 0px;
            }

             /*--CSS Navbar-list-li --*/
            .nav-list li {
                  list-style: none;
                  padding: 10px 20px;
            }

            .nav-list li a {
                  text-decoration: none;
                  color: #000;font-weight:bold;
            }

            /*--CSS Navbar-list-hover --*/
            .nav-list li a:hover {
                  color: Red;
            }

            .rightnav {
                  width: 30%;
                  text-align: right;
            }



             /* --CSS Navbar-course The dropdown container --*/
          .dropdown {
           float: left;
           overflow: hidden;
       }

            /* --CSS Navbar-course-Dropdown button --*/
      .dropdown .dropbtn {
           font-size: 16px;
           border: none;
           outline: none;
           color: black;

           font-weight:bold;
           padding: 14px 16px;
           background-color: inherit;
           font: inherit; /* Important for vertical align on mobile phones */
           margin: 0; /* Important for vertical align on mobile phones */
       }

                   /* --CSS Navbar-course-Hover Dropdown button --*/
            .dropdown .dropbtn:hover{
                 color:red
             }

           /* --CSS Navbar-course-Dropdown Add a red background color to navbar links on hover --*/
       .navbar a:hover, .dropdown:hover .dropbtn {
            background-color: ;
       }

             /*--CSS Navbar-course-Dropdown content (hidden by default) --*/
       .dropdown-content {
           display: none;
           position: absolute;
           background-color: #fff;
           width: 100%;

           left: 0;
           box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
           z-index: 1;
       }

            /* --CSS Navbar-course-Mega Menu header, if needed --*/
      .dropdown-content .header {
            background: -webkit-linear-gradient(3deg,#ff0000,#ffe300,#14ff00,#00fffb,#787eb900);
            padding: 16px;
            color: black;
       }

          .dropdown-content .header1 {
            background: -webkit-linear-gradient(3deg,#ff0000,#ffe300,#14ff00,#00fffb,#787eb900);
            padding: 10px;
            color: black;
                    text-align:center;
       }


            /* --CSS Navbar-course-Mega Menu Show the dropdown menu on hover --*/
      .dropdown:hover .dropdown-content {
           display: block;
       }

           /* --CSS Navbar-course-Mega Menu Create three equal columns that floats next to each other --*/
       .column {
           float: left;
           width: 31.96%;
           padding: 10px;
           background-color: #ccc;
           height: 250px;
       }

            /*--CSS Navbar-course-Mega Menu Style links inside the columns --*/
       .column a {
           float: none;
           color: black;
           padding: 10px;
           text-decoration: none;
           display: block;
           text-align: left;
       }

            /* --CSS Navbar-course-Mega Menu Add a background color on hover --*/
       .column a:hover {

           background: -webkit-linear-gradient(3deg,#00fff2,#ffe300,#14ff00,#ff0000,#787eb900);
       }

            /* --CSS Navbar-course-Mega Menu Clear floats after the columns --*/
      .row:after {
          content: "";
          display: table;
          clear: both;
       }

             /* --CSS Navbar-search--*/
            #search {
                  padding: 5px;
                  font-size: 17px;
                  border: 3px solid black;
                  border-radius: 9px;
            }



              /* --CSS text-big(h1)--*/
            .text-big {
                  font-family: 'Piazzolla', serif;
                  font-weight: bold;
                  font-size: 35px;
            }

              /* --CSS text-small--*/
            .text-small {
                  font-size: 18px;
            }

              /* --CSS Navbar-search-button--*/
            .btn {
                  padding: 8px 20px;
                  margin: 7px 0;
                  border: 3px solid #3105ed;
                  border-radius: 8px;
                  background: -webkit-linear-gradient(3deg,#ff0000,#ffe300,#14ff00,#00fffb,#787eb900);
                  color: #000;font-weight:bold; font-size:14px;
                  cursor: pointer;
            }

            .btn-sm {
                  padding: 6px 10px;
                  vertical-align: middle;
            }


                   /* --CSS Navbar-section-1--*/
            .section-1 {
               background-color:#00ffbc;
                  height: 400px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  max-width: 100%;
                  margin: auto;
            }

            .section-left {
                  flex-direction: row-reverse;
            }

            .paras {
                  padding: 0px 65px;
            }

                /* --CSS Navbar-section-3-image--*/
            .thumbnail img {
                  width: 250px;
                  border: 2px solid black;
                  border-radius: 26px;
                  margin-top: 19px;
                  margin-right:80px;
            }

            .center {
                  text-align: center;
            }



                   /* --CSS Navbar-section-2--*/
            .section-2 {
                background-color:#b7ff00;
                  height: 400px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  max-width: 100%;
                  margin: auto;
            }

            .section-left {
                  flex-direction: row-reverse;
            }

            .paras {
                  padding: 0px 65px;
            }

                /* --CSS Navbar-section-3-image--*/
            .thumbnail img {
                  width: 250px;
                  border: 2px solid black;
                  border-radius: 26px;
                  margin-top: 19px;
                  margin-left:80px;
            }

            .center {
                  text-align: center;
            }


               /* --CSS Navbar-section-3--*/
            .section-3 {
                  height: 400px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  max-width: 100%;
                  margin: auto;
            }

            .section-left {
                  flex-direction: row-reverse;
            }

            .paras {
                  padding: 0px 65px;
            }

                /* --CSS Navbar-section-3-image--*/
            .thumbnail img {
                  width: 250px;
                  border: 2px solid black;
                  border-radius: 26px;
                  margin-top: 19px;
                  margin-left:80px;
                  margin-right:80px;
            }

            .center {
                  text-align: center;
            }


          /* --CSS section-4--*/
            .section-4 {
                  background-color: yellow;
                  height: 400px;
            }

                 /* --CSS section-5--*/
            .section-5 {
                  background-color: lightgreen;
                  height: 400px;
            }
             /* --CSS box-main--*/
            .box-main {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  color: black;
                  max-width: 80%;
                  margin: auto;
                  height: 80%;
            }

            .firsthalf {
                  width: 100%;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
            }

            .secondhalf {
                  width: 30%;
            }

            .secondhalf img {
                  width: 70%;
                  border: 4px solid white;
                  border-radius: 150px;
                  display: block;
                  margin: auto;
            }


              /* --CSS footer-text--*/
            .text-footer {
                  text-align: center;
                  padding: 30px 0;
                  font-family: 'Ubuntu', sans-serif;
                  display: flex;
                  justify-content: center;
                  color: #000;
                  font-size:16px;
                  font-weight:bold;
            }

               /* --CSS section button--*/
            .button {
          background-color: #4CAF50; /* Green */
          border: none;
          color: white;
          padding: 6px 10px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 16px;
          float: right;
          border-radius:15px;
          margin: 4px 2px;
          transition-duration: 0.4s;
          cursor: pointer;
       }




                /* --CSS Login signup button--*/
          .btn1 {
            border: none;
            background: none;
            cursor: pointer;
            padding: 8px 8px;
            display: inline-block;
            margin: 5px 5px;
            letter-spacing: 1px;
            font-weight: 1000;
            outline: none;
           /* position: relative;*/
                    border-radius:8px;
       }
       .centered{
            position:absolute;
            left:63%;
            top:15%;
       }

       .btn1 {
            border: 3px solid blue;
            color: Red;


       }
       .btn1:hover {
            color: #000;
       }
      .btn1::after {
            content: '';
            position: absolute;
            z-index: -1;
                    -webkit-transition: all 1s;
            -moz-transition: all 1s;
            transition: all 1s;

       }
      .btn1:after {
            width: 0%;
            height: 100%;
            top: 0;
            left: 0;
            background: -webkit-linear-gradient(3deg,#ff0000,#ffe300,#14ff00,#00fffb,#0005ff);
       }
       .btn1:hover:after, .btn:active:after {
             width: 100%;
       }



         a:link {
        color: #000;
        font-weight:bold;
        background-color: transparent;
        text-decoration: none;
      }
      a:visited {
        color: ;
        background-color: transparent;
        text-decoration: none;
     }
     a:hover {
     color: red;
     background-color: transparent;
     text-decoration: underline;
}
	
      /*--Button style--*/
	  .frame {
             width: 90%;
             margin: 40px auto;
             text-align: center;
    }
      button {
      margin: 20px;
    }
     .custom-btn {
       width: 130px;
       height: 40px;
       color: #fff;
       border-radius: 5px;
       padding: 10px 25px;
       font-family: 'Lato', sans-serif;
       font-weight: 500;
       background: transparent;
       cursor: pointer;
       transition: all 0.3s ease;
       position: relative;
       display: inline-block;
       box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
       7px 7px 20px 0px rgba(0,0,0,.1),
       4px 4px 5px 0px rgba(0,0,0,.1);
       outline: none;
       }
	   
	   /* Button style No.9 */
.btn-9 {
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
}
.btn-9:after {
  position: absolute;
  content: " ";
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
   background-color: #1fd1f9;
background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
  transition: all 0.3s ease;
}
.btn-9:hover {
  background: transparent;
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
  color: #fff;
}
.btn-9:hover:after {
  -webkit-transform: scale(2) rotate(180deg);
  transform: scale(2) rotate(180deg);
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
}

/* Button style No.12 */
.btn-12{
  position: relative;
  right: 20px;
  bottom: 20px;
  border:none;
  box-shadow: none;
  width: 130px;
  height: 40px;
  float: right;
  font-size:14px;
  font-weight:bold;
  line-height: 42px;
  -webkit-perspective: 230px;
  perspective: 230px;
}
.btn-12 span {
  background: rgb(0,172,238);
background: linear-gradient(0deg, rgb(0 238 35) 0%, rgb(251 2 2) 100%);
  display: block;
  position: absolute;
  width: 130px;
  height: 40px;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  border-radius: 5px;
  margin:0;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.btn-12 span:nth-child(1) {
  box-shadow:
   -7px -7px 20px 0px #fff9,
   -4px -4px 5px 0px #fff9,
   7px 7px 20px 0px #0002,
   4px 4px 5px 0px #0001;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}
.btn-12 span:nth-child(2) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}
.btn-12:hover span:nth-child(1) {
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.btn-12:hover span:nth-child(2) {
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
 color: transparent;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}

/* Button style No.7 */
.btn-7 {
background: linear-gradient(0deg, rgb(0 192 255) 0%, rgb(3 232 17) 100%);
  line-height: 42px;
  padding: 0;
  float: right;
  border: none;
}
.btn-7 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-7:before,
.btn-7:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: rgba(251,75,2,1);
  box-shadow:
   -7px -7px 20px 0px rgba(255,255,255,.9),
   -4px -4px 5px 0px rgba(255,255,255,.9),
   7px 7px 20px 0px rgba(0,0,0,.2),
   4px 4px 5px 0px rgba(0,0,0,.3);
  transition: all 0.3s ease;
}
.btn-7:before{
   height: 0%;
   width: 2px;
}
.btn-7:after {
  width: 0%;
  height: 2px;
}
.btn-7:hover{
  color: rgba(251,75,2,1);
  background: transparent;
}
.btn-7:hover:before {
  height: 100%;
}
.btn-7:hover:after {
  width: 100%;
}
.btn-7 span:before,
.btn-7 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: rgba(251,75,2,1);
  box-shadow:
   -7px -7px 20px 0px rgba(255,255,255,.9),
   -4px -4px 5px 0px rgba(255,255,255,.9),
   7px 7px 20px 0px rgba(0,0,0,.2),
   4px 4px 5px 0px rgba(0,0,0,.3);
  transition: all 0.3s ease;
}
.btn-7 span:before {
  width: 2px;
  height: 0%;
}
.btn-7 span:after {
  height: 2px;
  width: 0%;
}
.btn-7 span:hover:before {
  height: 100%;
}
.btn-7 span:hover:after {
  width: 100%;
}


/* Button style No.14 */
.btn-14 {
  background: rgb(255,151,0);
  border: none;
  float: right;
  z-index: 0;
  
  
}
.btn-14:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;

  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
  background-color: #eaf818;
  background-image: linear-gradient(315deg, #ee096a 0%, #00ffb3 74%);
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5);
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  transition: all 0.3s ease;
}
.btn-14:hover {
  color: #000;
}
.btn-14:hover:after {
  top: auto;
  bottom: 0;
  height: 100%;
}
.btn-14:active {
  top: 2px;
}

/* Button style No.15 */
.btn-15 {
  background: #00ffff;
  border: none;
  z-index: 1;
  float: right;
}
.btn-15:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background-color: #c0e708;
  border-radius: 5px;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  transition: all 0.3s ease;
}
.btn-15:hover {
  color: #fff;
}
.btn-15:hover:after {
  left: 0;
  width: 100%;
}
.btn-15:active {
  top: 2px;
}