*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat';
}

.logo-img{
    width: 150px;
    height: 150px;
}

.box:hover {
    box-shadow: 0 0 11px rgba(197, 196, 196, 0.5); 
}

.word {
    font-size: 50px; 
}

h1{
    font-size: 40px;
}


.perspective{
    position: relative;
    left: 35px;
    overflow: hidden;
    transform: perspective(800px) rotateY(6deg); /* Add this line */
}

/* For tablets and smaller laptops */
@media (max-width: 1024px) {
    .perspective {
        left: 20px;
        transform: perspective(700px) rotateY(4deg);
    }
}

/* For mobile devices (landscape) */
@media (max-width: 768px) {
    .perspective {
        left: 10px;
        transform: perspective(600px) rotateY(3deg);
    }
}

/* For mobile devices (portrait) */
@media (max-width: 480px) {
    .perspective {
        left: 0;
        transform: perspective(500px) rotateY(1deg);
    }
}

.perspective-card{
    position: relative;
    left: -35px;
    overflow: hidden;
    transform: perspective(800px) rotateY(6deg); /* Add this line */
}

@media (max-width: 768px){
    .perspective-card{
        position: relative;
        left: 15px;
        overflow: hidden;
        transform: perspective(800px) rotateY(6deg); /* Add this line */
    }
}

@media (max-width: 568px){
    .perspective-card{
        position: relative;
        left: 0px;
        overflow: hidden;
        transform: perspective(800px) rotateY(6deg); /* Add this line */
    }
}

/* For tablets and smaller laptops */
@media (max-width: 1024px) {
    .perspective {
        left: 5px;
        transform: perspective(700px) rotateY(4deg);
    }
}

/* For mobile devices (landscape) */
@media (max-width: 768px) {
    .perspective {
        left: 0px;
        transform: perspective(600px) rotateY(3deg);
    }
}

/* For mobile devices (portrait) */
@media (max-width: 480px) {
    .perspective {
        left: 0;
        transform: perspective(500px) rotateY(1deg);
    }
}

.bg-gradient-info {
    background: linear-gradient(35deg, #11cdef 0, #1171ef 100%) !important;
}

.card-responsive {
    position: absolute;
    top: 73%; /* Position the card at the bottom of the image */
    left: -130px;
    transform: translateY(-100%); /* Move the card up by its own height */
}

@media screen and (max-width: 991px) {
    .card-responsive {
        position: static;
        transform: none;
        margin-top: -5rem; /* Adjust this value to overlap the image as desired */
        left: 80%;
    }
}



@media screen and (max-width: 767px) {
    .card-responsive {
        margin-top: 1rem; /* Add space between the image and the card on small screens */
        width: 90%; /* Reduce the width on smaller screens for padding */
        left: 50%;
        transform: translateX(-1%); /* Center the card on small screens */
    }
}

@media screen and (max-width: 575px) {
    .card-responsive {
        width: 100%; /* Full width on extra small screens */
        transform: translateX(0); /* Remove transform as it's no longer needed */
    }
}

/* Custom styles for the card */
.card-responsive-2 {
    margin-top: -5rem; /* Adjust this as needed */
    margin-left: 130px;
}


/* On small screens, reset the card to flow in the document */
@media screen and (max-width: 991px) {
    .card-responsive-2 {
        position: static; /* Reset position to flow in the normal document */
        transform: none; /* Clear any transform */
        margin-top: -5rem; /* Negative margin to overlap the image */
    }
}

/* For small screens, stack the card above the image and center it */
@media screen and (max-width: 767px) {
    .card-responsive-2 {
        margin-top: 1rem; /* Space between the card and the image */
        width: 90%; /* Set width to 90% of the parent container */
        margin-left: auto; /* Center the card using auto margins */
        margin-right: auto; /* Center the card using auto margins */
    }
}

/* For extra small screens, ensure the card takes the full width */
@media screen and (max-width: 575px) {
    .card-responsive-2 {
        width: 100%;
        margin-top: 1rem; /* Consistent spacing from the top */
        margin-bottom: 1rem; /* Consistent spacing from the bottom */
    }
}
    
.tab-content > .tab-pane {
    display: none;
}

.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}

.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}

.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
}

.rate:not(:checked) > label:before {
    content: '★ ';
}

.rate > input:checked ~ label {
    color: #ffc700;    
}

/* Removed hover effects */
.rate:not(:checked) > label,
.rate:not(:checked) > label ~ label,
.rate > input:checked + label,
.rate > input:checked + label ~ label,
.rate > input:checked ~ label,
.rate > input:checked ~ label ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #ffc700; /* This will ensure the stars remain the same color without hover effect */
}


/* .rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: #ffc700;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
} */

.image-responsive{
    width: 300px;
    height: 250px;
}

@media (min-width: 768px){
    .image-responsive{
        width: 330px;
        height: 380px;
    }
}

@media (min-width: 1024px),(max-width: 1150px){
    .image-responsive{
        width: 300px;
        height: 250px;
    }
}

.img-opacity{
    position: absolute;
}

@media(max-width: 568px){
    .button-responsive{
        margin-top: -28px;
        margin-right: -15px;
        
    }
}

.rubiks-cube{
    position: relative;
    right: -200px;
    top: -50px;
    width: 300px;
    height: 300px;
    margin-bottom: -50px;
}

@media (max-width: 568px){
    .rubiks-cube{  
        justify-content: center;
        align-content: center;
        align-items: center;
        position: relative;
        top: 2px;
        right: -30px;
        width: 300px;
        height: 300px;
    }
}

@media (min-width: 768px){
    .rubiks-cube{
        justify-content: center;
        align-content: center;
        align-items: center;
        position: relative;
        top: 5px;
        right: -200px;
        width: 300px;
        height: 300px;
    }
}

@media (width: 1024px){
    .rubiks-cube{
        justify-content: center;
        align-content: center;
        align-items: center;
        position: relative;
        top: 5px;
        right: -150px;
        width: 300px;
        height: 300px;
    }
}