*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

body{
  font-family: 'Poppins', sans-serif;
  background: rgb(13,17,23);
}

.navbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width:100%;
  padding:1.2rem 2.5rem;
  background-color: rgb(37,41,46);
  color:#fff;
}

.leftContainer{
  display: flex;
  align-items: center;
  gap:16px;
  font-size: 1.1rem;
}

.githubLogo{
  font-size: 2.4rem;
}

.title{
  display: flex;
  align-items: center;
  position: relative;
  display: inline-block;
}

.title:hover .container1,.title:hover .container2,
.title:hover .container3,.title:hover .container4,
.title:hover .container5{
  display: block;
}

.title>a{
  text-decoration: none;
  color:#fff;
}

.title>i{
  font-size: 12px;
  color:rgb(139, 138, 138);
  transition: transform 0.5s ease;
}

.title>i:hover{
  transform:translateY(7px);
}

.title>a:hover{
  color:rgb(199, 197, 197);
}

/* For Product Icons */

.container1{
  position: absolute;
  margin-top:20%;
  top:10.5%;
  width: 1000px;
  background: #fff;
  border-radius: 8px;
  display: none;
  z-index:1;
}

.dropContainer,.dropContainer2,
.dropContainer3{
  display: flex;
  flex-direction: row;
  padding:30px 20px;
}

.icon{
  display: flex;
  align-items: center;
  gap:20px;
  padding: 10px 25px;
  cursor: pointer;
}

.icon:hover{
  color: rgb(21, 196, 254);
}

.icon svg{
  height:30px;
  width:30px;
}

.icon svg path {
  fill: #999;
  transition: fill 0.3s ease;
}

.icon:hover svg path {
  fill: rgb(21, 196, 254);
}

.productOption>h4{
  color:#000;
}

.productOption>p{
  width:250px;
  color: rgb(101,110,120);
}

.productOption:hover>h4,
.productOption:hover>p{
  color: rgb(21, 196, 254);
}

.dropmiddle{
  margin-right:-1.5rem;
}

.dropright{
  border-left: 2px solid rgb(209, 212, 215);
  color:#000
}

.infoText{
  padding:10px 0 0 25px;
}

.textContainer{
  display: flex;
  flex-direction: column;
}

.textContainer>a{
  text-decoration: none;
  color: rgb(101,110,120);
  margin:12px 0;
}

.textContainer>a:hover{
  color: rgb(21, 196, 254);
}


/* For Solutions */

.container2{
  position: absolute;
  margin-top:20%;
  top:10.5%;
  width: 700px;
  background: #fff;
  border-radius: 8px;
  z-index:1;
  color: rgb(101,110,120);
  display: none;
}

.left2{
  padding-right:2rem;
  border-right: 2px solid rgb(204, 203, 203);
}

.topText2{
  margin-bottom:50px;
}

.topText2,.bottomText2{
  display: flex;
  flex-direction: column;
  gap:20px;
  font-size: 16px;
  color:#000;
}

.topText2>a,.bottomText2>a{
  text-decoration: none;
  color: rgb(95, 94, 94);
}

.topText2>a:hover,.bottomText2>a:hover,
.option2>a:hover,.textInfo2>a:hover{
  color: rgb(21, 196, 254);
}

.right2{
  margin-left: 2rem;
}

.right2>h4{
  margin-bottom:20px;
  color:#000;
}

.textInfo2{
  display: flex;
  flex-direction: column;
  gap:12px;
}

.textInfo2>a{
  text-decoration: none;
  color: rgb(95, 94, 94);
}

.option2{
  width:100%;
  background-color: rgb(204, 203, 203);
  padding:20px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.option2>a{
  text-decoration: none;
  color: rgb(37,41,46);
  font-weight: 600;
}

/* For Resources */

.container3{
  position: absolute;
  margin-top:20%;
  top:10.5%;
  width: 500px;
  background: #fff;
  border-radius: 8px;
  z-index:1;
  color: rgb(101,110,120);
  display: none;
}

.leftSection3>h4,.rightSection3>h4{
  margin-bottom:20px;
  color:#000;
}

.leftSection3{
  padding-left:30px;
}

.leftList3>li,.rightList3>li{
  list-style: none;
  margin:20px 0;
}

.divider{
  border-left: 2px solid rgb(204, 203, 203);
  height: auto;
  margin:0 20px;
}

.rightSection3{
  margin-left:30px;
}

.leftList3>li>a,.rightList3>li>a{
  text-decoration: none;
  color: rgb(95, 94, 94);
}

.leftList3>li>a:hover,.rightList3>li>a:hover{
  color: rgb(21, 196, 254);
}

/* Open Source */

.container4{
  position: absolute;
  margin-top:18%;
  top:10.5%;
  width: 300px;
  background: #fff;
  border-radius: 8px;
  z-index:1;
  color: rgb(101,110,120);
  display: none;
}

.dropContainer4{
  padding: 35px 20px;;
}

.divider2{
  border-bottom: 2px solid rgb(149, 147, 147);
  width: auto;
  margin:20px 0;
}

a>h4,.bottomSection>h4{
  margin-bottom:10px;
  color:#000;
}

.topSection>a,.middleSection>a,
.osList>li>a{
  text-decoration: none;
}

a>p,a>p,.osList>li>a{
  color: rgb(95, 94, 94);
}

a>p:hover,a>p:hover,.osList>li>a:hover{
  color: rgb(21, 196, 254);
}

.osList{
  padding-left:30px;
}

.osList>li{
  list-style: none;
  margin:12px 0;
}

/* Enterpise */

.container5{
  position: absolute;
  margin-top:20%;
  top:10.5%;
  width: 400px;
  background: #fff;
  border-radius: 8px;
  z-index:1;
  color: rgb(101,110,120);
  display: none;
}

.dropContainer5{
  padding:30px 20px;
}

.topSection5{
  padding: 20px 0;
}

.topSection5>a,.addList>li>a{
  display: flex;
  flex-direction: row;
  gap:20px;
  text-decoration: none;
  color: rgb(95, 94, 94);
}

.topSection5>a:hover,.addList>li>a:hover{
  color: rgb(21, 196, 254);
}

.topSection5>a:hover svg path ,
.addList>li>a:hover svg path{
  fill: rgb(21, 196, 254);
}

.bottomSection5{
  padding:10px 0 0 0;
}

.bottomSection5>h4{
  color:#000;
}

.addList{
  padding-top:10px;
}

.addList>li{
  list-style: none;
  margin:25px 0;
}

/* ++++++++++++++++++++++++++++++++++++ */

.rightContainer{
  display: flex;
  align-items: center;
  gap:20px;
}

.inputContainer{
  height: 35px;
  border:2px solid rgb(101,110,120);
  width:350px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:20px 18px;
  border-radius: 5px;
}

.inputIcon{
  display: flex;
  align-items: center;
  gap:8px;
}

.inputIcon>input{
  color:#fff;
  background: transparent;
  padding:12px 0;
  outline: none;
  border:none;
  font-size: 1.06rem;
}

.inputIcon>i{
  color:rgb(101,110,120);
  cursor: pointer;
}

.slash{
  border:2px solid rgb(101,110,120);
  padding:1px 8px;
  border-radius: 5px;
}

.rightContainer>a{
  text-decoration: none;
  color:#fff;
}

.rightContainer>a:hover{
  color:rgb(199, 197, 197);
}

.rightContainer>button{
  padding:8px 12px;
  border-radius: 5px;
  background:transparent;
  border: 2px solid rgb(101,110,120);
  color:#fff;
  font-weight: 600;
  cursor: pointer;
}

.rightContainer>button:active{
  transform: scale(0.98);
}

.setting{
  border:2px solid rgb(101,110,120);
  padding:6px 6px;
  border-radius: 5px;
  cursor: pointer;
}


/* header */

.dataList{
  border-bottom: 1px solid rgb(58, 61, 65);
  display: flex;
  justify-content: center;
  padding:20px 0;
  gap:30px;
}

.dataList>li{
  list-style: none;
}

.dataList>li>a{
  text-decoration: none;
  color: rgb(139, 138, 138);
  font-size: 1.1rem;
  font-weight: 500;
}

@media screen {
  
}