/*background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */

/* Basic reset for consistent styling across browsers */
/*
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*/

/* body, h1, h2, p, ul, li, a, div {*/

/*body, h1, p, ul, li, a, div {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
    */

/*////////////////   font-family: "Lato", Sans-Serif;  ///////////////*/

#bodysinglebirddetails {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    /*color: #333;*/
    /*padding: 20px;*/
    /* display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    /*min-height: 100vh;*/
}

.container {
    max-width: 1200px;
    width: 100%;
    background-color: #e0f7fa;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.ad-details-container {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    background-color: #F9F9F9;
    padding: 20px;
    border-radius: 2px;
    border: 1px solid #e6e6e6;
    width: 91.5%;
    /*height: 124.5vh;*/
    height: 984px !important;
    margin: 0 auto;
    margin-top: 6%;
    position: relative;
    /* overflow: auto;        /*remove it may be its for scrollbar that we dont need*/
    transform: translateY(-53.2px);
    min-height: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.ad-details-container p,
.ad-details-container h1,
.ad-details-container h2,
.ad-details-container ul,
.ad-details-container li {
    margin: 3px;
    padding: 0;
}

#specie-h2 {
    font-family: Lato, sans-serif;
    font-weight: 600;
    line-height: 1.5;
    color: #233d7b;
    font-size: 27.6px;
    margin-top: -4px;
}

/* Style for the "Species:" label */
.species-label {
    color: #233d7b;
    /* Color for the label */
}

/* Style for the species name */
.species-name {
    color: #4a4a4a;
    /* Different color for the species name */
}

strong {
    color: #161515;
}

.ad-info-bird-detail {
    flex: 1;
    text-align: left;
    margin-top: 25px;
}

.slideshow-container {
    /* default for screens (1) */
    flex: 1;
    width: 50%;
    height: 480.8px;
    position: relative;
    overflow: hidden;
    margin-top: 1px;
    margin-bottom: 1px;
    left: -56px;
    margin-left: -20px;
    background-color: #464E60;
}

.ad-slideshow {
    width: 50%;
    height: 70%;
    position: relative;
    left: -50px;
    padding-bottom: 0;
}

.prev,
.next {
    position: absolute;
    /*top: calc(50% + -50px);*/ /* causing problem*/
    top: 155px;
    width: 50px;
    height: 55px;
    background: rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, transform 0.3s ease;
    color: #ffffff;
    border: none;
    cursor: pointer;
    z-index: 10;
    font-size: 35.5px;
    border-radius: 5px;
    text-align: center;
    line-height: 55px;
    padding: 14.5px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Positioning left arrow */
.prev {
    left: -77px;
}

/* Positioning right arrow */
.next {
    right: -1px;
}

.prev,
.next {
    transform: translateY(0);
}

.prev:hover,
.next:hover {
    background: rgba(0, 0, 0, 0.2);
    /* Slightly more visible on hover */
    /*transform: scale(1.0); /* Slightly enlarge on hover */
}

/* Show active slide */
.show {
    display: block;
}

.slideshow-container img {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform: translateX(0);
}

.button-container {
    text-align: center;
    margin: 110px 0;
}

.find-more-button {
    display: inline-block;
    padding: 15px 19px;
    /*background-color: #B0E57C;*/
    background-color: rgb(102, 196, 107);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 18.4px;
    transition: background-color 0.3s;
    transform: translate(-160px, 10px);
}

.find-more-button:hover {
    background-color: #9ACD32;
}

.thumbnail-container {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 1px;
    overflow: hidden;
    display: flex;
    width: 100%;
    margin-top: -6px;
    margin-left: -3.5px;
    justify-content: flex-start;
    gap: 1px;
    position: relative;
    margin-right: -10px;
    padding-right: 10px;
}

.thumbnail {
    flex: 0 0 20%; /* Each thumbnail takes 20% of the container width */
    height: 100px; /* Set a fixed height */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    margin-top: 1px; /* Adjust margins as needed */
    margin-bottom: 1px; /* Adjust margins as needed */
    background-color: #B0C4D4;
    /* Background color */
    /* background-color:rgba(0, 0, 0, 0);;*/
    /*transparent color*/
    margin-left: 0px;
    transition: transform 0.5s ease; /* Adjust duration and easing as needed */
}

.thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 2.3px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform: translateX(0);
}

.thumbnail.active {
    border: 2px solid #464E60;
    /* Highlight the active thumbnail */
    transform: scale(1.05);
    /* Slightly enlarge the active thumbnail */
    opacity: 1;
    /* Fully opaque */
}

.thumbnail.inactive {
    background-color: (0, 0, 0, 0.7);
}

.hidden {
    display: none;
}

/*noe in use*/
#ad-info {
    margin-bottom: 20px;
    background-color: blue;
}

.hidden {
    display: none;
}

#description {
    margin-top: -31px;
}

.description-label {
    display: inline-block;
    position: relative;
    top: -25.5px;
}

#gender-field .label,
#dna-field .label {
    display: inline-block;
    width: 150px;
}

#gender-field .content,
#dna-field .content {
    display: inline-block;
    margin-left: 10px;
}

#age-field .label,
#ring-number-field .label,
#address-field .label,
#phone-number-field .label,
#city-field .label,
#price-field .label {
    display: inline-block;
    width: 150px;
}

#age-field .content,
#ring-number-field .content,
#address-field .content,
#phone-number-field .content,
#city-field .content,
#price-field .content {
    display: inline-block;
    margin-left: 10px;
}

#mutation-field .label {
    display: inline-block;
    width: 150px;
}

#mutation-field .content {
    display: inline-block;
    margin-left: 10px;
}

/*//////////////////////////////////////////////// h2 fields ///////////////////////////////////////////////////*/

#mutation-field {
    font-family: 'Lato', Sans-Serif;
    color: black;
    font-size: 14.8px;
    font-weight: normal;
    border-bottom: 2.01px solid #E8E8ED;
    width: 355px;
    padding: 15px 10px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

#gender-field {
    font-family: 'Lato', Sans-Serif;
    color: black;
    font-size: 14.8px;
    font-weight: normal;
    border-bottom: 2.01px solid #E8E8ED;
    width: 355px;
    padding: 15px 10px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

#dna-field {
    font-family: 'Lato', Sans-Serif;
    color: black;
    font-size: 14.8px;
    font-weight: normal;
    border-bottom: 2.01px solid #E8E8ED;
    width: 355px;
    padding: 15px 10px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

#age-field {
    font-family: 'Lato', Sans-Serif;
    color: black;
    font-size: 14.8px;
    font-weight: normal;
    border-bottom: 2.01px solid #E8E8ED;
    width: 355px;
    padding: 15px 10px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

#ring-number-field {
    font-family: 'Lato', Sans-Serif;
    color: black;
    font-size: 14.8px;
    font-weight: normal;
    border-bottom: 2.01px solid #E8E8ED;
    width: 355px;
    padding: 15px 10px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

#phone-number-field {
    font-family: 'Lato', Sans-Serif;
    color: black;
    font-size: 14.8px;
    font-weight: normal;
    border-bottom: 2.01px solid #E8E8ED;
    width: 355px;
    padding: 15px 10px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

#city-field {
    font-family: 'Lato', Sans-Serif;
    color: black;
    font-size: 14.8px;
    font-weight: normal;
    border-bottom: 2.01px solid #E8E8ED;
    width: 355px;
    padding: 15px 10px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

#price-field {
    font-family: 'Lato', Sans-Serif;
    color: black;
    font-size: 14.8px;
    font-weight: normal;
    border-bottom: 2.01px solid #E8E8ED;
    width: 355px;
    padding: 15px 10px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.description-label {
    font-family: 'Lato', Sans-Serif; color: black; font-size: 14.8px; font-weight: normal; width: 335px; padding: 15px 10px;
}


/*//////////////////////////////////////////////// h2 fields ending ///////////////////////////////////////////////////*/

/*///////////////////////////////////////////// Media  queries starting /////////////////////////////////////////////*/


/*points for future*/
/*actual :  used for media queries (chrome and checked from whatismyip.com)     */


/*           Smartphone    device # = (1)    tested on = 319px    (max-width:	320	px) { }    starting              */

@media only screen and (max-width: 320px) {

    html,
    body.is-smartphone {
        overflow-x: hidden;
        /*background-color: lightblue !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        width: 84.6%;
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
        /*background-color: red;*/
        background-color: red;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 234.4px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 294px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 290px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.5%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(-133%);
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (1)    tested on = 319px    (max-width:	320	px) { }    ending              */


/*           Smartphone    device # = (2)    tested on = 335px    (min-width: 321px) and (max-width: 350px) { }   starting        */

@media only screen and (min-width: 321px) and (max-width: 350px) {

    html,
    body.is-smartphone {
        overflow-x: hidden; 
        /*background-color: lightcoral !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        width: 84.6%;
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
        background-color: lightblue;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 245px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

    .is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 308.5px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 306px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.5%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(-133%);
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (2)    tested on = 335px    (min-width: 321px) and (max-width: 350px) { }   ending        */


/*           Smartphone    device # = (3)    tested on = 375px    (min-width: 351px) and (max-width: 400px) { }   starting        */

@media only screen and (min-width: 351px) and (max-width: 400px) {

    html,
    body.is-smartphone {
        overflow-x: hidden; 
        /*background-color: lightcyan !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        width: 86.7%;
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 289px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 351px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 350px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.5%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(calc(-109% - 5px));
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (3)    tested on = 375px    (min-width: 351px) and (max-width: 400px) { }   ending        */


/*           Smartphone    device # = (4)    tested on = 425px    (min-width: 401px) and (max-width: 480px) { }   starting        */

@media only screen and (min-width: 401px) and (max-width: 450px) {

    html,
    body.is-smartphone {
        overflow-x: hidden; 
        /*background-color: lightgoldenrodyellow !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        width: 88.3%;
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 346px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 400px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 403px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.4%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(calc(-94% - 5px));
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (4)    tested on = 425px    (min-width: 401px) and (max-width: 480px) { }   ending        */


/*           Smartphone    device # = (5)    tested on = 475px    (min-width: 451px) and (max-width: 500px) { }   starting        */

@media only screen and (min-width: 451px) and (max-width: 500px) {

    html,
    body.is-smartphone {
        overflow-x: hidden; 
        /*background-color: lightgray !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        width: 89.6%;
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 397px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 450px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 452px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.4%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(calc(-75% - 5px));
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (5)    tested on = 475px    (min-width: 451px) and (max-width: 500px) { }   ending        */


/*           Smartphone    device # = (6)    tested on = 525px    (min-width: 501px) and (max-width: 550px) { }   starting        */

@media only screen and (min-width: 501px) and (max-width: 550px) {

    html,
    body.is-smartphone {
        overflow-x: hidden; 
        /*background-color: lightgreen !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        width: 90.5%;
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 446.7px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 500px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 504px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.4%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(calc(-60% - 5px));
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (6)    tested on = 525px    (min-width: 501px) and (max-width: 550px) { }   ending        */


/*           Smartphone    device # = (7)    tested on = 575px    (min-width: 551px) and (max-width: 600px) { }   starting        */

@media only screen and (min-width: 551px) and (max-width: 600px) {

    html,
    body.is-smartphone {
        overflow-x: hidden; 
        /*background-color: lightgrey !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        width: 91.4%;
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 497px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 548.8px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 555px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.4%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(calc(-47% - 5px));
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (7)    tested on = 575px    (min-width: 551px) and (max-width: 600px) { }   ending        */


/*           Smartphone    device # = (8)    tested on = 625px    (min-width: 601px) and (max-width: 650px) { }   starting        */

@media only screen and (min-width: 601px) and (max-width: 650px) {

    html,
    body.is-smartphone {
        overflow-x: hidden; 
        /*background-color: lightpink !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        width: 92%;
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 548.4px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 600px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 597px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.4%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(calc(-30% - 5px));
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (8)    tested on = 625px    (min-width: 601px) and (max-width: 650px) { }   ending        */


/*           Smartphone    device # = (9)    tested on = 675px    (min-width: 651px) and (max-width: 700px) { }   starting        */

@media only screen and (min-width: 651px) and (max-width: 700px) {

    html,
    body.is-smartphone {
        overflow-x: hidden; 
        /*background-color: lightsalmon !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        width: 92.6%;
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 596px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 649px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 650px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.4%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(calc(-8% - 5px));
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (9)    tested on = 675px    (min-width: 651px) and (max-width: 700px) { }   ending        */


/*           Smartphone    device # = (10)    tested on = 725px    (min-width: 701px) and (max-width: 750px) { }   starting        */

@media only screen and (min-width: 701px) and (max-width: 750px) {

    html,
    body.is-smartphone {
        overflow-x: hidden; 
        /*background-color: lightseagreen !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        width: 93.1%;
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 647px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 699px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 700px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.4%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(calc(7% - 5px));
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (10)    tested on = 725px    (min-width: 701px) and (max-width: 750px) { }   ending        */


/*           Smartphone    device # = (11)    tested on = 775px    (min-width: 751px) and (max-width: 800px) { }   starting        */

@media only screen and (min-width: 751px) and (max-width: 800px) {

    html,
    body.is-smartphone {
        overflow-x: hidden; 
        /*background-color: lightskyblue !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        width: 93.6%;
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 696px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 747px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 750px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.4%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(calc(20% - 5px));
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (11)    tested on = 775px    (min-width: 751px) and (max-width: 800px) { }   ending        */


/*           Smartphone    device # = (12)    tested on = 825px    (min-width: 801px) and (max-width: 850px) { }   starting        */

@media only screen and (min-width: 801px) and (max-width: 850px) {

    html,
    body.is-smartphone {
        overflow-x: hidden; 
        /*background-color: lightslategray !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        /*width: 93.6%;*/
        width: 94%;
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 747px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 799px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 798px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.4%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(calc(45% - 5px));
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (12)    tested on = 825px    (min-width: 801px) and (max-width: 850px) { }   ending        */


/*           Smartphone    device # = (13)    tested on = 875px    (min-width: 851px) and (max-width: 900px) { }   starting        */

@media only screen and (min-width: 851px) and (max-width: 900px) {

    html,
    body.is-smartphone {
        overflow-x: hidden; 
        /*background-color: lightslategrey !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        /*width: 93.6%;*/
        /*width: 94%;*/
        width: 94.3%;
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 797px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 845px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 848px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.4%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(calc(55% - 5px));
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (13)    tested on = 875px    (min-width: 851px) and (max-width: 900px) { }   ending        */


/*           Smartphone    device # = (14)    tested on = 925px    (min-width: 901px) and (max-width: 950px) { }   starting        */

@media only screen and (min-width: 901px) and (max-width: 950px) {

    html,
    body.is-smartphone {
        overflow-x: hidden; 
        /*background-color: lime !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        /*width: 93.6%;*/
        /*width: 94%;*/
        /*width: 94.3%;*/
        width: 94.6%;
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 847px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 898px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 898px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.4%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(calc(75% - 5px));
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
        
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (14)    tested on = 925px    (min-width: 901px) and (max-width: 950px) { }   ending        */


/*           Smartphone    device # = (15)    tested on = 975px    (min-width: 951px) and (max-width: 1000px) { }   starting        */

@media only screen and (min-width: 951px) and (max-width: 1000px) {

    html,
    body.is-smartphone {
        overflow-x: hidden; 
        /*background-color: linen !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        /*width: 93.6%;*/
        /*width: 94%;*/
        /*width: 94.3%;*/
        /*width: 94.6%;*/
        width: 94.9%;
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 897px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 945px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 944px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.4%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(calc(95% - 5px));
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
        
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (15)    tested on = 975px    (min-width: 951px) and (max-width: 1000px) { }   ending        */


/*           Smartphone    device # = (16)    tested on = 1025px    (min-width: 1001px) and (max-width: 1050px) { }   starting        */

@media only screen and (min-width: 1001px) and (max-width: 1050px) {

    html,
    body.is-smartphone {
        overflow-x: hidden; 
        /*background-color: lightsalmon !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        /*width: 93.6%;*/
        /*width: 94%;*/
        /*width: 94.3%;*/
        /*width: 94.6%;*/
        /*width: 94.9%;*/
        width: 95.2%;
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 947px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 999px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 1002px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.4%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(calc(110% - 5px));
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
        
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (16)    tested on = 1025px    (min-width: 1001px) and (max-width: 1050px) { }   ending        */


/*           Smartphone    device # = (17)    tested on = 1075px    (min-width: 1051px) and (max-width: 1100px) { }   starting        */

@media only screen and (min-width: 1051px) and (max-width: 1100px) {

    html,
    body.is-smartphone {
        overflow-x: hidden; 
        /*background-color: lightseagreen !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        /*width: 93.6%;*/
        /*width: 94%;*/
        /*width: 94.3%;*/
        /*width: 94.6%;*/
        /*width: 94.9%;*/
        /*width: 95.2%;*/
        width: 95.4%; /*0.2 */
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 997px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 1046px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 1042px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.4%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(calc(120% - 5px));
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
        
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (17)    tested on = 1075px    (min-width: 1051px) and (max-width: 1100px) { }   ending        */


/*           Smartphone    device # = (18)    tested on = 1125px    (min-width: 1101px) and (max-width: 1150px) { }   starting        */

@media only screen and (min-width: 1101px) and (max-width: 1150px) {

    html,
    body.is-smartphone {
        overflow-x: hidden; 
        /*background-color: red !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        /*width: 93.6%;*/
        /*width: 94%;*/
        /*width: 94.3%;*/
        /*width: 94.6%;*/
        /*width: 94.9%;*/
        /*width: 95.2%;*/
        /*width: 95.4%; /* A 0.2 */
        width: 95.6%; /* A 0.2 */
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 1047px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 1096px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 1089.5px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.4%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(calc(135% - 5px));
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
        
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (18)    tested on = 1125px    (min-width: 1101px) and (max-width: 1150px) { }   ending        */


/*           Smartphone    device # = (19)    tested on = 1175px    (min-width: 1151px) and (max-width: 1200px) { }   starting        */

@media only screen and (min-width: 1151px) and (max-width: 1200px) {

    html,
    body.is-smartphone {
        overflow-x: hidden; 
        /*background-color: yellow !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        /*width: 93.6%;*/
        /*width: 94%;*/
        /*width: 94.3%;*/
        /*width: 94.6%;*/
        /*width: 94.9%;*/
        /*width: 95.2%;*/
        /*width: 95.4%; /* A 0.2 */
        /*width: 95.6%; /* A 0.2 */
        width: 95.73%; 
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 1097.4px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 1145px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 1140.5px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.4%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(calc(145% - 5px));
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
        
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (19)    tested on = 1175px    (min-width: 1151px) and (max-width: 1200px) { }   ending        */


/*           Smartphone    device # = (20)    tested on = 1225px    (min-width: 1201px) and (max-width: 1250px) { }   starting        */

@media only screen and (min-width: 1201px) and (max-width: 1250px) {

    html,
    body.is-smartphone {
        overflow-x: hidden; 
        /*background-color: orange !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        /*width: 93.6%;*/
        /*width: 94%;*/
        /*width: 94.3%;*/
        /*width: 94.6%;*/
        /*width: 94.9%;*/
        /*width: 95.2%;*/
        /*width: 95.4%; /* A 0.2 */
        /*width: 95.6%; /* A 0.2 */
        /*width: 95.73%; */
        width: 95.96%; 
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 1147.4px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 1198px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 1190.5px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.4%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(calc(160% - 5px));
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
        
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (20)    tested on = 1225px    (min-width: 1201px) and (max-width: 1250px) { }   ending        */


/*           Smartphone    device # = (21)    tested on = 1275px    (min-width: 1251px) and (max-width: 1300px) { }   starting        */

@media only screen and (min-width: 1251px) and (max-width: 1300px) {

    html,
    body.is-smartphone {
        overflow-x: hidden; 
        /*background-color: peru !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        /*width: 93.6%;*/
        /*width: 94%;*/
        /*width: 94.3%;*/
        /*width: 94.6%;*/
        /*width: 94.9%;*/
        /*width: 95.2%;*/
        /*width: 95.4%; /* A 0.2 */
        /*width: 95.6%; /* A 0.2 */
        /*width: 95.73%; */
        /*width: 95.96%;*/
        width: 96.0487%; 
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 1196.4px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 1245px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 1235.5px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.4%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(calc(176% - 5px));
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
        
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (21)    tested on = 1275px    (min-width: 1251px) and (max-width: 1300px) { }   ending        */


/*           Smartphone    device # = (22)    tested on = 1325px    (min-width: 1301px) and (max-width: 1350px) { }   starting        */

@media only screen and (min-width: 1301px) and (max-width: 1350px) {

    html,
    body.is-smartphone {
        overflow-x: hidden; 
        /*background-color: blue !important;*/
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        /*width: 93.6%;*/
        /*width: 94%;*/
        /*width: 94.3%;*/
        /*width: 94.6%;*/
        /*width: 94.9%;*/
        /*width: 95.2%;*/
        /*width: 95.4%; /* A 0.2 */
        /*width: 95.6%; /* A 0.2 */
        /*width: 95.73%; */
        /*width: 95.96%;*/
        /*width: 96.0487%;*/
        width: 96.20%; 
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 1247.8px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 1295px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 1291.5px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.4%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }

    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(calc(193% - 5px));
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
        
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }
    
}

/*           Smartphone    device # = (22)    tested on = 1325px    (min-width: 1301px) and (max-width: 1350px) { }   ending        */

/*           Smartphone    device # = (23)    (min-width: 1351px) { }   starting        */

@media only screen and (min-width: 1351px) {
    /* Your styles for screens wider than 1350px go here */

    html,
    body.is-smartphone {
        overflow-x: hidden; 
     
    }

    .is-smartphone .ad-details-container{
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        /*width: 86.5%;*/
        /*width: 93.6%;*/
        /*width: 94%;*/
        /*width: 94.3%;*/
        /*width: 94.6%;*/
        /*width: 94.9%;*/
        /*width: 95.2%;*/
        /*width: 95.4%; /* A 0.2 */
        /*width: 95.6%; /* A 0.2 */
        /*width: 95.73%; */
        /*width: 95.96%;*/
        /*width: 96.0487%;*/
        width: 96.20%; 
        padding: 20px;
        /*height: 260vh;*/ /* causing problem*/
        height: 1600px !important;
        margin-top: 110px;
        margin-right: 10px;
        margin-left: 4.2px;
        background-color: transparent; /* Fully transparent background */
        /*background-color: #070404;*/
        margin-bottom: 80px;
    }

    .is-smartphone .ad-slideshow {
        position: fixed;     /* Fix the position relative to the viewport */
        width: 96%;         /* Use 100% width to cover the entire screen */
        height: 60vh;        /* Use viewport height (adjust as needed for desired height) */
        top: 20px;           /* Keep a fixed distance from the top (adjust as needed) */
        left: 0;             /* Align to the left edge of the viewport */
        right: 0px;            /* Align to the right edge */
        /*background-color: red;*/
        margin-bottom: 20px; /* Space below the element */

        top: 18px;
        left: 8px;
        right: 25px;
        
    }
    

    .is-smartphone .prev {
        left: -7px;
        transform: translateY(-43px);
    }
/*
    .is-smartphone .next {
        left: 1247.8px;
        transform: translateY(-43px);
    }
*/

.is-smartphone .next {
    position: fixed; /* Keep it fixed since slideshow is already fixed */
    top: 182px; /* Or whatever your current value is */
    left: unset; /* Reset any previous left */
    right: 0.68%; /* Puts it near the right edge of the slideshow */
    transform: translateY(-50%);
    z-index: 9999;
  }

    .is-smartphone  .ad-details-container p,
    .is-smartphone .ad-details-container h1,
    .is-smartphone .ad-details-container h2,
    .is-smartphone .ad-details-container ul,
    .is-smartphone .ad-details-container li {
        margin: 5px -35px;
        transform: translateX(10px);
    }

.is-smartphone #mutation-field,
    .is-smartphone #gender-field,
    .is-smartphone #dna-field,
    .is-smartphone #age-field,
    .is-smartphone #ring-number-field,
    .is-smartphone #phone-number-field,
    .is-smartphone #city-field,
    .is-smartphone #price-field,
    .is-smartphone #ad-id-ref {
        border-bottom: 2.01px solid #E8E8ED;
        width: 1295px !important;
    }

    .is-smartphone #location-field  {
        margin-left: -10px;
        width: 100px !important;
        display: inline;
    }

    .is-smartphone #location-field i {
        margin-left: 2.1px;
        margin-right: 4.7px;
    }

    .is-smartphone #specie-h2 {
        margin-left: -22.5px;
    }

    .is-smartphone .description-label {
        display: inline-block;
        position: relative;
        top: -25.5px;
        margin-left: 22.1px;
    }

    .is-smartphone .ad-info-bird-detail {
        flex: 1;
        text-align: left;
        margin-top: 27px;
        margin-left: -22.1px;
    }

    .is-smartphone #description-container {
        width: 1291.5px !important;
        height: 450px;
        margin-left: -25.1px;
    }

    .is-smartphone .slideshow-container {
        height: 312.52px;
        /* Reduced height by 35% */
        width: 103.4%;
        /* Reduced width by 35% */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        top: 2px;
        /* Adjust this value to move it up */
        margin-bottom: 1px;
        margin-left: 48.5px;
    }

    .is-smartphone .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .is-smartphone .thumbnail-container {
        width: 100%;
        /*top: 3%;*/ /* causing problem*/
top: 15px;
        gap: 5px;
        margin-left: -5.5px;
    }

    .is-smartphone .thumbnail {
        margin-top: 0px;
        flex: 0 0 24%;
    }
    
    .is-smartphone .find-more-button {
        padding: 15.5px 33px;
        font-size: 16px;
        width: 45%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(calc(193% - 5px));
        /* Adjust back by half its width */
        position: relative;
        top: 900px;
        /* Adjust this value to move it up further */
        white-space: nowrap;
        /* Prevents text from wrapping */
        
    }

    .is-smartphone  .ad-info-text {
        text-align: left;
        margin-top: 480px;
        transform: translateX(-30x);
    }

}

/*           Smartphone    device # = (23)    (min-width: 1351px) { }   ending        */

/* ///////////////////////////////////////////////////////
   Computer Media Queries for Laptop Resolutions (Final Ranges without Height)
//////////////////////////////////////////////////////// */

/*1) (800 * 600 --->  acutal = 800 * 465) */
@media only screen and (min-width: 1px) and (max-width: 800px) {

    .is-computer .slideshow-container {
        /*width: 112.4%;*/
        width: 105.4%;
        height: 450px;
        margin-top: 1px;
        margin-bottom: 1px;
        margin-left: 80px;
        /*margin-left: -20px;*/
        display: flex;
        justify-content: center;
        align-items: center;
        /*background-color: red;*/
        
        }

        

    .is-computer .prev,
    .is-computer .next {
    top: 176px;
    transform: translateX(179.6px);
    /* Move 50px to the right */
    }
    
    .is-computer .prev {
        left: -155px; /* Moved 20px to the left */
    }
    
    
    .is-computer .next {
        right: 138px; /* Moved 20px to the left */
    }
    

    .is-computer .thumbnail-container {
    padding: 10px;
    margin-left: -10.5px;
    width: 110%;
    gap: 1px;
    position: relative;
    transform: translate(24px, -1.5px); /* Moved 20px to the left */
    width: 335px;
    }

    .is-computer .find-more-button {
        padding: 17.5px 35px;
        font-size: 18px;
        width: 50%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(-50%);
        /* Adjust back by half its width */
        white-space: nowrap;
        /* Prevents text from wrapping */
        }

        .is-computer .ad-details-container{
       width: 92%;
       top: 25px;
       margin-left: 4px;
       /*height: 165vh;*/
       height: 185vh;
    }

    .is-computer .thumbnail {
        margin-top: 0px;
        flex: 0 0 25.6%;
    }
    
}


/*2) (1024 * 768 --->  acutal = 1024 * 633) or also (1280 * 1024 --->  acutal = 1024 * 686) */
@media only screen and (min-width: 801px) and (max-width: 1024px) {

    .is-computer .slideshow-container {
        height: 480.8px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        background-color: #464E60;
        margin-top: 1px;
        margin-bottom: 1px;
        left: 19.9px;
        /*background-color: blue;*/
        }
        
        .is-computer .ad-details-container {
        /*height: 148vh;*/
        height: 984px !important;
        }

        .is-computer .prev {
        top: 202px;
        left: 2.1px;
        }
        
        .is-computer .prev,
        .is-computer .next {
        top: 202px;
        }
        /*
        .is-computer .next {
        top: 200px;
        left: 423px;
        }
        */

        

        .is-computer .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
        }
        
        .is-computer .ad-slideshow {
        width: calc(64.61% + 4%);
        height: 73%;
        left: 0;
        }
        
        .is-computer .thumbnail-container {
        padding: 10px;
        margin-left: -13px;
        }
        
        .is-computer .find-more-button {
        padding: 17.5px 35px;
        font-size: 18px;
        width: 50%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(-50%);
        /* Adjust back by half its width */
        white-space: nowrap;
        /* Prevents text from wrapping */
        }

         
    
}


/*3) (1400 * 1050 --->  acutal = 1120 * 705) */
@media only screen and (min-width: 1025px) and (max-width: 1120px) {

    .is-computer .slideshow-container {
        height: 480.8px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        background-color: #464E60;
        margin-top: 1px;
        margin-bottom: 1px;
        left: 19.9px;
        /*background-color: yellow;*/
        }
        
        .is-computer .ad-details-container {
        /*height: 148vh;*/
        height: 1045px !important;
        }

        .is-computer .prev {
        top: 202px;
        left: 2.1px;
        }
        
        .is-computer .prev,
        .is-computer .next {
        top: 202px;
        }
/*
        .is-computer .next {
        top: 200px;
        left: 510.5px;
        }
*/        



        .is-computer .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
        }
        
        .is-computer .ad-slideshow {
        width: calc(64.61% + 4%);
        height: 73%;
        left: 0;
        }
        
        .is-computer .thumbnail-container {
        padding: 10px;
        margin-left: -13px;
        }
        
        .is-computer .find-more-button {
        padding: 17.5px 35px;
        font-size: 18px;
        width: 50%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(-50%);
        /* Adjust back by half its width */
        white-space: nowrap;
        /* Prevents text from wrapping */
        }

        
    
}


/*4) (1280 * 720 --->  acutal = 1280 * 585) and 
     (1280 * 768 --->  acutal = 1280 * 633) and
     (1280 * 800 --->  acutal = 1280 * 665) and
     (1280 * 1024 --->  acutal = 1024 * 686) */
@media only screen and (min-width: 1121px) and (max-width: 1280px) {

    .is-computer .slideshow-container {
        height: 480.8px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        background-color: #464E60;
        margin-top: 1px;
        margin-bottom: 1px;
        left: 19.9px;
        /*background-color: peru;*/
        }
        
        .is-computer .ad-details-container {
        /*height: 148vh;*/
        height: 984px !important;
        }
        
        .is-computer .prev {
        top: 202px;
        left: 2.1px;
        }

        .is-computer .prev,
        .is-computer .next {
        top: 202px;
        }
/*        
        .is-computer .next {
        top: 200px;
        left: 658.5px;
        }
*/        
        .is-computer .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
        }
        
        .is-computer .ad-slideshow {
        width: calc(64.61% + 4%);
        height: 73%;
        left: 0;
        }
        
        .is-computer .thumbnail-container {
        padding: 10px;
        margin-left: -13px;
        }
        
        .is-computer .find-more-button {
        padding: 17.5px 35px;
        font-size: 18px;
        width: 50%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(-50%);
        /* Adjust back by half its width */
        white-space: nowrap;
        /* Prevents text from wrapping */
        }

        
    
}


/*5) (1680 * 1050 --->  acutal = 1344 * 705) */
@media only screen and (min-width: 1281px) and (max-width: 1344px) {

    .is-computer .slideshow-container {
        height: 480.8px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        background-color: #464E60;
        margin-top: 1px;
        margin-bottom: 1px;
        left: 19.9px;
        /*background-color: pink;*/
        }
        
        .is-computer .ad-details-container {
        /*height: 148vh;*/
        height: 1044px !important;
        }
        
        .is-computer .prev {
        top: 202px;
        left: 2.1px;
        }
        
        .is-computer .next {
        /*left: 899px;*/
        top: 200px;
        }
        
        .is-computer .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
        }
        
        .is-computer .ad-slideshow {
        width: calc(64.61% + 4%);
        height: 73%;
        left: 0;
        }
        
        .is-computer .thumbnail-container {
        padding: 10px;
        margin-left: -13px;
        }
        
        .is-computer .find-more-button {
        padding: 17.5px 35px;
        font-size: 18px;
        width: 50%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(-50%);
        /* Adjust back by half its width */
        white-space: nowrap;
        /* Prevents text from wrapping */
        }

        
    
}


/*6) (1360 * 768 --->  acutal = 1360 * 633) */
@media only screen and (min-width: 1345px) and (max-width: 1360px) {

    .is-computer .slideshow-container {
        height: 480.8px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        background-color: #464E60;
        margin-top: 1px;
        margin-bottom: 1px;
        left: 19.9px;
        /*background-color: orange;*/
        }
        
        .is-computer .ad-details-container {
        /*height: 148vh;*/
        height: 937px !important;
        }
        
        .is-computer .prev {
        top: 202px;
        left: 2.1px;
        }
        
        .is-computer .next {
        top: 200px;
        }
        
        .is-computer .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
        }
        
        .is-computer .ad-slideshow {
        width: calc(64.61% + 4%);
        height: 73%;
        left: 0;
        }
        
        .is-computer .thumbnail-container {
        padding: 10px;
        margin-left: -13px;
        }
        
        .is-computer .find-more-button {
        padding: 17.5px 35px;
        font-size: 18px;
        width: 50%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(-50%);
        /* Adjust back by half its width */
        white-space: nowrap;
        /* Prevents text from wrapping */
        }

        
    
}


/*7) (1366 * 768 --->  acutal = 1366 * 633) */
@media only screen and (min-width: 1361px) and (max-width: 1366px) {

    .is-computer .slideshow-container {
        height: 480.8px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        background-color: #464E60;
        margin-top: 1px;
        margin-bottom: 1px;
        left: 19.9px;
        /*background-color: paleturquoise;*/
        }
        
        .is-computer .ad-details-container {
        /*height: 148vh;*/
        height: 937px !important;
        }
        
        .is-computer .prev {
        top: 202px;
        left: 2.1px;
        }
        
        .is-computer .next {
        top: 200px;
        }
        
        .is-computer .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
        }
        
        .is-computer .ad-slideshow {
        width: calc(64.61% + 4%);
        height: 73%;
        left: 0;
        }
        
        .is-computer .thumbnail-container {
        padding: 10px;
        margin-left: -13px;
        }
        
        .is-computer .find-more-button {
        padding: 17.5px 35px;
        font-size: 18px;
        width: 50%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(-50%);
        /* Adjust back by half its width */
        white-space: nowrap;
        /* Prevents text from wrapping */
        }
    
        
    
}


/*8) (1440 * 900 --->  acutal = 1440 * 765) */
@media only screen and (min-width: 1367px) and (max-width: 1440px) {

    .is-computer .slideshow-container {
        height: 480.8px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        background-color: #464E60;
        margin-top: 1px;
        margin-bottom: 1px;
        left: 19.9px;
        /*background-color: purple;*/
        }
        
        .is-computer .ad-details-container {
        /*height: 148vh;*/
        height: 1132px !important;
        }
        
        .is-computer .prev {
        top: 202px;
        left: 2.1px;
        }
        
        .is-computer .next {
        top: 200px;
        }
        
        .is-computer .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
        }
        
        .is-computer .ad-slideshow {
        width: calc(64.61% + 4%);
        height: 73%;
        left: 0;
        }
        
        .is-computer .thumbnail-container {
        padding: 10px;
        margin-left: -13px;
        }
        
        .is-computer .find-more-button {
        padding: 17.5px 35px;
        font-size: 18px;
        width: 50%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(-50%);
        /* Adjust back by half its width */
        white-space: nowrap;
        /* Prevents text from wrapping */
        }

        
    
}


/*9) (1920 * 1080 --->  acutal = 1536 * 730) */
@media only screen and (min-width: 1441px) and (max-width: 1536px) {

    .is-computer .slideshow-container {
        height: 480.8px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        background-color: #464E60;
        margin-top: 1px;
        margin-bottom: 1px;
        left: 19.9px;
        /*background-color: green;*/
        }
        
        .is-computer .ad-details-container {
        /*height: 148vh;*/
        height: 1080px !important;
        }
        
        .is-computer .prev {
        top: 202px;
        left: 2.1px;
        }
        
        .is-computer .next {
            top: 200px;
            }
        
        .is-computer .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
        }
        
        .is-computer .ad-slideshow {
        width: calc(64.61% + 4%);
        height: 73%;
        left: 0;
        }
        
        .is-computer .thumbnail-container {
        padding: 10px;
        margin-left: -13px;
        }
        
        .is-computer .find-more-button {
        padding: 17.5px 35px;
        font-size: 18px;
        width: 50%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(-50%);
        /* Adjust back by half its width */
        white-space: nowrap;
        /* Prevents text from wrapping */
        }
    
}


/*10) (1600 * 900 --->  acutal = 1600 * 765) */
@media only screen and (min-width: 1537px) and (max-width: 1600px) {

    .is-computer .slideshow-container {
        height: 480.8px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        background-color: #464E60;
        margin-top: 1px;
        margin-bottom: 1px;
        left: 19.9px;
        /*background-color: lightcoral;*/
        }
        
        .is-computer .ad-details-container {
        /*height: 148vh;*/
        height: 1132px !important;
        }
        
        .is-computer .prev {
        top: 202px;
        left: 2.1px;
        }
        
        .is-computer .next {
        top: 200px;
        }
        
        .is-computer .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
        }
        
        .is-computer .ad-slideshow {
        width: calc(64.61% + 4%);
        height: 73%;
        left: 0;
        }
        
        .is-computer .thumbnail-container {
        padding: 10px;
        margin-left: -13px;
        }
        
        .is-computer .find-more-button {
        padding: 17.5px 35px;
        font-size: 18px;
        width: 50%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(-50%);
        /* Adjust back by half its width */
        white-space: nowrap;
        /* Prevents text from wrapping */
        }

        
    
}


/*11) (extra 1601 --->  acutal = 1601) */
@media only screen and (min-width: 1601px) {

    .is-computer .slideshow-container {
        height: 480.8px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        background-color: #464E60;
        margin-top: 1px;
        margin-bottom: 1px;
        left: 19.9px;
        /*background-color: cadetblue;*/
        }
        
        .is-computer .ad-details-container {
        /*height: 148vh;*/
        height: 1600px !important;
        }
        
        .is-computer .prev {
        top: 202px;
        left: 2.1px;
        }
        
        .is-computer .next {
            top: 200px;
            }
        
        .is-computer .slideshow-container img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
        }
        
        .is-computer .ad-slideshow {
        width: calc(64.61% + 4%);
        height: 73%;
        left: 0;
        }
        
        .is-computer .thumbnail-container {
        padding: 10px;
        margin-left: -13px;
        }
        
        .is-computer .find-more-button {
        padding: 17.5px 35px;
        font-size: 18px;
        width: 50%;
        /* Set the width to 50% */
        margin: 0 auto;
        /* Center the button horizontally */
        display: flex;
        /* Use flexbox for centering */
        justify-content: center;
        /* Center the text horizontally */
        align-items: center;
        /* Center the text vertically */
        transform: translateX(-50%);
        /* Adjust back by half its width */
        white-space: nowrap;
        /* Prevents text from wrapping */
        }
    
}