body {
    scroll-behavior: smooth;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color: rgb(17, 17, 17);
    color: white;
    background: linear-gradient(45deg, rgb(255, 30, 64) 5%, rgb(26, 26, 26) 70%);
    background-size: cover;
    overflow-x: hidden;
    padding-top: 95px;
}

section {
    padding-top: 95px;
}

.navbar-brand {
    font-size: 50px;
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
}

.my-foot {
    background-color: rgb(26, 26, 26);
    padding: 10px;
    border-style: solid;
    border-color: rgb(26, 26, 26);
    border-top: #92dc35;
}

.bg-my-dark {
    background-color: rgb(26, 26, 26);
}

.bg-mycolor {
    background-color: rgb(26, 26, 26);
}

.bg-redbtn-clr {
    background-color: rgb(255, 30, 64);
}

.work-crd {
    height: 20rem;
    background-color: #000000;
    border-style: none;
    border-radius: 10px;
}

.work-crd:hover {
    cursor: pointer;
}

.my-line {
    width: 30%;
    height: 5px;
    background-color: #92dc35;
}

.my-line-wht {
    width: 30%;
    height: 5px;
    background-color: #ffffff;
}

#work {
    background-image: url('/assets/img/beach-top.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 95px;
    transition: background-image 1s ease-in-out;
}

#backImage-Mila {
    border-radius: 50%;
    position: relative;
    top: -70px;
    left: -80px;
    z-index: 0;
    width: 120%;
    background-color:rgb(220 53 69);
}

.row {
    column-gap: 0px;
    row-gap: 15px;
}

@media(max-width: 900px) {
    body {
        padding-top: 0px;
    }

    section {
        padding-top: 0px;
    }

    .navbar-brand {
        font-size: 30px;
    }

    #backImage-Mila {
        position: relative;
        top: 50px;
        left: -20px;
    }
}

.flipped {
    transform: scaleX(-1);
}

@media(max-width: 575px) {
    #backImage-Mila {
        position: relative;
        top: 0px;
        left: 10px;
    }
}

.circular-border {
    border-radius: 20px;
}

.navbar {
    background-color: rgb(26, 26, 26);
    border-style: solid;
    border-color: rgb(26, 26, 26);
    border-bottom-color: #92dc35;
}

.img-div {
    height: 50%;
    padding: 10px;
}

html {
    scroll-behavior: smooth;
}

h1 {
    font-weight: bold;
    font-family: 'Arial Rounded MT Bold', Arial, sans-serif;
}

.fnt-20 {
    font-size: 20px;
    font-weight: bold;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.fnt-40 {
    font-size: 30px;
    font-weight: bold;
    padding-bottom: 0px;
}

.bg-opaque {
    background-color: rgba(6, 6, 6, 0.659);
}

.bg-main-dark {
    background-color: rgb(26, 26, 26);
}

.pad-5 {
    padding: 5px;
}

.pad-10 {
    padding: 10px;
}

.pad-15 {
    padding: 15px;
}

.pad-20 {
    padding: 20px;
}

.pad-30 {
    padding: 30px;
}

.pad-40 {
    padding: 40px;
}

.vh-full {
    height: 95vh;
}

.vh-Qhalf {
    height: 75vh;
}

.vh-inherit {
    height: inherit;
}

.all-caps {
    text-transform: uppercase;
}

.bg-main-clr {
    background-color: #92dc35;
}

.bd-main-clr {
    border-color: #92dc35;
}

.clr-main {
    color: #92dc35;
}

/* Custom scrollbar styles */
::-webkit-scrollbar {
    width: 12px;
    /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
    background: black;
    /* Background of the scrollbar track */
}

::-webkit-scrollbar-thumb {
    background: #92dc35;
    /* Color of the scrollbar thumb */
    border-radius: 6px;
    /* Optional: rounded corners for the thumb */
}

::-webkit-scrollbar-thumb:hover {
    background: #7abf2d;
    /* Optional: darker color on hover */
    transition: ease-in 0.3s;
}


/* Keyframes for sliding in from the left */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Keyframes for sliding in from the right */
@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* CSS for popup animation */
@keyframes popup {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.popup {
    animation: popup 1s ease-out;
}

/* CSS for growing animation */
@keyframes grow {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.grow {
    animation: grow 0.5s ease-out;
}

/* Applying the animation to elements */
.slide-in-left {
    animation: slideInFromLeft 1s ease-in-out;
}

.slide-in-right {
    animation: slideInFromRight 1.5s ease-in-out;
}

.link {
    text-decoration: none;
    color: white;
}


.link:hover {
    text-decoration: none;
    color: #92dc35;
    transition: ease-in 0.3s;
    cursor: pointer;
}

/* Custom Carousel*/
@media (max-width: 768px) {
    .carousel-inner .carousel-item > div {
        display: none;
    }
    .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* display 3 */
@media (min-width: 768px) {
    
    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
      transform: translateX(33.333%);
    }
    
    .carousel-inner .carousel-item-left.active, 
    .carousel-inner .carousel-item-prev {
      transform: translateX(-33.333%);
    }
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{ 
  transform: translateX(0);
}

/*card styles*/
*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif; 
    box-sizing: border-box;
}
.wrapper{
    padding: 10px 10%;
}
#card-area{
    padding: 50px 0;
}
.box-area{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 40px;
    margin-top: 50px;
}
.box {
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.9);
}
.box img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    display: block;
    transition: transform 0.5s;
    border-style: none;
}
.overlay {
	width: 100%;
	height: 0;
	background: linear-gradient(transparent,#9aff36 65%);
	border-radius: 10px;
    color: #ffffff;
	position: absolute;
	left: 0;
	bottom: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0 40px;
	text-align: center;
	font-size: 14px;
	transition: height 0.5s;
}
.overlay h4 {
	font-weight: 500;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	font-size: 30px;
    font-weight: bold;
    text-shadow: 0px 0px 15px black;
}
.overlay a {
	margin-top: 10px;
	font-size: 18px;
    border-radius: 30px;
    width: 100px;
}

.box:hover img{
    transform: scale(1.1);
}
.box:hover .overlay{
    height: 100%;
}

.mySkill{
    text-shadow:5px 5px 10px #ffffff;
}