body, footer, main{
background: linear-gradient(300deg, #1A1A2E, #16213E, #0F3460,#872341, #BE3144, #F05941);
background-size: 200% 200%;
animation: gradient-animation 25s ease infinite;
}

html,body {
  margin:auto;
  padding:auto;
  overflow-x: hidden;
  width: 100vw;
}


@keyframes gradient-animation {
0% {
  background-position: 0% 100%;
}
50% {
  background-position: 100% 50%;
}
100% {
  background-position: 0% 100%;
}

}

.brand_logo {
width: 3em;
}

.text-shadow-drop-br {
-webkit-animation: text-shadow-drop-br 5s both;
        animation: text-shadow-drop-br 5s both;
}

@keyframes text-shadow-drop-br {
0% {
  text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
100% {
  text-shadow: 6px 6px 18px rgba(0, 0, 0, 0.35);
}
}

.icon-square {
width: 3rem;
height: 3rem;
border-radius: 0.75rem;
}

.list_educ {
list-style: none;
font-size: small;
}


@property --rotate {
syntax: "<angle>";
initial-value: 132deg;
inherits: false;
}



.magic-card {
background: #191c29;
width: var(--card-width);
height: var(--card-height);
padding: 3px;
position: relative;
border-radius: 6px;
justify-content: center;
align-items: center;
text-align: center;
display: flex;
font-size: 1.5em;
color: rgb(88 199 250 / 0%);
cursor: pointer;
font-family: cursive;
}

.magic-card:hover {
color: rgb(88 199 250 / 100%);
transition: color 1s;
}
.magic-card:hover:before, .magic-card:hover:after {
animation: none;
opacity: 50;
}


.magic-card::before {
content: "";
width: 104%;
height: 102%;
border-radius: 8px;
background-image: linear-gradient(
  var(--rotate)
  , #5ddcff, #3c67e3 43%, #4e00c2);
  position: absolute;
  z-index: -1;
  top: -1%;
  left: -2%;
  animation: spin 2.5s linear infinite;
}

.magic-card::after {
position: absolute;
content: "";
top: calc(var(--card-height) / 6);
left: 0;
right: 0;
z-index: -1;
height: 100%;
width: 100%;
margin: 0 auto;
transform: scale(0.8);
filter: blur(calc(var(--card-height) / 6));
background-image: linear-gradient(
  var(--rotate)
  , #5ddcff, #3c67e3 43%, #4e00c2);
  opacity: 1;
transition: opacity .5s;
animation: spin 2.5s linear infinite;
}

@keyframes spin {
0% {
  --rotate: 0deg;
}
100% {
  --rotate: 360deg;
}
}


.carousel_img {
  object-fit: contain;
  margin: 0 auto;
  max-height: 700px;
  width: auto;
}


.carousel-button {
  position: absolute;
}

.img-wrapper {
  position: relative;
}

.img-responsive {
  width: 100%;
  height: auto;
}

.img-overlay {
  position: absolute;
  top: 0;
  bottom: 80%;
  left: 0;
  right: 0;
  text-align: center;
}

.img-overlay:before {
  content: ' ';
  display: block;
  /* adjust 'height' to position overlay content vertically */
  height: 50%;
}

.carousel-caption > h2  {
  font-size: large;
}

.carousel-caption > p{
  font-size: small; 
}

.carousel-caption > h2, .carousel-caption > p {
  font-weight: 700;
}

.btn_width {
  width: 150px;
}


@media only screen and (max-width: 766px) {

.features_grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: .5fr 1fr;
  align-items: start;
  gap: 5px;
  padding: 2em 3em;
}

.carousel-inner {
  height: 60vh;
}

.carousel_img {
  height: 500px;
  width: auto;
}

.trade_mark {
  font-size: xx-small;
}

.text-body-secondary > svg{
  width: 20px;
}
.brand_logo {
  width: 30px;
}

.carousel-caption > h2 {
  font-size: small;
}
.carousel-caption >p {
  font-size: x-small;
}

.carousel_img {
  object-fit: cover;
}

.brand_logo {
  height: 55px;
  width: auto;
}

.btn_width {
  margin: 5px 0;
}

  .btn-lg.btn_width {
  width: 40%;
}
}

@media only screen and (max-width: 680px) {
.trade_mark{
    display: none;
  }

footer > .brand_logo {
  height: 30px;
  width: auto;
}
  

.carousel_img {
  object-fit: cover;
}

.btn-lg.btn_width {
  width: 100%;
}

.text-body-secondary > svg{
  width: 15px;
}

h3 {
  font-size: medium;
}
  
}