.nav-item {
  margin: 0.6rem 0;
}

.nav-link {
  text-align: start;
  color: azure;
  padding: 10px 30px 10px 30px;
  min-width: 100%;
  font-size: 20px;
  border-radius: 60px !important;
  border: 0.2px solid #000 !important;
}
.nav-link:hover {
  color: #bebebe;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
  background: linear-gradient(45deg, #494949, #141414);
  padding: 10px 30px 10px 30px;
  border-radius: 60px;
  color: azure;
  /* transition: all 0.5s ease-out; */
  border: 0.2px solid #c7c7c762 !important;
  position: relative;
  overflow: hidden;
}


.nav-pills .nav-link.active::after, .nav-pills .show>.nav-link::after {
  content: "";
  position: absolute;
  top: 0px;
  right: -23px;
  width: 80px;
  height: 80px;
  transition: all 0.5s ease-out;
  /* background: radial-gradient(circle at left, #ffe800, #ff00b6); */
  background: radial-gradient(circle at 10px 30px , #f6ff72, #c7007b, #bd0097);
  opacity: 0.7;
  border-radius: 60px;
  border: 1px solid #d500ab;
}

.nav-pills .nav-link.active:hover::after, 
.nav-pills .show>.nav-link:hover::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -30px; /* Added 'px' */
  width: 120px;
  height: 80px;
  background: radial-gradient(circle at 10px 30px, #f6ff72, #c7007b, #bd0097);
  opacity: 0.7;
  border-radius: 60px;
  border: 1px solid #d500ab;
}



#pills-tabContent h1 {
  font-size: 32px;
  font-weight: 600;
  color: #ffffffda;
}
#pills-tabContent p {
  font-weight: 400;
  color: rgb(211, 211, 211);
}
#pills-tabContent li {
  color: rgb(211, 211, 211);
}
#pills-tabContent {
  color: #c7c7c7;
}




/* .nav-pills .nav-link.active, .nav-pills .show>.nav-link::after{
  background: radial-gradient(circle at center, #ff7f50, #ff6347);
  padding: 5px 30px 5px 60px;
  border-radius: 60px;
  color: azure;
} */

.top {
margin-bottom: -60px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease-in-out;
width: 100%;
height: 350px;
/* Adjust as needed */
/* background: url('assets/img/color_ball.png') no-repeat center center; */
background-size: contain;
overflow: hidden;
/* animation: rotateBg 40s ease-out infinite; */
}
.bg-top{
margin-bottom: -60px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease-in-out;
width: 100%;
height: 350px;
/* Adjust as needed */
background: url('assets/img/color_circle.png') no-repeat top center;
background-size: contain;
overflow: hidden;
animation: rotateBg 15s linear infinite;
}
.top::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
}

.top span {
position: absolute;
color: #ffffffda;
font-size: 30px;
/* Adjust as needed */
font-weight: 700;
line-height: 30pt;
z-index: 2;
text-align: center;
}

.portfolio {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 400px;
margin: auto;
}

.thumbnail {
background: linear-gradient(45deg, #000000, #323232);
position: relative;
border: 0.1px solid #363636;
border-radius: 25px;
overflow: hidden;
z-index: 3;
padding-top: 100%;
/* 1:1 Aspect Ratio */
}

.thumbnail img {
position: absolute;
top: 0;
left: 50px;
width: 250px;
height: 100%;
object-fit: cover;
transition: all 0.2s ease-in-out;
}
.thumbnail:hover img {
position: absolute;
top: 0;
left: 0;
width: 192px;
height: 100%;
object-fit: cover;
}

section{
padding: 60px 0;
}

.service_details {
  overflow-x: clip;
}

.bg{
background: url(./assets/img/color_circle.png) no-repeat top center / contain;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70%;
animation: rotateBg 15s linear infinite;
z-index: 0;
/* background-position: top center; */
opacity: 0.4;
}


@media only screen and (max-width: 991px) {
.nav-link {
    text-align: start;
    color: azure;
    padding: 10px 30px 10px 30px;
    min-width: 100%;
    font-size: 20px;
    border-radius: 60px !important;
    border: 0.2px solid #000 !important;
}
.bg{
  overflow-x: hidden;
}
}

.goto_button {
  display: block;
  background: linear-gradient(45deg, #494949, #141414);
  padding: 5px 30px 5px 30px;
  border-radius: 6px;
  color: #a9a9a9;
  border: 0.2px solid #c7c7c762 !important;
  position: relative;
  overflow: hidden;
  height: 44px;
  width: 52%;
  text-align: left;
  font-size: 20px;
  font-weight: 600;
}

.goto_button ::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -27px;
  width: 96px;
  height: 80px;
  transition: all 0.5s ease-out;
  /* background: radial-gradient(circle at left, #ffe800, #ff00b6); */
  background: radial-gradient(circle at 10px 30px, #f6ff72, #c7007b, #bd0097);
  opacity: 0.7;
  border-radius: 60px;
  border: 1px solid #d500ab;
}

.goto_button:hover ::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -30;
  width: 120px;
  height: 80px;
  /* background: radial-gradient(circle at left, #ffe800, #ff00b6); */
  background: radial-gradient(circle at 10px 30px, #f6ff72, #c7007b, #bd0097);
  opacity: 0.7;
  border-radius: 60px;
  border: 1px solid #d500ab;
}
.goto_button:hover{
  color: #a9a9a9;
}

.social-media-bar{
  display: flex;
}