.bg-abstractss {
  background-color: #070f2b;
  background-image: radial-gradient(at 52% 97%, #1b1a55 0%, transparent 60%),
    radial-gradient(at 94% 61%, #535c91 0%, transparent 50%),
    radial-gradient(at 52% 65%, #9290c3 0%, transparent 40%),
    radial-gradient(at 31% 13%, #070f2b 0%, transparent 30%);
  transition: ease-in-out 2s;
}


.bg-abstractss-bottom {
  background-color: #070f2b;
  background-image: 
    radial-gradient(at 52% 3%, #1b1a55 0%, transparent 60%),
    radial-gradient(at 94% 39%, #535c91 0%, transparent 50%),
    radial-gradient(at 52% 35%, #9290c3 0%, transparent 40%),
    radial-gradient(at 31% 87%, #070f2b 0%, transparent 30%);
  transition: ease-in-out 2s;
}


.basic{
  background-color: blue;
}

.cta-bg{
 background-image: 
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url('cta-bg.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@keyframes appear{
  from{
    opacity: 0;
    scale: 0.4;

  }
  to{
    opacity: 1;
    scale: 1;
  }
}

.animate {
  animation: appear  linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

@keyframes appearance{
  from{
    left: -100;
    top:-100;
    scale: 0.5;
  }

  to{
    left: 0%;
    top: 0%;
    scale: 1;
  }
}

.animation{
  animation:appearance linear
}





/* -----------------------------LIGHT AND DARK MODE------------------------------------ */



.bg-top-one {
  background-color: #fff3c7;
  background-image: radial-gradient(at 59% 22%, #fff3c7 0%, transparent 60%),
    radial-gradient(at 73% 9%, #fec7b4 0%, transparent 50%),
    radial-gradient(at 35% 69%, #fec7b4 0%, transparent 40%),
    radial-gradient(at 40% 88%, #fff3c7 0%, transparent 30%);
  background-size: cover;
  background-repeat: no-repeat;
}



.bg-bottom-one {
  background-color: #fff3c7;
  background-image: radial-gradient(at 59% 78%, #fff3c7 0%, transparent 60%),
    radial-gradient(at 73% 91%, #fec7b4 0%, transparent 50%),
    radial-gradient(at 35% 31%, #ffe7b4 0%, transparent 40%),
    radial-gradient(at 40% 12%, #fff3c7 0%, transparent 30%);
  background-size: cover;
  background-repeat: no-repeat;
}

.section-three {
  background-color: #fff3c7;
  background-image:
    radial-gradient(at 59% 78%, #fff3c7 0%, transparent 60%),
    radial-gradient(at 73% 91%, #fec7b4 0%, transparent 50%),
    radial-gradient(at 35% 31%, #fc819e 0%, transparent 40%),
    radial-gradient(at 40% 12%, #f7418f 0%, transparent 30%);
}

.section-four {
  background-color: #fff3c7;
  background-image:
    radial-gradient(at 59% 22%, #fff3c7 0%, transparent 60%),
    radial-gradient(at 73% 9%, #fec7b4 0%, transparent 50%),
    radial-gradient(at 35% 69%, #fc819e 0%, transparent 40%),
    radial-gradient(at 40% 88%, #f7418f 0%, transparent 30%);
}


:root {
  --base-color:white;
  --base-variant:#cdcdcd;
  --text-color: #000000;
  --secondary-text: #363636;
  --primary-color: #faa700;
  --accent-color: #0004fa;
  --btn-bg: #000000;
  --hire-now-btn: #faa700;
  --hire-now-text:#000000;
  transition: ease-in-out 2s;
}

.darkmode {
  --base-color:black;
  --base-variant:#303030;
  --text-color: #ffffff;
  --secondary-text: #a4a4a4;
  --primary-color: #ffcb63;
  --accent-color: #faa700;
  --hire-now-btn: #000000;
  --hire-now-text:#faa700;
  --btn-bg: #ffffff;
}

body{
  color: var(--text-color);
  background-color: var(--base-color);
}

.my-heading{
  color: var(--accent-color);
}
.my-subheading{
  color: var(--secondary-text);
}
.my-text{
  color: var(--text-color);
}
.my-bg-one{
  background-color: var(--accent-color);
}
.my-bg-two{
  background-color: var(--base-variant);
}
.my-accent{
  color: var(--accent-color);
}
.my-base{
  color: var(--base-color);
}
.my-primary{
  color: var(--primary-color);
}


/* --------------------hero img----------------- */

.hero-img-box{
  background-image: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0.15), transparent);
}
.hero-img-box-dark{
  background-image: linear-gradient(to top, #000000, transparent, transparent);
}

/* -------------------------------BG----------------------------------- */


.light-overlay{
  background-color: var(--base-variant);
  opacity: 60%;
}
.btn-bg-one{
  background-color: var(--accent-color);
  color: var(--base-color);
  border: var(--accent-color) solid 1px;
}
.btn-bg-one:hover{
  background-color: var(--btn-bg);
  color: var(--base-color);
  scale: 1.02;
  transition: ease-in 0.2s;
}
.btn-bg-two{
  background-color: var(--hire-now-btn);
  color: var(--hire-now-text);
  border: var(--text-color) solid 1px;
}
.btn-bg-two:hover{
  background-color: var(--base-color);
  color: var(--text-color);
  border: var(--btn-bg) solid 1px;
  scale: 1.02;
  transition: ease-in 0.2s;
}
.icon-bg{
  background-color: var(--primary-color);
}


.hero-img-overlay{
  background-image: linear-gradient(to top, var(--my base) 50%, transparent);
}



#theme-switch{
  height: 28px;
  width: 28px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--accent-color);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: ease-in-out 1s;
  /* top: 20px; */
}

#theme-switch:hover{
  scale: 1.1;
  transition: ease-in 0.5s;
}

#theme-switch svg{
  fill: var(--base-color);
  width: 20px;
  height: 20px;
}

#theme-switch svg:last-child{
  display: none;
}

.darkmode #theme-switch svg:first-child{
  display: none;
}

.darkmode #theme-switch svg:last-child{
  display: block;
}

nav a:hover{
  color: var(--secondary-text);
}
nav a:last-child:hover{
  color: var(--base-variant);
}
.card:hover{
  scale: 1.02;
  transition: ease-in-out 0.6s;
}