/* 
FONT SIZE SYSTEM (px):
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98


-SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  /* font-size: 10px; */
  /* 10px/16px = 0.625 == 62.5 */
  /* Percentage of user's browser font-size setting */
  font-size: 62.5%;
  font-family: sans-serif;
}
.container {
  max-width: 90rem;
  padding: 3.2rem 3.2rem;
  margin: 0 auto;
}
.grid {
  /* display: grid;
  row-gap: 6.4rem;
  column-gap: 6.4rem;
  margin-bottom: 9.6rem; */
}
.grid--2--cols {
  grid-template-columns: repeat(2, 1fr);
}
.grid--3--cols {
  grid-template-columns: repeat(3, 1fr);
}
.grid--4--cols {
  grid-template-columns: repeat(4, 1fr);
}

.section {
  /* margin-bottom: 6.4rem; */
  display: flex;
  flex-direction: column;
  row-gap: 2.4rem;
  /* align-items: center; */
}

.section-title-text {
  display: flex;
  column-gap: 1.6rem;
  align-items: center;
  /* margin-bottom: 4.8rem; */
  padding: 2.4rem;
}
.single-letter {
  background-color: blue;
  color: white;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  display: flex;
  font-size: 1.6rem;
  justify-content: center;
  align-items: center;
}
.section-title span {
  font-weight: lighter;
}
.icon-1 {
  width: 2.4rem;
  height: 2.4rem;
  /* fill: blue; */
  stroke: blue;
}
.icon-2 {
  width: 2.4rem;
  height: 2.4rem;
  stroke: #999;
}
.icon-3 {
  width: 2.4rem;
  height: 2.4rem;
  fill: #ccccff;
  stroke: #ccccff;
}
.line {
  max-width: 11.2rem;
  margin-left: 2.4rem;
  /* border-bottom: 0.1rem solid #999; */
  border-bottom: 0.1rem solid #9993;
}
.nav-sec {
  display: flex;
  flex-direction: column;
  row-gap: 2.4rem;
  /* margin-bottom: 2.4rem; */
  padding: 2.4rem;
}
.nav--sec--1 {
  display: flex;
  column-gap: 1.6rem;
  background-color: #ccccff91;
  /* margin-right: auto; */
  /* padding-right: 4.8rem; */
  /* padding-top: 0.6rem; */
  padding-bottom: 0.6rem;
  /* padding-left: 2.4rem; */
  align-items: center;
  border-radius: 0.8rem;
}
.nav--sec--2 {
  display: flex;
  column-gap: 1.6rem;
  align-items: center;
}
.nav-sec-a {
  display: flex;
  flex-direction: column;
  row-gap: 2.4rem;
  /* margin-top: 2.4rem; */
  padding: 2.4rem;
}
.icon-fol {
  height: 6.4rem;
  /* fill: blue; */
  stroke: blue;
}
.para span {
  color: blue;
  text-align: center;
}

.btn-ca {
  padding: 0.8rem 1.6rem;
  background-color: #0000ff;
  cursor: pointer;
  border-radius: 0.8rem;
  color: white;
  text-decoration: none;
}
.btn-ca:hover {
  background-color: white;
  color: #999;
  transition: all 0.3s;
}
.files {
  display: flex;
  flex-direction: column;
  row-gap: 2.4rem;
  align-items: center;
}
.nav-bottom {
  background-color: #ccccff;
  display: inline-block;
  padding: 2.4rem;
  background: linear-gradient(#e6e6ff00, #ccccffc2);
  border-radius: 1.6rem;
  padding: 2.4rem;
}

/* ************************* */
/* MAIN COLUMN ROW -1  */
/* ************************* */
/* .container {
  padding: 3.2rem 3.2rem;
} */
.image img {
  height: 3.2rem;
  width: 3.2rem;
  border-radius: 50%;
  border: 0.2rem solid blue;
}
.rows-1 {
  display: flex;
  /* background-color: antiquewhite; */
  justify-content: space-between;
  margin-bottom: 4.8rem;
  padding-left: 3.2rem;
  padding-right: 3.2rem;
}
.for-each--1 {
  display: flex;
  align-items: center;
  column-gap: 0.8rem;
}
.for-each--2 {
  display: flex;
  align-items: center;
  column-gap: 0.8rem;
  border: 1px solid rgba(153, 153, 153, 0.13);
  border-radius: 1.4rem;
}
.Grids {
  color: blue;
}
.join {
  border: none;
  border-radius: none;
  margin-left: 0.8rem;
  margin-right: 0.8rem;
}
.join1 {
  border: 1px solid rgba(153, 153, 153, 0.13);
  border-radius: 1.6rem;
  display: flex;
  align-items: center;
  column-gap: 0.8rem;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  background-color: #ccccff;
}
/* .for-each--3 {
  display: flex;
  align-items: center;
  column-gap: 0.8rem;
  margin-right: 2.4rem;
} */
.for-each--4 {
  display: flex;
  align-items: center;
  column-gap: 1.6rem;
}
.rowof-1 {
  display: flex;
  column-gap: 1.6rem;
}

/* ROWS-----2 */

.rows-2 {
  display: flex;
  align-items: center;
  /* background-color: darkgray; */
  /* margin-bottom: 4.8rem; */
  justify-content: space-between;
  padding-left: 3.2rem;
  padding-right: 3.2rem;
}
.icon-4 {
  width: 2.4rem;
  height: 2.4rem;
  color: white;
}
.cloud-flex {
  display: flex;
  align-items: center;
  column-gap: 1.6rem;
  background-color: blue;
  border-radius: 16px;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
  padding-left: 0.8rem;
  padding-right: 1.8rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  color: white;
}

/* ROWS------3 */
.row-3-flex {
  display: flex;
  column-gap: 1.6rem;
  align-items: center;
  /* margin-bottom: 4.8rem; */
  justify-content: center;
}
.box-1 {
  /* display: flex; */
  /* flex-direction: column; */
  row-gap: 3.6rem;
  display: inline-block;
  background-color: blue;
  padding: 2.6rem;
  border-radius: 0.8rem;
  /* position: relative; */
}
.image-1 img {
  background-color: white;
  height: 2.4rem;
  max-width: 2.4rem;
  border-radius: 0.4rem;
  margin-bottom: 3.2rem;
}
.space-btwn {
  display: flex;
  flex-direction: column;
  row-gap: 0.6rem;
  color: white;
}
.for-text {
  font-size: 1.6rem;
}
.line-1 {
  max-width: 11.2rem;
  background-color: #0000ff;
  padding-top: 0.12rem;
  padding-bottom: 0.12rem;
}

/* .for-rect-line {
  max-width: 20%;
  margin: 0.1rem 0 0.2rem;
  background-color: #0000ff;
}
.for-rect-line span {
  padding-left: 0.1rem;
  background-color: antiquewhite;
} */
.loader {
  max-width: 100%;
  background-color: white;
  border-radius: 0.4rem;
  overflow: hidden;
}
.loader__element {
  text-align: right;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  color: white;
  border-radius: 0.4rem;
}
.ele {
  width: 60%;
  background-color: rgb(252, 191, 111);
}
.gb {
  display: flex;

  justify-content: space-between;
}

/* box-2 */
.image-2 {
  display: flex;
  column-gap: 4.8rem;
}
.box-2 {
  row-gap: 3.6rem;
  display: inline-block;
  background-color: white;
  padding: 2rem;
  border-radius: 0.8rem;
}
.image-2 img {
  background-color: #0bc1f421;
  height: 2.4rem;
  max-width: 2.4rem;
  border-radius: 0.4rem;
  margin-bottom: 3.2rem;
}
.space-btwn1 {
  display: flex;
  flex-direction: column;
  row-gap: 0.6rem;
  color: white;
}

.inside-el {
  display: flex;
  flex-direction: column;
  row-gap: 0.6rem;
}
.for-text2 {
  font-size: 1.6rem;
  color: black;
}

.loader1 {
  max-width: 100%;
  background-color: #ccccff;
  border-radius: 0.4rem;
  overflow: hidden;
}
.loader__element1 {
  text-align: right;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  color: blue;
  border-radius: 0.4rem;
}
.ele1 {
  width: 35%;
  background-color: blue;
}
.gb1 {
  display: flex;
  column-gap: 3.2rem;
  justify-content: space-between;
  color: black;
}
/* box-3 */
.image-3 {
  display: flex;
  column-gap: 4.8rem;
}
.box-3 {
  row-gap: 3.6rem;
  display: inline-block;
  background-color: white;
  padding: 2rem;
  border-radius: 0.8rem;
}
.image-3 img {
  background-color: #0bc1f421;
  height: 2.4rem;
  max-width: 2.4rem;
  border-radius: 0.4rem;
  margin-bottom: 3.2rem;
}
.space-btwn2 {
  display: flex;
  flex-direction: column;
  row-gap: 0.6rem;
  color: white;
}
.for-text3 {
  font-size: 1.6rem;
  color: black;
}

.loader2 {
  max-width: 100%;
  background-color: #ccccff;
  border-radius: 0.4rem;
  overflow: hidden;
}
.loader__element2 {
  text-align: right;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  color: blue;
  border-radius: 0.4rem;
}
.ele2 {
  width: 80%;
  background-color: blue;
}
.gb2 {
  display: flex;
  column-gap: 3.2rem;
  justify-content: space-between;
  color: black;
}
/* Row-------------4 */
.icon-row {
  width: 1.6rem;
  height: 1.6rem;
  stroke: #999;
}
.row-4 {
  display: flex;
  align-items: center;
}
/* Row---------5----- */
.name img {
  height: 2.4rem;
  max-width: 2.4rem;
}
.icon-l-1 {
  width: 1.6rem;
  height: 1.6rem;
  color: #0000ff;
}
.icon-l-2 {
  width: 1.6rem;
  height: 1.6rem;
  color: rgba(153, 153, 153, 0.466);
}

/* ROW ------- TOP */
.row-top {
  display: flex;
  justify-content: space-between;
  /* margin-bottom: 2.4rem; */
}
.name {
  margin-left: 3.2rem;
}
.members-1 {
  margin-left: 9rem;
  margin-right: -5rem;
}
.modified {
  margin-right: 9rem;
}
/* First (Name) and (pdf) */

.for-image-in img {
  height: 1.2rem;
  max-width: 1.2rem;
}
.for-image-in {
  display: flex;
  flex-direction: column;
  row-gap: 1.6rem;
}
.projects {
  display: flex;
  flex-direction: column;
  row-gap: 1.6rem;
}
.members {
  display: flex;
  flex-direction: column;
  row-gap: 1.6rem;
  color: rgba(153, 153, 153, 0.8);
}
.in-modif {
  display: flex;
  flex-direction: column;
  row-gap: 1.6rem;
  color: rgba(153, 153, 153, 0.8);
}
.for-l-icons {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.flexing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* background-color: antiquewhite; */
  padding: 3.2rem;
}

/* -----ROW----5-------ALTERING-----IN */
/* .row-top-1 {
  display: flex;

  align-items: center;
  justify-content: space-between;
}
.img-for-in img {
  height: 1.2rem;
  max-width: 1.2rem;
} */

.full-rows {
  background-color: #ccccff40;
  padding: 3.2rem;
  border-radius: 1.6rem;
}

.for-image-in-img,
.for-projects,
.for-mem,
.in-modif-date,
.for-l-icons-el {
  /* background-color: aqua; */
  display: inline-block;
}

/* line-454----- wnt to move down the section */

/* .bars {
  max-width: 10rem;
  height: 10rem;
  border-radius: 10rem;
  border: 3px solid gray;
  background-color: antiquewhite;
  /* display: block; */

/* .bar__element {
  max-width: 20rem;
  height: 10rem;
  background-color: gold;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  /* border: 10px solid blueviolet; */

.ele-bar {
}
.small-text {
  color: rgba(153, 153, 153, 0.8);
  margin-bottom: 2.4rem;
}
.line {
  max-width: 23.2rem;
  /* margin-left: 0.4rem; */
  border-bottom: 0.1rem solid #9993;
  /* margin-bottom: 2.4rem; */
}
.line1 {
  max-width: 23.2rem;
  margin-left: 0.4rem;
  border-bottom: 0.1rem solid #9993;
  margin-bottom: 2.4rem;
}

/* For In Icons */
.iconss {
  display: inline-block;
}
.for-in-icons {
  display: flex;
  column-gap: 0.6rem;
  border: 1px solid rgba(52, 151, 243, 0.192);
  /* display: inline-block; */
  padding: 0.8rem;
  border-radius: 0.8rem;
  align-items: center;
}
.icons-1-1 img {
  width: 3.8rem;
  height: 3.8rem;
  /* fill: blue; */
  stroke: blue;
  background-color: #ccccff;
  padding: 0.6rem;
  border-radius: 0.8rem;
}
.aside-text {
}
.in-flex {
  display: flex;
  column-gap: 9.6rem;
  align-items: center;

  line-height: 1.8;
}
.sml {
  color: rgba(153, 153, 153, 0.8);
}
.blue-text {
  color: rgba(52, 151, 243, 0.7677);
  font-weight: bold;
}
/* For row ---------2 */

.for-in-icons-2 {
  display: flex;
  column-gap: 0.6rem;
  justify-content: space-between;
  border: 1px solid rgba(52, 151, 243, 0.192);
  /* display: inline-block; */
  padding: 0.8rem;
  border-radius: 0.8rem;
  align-items: center;
}
.icons-1-2 img {
  width: 3.8rem;
  height: 3.8rem;
  /* fill: blue; */
  stroke: blue;
  background-color: rgba(52, 151, 243, 0.082);
  padding: 0.6rem;
  border-radius: 0.8rem;
}
.in-flex-1 {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.icons-1-2 {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

/* For row---------3 */
.for-in-icons-3 {
  display: flex;
  column-gap: 0.6rem;
  border: 1px solid rgba(52, 151, 243, 0.192);
  /* display: inline-block; */
  padding: 0.8rem;
  border-radius: 0.8rem;
  align-items: center;
}
.icons-1-3 img {
  width: 3.8rem;
  height: 3.8rem;
  /* fill: blue; */
  /* stroke: blue; */
  background-color: rgba(255, 0, 0, 0.082);
  padding: 0.6rem;
  border-radius: 8px;
}
.in-flex-2 {
  display: flex;
  column-gap: 8rem;
  align-items: center;
  line-height: 1.8;
}

/* for row-4 */

.for-in-icons-4 {
  display: flex;
  column-gap: 0.6rem;
  border: 1px solid rgba(52, 151, 243, 0.192);
  /* display: inline-block; */
  padding: 0.8rem;
  border-radius: 0.8rem;
  align-items: center;
}
.icons-1-4 img {
  width: 3.8rem;
  height: 3.8rem;
  /* fill: blue; */
  /* stroke: blue; */
  background-color: rgba(255, 251, 0, 0.137);
  padding: 0.6rem;
  border-radius: 8px;
}
.in-flex-3 {
  display: flex;
  column-gap: 9rem;
  align-items: center;
  line-height: 1.8;
}

/* for row 5 */

.for-in-icons-5 {
  display: flex;
  column-gap: 0.6rem;
  border: 1px solid rgba(52, 151, 243, 0.192);
  /* display: inline-block; */
  padding: 0.8rem;
  border-radius: 0.8rem;
  align-items: center;
}
.icons-1-5 img {
  width: 3.8rem;
  height: 3.8rem;
  /* fill: blue; */
  /* stroke: blue; */
  background-color: rgba(0, 204, 255, 0.315);
  padding: 0.6rem;
  border-radius: 8px;
}
.in-flex-4 {
  display: flex;
  column-gap: 7.2rem;
  align-items: center;
  line-height: 1.8;
}
/* aside flexing */

/* aside {
  display: flex;
} */
.full-cont-1 {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  /* flex-direction: column; */
  /* background-color: #ccccff; */
  align-items: center;
  background-color: white;
  /* padding: 3.2rem;
  margin: 3.2rem; */
  border-radius: 5rem;
}
.spl {
  margin: auto 0rem;
  padding: 3.2rem 0rem;
}
.iconss {
  display: flex;
  flex-direction: column;
  row-gap: 2.4rem;
}

/* confusing-part */
.part-1 {
  display: flex;
  flex-direction: column;
  row-gap: 2.4rem;
  align-items: center;
}
.bars1 {
  position: relative;
  margin: 0.4rem;
  float: left;
  text-align: center;
}
.bar__element1 {
  /* Wraps the rotating .bar */
  /* position: relative; */
  /* overflow: hidden; Comment this line to understand the trick */
  /* width: 90px; */
  /* height: 45px; Half circle (overflow) */
  /* margin-bottom: -14px; bring the numbers up */
}
.ele-bar1 {
  bottom: 1rem;
  /* left: 0px; */
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1.8rem solid rgba(128, 128, 128, 0.171);
  /* border-bottom-color: gold; */
  border-right-color: gold;
  border-left-color: gold;
  border-top-color: gold;
  transform: rotate(225deg);
}
.Light-theme {
  margin-top: 9.6rem;
  margin-left: 8rem;
  margin-right: 8rem;
  margin-bottom: 6.4rem;
  position: relative;
  /* padding: 3.2rem; */
}
.inbw {
  display: flex;
  flex-direction: row;
  column-gap: 1.6rem;
  justify-content: center;
  padding-bottom: 6.4rem;
  font-size: 6.2rem;
}
.in-blue-white {
  display: flex;
  flex-direction: row;
  column-gap: 0.8rem;
}
.in-white-blue {
  display: flex;
  flex-direction: row;
  column-gap: 0.8rem;
}
.for-blue {
  color: blue;
}
.for-white {
  color: white;
}
.head-img img {
  height: 15.2rem;
  width: 15.2rem;
  opacity: 0.2;
  position: absolute;
  left: 30rem;
  top: -5rem;
  /* position: fixed; */
}
html {
  background-color: #ccccff;
}
/* .contai {
  padding: 0, auto;
} */