@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&family=Roboto:wght@400;700&display=swap');

:root {

    /* Color Palette Section */

    --color-1: #0f1016;
    --text-color: #f0f0f0;
    --accent-color: #89D1D1;
    --accent-color-2: #908FDB;
    --bg-color: #030C44;
    --card-bg-color: #1C1853;
    --heading-font: 'Outfit', sans-serif;
    --body-text-font: 'Roboto', sans-serif;

    /* Main-section */

    --body-text-font-family: "Roboto", Helvetica;
    --body-text-font-weight: 400;
    --body-text-font-size: 16px;
    --body-text-letter-spacing: 0px;
    --body-text-line-height: 27.5px;
    --body-text-font-style: normal;
    --main-heading-font-family: "Outfit", Helvetica;
    --main-heading-font-weight: 700;
    --main-heading-font-size: 65px;
    --main-heading-letter-spacing: 0px;
    --main-heading-line-height: 100%;
    --main-heading-font-style: normal;
    --sub-heading-font-family: "Outfit", Helvetica;
    --sub-heading-font-weight: 700;
    --sub-heading-font-size: 20px;
    --sub-heading-letter-spacing: 2.6px;
    --sub-heading-line-height: 27.5px;
    --sub-heading-font-style: normal;
    --h2-font-family: "Outfit", Helvetica;
    --h2-font-weight: 700;
    --h2-font-size: 58px;
    --h2-letter-spacing: 0px;
    --h2-line-height: 100%;
    --h2-font-style: normal;
}

/* for horizontal scroll debbuging */
/* * {
  outline: 1px solid red;
} */

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 12pt;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
}

body {
  background-color: var(--bg-color);
}

#Parent {
  z-index: -1;
  width: 100%;
  height: 100vh;
}

/* ------------------------- */
/* Background Design Section */
/* ------------------------- */

.BG-circle-box {
  position: absolute;
  /* background-color: #f0f0f0; */
  width: 100%;
  /* height: auto; */
  height: 380%;
  z-index: -10;
  overflow: hidden;
}

.BG-circle-box .BG-circles {
  /* border: 2px solid red; */
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /* background-color: #868686; */

  display: flex;
}

.circle {
  width: 400px;
  height: 400px;
  /* background-color: red; */
  position: absolute;
  border-radius: 19rem;
  filter: blur(8rem);
  opacity: .7;
}

.BG-circles .circle-1 {
  top: -7%;
  left: 24%;
  transform: scale(1.1);
  background-color: #8080d7be;
}

.BG-circles .circle-2 {
  top: 12%;
  right: -5%;
  transform: scale(1.2);
  background-color: #aad9d991;
}

.BG-circles .circle-3 {
  top: 22%;
  left: -7%;
  transform: scale(.9);
  background-color: #8080d7be;
}

.BG-circles .circle-4 {
  top: 43%;
  left: 23%;
  transform: scale(.7);
  background-color: #8080d7be;
}

.BG-circles .circle-5 {
  top: 47%;
  left: 44%;
  transform: scale(.7);
  background-color: #aad9d991;
}

.BG-circles .circle-6 {
  bottom: 12%;
  left: -10%;
  transform: scale(.65);
  background-color: #aad9d991;
}


/* -------------- */
/* Navbar Section */
/* -------------- */

nav {
    height: 60px;
    /* background-color: var(--color-1); */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-family: var(--heading-font);

    z-index: 1000;
}

.links-container {
    height: 100%;
    width: 80%;
    display: flex;
    align-items: center;
    padding-right: 10%;

    z-index: 1001;
}

nav {
    font-weight: bold;
}

#overlay {
  z-index: 1000; /* Ensure overlay is above the rest */
}

nav a {
    height: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-color);
    cursor: pointer;
    transition: color 0.3s ease;
}

nav a:hover {
    color: var(--accent-color);
}

nav .home-link {
    margin-right: auto;
}

nav svg {
    fill: var(--text-color);
}

#sidebar-action {
    display: none;
}

.open-sidebar-button, .close-sidebar-button {
    display: none;
    z-index: 1002;
}

/* ------------ */
/* hero-section */
/* ------------ */

.hero-section-container {
  min-height: 580px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* border: 8px solid red;
  width: 100%;
  justify-content: space-evenly; */

  margin-top: 40px;
  margin-bottom: 80px;
}

.hero-left, .hero-right {
  /* background-color: #89D1D1; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-left {
  width: 46%;
  height: 500px;

  display: flex;
  flex-direction: column;
}

.hero-right {
  width: 32%;
  height: 500px;
}

#my-greet {
font-family: var(--main-heading-font-family);
font-weight: var(--main-heading-font-weight);
color: #ffffff;
font-size: var(--main-heading-font-size);
letter-spacing: var(--main-heading-letter-spacing);
line-height: var(--main-heading-line-height);
font-style: var(--main-heading-font-style);
/* padding-top: 10px; */
cursor: pointer;
transition: 0.3s ease;
}

#my-greet:hover {
opacity: .7;
}

.hero-text-content {
  width: 95%;
  /* background-color: red; */
  display: flex;
  align-items: center;
}

.title {
  height: 40%;
  /* background-color: #352424; */
}

.greet {
  height: 35%;
  /* background-color: #4f4f4f; */

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* justify-content: space-evenly; */
  padding-top: 10px;
  gap: 15px;
}

#passion {
font-family: "Outfit-Bold", Helvetica;
font-weight: 700;
color: #ffffff;
font-size: 18px;
letter-spacing: 2.6px;
line-height: 27.5px;
padding-top: 20px;
}

#idea {
font-family: var(--body-text-font-family);
font-weight: var(--body-text-font-weight);
color: #ffffff;
font-size: var(--body-text-font-size);
letter-spacing: var(--body-text-letter-spacing);
font-style: var(--body-text-font-style);
line-height: 23px;
/* padding-top: 10px; */
}

.btn-box {
  height: 10%;
  /* background-color: #07072b; */

  display: flex;
  gap: 20px;
}
/* -------------------------------------- */
#my-work {
align-items: center;
width: 165px;
height: 100%;
background: var(--accent-color-2);
border: 2px solid var(--accent-color-2);
border-radius: 50px;
font-size: 12px;
color: var(--bg-color);
text-decoration: none;
font-weight: 550;
letter-spacing: 1px;
overflow: hidden;
transition: .5s;
font-family: var(--heading-font);
left: -71px;
cursor: pointer;
transition: 0.3s ease;
}

#my-work:hover {
background-color: var(--accent-color);
color: var(--bg-color);
border: none;
}

#my-work-mobile {
  display: none;
}

#touch {
display: inline-flex;
justify-content: center;
align-items: center;
width: 165px;
height: 100%;
border: 2px solid var(--accent-color);
background-color: var(--bg-color);
border-radius: 50px;
font-size: 12px;
color: var(--text-color);
text-decoration: none;
font-weight: 550;
letter-spacing: 1px;
z-index: 1;
overflow: hidden;
transition: .5s;
font-family: var(--heading-font);
left: -61px;
cursor: pointer;
transition: 0.3s ease;
}

#touch:hover {
color: var(--accent-color);
opacity: .7;
}

#img-1 {
/* background-color: #00ffff; */
width: auto;
display: flex;
justify-content: end;
align-items: center;
}

#img-hover-ani {
max-width: 105%;
object-fit: contain;
transform: scale(1.10);
margin-bottom: 2rem;
padding-left: 15rem;
cursor: pointer;
transition: .15s ease-in-out;
}

#img-hover-ani:hover {
opacity: .7;
/* transform: scale(1.05); */
}


/* ------------- */
/* Intro Section */
/* ------------- */

.main-section-container {
  min-height: 380px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border: 8px solid red; */
  gap: 15px;
  /* width: 100%;
  justify-content: space-evenly; */
}

.main-left {
  /* background-color: #89D1D1; */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.main-right {
  /* background-color: #89D1D1; */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  padding-top: 2.5rem;
}


.main-right {
  width: 50%;
  height: 350px;

  display: flex;
  flex-direction: column;
}
.main-left {
/* background-color: #908FDB; */
width: 28%;
height: 350px;
}
.main-text-content {
  width: 100%;
  /* background-color: red; */
  display: flex;
  align-items: center;
}

.main-about {
  height: 60%;
  /* background-color: #4f4f4f; */

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* justify-content: space-evenly; */
  padding-top: 10px;
  gap: 15px;
}

.btn-box-2 {
  height: 16%;
  display: flex;
}

.btn-box-2 a {
  height: 90%;
}

.btn-box-2 button {
  align-items: center;
width: 165px;
height: 100%;
background: var(--accent-color-2);
border: 2px solid var(--accent-color-2);
border-radius: 50px;
font-size: 12px;
color: var(--bg-color);
text-decoration: none;
font-weight: 550;
letter-spacing: 1px;
overflow: hidden;
transition: .5s;
font-family: var(--heading-font);
left: -71px;
cursor: pointer;
transition: 0.3s ease;
}

.btn-box-2 button:hover {
  background-color: var(--accent-color);
  color: var(--bg-color);
  border: none;
}

#main-image {
  display: flex;
  width: 80%;
  padding-block: 1rem;
  float: right;
  transform: scale(.95);
  cursor: pointer;
  transition: transform .15s ease-in-out;
  transition: .15s ease-in-out;
}

#main-image:hover {
  opacity: .7;
  transform: scale(1.05);
}

#main-image img {
  max-width: 100%;
  object-fit: contain;
  border-radius: 2rem;
  box-shadow:  8px 8px 19px #07070750,
              -8px -8px 19px #ffffff00;
}

/* #img-ellipse { */
  /* position: relative; */
  /* width: 4rem;
  height: 4rem; */
  /* top: 5rem; */
  /* left: -2.5rem; */
  /* background-color: #aad9d9;
  border-radius: 50%;
  opacity: .7;
  z-index: 10;
  align-self: center;
} */

#about-me {
  font-size: var(--sub-heading-font-size);
  font-weight: var(--sub-heading-font-weight);
  font-family: var(--sub-heading-font-family);
  letter-spacing: var(--sub-heading-letter-spacing);
  color:var(--accent-color);
}

.WI {
  position: relative;
  white-space: nowrap;
  width: 247px;
  font-family: var(--h2-font-family);
  font-weight: var(--h2-font-weight);
  color: #ffffff;
  font-size: var(--h2-font-size);
  letter-spacing: var(--h2-letter-spacing);
  line-height: var(--h2-line-height);
  font-style: var(--h2-font-style);
  cursor: pointer;
  transition: color 0.3s ease;
}

.WI:hover{
  opacity: .7;
}

#description {
  font-size: var(--body-text-font-size);
  font-family: var(--body-text-font-family);
  font-weight: var(--body-text-font-weight);
  line-height: var(--body-text-line-height);
  letter-spacing: var(--body-text-letter-spacing);
  font-style: var(--body-text-font-style);
  width: 100%;
  color: #ffffff;
}


/* --------------- */
/* Thought Section */
/* --------------- */

.thought-box {
  /* border: 8px solid red; */
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8rem;
  margin-bottom: 8rem;
}

.thought-container {
  width: 78%;
  height: 330px;
  display: flex;
  background: rgb(58,58,190);
  background: linear-gradient(140deg, rgba(58,58,190,1) 21%, rgba(137,209,209,1) 88%);
  border-radius: 25px;
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  padding: 1rem 1rem 0.5rem 1rem;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}

.dash-container, .thought-text-holder, .work-btn {
  width: 100%;
}

.dash-container {
  height: 10%;
  /* background-color: #352424; */

  display: flex;
  justify-content: center;
  align-items: center;
}

.thought-text-holder {
  height: 50%;
  /* background-color: #4f4f4f; */
  display: flex;
  align-items: center;
  justify-content: center;
  /* flex-direction: column; */
  /* padding-bottom: 2rem; */
  /* padding-top: 10px; */
  /* gap: 15px; */
}

#work-btn {
  height: 14%;
  /* background-color: #babaff; */

  display: flex;
  justify-content: center;
}

.dash {
  color: #ffffff;
  font-weight: 150;
  font-size: 28px;
  letter-spacing: 2px;
}

#view-work {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 165px;
  height: 100%;
  background: var(--color-1);
  border: none;
  border-radius: 50px;
  font-size: 12px;
  color: var(--text-color);
  text-decoration: none;
  font-weight: 550;
  letter-spacing: 1px;
  z-index: 1;
  overflow: hidden;
  transition: .5s;
  font-family: var(--heading-font);
  cursor: pointer;
  transition: 0.3s ease;
}

#view-work:hover {
  background-color: #ffffff;
  color: var(--color-1);
}


.thought-text {
  font-size: 2rem;
  letter-spacing: .5px;
  font-weight: var(--h2-font-weight);
  font-family: var(--h2-font-family);
  color: #ffffff;
  cursor: pointer;
  transition: 0.3s ease;
}

.thought-text:hover {
  opacity: .7;
}

/* ----------------------- */
/* Software I Used Section */
/* ----------------------- */

.skill-header-container {
  /* background-color: #ffffff; */
  width: 100%;
  height: auto;
  margin-top: 2rem;
}

.skill-header,
#use {
  text-align: center;
  font-size: var(--sub-heading-font-size);
  font-weight: var(--sub-heading-font-weight);
  font-family: var(--sub-heading-font-family);
  letter-spacing: var(--sub-heading-letter-spacing);
  color:var(--accent-color);
  padding-top: 2rem;
}

#Software {
  font-size: var(--h2-font-size);
  text-align: center;
  color: #ffffff;
  font-family: var(--h2-font-family);
  font-weight: var(--h2-font-weight);
  transform: translateY(-.2rem);
}

.software-ope-ani {
  cursor: pointer;
  transition: color 0.3s ease;
}

.software-ope-ani:hover {
  opacity: .7;
}

#use {
  transform: translateY(-1rem);
}

.card-container{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /* margin-top: 1rem; */
}
.card{
  width: 325px;
  /* background-color: #f0f0f0; */
  border-radius: 10px;
  overflow: hidden;
  /* box-shadow: 0px 2px 4px rgba(0, 0, 0, .2); */
  margin: 20px;
  /* background: #e0e0e0; */
  /* box-shadow:  8px 8px 19px #07070750,
              -8px -8px 19px #ffffff; */
  transition: transform .15s ease-in-out; /* Add this line for smooth transition */
  padding-bottom: 1rem;
}
.card:hover{
  transform: scale(1.05); /* Smooth scaling effect */
}
.card-bg-holder {
  /* background-color: #ff0000; */
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: start;
  transform: translateY(-8.4rem);
  z-index: -3;
}
.card-bg {
  background-color: var(--card-bg-color);
  opacity: .65;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  transition: .15s ease-in-out; /* Add this line for smooth transition */
}

.image-container{
  /* background-color: cadetblue; */
  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
  /* transform: translateY(-3rem); */
  z-index: 1;
}
.card img{
  width: 28%;
  height: 28%;
}
.card-content{
  padding: 16px;
}
.card-title-holder {
  /* background-color: #ff0000; */
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  transform: translateY(.7rem);
}
#card-title {
  font-size: var(--sub-heading-font-size);
  font-weight: var(--sub-heading-font-weight);
  font-family: var(--sub-heading-font-family);
  letter-spacing: var(--sub-heading-letter-spacing);
  color:var(--accent-color);
  transform: translateY(-.4rem);
}
.card-description{
  color: var(--text-color);
  font-family: var(--body-text-font-family);
  font-size: var(--body-text-font-size);
  line-height: 1.3;
  text-align: center;
  /* transform: translateY(1rem); */
}
.card-content .btn{
  display: inline-block;
  padding: 8px 16px;
  background-color: #333;
  text-decoration: none;
  border-radius: 4px;
  margin-top: 16px;
  color: #fff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, .2);
  box-shadow:  0px 2px 4px #868686,
              0px -2px 4px #ffffff;
}

/* ----------------- */
/* Portfolio Section */
/* ----------------- */

.portfolio-section-container{
  min-height: 400px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
  margin-bottom: 3rem;
  /* border: 8px solid red; */
  /* width: 100%;
  justify-content: space-evenly; */
}

.intro-to-left, .intro-img-right {
  /* background-color: #89D1D1; */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 380px;
}

.intro-to-left {
  width: 46%;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.intro-img-right {
  width: 32%;
}

.portfolio-text-content {
  /* background-color: #908FDB; */
  width: 100%;
  height: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  padding-top: 1rem;
}

.btn-box-portfolio {
  /* background-color: aliceblue; */
  width: 100%;
  height: 12%;
  margin-bottom: 3rem;
}

#intro-title {
  font-size: 25px;
  font-weight: var(--sub-heading-font-weight);
  font-family: var(--sub-heading-font-family);
  letter-spacing: var(--sub-heading-letter-spacing);
  color:var(--accent-color);
  /* padding-top: 6px; */
}

#portfolio-title {
  font-family: var(--main-heading-font-family);
  font-weight: var(--main-heading-font-weight);
  color: #ffffff;
  font-size: var(--main-heading-font-size);
  letter-spacing: var(--main-heading-letter-spacing);
  line-height: var(--main-heading-line-height);
  font-style: var(--main-heading-font-style);
  margin-bottom: 1.5rem;
  cursor: pointer;
  transition: color 0.3s ease;
}

#portfolio-title:hover {
  opacity: .7;
}

#post-summary {
  font-family: var(--body-text-font-family);
  font-weight: var(--body-text-font-weight);
  color: #ffffff;
  font-size: var(--body-text-font-size);
  letter-spacing: var(--body-text-letter-spacing);
  font-style: var(--body-text-font-style);
  line-height: 23px;
  /* padding-bottom: 6px; */
}


#my-work-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 165px;
  height: 100%;
  background: var(--accent-color-2);
  border: 2px solid var(--accent-color-2);
  border-radius: 50px;
  font-size: 14px;
  color: var(--bg-color);
  text-decoration: none;
  font-weight: 550;
  letter-spacing: 1.47px;
  z-index: 1;
  overflow: hidden;
  transition: .5s;
  font-family: var(--heading-font);
  left: -71px;
  cursor: pointer;
  transition: 0.3s ease;
}

#my-work-2:hover {
  background-color: var(--accent-color);
  color: var(--bg-color);
  border: none;
}

#img-hover-ani-2 {
  /* background-color: #00ffff; */
  width: auto;
  display: flex;
  justify-content: end;
  align-items: center;
}

#img-hover-ani-2 {
  max-width: 105%;
  object-fit: contain;
  margin-bottom: 2rem;
  padding-left: 5.5rem;
  cursor: pointer;
  transition: .15s ease-in-out;
  }
  
  #img-hover-ani-2:hover {
  opacity: .7;
  }

  /* Interactive Cards */

  /* .cf-wrapper {
  transform: translateX(50px) scale(1.1);
  position: relative;
  width: 300px;
  height: 350px;
}

.cart-image-back,
.cart-image-front {
  position: absolute;
  width: 100%;
  scale: 1.2;
  pointer-events: none;
}

.cart-image-back {
  z-index: 1;
}

.cart-image-front {
  z-index: 10;
}

.cf-container {
  position: absolute;
  top: 56px;
  left: 35px;
  width: 230px;
  height: 160px;
  z-index: 5;
  transition: 0.3s ease-in-out;
}

.cf-card {
  width: 100%;
  height: 160px;
  position: absolute;
  border-radius: 8px;
  transition: 0.3s ease-in-out;
  cursor: pointer;
} */

/* #cf-c1 { background-color: black; }
#cf-c2 { background-color: blue; }
#cf-c3 { background-color: red; }
#cf-c4 { background-color: green; } */

/* .cf-container:hover {
  transform:  translateY(-40px); 
}
.cf-container:hover #cf-c1 { 
  transform: translateX(70px) scale(1);
}
.cf-container:hover #cf-c2 { 
  transform: translateX(30px) scale(1);
}
.cf-container:hover #cf-c3 { 
  transform: translateX(-10px) scale(1);
}
.cf-container:hover #cf-c4 { 
  transform: translateX(-70px) scale(1);
}
#cf-c1:hover { 
  transform: translateX(70px) scale(1.05) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 100;
}
#cf-c2:hover { 
  transform: translateX(30px) scale(1.05) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 100;
}
#cf-c3:hover { 
  transform: translateX(-10px) scale(1.05) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 100;
}
#cf-c4:hover { 
  transform: translateX(-70px) scale(1.05) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 100;
} */


/* -------------- */
/* footer Section */
/* -------------- */

.rectangle {
  width: 100%;
  height: 8px;
  background: rgb(58,58,190);
  background: linear-gradient(140deg, rgba(58,58,190,1) 21%, rgba(137,209,209,1) 88%);
}

.footer {
  background-color: #1c185370;
  box-sizing: border-box;
  padding: 4rem 2rem 1rem 2rem;
  width: 100%;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.footer-section h3 {
  color: var(--text-color);
  font-family: var(--body-text-font-family);
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.5rem;
}

/* Underline effect for section headers */
.footer-section h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 2px;
  background-color: var(--accent-color);
  transition: width 0.3s ease;
}

.footer-section:hover h3::after {
  width: 75px;
  background-color: var(--accent-color-2);
}

.footer-section p {
  font-family: var(--body-text-font-family);
  font-weight: 200;
  line-height: 1.6;
  color: var(--text-color);
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
   font-family: var(--body-text-font-family);
  font-weight: 200;
   color: var(--text-color);
   margin-bottom: 0.8rem;
  }

.footer-section ul li a {
  font-family: var(--body-text-font-family);
  font-weight: 200;
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.3s ease, padding-left 0.3s ease;
  display: inline-block;
}

.footer-section ul li a:hover {
  color: var(--text-color);
  padding-left: 5px;
}

/* Social Links */
.social-links {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
  }

.social-link {
  color: var(--text-color);
  font-family: var(--body-text-font-family);
  font-weight: 200;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem;
  border: 1px solid #333;
  border-radius: 4px;
}

.social-link:hover {
  color: var(--text-color);
  border-color: var(--text-color);
  transform: translateY(-2px);
}

/* Copyright Section */
.footer-bottom {
   text-align: center;
   padding-top: 2rem;
   border-top: 1px solid #333;
  }

.footer-bottom p {
   color: #ccc;
   font-size: 0.9rem;
  }

/* --------------- */
/* -scroll to top- */
/* --------------- */

.scrolltotop {
  display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
  color: transparent;
  transition: transform 0.3s ease;
}

.scrolltotopsvg {
  display: none;
}

.scrolltotop:hover {
  animation: popup 0.8s ease-out;
}

.scrolltotop:hover p {
  color: var(--accent-color);
}

@keyframes popup {
  0% {
    transform: translateY(0px);
  }  
  25% {
    transform: translateY(-6px);
  }
  50% {
    transform: translateY(-2px);
  }
  75% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0px);
  }
}

.scrolltotop .scroll {
	display: flex;
	flex-direction: row;
	gap: 6px;
	align-items: center;
  font-size: 15px;
}

.scrolltotop p {
  text-decoration: none;
}

/* ------------------------- */
/* -scroll to top ends here- */
/* ------------------------- */

.email-container {
  z-index: 10;
  /* background-color: #1c185370; */
  width: 100%;
  height: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.email-container p {
  display: flex;
  margin-left: 2rem;
  color: var(--text-color);
  font-size: 20px;
  font-weight: 500;
  font-family: var(--sub-heading-font-family);
  letter-spacing: var(--sub-heading-letter-spacing);
  transform: translateY(5px);
  cursor: pointer;
  transition: opacity .3s ease-in-out;
}

.email-container p:hover {
  opacity: .7;
}

.email-container .emailButton {
  position: relative;
  display: flex;
  gap: 4px;
  margin-right: 2rem;
  width: auto;
  /* background-color: red; */
}

.email-container input {
  height: 40px;
  border-radius: 50px;
  background-color: #1c185370;
  width: 20rem;
  outline: none;
  border: none;
  color: var(--text-color);
  padding-left: 30px;
}

.email-container input::placeholder {
  color: #ffffff71;
  padding-bottom: .3rem;
}

.email-container form button {
  position: absolute;
  top: 4.5px;
  right: 6.5px;
  
  background: var(--accent-color-2);
  font-family: var(--sub-heading-font-family);
  font-weight: var(--sub-heading-font-weight);
  color: var(--bg-color);
  font-size: 12px;
  letter-spacing: 1px;
  outline: none;
  border: none;
  padding: 8px 26px;
  border-radius: 50px;
  cursor: pointer;
  transition: opacity .3s ease-in-out;
}

.email-container form button:hover {
  opacity: .7;
}

/* ---------------------- */
/* Responsiveness Section */
/* ---------------------- */

/* Navigation Section */

@media(max-width: 960px) {
  .BG-circle-box {
    height: 300%;
  }
}

@media(max-width: 525px) {
  .links-container {
      flex-direction: column;
      align-items: flex-start;
      position: fixed;
      top: 0;
      right: -100%;
      z-index: 10;
      width: 300px;
      height: 100%;
      background-color: var(--color-1);
      box-shadow: -5px 0 5px rgba(0, 0, 0, .25);
      transition: right 0.3s ease;
      padding-top: 60px; /* Ensure enough space for the close button */
  }

  nav a {
      box-sizing: border-box;
      height: auto;
      width: 100%;
      padding: 20px 30px;
      justify-content: flex-start;
  }

  .open-sidebar-button, .close-sidebar-button {
      padding: 20px;
      display: block;
  }

  #sidebar-action:checked ~ .links-container {
      right: 0;
  }

  #sidebar-action:checked ~ .open-sidebar-button {
    z-index: 1;
    display: none;
}

  .close-sidebar-button {
      position: absolute;
      top: -5px;
      right: 0;
  }

  #sidebar-action:checked ~ #overlay {
      height: 100%;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9;
  }
}

/* Hero Section */

@media(max-width:945px){
  .hero-section-container {
    flex-direction: column;
    align-items: center;
  }
  .hero-left, .hero-right {
    width: 80%;
    height: 500px;
}
.greet {
    padding-top: 5px;
    gap: 7.5px;
}
.hero-right {
  display: none;
}
}
@media(max-width:730px){
.hero-right {
    height: auto;
}
}
@media(max-width:465px){
  .BG-circle-box {
    display: none;
  }
  .hero-section-container {
  transform: translateY(-3rem);
  }
  #my-greet {
    font-size: 60px;
  }
  .title {
    height: 45%;
  }
  .greet {
    height: 30%;
  }
  #passion {
  font-size: 16px;
  line-height: 20px;
  padding-top: 0px;
}
#idea {
  font-size: 16px;
  line-height: 20px;
}
}

@media(max-width:433px){
  #my-greet {
    font-size: 55px;
  }
.greet {
    height: 28%;
}
.btn-box {
  gap: 10px;
}
#my-work {
  display: none;
}
#my-work-mobile {
  display: block;
  align-items: center;
  width: 165px;
  height: 100%;
  background: var(--accent-color-2);
  border: 2px solid var(--accent-color-2);
  border-radius: 50px;
  font-size: 12px;
  color: var(--bg-color);
  text-decoration: none;
  font-weight: 550;
  letter-spacing: 1px;
  overflow: hidden;
  transition: .5s;
  font-family: var(--heading-font);
  left: -71px;
  cursor: pointer;
  transition: 0.3s ease;
  }
  
  #my-work-mobile:hover {
  background-color: var(--accent-color);
  color: var(--bg-color);
  border: none;
  }
}

@media(max-width:360px){
  #my-greet {
    font-size: 40px;
}
.greet {
    height: 20%;
}
}
@media(max-width:360px){
    .hero-text-content {
    width: 100%;
    display: flex;
    align-items: center;
}
#passion {
  transform: translateY(-2rem);
}
#idea {
  font-size: 15px;
  line-height: 20px;
  transform: translateY(-2rem);
}
#left {
  height: 25rem;
  margin-top: 3rem;
  padding: 1rem 3rem;
}
}
@media (max-width:320px) {
  .hero-section-container {
    transform: translateY(-8rem);
  }
  .idea-br, .passion-br {
    display: none;
  }
  .hero-left {
    width: 95%;
    height: 450px;
  }
}

/* About Section */

@media(max-width:945px){
  .main-section-container {
    flex-direction: column;
    margin-bottom: 5rem;
    /* gap: 0px; */
  }
  .main-left, .main-right {
    width: 80%;
    height: 500px;
}
.main-left {
    height: auto;
  }
.main-right {
    height: 340px;
}
.main-text-content {
    height: auto;
}
.btn-box-2 button {
  height: 3rem;
  }
}
@media(max-width:410px){
  .WI {
      font-size: 25px;
    }
}
@media(max-width:324px){
  .main-right {
    height: auto;
  }
  .main-right {
    gap: 5px;
  }
}

/* Thought Section */

@media(max-width:945px){
  .thought-box {
    height: 450px;
    margin-top: 2rem;
  }
  .thought-container {
    height: 450px;
  }
  .thought-text-holder {
    height: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
@media(max-width:540px){
  .thought-text {
  font-size: 1.9rem;
  letter-spacing: .5px;
}
#work-btn {
  height: 3.5rem;
}
}
@media(max-width:440px){
  .thought-box {
    height: 580px;
  }
  .thought-container {
    height: 530px;
  }
  .thought-text-holder {
    height: auto;
    padding-top: 0;
    padding-bottom: 1rem;
    padding-left: 2px;
    padding-right: 2px;
    margin-bottom: 1.3rem;
  }
  .thought-text {
    font-size: 1.7rem;
    letter-spacing: .5px;
  }
}
@media(max-width:320px) {
  #work-btn {
    transform: translateY(-1rem);
  }
}

/* Portfolio Section */

@media(max-width:945px){
  .portfolio-section-container {
    flex-direction: column;
    margin-top: 1rem;
    /* gap: 0px; */
  }
  .intro-to-left, .intro-img-right {
    width: 80%;
    height: 400px;
}
#img-hover-ani-2 {
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 0;
  padding-left: 0;
  }
  .intro-to-left {
    justify-content: center;
  }
  .intro-img-right {
    justify-content: center;
    height: auto;
  }
  #img-hover-ani-2 {
    transform: scale(.75);
    margin-bottom: 0;
    padding-left: 0;
  }
}

@media(max-width:775px){
  .intro-img-right {
    align-items: center;
    height: 300px;
    padding-bottom: 2rem;
  }
  #img-hover-ani-2 {
    margin-bottom: 0;
    }
}

@media(max-width:500px){
  .portfolio-text-content {
    height: 70%;
  }
  .btn-box-portfolio {
    margin-top: 1rem;
  }
  #img-hover-ani-2 {
    transform: scale(1.10);
  }
}
@media(max-width:410px){
  .intro-to-left {
    height: 450px;
  }
}
@media(max-width:330px){
  #portfolio-title {
    font-size: 55px;
  }
}


/* Interactive cards */

/* @media (max-width:944px) {
  .cf-wrapper {
    transform: translateX(0px) scale(1.2);
}
}

@media (max-width:580px) {
  .cf-wrapper {
    transform: translateX(0px) scale(.8);
}
} */

/* Footer Section */

@media (max-width: 1095px){
  .footer-content {
       margin-left: 3rem;
       margin-right: 3rem;
       transform: scale(.8);
      }
}


@media (max-width: 768px) {
  .footer-content {
    margin-left: 2rem;
    margin-right: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    transform: scale(1);
  }
  .footer {
    padding: 3rem 1rem 1rem 1rem;
  }
  .social-links {
    gap: 0.5rem;
  }
  .social-link {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
  }
}

@media(max-width: 767px){
  .footer-col{
    width: 50%;
    margin-bottom: 30px;
}
}
@media(max-width: 574px){
  .footer-col{
    width: 32%;
    margin-bottom: 10px;
    margin-bottom: 1rem;
}
.row{
  padding-left: 0;
}
}

@media (max-width: 768px) {
  .email-container .emailButton {
    display: block;
  }

  .email-container form , .email-container p {
    transform: scale(.7);
  }
}

@media (max-width: 560px) {
  .email-container {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
  .email-container .emailButton {
    display: block;
  }

  .email-container form , .email-container p {
    transform: scale(.6);
  }

  .email-container p {
    margin-left: 1rem;
    font-size: 15px;
    transform: translateY(0);
  }
  .email-container .emailButton {
    margin-right: .2rem;
  }
}

@media (max-width: 390px) {
  .email-container p {
    margin-left: 0;
  }
  .email-container form , .email-container p {
    transform: scale(.5);
  }
  .email-container p {
    font-size: 10px;
  }
}



/* -scroll to top- */

@media (max-width:832px) {
  .scrolltotop {
    display: none;
  }
  .scrolltotopsvg {
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    color: white;
    transition: transform 0.3s ease;
    transform: translateX(-3rem);
  }
}


@media (max-width:444px) {
  .emailButton #emailInput, #emailsubmitbutton {
    transform: translateX(-5rem);
  }
  .scrolltotopsvg {
    transform: translateX(-7rem);
  }
}


/* ---------------- */
/* Scroll Animation */
/* ---------------- */

.autoShow {
  animation: autoShowAnimation both;
  animation-timeline: view(70% 30%);
}
@keyframes autoShowAnimation {
  from{
    opacity: 0;
    transform: translateY(200px) scale(.3);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.autoFadeinShow {
  animation: autoFadeinShowAnimation both;
  animation-timeline: view(70% 30%);
}
@keyframes autoFadeinShowAnimation {
  from{
    opacity: 0;
    transform: scale(.9);
  }
  to{
    opacity: 1;
    transform: scale(1);
  }
}

/* from left to right */
.fade-in {
  /* before */
  opacity: 0;
  transform: translateX(-100%);
  transition: 1.2s ease-in-out;
}

/* from right to left */
.fade-in-img {
  /* before */
  opacity: 0;
  transform: translateX(100%);
  transition: 1.2s ease-in-out;
}

.visible {
  /* after for both */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s ease, transform 1s ease;
  }