/* Default styles for all devices */
/*330x630 lower limit design | 480x960 max for phones & vice versa, so from 330 to 480 and 630 to 960 its us*/
/*720 x1280 tablets & vice versa*/
/*1280x720 to 1920x1080*/


@media only screen and (orientation: landscape) and (max-width: 960px) {
 /*--------INDEX----------*/
    html{font-size: 1.15rem;
    }
    /*HEADER*/
    .logoNav{
        max-height: 100px; /* Adjust the maximum height to your needs */
        margin-top: 14px; }
    .hamburgerNavLinks {padding-top: 0;top: -500px;}
    .hamburger .bar { margin-top: 2vh;}
    /* Video & Gif */
    #gif {
        width: 42vh; 
        height: 42vh; 
        top: 105%; /* Adjust the top position to center vertically */}
    .arrowDown {
        height: 12vh;
        width: 8vw;
        top: 80%;
        left: calc(50% - 4vw); /* Here we do 50% - half the size of the arrow to center it, as 50% starts from its tip */}
    #video-container {  height: 120vh;}
    /*DISCOVER*/
    .categories img {
    height: 90vh;}
    .case {
    height:  90vh; /* 440px / 967px = 0.228125 */}
    /*LATEST BLOGS */
    .blogs{width: 80%; margin-left: 10%;}
    .background-image {
    height: 120vh; /* Adjust the height as needed */} 
 
    /*CATEGORIES*/
    .blog-post {height: 50vh;}
    .blog-post img {
        width: 26vh;
        height: 26vh;}
    /*PAGES*/
    .torn-image {height: 80vh;}
    /*Text structure*/
    section:nth-child(1){
        margin-top: 15%;}
}

@media only screen  and (min-width: 961px) and (max-width: 1279px) {
}

@media only screen  and (min-width: 1280px) {


    html{font-size: 1.2rem;
        letter-spacing: 2px;
    }
    /*HEADER*/
    .logoNav{
        max-height: 140px; /* Adjust the maximum height to your needs */
        margin-top: 20px; }
    .hamburgerNavLinks {padding-top: 0;top: -600px;}
    .hamburger .bar { margin-top: 1vh;   width: 34px;}
    /* Video & Gif */
    #gif {
        width: 42vh; 
        height: 42vh; 
        top: 105%; /* Adjust the top position to center vertically */}
    .arrowDown {
        height: 12vh;
        width: 8vw;
        top: 80%;
        left: calc(50% - 4vw); /* Here we do 50% - half the size of the arrow to center it, as 50% starts from its tip */}
    #video-container {  height: 110vh;}
    /*DISCOVER*/
    .categories img {
    height: 76vh;}
    .case {
    height:  76vh; /* 440px / 967px = 0.228125 */}
    /*LATEST BLOGS LOTS OF WORK FOR DESKTOP */
    .blogs{width: 60%; margin-left: 20%; display: flex; align-items: flex-start;}
    .latest-blog-update{width: 50%;}
    .blog-textbox {width: 50%;}
    .blog-textbox * {padding: 2%;}
    .blog-content{ -webkit-line-clamp: 15;  }
    .latest-blog-update .background-image {
    height: 70vh; /* Adjust the height as needed */
    width: 26vw;
    border: 1vh solid #fff; /* White border around the torn image */
    border-radius: 1vh;
    box-shadow: 0px -5px 15px rgba(0, 0, 0, 0.1), 0px 5px 15px rgba(0, 0, 0, 0.1); } 

    /*CATEGORIES*/
    .blog-post {height: 50vh;}
    .blog-post img {
        width: 26vh;
        height: 26vh;}
    /*PAGES*/
    .background-image{height: 80vh; }
    .torn-image {height: 80vh;}
    /*Text structure*/
    section:nth-child(1){
        margin-top: 15%;}
}