* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
}
.b-r {
  border: solid red 2px;
  /* background-color: red; */
}

.b-y {
  border: solid yellow 2px;
  /* background-color: yellow; */
}

.b-b {
  border: solid blue 2px;
  /* background-color: blue; */
}

.b-g {
  border: solid green 2px;
  /* background-color: green; */
}
.b-p {
  border: solid purple 2px;
  /* background-color: purple; */
}

/* CSS Styling starts from here */

:root {
  --primary-color: #2628aa;
  --auxiliary-primary-color: #3d52a0;
  --secondary-color: #7091e6;
  --auxiliary-secondary-color: #8697ca;
  --tertiary-color: #adbbda;
  --auxiliary-tertiary-color: #ede8f5;
  --dark-color: #000000;
  --dark-transparent: #111010c5;
  --bg-color: #f3f1f6;
  --bg-light: #fff;
  --danger: #ff0000;
}
/* Background color starts here */
.bg-primary {
  background-color: var(--primary-color);
}
.bg-aux-primary {
  background-color: var(--auxiliary-primary-color);
}
.bg-secondary {
  background-color: var(--secondary-color);
}
.bg-aux-secondary {
  background-color: var(--auxiliary-secondary-color);
}
.bg-tertiary {
  background-color: var(--tertiary-color);
}
.bg-aux-tertiary {
  background-color: var(--auxiliary-tertiary-color);
}
.bg-dark {
  background-color: var(--dark-color);
}
.bg-light {
  background-color: var(--bg-light);
}
.bg-dark-transparent {
  background-color: var(--dark-transparent);
}
/* Background color ends here */

/* Text color Starts here */
.tc-primary {
  color: var(--primary-color);
}
.tc-aux-primary {
  color: var(--auxiliary-primary-color);
}
.tc-secondary {
  color: var(--secondary-color);
}
.tc-aux-secondary {
  color: var(--auxiliary-secondary-color);
}
.tc-tertiary {
  color: var(--tertiary-color);
}
.tc-aux-tertiary {
  color: var(--auxiliary-tertiary-color);
}

/* Text color ends here */

/* Font size starts here */
.fs-0 {
  font-size: 0.8rem;
}
.fs-1 {
  font-size: 1rem;
}
.fs-2 {
  font-size: 1.25rem;
}
.fs-3 {
  font-size: 1.5rem;
}
.fs-4 {
  font-size: 1.75rem;
}
.fs-5 {
  font-size: 2rem;
}
.fs-6 {
  font-size: 2.25rem;
}
.fs-7 {
  font-size: 2.5rem;
}
.fs-8 {
  font-size: 2.75rem;
}
.fs-9 {
  font-size: 3rem;
}
.fs-10 {
  font-size: 3.25rem;
}
/* Font size ends here */

/* Font weight starts here */
.fw-1 {
  font-weight: 100;
}
.fw-2 {
  font-weight: 200;
}
.fw-3 {
  font-weight: 300;
}
.fw-4 {
  font-weight: 400;
}
.fw-5 {
  font-weight: 500;
}
.fw-6 {
  font-weight: 600;
}
.fw-7 {
  font-weight: 700;
}
.fw-8 {
  font-weight: 800;
}
.fw-9 {
  font-weight: 900;
}
/* Font weight ends here */

/* Text alingment starts header */
.center {
  text-align: center;
}
.left {
  text-align: left;
}
.right {
  text-align: right;
}
.justify {
  text-align: justify;
}
/* Text alingment ends header */

/* Display Styling Starts here */
.d-flex {
  display: flex;
}

.d-flex-col {
  display: flex;
  flex-direction: column;
}
.d-flex-col-rev {
  display: flex;
  flex-direction: column-reverse;
}
.hide {
  display: none;
}
.f-wrap {
  flex-wrap: wrap;
}
.f-grow {
  flex-grow: 1;
}
.f-grow-2 {
  flex-grow: 2;
}

.justify-between {
  justify-content: space-between;
}
.justify-end{
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-around {
  justify-content: space-around;
}

.align-center {
  align-items: center;
}

.aling-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}
/* Display Styling Ends here */

/* padding styling starts here */
.p-1 {
  padding: 0.1rem;
}

.p-2 {
  padding: 0.2rem;
}

.p-3 {
  padding: 0.3rem;
}

.p-4 {
  padding: 0.4rem;
}

.p-5 {
  padding: 0.5rem;
}

.p-6 {
  padding: 0.6rem;
}

.p-7 {
  padding: 0.7rem;
}
.p-8 {
  padding: 1rem;
}

.pt-1 {
  padding: 2rem;
}

.pt-2 {
  padding: 3rem;
}

.pt-3 {
  padding: 4rem;
}

.pt-4 {
  padding:5rem;
}

.pt-5 {
  padding: 6rem;
}

.pt-6 {
  padding: 7rem;
}

.pt-7 {
  padding: 8rem;
}
.pt-8 {
  padding: 9rem;
}
/* padding styling endshere */

/* margin styling starts here */
.m-1 {
  margin: 0.1rem;
}

.m-2 {
  margin: 0.2rem;
}

.m-3 {
  margin: 0.3rem;
}

.m-4 {
  margin: 0.4rem;
}

.m-5 {
  margin: 0.5rem;
}

.m-6 {
  margin: 0.6rem;
}

.m-7 {
  margin: 0.7rem;
}
.m-8 {
  margin: 1rem;
}

/* margin styling endshere */

/* width styling starts here */
.w-100 {
  width: 100%;
}
.w-80 {
  width: 80%;
}
.w-50 {
  width: 50%;
}
.w-30 {
  width: 30%;
}
.w-20 {
  width: 20%;
}
.w-10 {
  width: 130px;
}
.w-100vw{
  width: 100vw;
}
/* width styling ends here */

/* height styling starts here */
.h-100 {
  height: 100%;
}
.h-80 {
  height: 80%;
}
.h-50 {
  height: 50%;
}
.h-30 {
  height: 30%;
}
.h-10 {
  height: 130px;
}
.h-100vh{
  height: 100vh;
}
.h-150vh{
  height: 150vh;
}
/* height styling ends here */

/* Border styling starts here*/

/* Border styling ends here */

/* Border radius starts here */
.br-1 {
  border-radius: 1rem;
}
.br-2 {
  border-radius: 2rem;
}
.br-3 {
  border-radius: 3rem;
}
.br-4 {
  border-radius: 4rem;
}
.br-5 {
  border-radius: 5rem;
}
.br-6 {
  border-radius: 6rem;
}
.br-7 {
  border-radius: 7rem;
}

.btrr-1 {
  border-top-right-radius: 1rem;
}
.btrr-2 {
  border-top-right-radius: 2rem;
}
.btrr-3 {
  border-top-right-radius: 3rem;
}
.btrr-4 {
  border-top-right-radius: 4rem;
}
.btrr-5 {
  border-top-right-radius: 5rem;
}
.btrr-6 {
  border-top-right-radius: 6rem;
}
.btrr-7 {
  border-top-right-radius: 7rem;
}

.btlr-1 {
  border-top-left-radius: 1rem;
}
.btlr-2 {
  border-top-left-radius: 2rem;
}
.btlr-3 {
  border-top-left-radius: 3rem;
}
.btlr-4 {
  border-top-left-radius: 4rem;
}
.btlr-5 {
  border-top-left-radius: 5rem;
}
.btlr-6 {
  border-top-left-radius: 6rem;
}
.btlr-7 {
  border-top-left-radius: 7rem;
}
/* Border radius ends here */
.border-1 {
  border: 0.1rem solid;
}
.border-2 {
  border: 0.2rem solid;
}
.bc-light {
  border-color: var(--bg-light);
}
.bc-dark {
  border-color: var(--bg-dark);
}
/* Border styling starts header */

/*  Box shadow starts here */
/* .shadow-1{
	box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
} */
/* Box shadow End here */

/* Position styling starts here */
.relative {
  position: relative;
  left: 30px;
}
.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

/* Position styling ends here */

/* Floating styling starts here */
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.float-clear {
  clear: both;
}
/* Floating styling ends here */

/* Background styling starts here */
.bg-light {
  background-color: var(--auxiliary-tertiary-color);
}
.bg-dark {
  background-color: var(--dark-color);
}

/* Background styling ends here */

#menuSection {
  background-color: var(--dark-color);
  /* background-color: var(--bg-color); */
  position: fixed;
  top: 0rem;
  z-index: 100;
}

#logoText {
  text-transform: uppercase;
  color: var(--auxiliary-tertiary-color);
  font-size: 1.5rem;
}
#logoText + p {
  background-color: var(--auxiliary-tertiary-color);
  text-align: center;
  font-size: 0.8rem;
}

nav .wideScreen ol li {
  color: var(--auxiliary-tertiary-color);
  border-bottom: 0.2rem solid transparent;
  transition: all 0.6s ease-in-out;
  font-weight: bolder;
}

nav .wideScreen ol li:hover {
  border-bottom: 0.2rem solid var(--auxiliary-tertiary-color);
  transition: all 0.6s ease-in-out;
}

div ul li a img,
div ul + div img {
  width: 1.8rem;
  transition: transform 0.6s ease-in-out;
}

div ul li a img:hover,
div ul + div img:hover {
  transform: rotate(360deg);
}
main {
  padding-top: 3rem;
}
#chooseLanguageContainer:hover .languageChoice,
.languageChoice:hover {
  display: flex;
  flex-direction: column;
}
.cursor {
  cursor: pointer;
}
.languageChoice {
  top: 40px;
  background-color: var(--dark-color);
  color: var(--bg-light);

  z-index: 1;
}
.languageChoice a:hover {
  background-color: var(--auxiliary-tertiary-color);
  border-radius: 1rem;
  color: var(--dark-color);
}
.transition-none {
  transition: none;
}

#slideCarouselContainer {
  /* background-color: var(--secondary-color); */
  height: 60rem;
  width: 100%;
  position: relative;
  overflow: hidden;
}

@keyframes display {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  10% {
    transform: translateX(0);
    opacity: 1;
  }

  20% {
    transform: translateX(0);
    opacity: 1;
  }
  30% {
    transform: translateX(0);
    opacity: 1;
  }
  40% {
    transform: translateX(-100);
    opacity: 0;
  }

  60% {
    transform: translateX(-100%);
    opacity: 0;
  }

  80% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

#slideCarouselContainer > .slideCarouselInnerContainer {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  background-size: cover;
  background-position: center;
  animation: display 15s infinite;
  background-blend-mode: overlay;
}

#slideCarouselContainer > .slideCarouselInnerContainer:nth-child(1) {
  animation-delay: 14s;
}
#slideCarouselContainer > .slideCarouselInnerContainer:nth-child(2) {
  animation-delay: 10s;
}
#slideCarouselContainer > .slideCarouselInnerContainer:nth-child(3) {
  animation-delay: 5s;
}
#slideCarouselContainer > .slideCarouselInnerContainer:nth-child(4) {
  animation-delay: 1s;
  background-color: var(--dark-color);
}

.item1 {
  background-color: var(--bg-color);
}
.item1 img {
  width: 100%;
}

/* .item1 button {
  text-transform: uppercase;
} */

.item2 {
  background-image: url("../images/carousel images/productivity.jpg");
  background-color: #ffffff88;
}
.item2 .slogan2 {
  top: 5rem;
  left: -5rem;
  color: var(--auxiliary-tertiary-color);
}

.item2 .slogan3 {
  top: 9rem;
  right: -5rem;
  color: var(--auxiliary-tertiary-color);
}
.item2 .slogan4 {
  top: 13rem;
  left: 15rem;
  color: var(--auxiliary-tertiary-color);
}
.item2 .slogan5 {
  bottom: 5rem;
  left: -5rem;
  color: var(--auxiliary-tertiary-color);
}
.item2 .slogan6 {
  bottom: 9rem;
  right: -5rem;
  color: var(--auxiliary-tertiary-color);
}
.slogan2:hover,
.slogan3:hover,
.slogan4:hover,
.slogan5:hover,
.slogan6:hover {
  background-color: var(--primary-color);
  color: var(--auxiliary-tertiary-color);
  transition: all 0.5s ease-in-out;
}

.item2 button,/* .item1 button,*/ .item3 button, .item4 button{
  font-weight: bolder;
  transition: all 0.5s ease-in-out;
  background-color: var(--primary-color);
  color: var(--auxiliary-tertiary-color);
  text-transform: uppercase;
}

.item2 button:hover,
.item3 button:hover,
.item1 button:hover,
.item4 button:hover {
  background-color: var(--auxiliary-tertiary-color);
  transition: all 0.3s ease-in-out;
  color: var(--primary-color);
}

.item3 {
}
.item3 button {
  /* font-weight: bolder;
  text-transform: uppercase;
  transition: all 0.5s ease-in-out; */
}
.item4 {
  /* background-color: var(--dark-color); */
  /* animation-delay: 15s; */
}
.item4 img {
  width: 5rem;
  font-weight: bolder;
  transition: all 0.5s ease-in-out;
}
.item4 img:hover {
  transition: all 0.5s ease-in-out;
  transform: scale3d(-1, 1, 1);
  rotate: 360deg;
}

.item4 img.icon1 {
  top: 10rem;
  left: 12rem;
}
.item4 img.icon2 {
  top: 4rem;
  left: 32rem;
}
.item4 img.icon3 {
  top: 10rem;
  right: 12rem;
}
.item4 img.icon4 {
  bottom: 10rem;
  left: 12rem;
}
.item4 img.icon5 {
  bottom: 10rem;
  right: 12rem;
}
.item4 img.icon6 {
  top: 20rem;
  right: 1rem;
}
.item4 img.icon7 {
  bottom: 5rem;
  right: 32rem;
}
.item4 img.icon8 {
  bottom: 5rem;
  left: 32rem;
}
.item4 img.icon9 {
  top: 4rem;
  right: 32rem;
}
.item4 button {
  font-weight: bolder;
  text-transform: uppercase;
}
.item4 button:hover {
  color: var();
}

section#aboutMeContainer {
  background-color: var(--bg-color);
  padding-top: 3rem;
  /* background-color: var(--tertiary-color); */
}

/* #profExp */
#aboutMeContainer ul {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 4rem;

  /* list-style: square outside */
  /* border-top: solid var(--auxiliary-primary-color) 0.2rem;
  border-top-left-radius: 3rem;
  border-top-right-radius: 3rem; */
}
/* #profExp */
#aboutMeContainer ul li {
  padding: 1rem;
}

#aboutMeContainer p a {
}
#aboutMeContainer p a:hover {
  color: var(--primary-color);
  /* padding:1rem; */
}

#developmentToolsContainer {
  margin-top: 3rem;
}

.marqueeContainer {
  overflow: hidden;
}
.marqueeContent {
  /* display: flex; */
  animation: scrolling 10s linear infinite;
  /* overflow: hidden; */
}
.marqueeContent div {
  display: flex;
  flex: 0 0 calc((100vw - 20%) / 30);
  margin: 0 1rem;
}
.marqueeContent div img {
  width: 100%;
}
@keyframes scrolling {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translatex(-80vw);
  }
}

footer {
  background: linear-gradient(
    to top,
    var(--dark-color),
    var(--dark-transparent)
  );
}
.required {
  color: var(--danger);
}