/*

Combination Breakpoints:

Width X Height : 480 X 768, 768 X 1024  (portrait)
Height X Width : 768 X 480, 1024 X 728 (landscape)
Above 1k both PC
*/
/* For buttons & links I need around 22.5 vw*/

/*
*{
    border: 1px solid #2ac75f;
}
*/

/*
*::after {
    content: attr(class);
    display: inline-block;
    background-color: #333;
    color: #fff;
    padding: 2px 4px;
    margin-left: 5px;
    font-size: 12px;
    font-family: Arial, sans-serif;
  }
  */

    
#gif {
    width: 22vh; 
    height: 22vh; 
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
    position: absolute;
    top: 62%; /* Adjust the top position to center vertically */
    left: 50%; /* Adjust the left position to center horizontally */
    transform: translate(-50%, -200%); /* Centering trick */
    z-index: 1;}
.arrowDown {
    height: 4vh;
    width: 12vw;
    display: flex;
    position: absolute;
    top: 60%;
    left: calc(50% - 6vw); /* Here we do 50% - half the size of the arrow to center it, as 50% starts from its tip */
    transform: translate(-50%, -200%); /* Centering trick */
    z-index: 1;
    animation-name: arrowBounce;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;}
  @keyframes arrowBounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-10px);
    }
    60% {
      transform: translateY(-5px);
    }}

#video-container {
width: 100vw;
height: 67vh;
text-align: center;
overflow: hidden;}
#videobcg {
width: inherit;
height: inherit;
-o-filter: blur(15px);
filter: blur(15px);
object-fit: cover;
transform: scale(1.04);}


.line {
    border-bottom: 0.05vw solid rgb(39, 38, 38); /* 1px / 1920px = 0.0005208333 */
    padding: 0.5%;
    margin: 5% 5% 5% 5%;} 

.core-content{
    text-align: center;
    margin-top: 8%;
    margin-bottom: -3%;}

/*DISCOVER*/
.categories {
display: flex;
align-items: center;
justify-content: space-evenly;
}
    .categories img {
    max-width: 100%;
    object-fit: cover;
    height: 44vh;
    }
    .case {
    font-size: 0.75rem; /* Equivalent to 12px (0.75 * 16px) */
    font-weight: 100;
    max-width: 100%; /* 320px / 1920px = 0.1666666667 */
    height:  44vh; /* 440px / 967px = 0.228125 */
    position: relative;
    margin: 0.25% 0.5% 0.5% 0.5%;
    }
        .case:hover {
        /* transform: scale(1.1);*/
        transform: scale(1.02);
        transition: transform 0.3s ease;
        }
        .card {
            font-size: 1.6rem;
            font-weight: bold;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1.3));
            color: rgb(255, 255, 255);
            text-align: center; /* Center-align the text */
            position: absolute;
            bottom: 0; /* Place the card at the bottom */
            width: 100%; /* Occupy the full width of the parent container */
            padding: 10px;
            z-index: 1;
        }

/*LATEST BLOGS */
    .blogs{
        
        margin-bottom: 10%;}
    .blogs h1, .blogs h2, .blogs h3, .blogs h4, .blogs p {
        margin: 3%;}
    .latest-blog-update {
    display: flex;
    }
    .background-image {
    width: 100%; /* Adjust the width of the torn image */
    height: 36vh; /* Adjust the height as needed */
    margin-top: 2%;
    background-size: cover;
    background-position: center;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    }
    .blog-date {
    font-size: 0.92rem;
    }
    .blog-title {
    font-size: 1rem; /* 0.93 large */
    margin-top: 3%; /*0;*/
    margin-bottom: 3%;
    }
    .blog-content{
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Adjust this value to control the number of lines before truncating */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    }
    .read-more-container {
    font-size: 0.77rem;
    position: relative;
    text-transform: uppercase;
    text-decoration: none;
    }
    

/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*SEARCH*/
.bar{
    background-color: #f5cb94f6;
    color: rgb(19, 18, 18);
    font-size: 0.9rem; /* Equivalent to 12px (0.75 * 16px) */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 1%;
    margin:4% 4% 0% 4%;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
}
    .bar .lens {
    width: 3.5vw; 
    height: auto; 
    margin-bottom: -0.30vh;
    margin-left: 15%;
    }
    .bar input[type="text"] {
    width: 100%;
    height: 3%;
    flex: 1;
    border: none;
    background: none;
    font-size: 16px;
    padding: 8px;
    outline: none;
    }
    .bar{
        position: relative;
    }

.suggestions {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute; /* Position the suggestions absolutely */
    width: 60%; /* Adjust the width to match the input width minus border */
    background-color: rgba(255, 255, 255, 0.95); /* Slightly opaque white background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    opacity: 0.8;
    z-index: 1; /* Place the suggestions above other elements */
    top: 100%; /* Position just beneath the input */
    transform: translateY(-2px); /* Adjust the vertical position */
}
.suggestions li {
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    border-bottom: 1px solid #ddd;
}
.suggestions li:last-child {
    border-bottom: none;
}
.suggestions li:hover {
    background-color: #96fa6e;
}

/*Desktop view */
.side-section {
    display: none; /* Hide the container by default */
    }
/*
.pagination {
    text-align: center;
}

.pagination a {
    display: inline-block;
    padding: 8px 16px;
    margin-top: -15%;
    text-decoration: none;
    background-color: #f2f2f2;
    color: #333;
    border: 1px solid #ddd;
}

.pagination a:hover {
    background-color: #f1ab29;
    color: white;
}

.pagination a.active {
    background-color: #f1ab29;
    color: white;
}

.pagination a.disabled {
    pointer-events: none;
    cursor: not-allowed;
}

*/