/*   ? FROM HERE ALL THE COMMON CHANGES
------------------------------------*/
* {
  margin: 0;
  padding: 0;
  font-family: "Raleway", sans-serif;
  scroll-behavior: smooth;
}
*::selection {
  color: black;
  background-color: #00c8ff31;
}

/* *global changes for navbar and footer anchor tags*/
.navbar a {
  color: rgb(255, 255, 255) !important;
  transition: all 0.3s ease-in-out;
}
.navbar a:hover {
  color: rgb(243, 255, 75) !important;
  font-family: "Raleway", sans-serif;
}
.footer_bottom a:hover {
  color: rgb(243, 255, 75) !important;
  font-family: "Raleway", sans-serif;
}
.footer_bottom a {
  color: rgb(255, 255, 255) !important;
  transition: all 0.3s ease-in-out;
}
/* *global changes for navbar and footer anchor tags*/
svg {
  align-items: baseline;
  align-self: center;
  align-content: center;
  margin: 0 auto;
}
/***Button's focus pe colour remove in bootstrap*/
.btn:focus {
  outline: none;
  box-shadow: none;
}
#commonbuttons:focus {
  outline: none;
  box-shadow: none;
}
/**imp feature hai ye*/
i:hover {
  transform: scale(1.1);
  opacity: 0.6;
}
svg:hover {
  transform: scale(1.1);
  opacity: 0.6;
}
h3 {
  padding: 2% 2% 2% 2%;
}
h4 {
  padding: 2% 0% 2% 0%;
}
h5 {
  padding: 0% 0% 2% 0%;
}
.box-description {
  background-color: #e3f3ee;
}
/*todo Navbar contents from here*/
.navbar-nav li {
  padding: 0 10px;
}
.navbar-nav li a {
  text-align: right;
  color: #fff;
  font-size: large;
  font-weight: 600;
}
.navbar {
  background: -webkit-linear-gradient(right, #0072ff, #00c6ff);
}
#leftlogo img {
  width: 200px;
  height: 70px;
}
@media only screen and (max-width: 600px) {
  #leftlogo img {
    width: 100px;
    height: 35px;
  }
}
.navbar-toggler {
  background-color: #0ee3ff !important;
  border: none !important;
}
#navbar-toggler-icon {
  color: black;
}
.col-sm-2 svg {
  align-items: center;
}
/**-THE UNDERLINE EFFECT OF LINK of particular page-*/
a.left {
  position: relative;
}
a.left:before {
  content: "";
  position: absolute;
  width: 0;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: rgb(255, 255, 255);
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}
a.left:hover:before {
  visibility: visible;
  width: 100%;
}
/* **for the link with highlight for he particular page*/
a.highlight {
  color: white !important;
}
/*
 ! Navbar contents end from here
*/
/** the written stuff below navbar*/
.box-for-names {
  margin: 10% 3% 10% 3%;
  padding: 5%;
}
.below-navbar-container {
  background: -webkit-linear-gradient(right, #0072ff, #00c6ff);
}
#commonbuttons {
  padding: 2%;
  border: none;
  border-radius: 25px;
  color: white;
  font-size: 18px;
  background: -webkit-linear-gradient(right, hsl(302, 97%, 46%), #6156f9e3);
  width: 200px;
  transition: all 0.3s ease-in;
  border: none;
}
#commonbuttons:hover {
  padding: 2%;
  border: none;
  border-radius: 25px;
  color: white;
  font-size: 18px;
  background: -webkit-linear-gradient(left, #1a129f, #6156f9e3);
  width: 200px;
  border-block-style: none;
  border: none;
  transform: scale(1.05);
}
/*
    todo below the navbar right side svg
*/
#right_below_navbar_svg img {
  width: 100%;
  height: auto;
}
#hello-world h1 {
  color: #fff;
  font-size: 70px;
}
#hello-world h4 {
  color: white;
  font-size: 30px;
  font-weight: 500;
}
@media only screen and (max-width: 991px) {
  #hello-world h1 {
    color: #fff;
    font-size: 50px;
  }
  #hello-world h4 {
    color: white;
    font-size: 25px;
    font-weight: 500;
  }
}
@media only screen and (max-width: 1233px) {
  #hello-world h1 {
    color: #fff;
    font-size: 60px;
  }

  #hello-world h4 {
    color: white;
    font-size: 30px;
    font-weight: 500;
  }
}
@media only screen and (max-width: 600px) {
  #hello-world h1 {
    color: #fff;
    font-size: 50px;
  }

  #hello-world h4 {
    color: white;
    font-size: 30px;
    font-weight: 500;
  }
}
/**the Computer the Svg and banner*/
#belowthehomepagebanner img {
  width: 100%;
  height: 500px;
}
.text-konechelo {
  margin-top: 5%;
}
.paragraphinbody {
  font-size: 18px;
  font-weight: 500;
}
/***waves part below slider */
.outer_box_for_waves {
  overflow: hidden;
  color: aliceblue;
  background: -webkit-linear-gradient(right, #0072ff, #00c6ff);
}
/***footer section of the website*/
.footer_bottom {
  background: -webkit-linear-gradient(right, #0072ff, #00c6ff);
}
.footer_about_section h3 {
  color: #fff;
}
.footer_quicklinks_section h3 {
  color: #fff;
}
.footer_contact_section h3 {
  color: #fff;
}
.footer_about_section p {
  color: #fff;
}

.footer_quicklinks_section p {
  color: #fff;
}

.footer_contact_section p {
  color: #fff;
}
.footer_about_section p {
  font-size: 18px;
}
.footer-links li {
  list-style: none;
  font-size: 18px;
}
.footer-links li a {
  text-decoration: wavy;
}
/*social media stuff on footer*/
#github {
  color: #ffffff;
  padding: 5% 0% 5% 0%;
}
#github:hover {
  color: black;
  transform: scale(1.1);
}
#linkedin {
  color: #ffffff;
  padding: 5% 0% 5% 0%;
}
#linkedin:hover {
  color: #005f92;
  transform: scale(1.1);
}
#instagram {
  color: #ffffff;
  padding: 5% 0% 5% 0%;
}
#instagram:hover {
  color: #3c0044;
  transform: scale(1.1);
}
#twitter {
  color: #ffffff;
  padding: 5% 0% 5% 0%;
}
#twitter:hover {
  color: #1bffec;
  border: black;
  transform: scale(1.1);
}

/*
   *foooter end
*/