Gecko [ thecigaretteboxes.com ]

Name	Size	Permission	Action
custom.css	2.34 KB	-rw-r--r--
style.css	29.38 KB	-rw-r--r--

Code Editor : custom.css

body{
    font-family: 'Montserrat', sans-serif;

}
.banner-heading-1{
    font-family: 'Montserrat', sans-serif;
    /*font: 72px futura Medium-bt;*/
    letter-spacing: 3px;
}
.banner-text-1{
    font-family: 'Montserrat', sans-serif;
    /*font: 24px futura Light;*/
    letter-spacing: 3px;
}

h1{
    font-family: 'Montserrat', sans-serif;
}

.main-card-image {
    position: relative;
    overflow: hidden;
}

.main-card-image img {
    transition: opacity 0.8s ease;
}

/*card main*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600&display=swap');

/* Add the path to the second image in the 'content' property below */
.main-card-image::after {
    content: url("../images/Hygieia Health Goddess Statue.H-1.png");
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.main-card-image:hover img {
    opacity: 0; /* Hide the first image on hover */
}

.main-card-image:hover::after {
    opacity: 1; /* Show the second image on hover */
}

.card {
    position: relative; /* Add position: relative to the card container */
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0 0 15px 15px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    width: 250px;
    padding-bottom: 15px;
    background-color: white;
    overflow: hidden; /* Add overflow: hidden to hide the image overflow */
}

.card h2 {
    margin: 10px 0;
}

.cont {
    width: 90%;
    height: 0;
    overflow: hidden;
    text-align: center;
    transition: all 0.6s ease;
}

.card .cont .link i {
    font-size: 25px;
    color: rgb(82, 82, 82);
    transition: all 0.2s ease;
}

.card .cont .link i:hover {
    color: black;
    cursor: pointer;
}

.card:hover > .cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    height: 150px;
}

.card:hover > .link {
    width: 40%;
    display: flex;
    justify-content: space-between;
}

.card .main-card-image img {
    transition: transform 0.8s ease; /* Add a transition for smooth animation */
}

.card:hover .main-card-image img {
    transform: translateY(-100px); /* Move the image upward on hover */
}

/*testimonial anidicator button colour*/
.carousel-indicators [data-bs-target]{
    background-color: #FF6B00;
}

${this.title}

Code Editor : custom.css