@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;1,500&display=swap');

* {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

nav {
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #fff;  /* Set background color to white */
  }



.hero {
    background: #62B8BF;
    padding-top: 45px;
    padding-bottom: 40px;
}

.hero-section-landing-page {
    background: #62B8BF;
    padding-top: 3.5em;
    padding-bottom: 2.5%;

}

.hero-section-how-to {
    background-image: url("/assets/images/how-to-background.jpg");
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    width: 100%;
    height: 40em;
}


.no-underline {
    text-decoration: none;
    color: inherit;
  }
  
  .no-underline:hover {
    text-decoration: none;
    color: inherit;
  }

.hero-section-store {
        background-image: url("/assets/images/store-background.jpg");
        background-size: cover; /* Ensures the image covers the entire section */
        background-position: center center; /* Centers the image */
        background-repeat: no-repeat; /* Prevents the image from repeating */
        width: 100%;
        height: 40em;
    }

.hero-section-partnerships {
    background-image: url("/assets/images/partnerships-background.jpg");
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    width: 100%;
    height: 40em;
}

.hero-section-blog {
    background-image: url("/assets/images/blog-background.jpg");
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    width: 100%;
    height: 40em;
}

.post-blog-img1{
    display: flex;
    justify-content: center;
    width: 50vw;
    margin-left: 25vw;
    margin-top: 5%;
}

.post-blog-img2{
    display: flex;
    justify-content: center;
    width: 50vw;
    margin-left: 25vw;
    margin-top: 5%;
}

.post-blog-img3{
    display: flex;
    justify-content: center;
    width: 50vw;
    margin-left: 25vw;
    margin-top: 5%;
}

.post-blog-img4{
    display: flex;
    justify-content: center;
    width: 50vw;
    margin-left: 25vw;
    margin-top: 5%;
}

.post-blog-img5{
    display: flex;
    justify-content: center;
    width: 50vw;
    margin-left: 25vw;
    margin-top: 5%;
}

.hero-section-blog {
    background-image: url("/assets/images/blog-background.jpg");
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    width: 100%;
    height: 40em;
}

.custom-row007 {
    display: flex;
    flex-wrap: wrap;
}

.custom-column007 {
    flex: 1;
    padding: 20px;
}

.custom-column008{
    display: flex;
    flex: 1;
    padding: 20px;
    align-items: center;
}

.hero-section-about {
    background-image: url("/assets/images/about-background.jpg");
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    width: 100%;
    height: 40em;
}

/* blog.css */

.custom-row {
    display: flex;
    flex-wrap: wrap;
}

.hero-section-blog {
    background-color: #f4f4f4;
    padding: 20px;
    text-align: center;
}



.latest-blogs {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Default to 5 columns */
    margin-left: 5%;
    gap: 2%;
    margin-top: 7.5%;
}


.blog-post {
    width:25em;
    padding: 10px;
    margin: 0.5%;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s;
    height: 30em;
}

.blog-post img {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

.post-category {
    font-size: 14px;
    color: #888;
    margin-bottom: 5px;
    
}

.post-title {
    font-size: 1.25em;
    font-weight: 600;
    margin: 10px 0;
}

.post-title-author{
    font-family: Montserrat;
    font-size: 1em; /* Adjust font size as desired */
    font-weight: 600; /* Make text bolder */
    margin-top: 0.5em;
    margin-left: 12.5%;
    margin-bottom: 0.5em;
    color: #0000008C;
}

.post-title-author1{
    font-family: Montserrat;
    font-size: 1em; /* Adjust font size as desired */
    font-weight: 600; /* Make text bolder */
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    color: #0000008C;
}

.post-date {
    font-size: 0.75em;
    color: #888;
    font-weight: 500;
}

.post-date-detail {
    font-size: 0.75em;
    color: #888;
    margin-bottom: 1%;
    margin-left: 8%;
    font-weight: 500;
}

.post-category-detail {
    font-size: 0.75em;
    color: #fff;
    margin-bottom: 1%;
    margin-left: 12.5%;
    margin-top: 1.25%;
    font-weight: 500;
    border-radius: 35px;
    background-color: #62B8BF;
    padding-left: 1.25em;
    padding-right: 1.25em;
    padding-bottom: 0.75em;
    padding-top: 0.75em;
    display: inline-block; /* Add this */
}

.post-title-detail {
    font-size: 4.5em;
    color: #000;
    margin-top: 2%;
    margin-bottom: 1%;
    margin-left: 12.5%;
    font-weight: 600;
    margin-right: 12.5%;
    text-align: justify;
}

.post-title-blog-text1 {
    font-family: Montserrat;
    font-size: 1em; /* Adjust font size as desired */
    font-weight: 600; /* Make text bolder */
    margin-top: 3em;
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 0.5em;
    color: #0000008C;
    text-align: justify;
}

.post-title-blog-text2 {
    font-family: Montserrat;
    font-size: 1em; /* Adjust font size as desired */
    font-weight: 600; /* Make text bolder */
    margin-top: 3em;
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 0.5em;
    color: #0000008C;
    text-align: justify;
}

.post-title-blog-text3 {
    font-family: Montserrat;
    font-size: 1em; /* Adjust font size as desired */
    font-weight: 600; /* Make text bolder */
    margin-top: 3em;
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 0.5em;
    color: #0000008C;
    text-align: justify;
}

.post-title-blog-text4 {
    font-family: Montserrat;
    font-size: 1em; /* Adjust font size as desired */
    font-weight: 600; /* Make text bolder */
    margin-top: 3em;
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 0.5em;
    color: #0000008C;
    text-align: justify;
}

.post-title-blog-text5 {
    font-family: Montserrat;
    font-size: 1em; /* Adjust font size as desired */
    font-weight: 600; /* Make text bolder */
    margin-top: 3em;
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 0.5em;
    color: #0000008C;
    text-align: justify;
}

.post-title-blog-text6 {
    font-family: Montserrat;
    font-size: 1em; /* Adjust font size as desired */
    font-weight: 600; /* Make text bolder */
    margin-top: 3em;
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 0.5em;
    color: #0000008C;
    text-align: justify;
}


.blog-post:hover {
    transform: scale(1.05);
}

.blog-post.expanded {
    flex: 1 1 100%;
    position: relative;
    z-index: 10;
    transform: scale(1.1);
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.pagination {
    display: flex;           /* Use flexbox */
    justify-content: center; /* Center the items horizontally */
    margin-top: 5%;          /* Space above the pagination */
    font-family: Montserrat;
    font-size: 1.5em;
    font-style: normal;
    font-weight: 500;
}

.pagination button {
    margin: 0 15px;          /* Space between the buttons */
    cursor: pointer;       /* Pointer cursor on hover */
}

.pagination button:hover {
    background-color: #ccc;  /* Background color on hover */
    font-weight: 600;
}

.hero-section-careers {
    background-image: url("/assets/images/careers-background.jpg");
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    width: 100%;
    height: 40em;
}

.hero-section-policies{
    background: #62B8BF;
    height: 40em;
    width: 100%;
}


.title {
    color: #FFF;
    font-family: Montserrat;
    font-size: 200px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -1px;
    text-align: left;
    margin-top: 15  0px;
}

.white-space {
    background-color: #FFF;
    height: 3.5em;
}



p {
    color: #000;
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
}


.collapse{
    font-family: Montserrat;
    font-style: normal;
    display: flex;
    justify-content:space-around; /* Distribute columns evenly */
    margin-right: 100px;
}

.scan_div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.downloads {
    margin-top: 8.5%;
    display: flex;
    margin-left: 25%;
    width: 100%;
  }

  /* Remove default styling from <a> tags within .downloads */
.downloads a {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit text color */
  }
  
  .download-statement {
    width: 100%;
    color: #fff;
    font-family: Montserrat;
    font-size: 18px;
    font-weight: 400;
    font-style: italic;
    margin-top: 2.5%;
    margin-left: 25%;
  }
  
  .download-demo-webapp {
    width: 15em;
    margin-right: 2em;
  }
  
  .download-app-store{
    width: 20%;
    margin-right: 2em;
  }

  .download-google-play {
    width: 20%;
  }

.store-filters {
    margin-top: 2.5%;
    display: flex;
    justify-content:space-evenly;
    width: 65%;
    align-items: center;    
}

.container-fluid{
    position:fixed;
    background: #FFF;
    border-bottom: 1px solid #DBDBDB; /* Now the border will be visible */
    padding: 10px;

}

.navbar-brand {
    width: 4em;
    height: auto;
    margin-left: 5%;
}

.left-nav {
    display: flex;
    align-items: center;
    margin-left: 2.5%;
}

.right-nav {
    display: flex;
    align-items: center;
    margin-right: 9.5%;
}

.tooltip-text {
    visibility: hidden;
    width: 200px; /* Adjust the width as needed */
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position the tooltip above the text */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-family: Montserrat;
}

.nav-link {
    font-family: Montserrat;
    font-size: 0.9em;
    font-weight: 600;
    color: #333366;
}

.text-elements-to-translate {
  visibility: hidden;
}

/* Dropdown Button */
.nav-link, .dropbtn {
    font-family: Montserrat;
    font-size: 0.9em; /* Adjust font size as desired */
    font-weight: 600; /* Make text bolder */
    display: flex;
    color: #0000008C;
}

.dropbtn {
    margin-left: 2em;
    background: none;
    border: none;
    cursor: pointer;
}

.dropbtn:hover {
    margin-left: 2em;
    background: none;
    border: none;
    cursor: pointer;
    color: #333366; 
}


  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: flex;
    align-items: center;
}
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1f1;
    top: 2em;
    min-width: 13em;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-left: 25%;
    border-radius: 0.75em;
    font-family: Montserrat;
    font-size: 1em; /* Adjust font size as desired */
    font-weight: 600; /* Make text bolder */
    padding: 5%;
}

  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: #000000da;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
}
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
}


.navbar {
    background-color: #fff;
    position: fixed;
    width: 100%;
    height: 3.5em;
    border-bottom: 1px solid #DBDBDB;
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 0 2%;
    box-sizing: border-box;
}

.nav-link {
    font-family: Montserrat;
    font-size: 0.9em; /* Adjust font size as desired */
    font-weight: 600; /* Make text bolder */
    display: flex;
    
}

.nav-link2 {
    font-family: Montserrat;
    font-size: 0.9em; /* Adjust font size as desired */
    font-weight: 600; /* Make text bolder */
    display: flex;
    color: #0000008C;
    margin-left: 2.5em;
}


.nav-link22{
    font-family: Montserrat;
    font-size: 0.9em; /* Adjust font size as desired */
    font-weight: 600; /* Make text bolder */
    display: flex;
    color: #0000008C;
    margin-right: 2.5em;
}

.nav-link20 {
    font-family: Montserrat;
    font-size: 0.9em; /* Adjust font size as desired */
    font-weight: 600; /* Make text bolder */
    display: flex;
    color: #0000008C;
    margin-left: 2em;
}
 

.nav-link:hover {
    font-family: Montserrat;
    font-weight: 600; /* Make text bolder */
    color: #333366;
    
}

.nav-link2:hover {
    font-family: Montserrat;
    font-size: 0.9em; /* Adjust font size as desired */
    font-weight: 600; /* Make text bolder */
    color: #333366;
    margin-left: 2.5em;
}

.nav-link22:hover{
    font-family: Montserrat;
    font-size: 0.9em; /* Adjust font size as desired */
    font-weight: 600; /* Make text bolder */
    color: #333366;
    margin-right: 2.5em;
}




.nav-link3 {
    font-family: Montserrat;
    font-size: 1em; /* Adjust font size as desired */
    font-weight: 500; /* Make text bolder */
    color: #ffffff;
    padding-right: 0%;
    padding-left: 0%;
    display: flex;
}

.nav-link444 {
    font-family: Montserrat;
    font-size: 1em; /* Adjust font size as desired */
    font-weight: 500; /* Make text bolder */
    color: #ffffff;
    padding-right: 0%;
    padding-left: 0%;
    display: flex;
    padding-top: 2.5%;
}

.nav-link555 {
    font-family: Montserrat;
    font-size: 1em; /* Adjust font size as desired */
    font-weight: 500; /* Make text bolder */
    color: #ffffff;
    padding-right: 0%;
    padding-left: 0%;
    display: flex;
    padding-top: 2.5%;
}


  .header-radius-trim{
    border-radius: 11.5%;
  }


  .nav-link4 {
    font-family: Montserrat;
    font-size: 1em; /* Adjust font size as desired */
    font-weight: 500; /* Make text bolder */
    color: #ffffff;
    padding-bottom: 2.5%;
    padding-right: 0%;
    padding-left: 0%;
    padding-top: 2.5%;
  }

.main_section .title {
    color: #2B403B;
    font-size: 40px;
    font-weight: 700;
}

.custom_italic_text {
    color: #000;
    font-family: Montserrat;
    font-size: 48px;
    font-style: italic;
    font-weight: 500;
    margin-top: 50px;
    margin-bottom: 30px;
    margin-left: 100px;
}

.custom_italic_text3 {
    color: #000;
    font-family: Montserrat;
    font-size: 48px;
    font-weight: 600;
    margin-top: 75px;
    text-align: left;
    margin-left: 150px;
}


.custom_italic_text4 {
    color: #000;
    font-family: Montserrat;
    font-size: 48px;
    font-weight: 600;
    margin-top: 150px;
    text-align: left;
    padding-left: 60%;

}

.qrcode{
    display: flex;
    width: 30em;
    height:auto;
    justify-content: center;
    align-items: center;
    margin-left: calc(50vw - 15em);
}

.text-container {
    font-size: 16px;
  }
  
  .dynamic-text {
    display: none;
  }
  
  .static-text {
    display: block;
  }

  .choose-language-text{
    color: #fff;
    font-family: Montserrat;
    font-weight: 500;
    font-size: 1.2em;
}

.language-select-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px; /* Optional: Adjust margin as needed */
    width: 45%;
    margin-left: 2.5%;
    margin-top: 2.5%;
}


.language-select-container label {
    margin-bottom: 5px; /* Optional: Adjust margin between label and select */
}

.custom-dropdown {
    position: relative;
}

.custom-dropdown-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.85em;
    color: #000;
    display: flex;
    align-items: center;
    margin-top: 5%;
    font-family: Montserrat;
    font-weight: 500;
}



.custom-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 50px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-left: -70%;
    margin-top: 12%;
}

.custom-dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    
}


.custom-dropdown-content a:hover {
    background-color: #f1f1f1;
}

.custom-dropdown:hover .custom-dropdown-content {
    display: block;
}

.flag-icon {
    width: 18px;
    height: auto;
    margin-right: 5px;
    vertical-align: middle;
}



.cta-store {
    color: #fff;
    display: flex;
    border-radius: 35px;
    background-color: #62B8BF;
    font-family: Montserrat;
    font-weight: 500;
    padding: 2%;
    font-size: 0.85em;
    width: 14em;
    text-align: center;
    justify-content: center;
    margin-bottom: 1.5%;
    margin-left: 5%;
}

.socials {
display: flex;
width: 2.5em;
}

.socials1 {
    display: flex;
    margin-left: 10%;
    justify-content: space-evenly;
    width: 15em;
    }

    .socials-cta{
        margin-bottom: 10%;
        color: #fff;
        font-family: Montserrat;
        font-weight: 500;
        font-size: 1.2em;
        width: 80%;
        margin-left: 10%;
        }

    .socials-buy {
        display: flex;
        justify-content: space-between;
        width: 19em;

    }
    
    .socials-buy a {
        flex: 1;
        display: flex;
        justify-content: center;
    }
    
    .socials-instagram-buy{
        width: 4em; /* Adjust as needed */
        margin-top: 35%;
        margin-bottom: 3.7em; /* Added margin-bottom to separate from social buttons */
    }


    .socials-facebook-buy {
        width: 4em; /* Adjust as needed */
        margin-top: 35%;
        margin-bottom: 3.7em; /* Added margin-bottom to separate from social buttons */
    }

.filter-all-items {
    font-family: Montserrat;
    font-weight: 600;
    color: #000000;
    display: flex;
    border-radius: 25px;
    background-color: #ffffff;
    padding: 20px;
    width: 180px;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
}

.filter-tags {
    font-family: Montserrat;
    font-weight: 600;
    color: #000000;
    display: flex;
    border-radius: 25px;
    background-color: #ffffff;
    padding: 20px;
    width: 180px;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
}

.filter-collars {
    font-family: Montserrat;
    font-weight: 600;
    color: #000000;
    display: flex;
    border-radius: 25px;
    background-color: #ffffff;
    padding: 20px;
    width: 180px;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
}


.title-feature-left{
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 3em;
    font-weight: 600;
    text-align: left;
    justify-content: left;
    padding-left: 15%;
    margin-bottom: 5%;
}

.title-feature-left-webapp{
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 3em;
    font-weight: 600;
    text-align: left;
    justify-content: left;
    padding-left: 29.5%;
    margin-bottom: 5%;
}

.title-feature-left-poww{
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 3em;
    font-weight: 600;
    text-align: left;
    justify-content: left;
    padding-left: 15%;
    margin-bottom: 5%;
}

.mc-field-group{
    display: flex;
    flex-direction: column;
    font-family: Montserrat;
    font-size: 0.75em;
    margin-left: 52.5%;
}


.clear.foot {
    display: flex;
    justify-content: flex-end;
  }

  #mc_embed_signup form {
    margin: 0 !important;
}

.spacing-features{
    margin-top: 150px;
}

.spacing-features-index1{
    margin-top: 5%;
}

.spacing-features-index2{
    margin-top: 7.5%;
}


.spacing-features2{
    margin-top: 10%;
}

.spacing-features2000{
    margin-top: 5%;
}

.spacing-features-item-details{
    margin-top: 50px;
    margin-bottom: 5%;
}

.cart-popup{
    position: absolute;
    width: 25vw;
    right:10px;
    bottom: 10px;
}


.title-feature-right{
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 3em;
    font-weight: 600;
    text-align: left;
    justify-content: left;
    margin-bottom: 5%;
    padding-left: 5%;
}

.title-feature-right-webapp{
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 3em;
    font-weight: 600;
    text-align: left;
    justify-content: left;
    margin-bottom: 5%;
}

.title-feature-right-1234{
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 3em;
    font-weight: 600;
    text-align: left;
    justify-content: left;
    margin-bottom: 5%;
    padding-left: 15%;
}


.sub-feature-right{
    color: #ffffff;
    background-color: #62B8BF;
    border-radius: 25px;
    font-family: Montserrat;
    font-size: 0.85em;
    width: 20%;
    font-weight: 600;
    text-align: center;
    justify-content: center;
    padding: 2%;
    margin-left: 5%;
}

.sub-feature-left{
    color: #ffffff;
    background-color: #DBDBDB;
    border-radius: 25px;
    font-family: Montserrat;
    font-size: 0.85em;
    width: 11em;
    font-weight: 500;
    text-align: center;
    justify-content: center;
    padding: 2%;
    margin-left: 15%;
}




.service_row img {
    width: 80px;
    margin-bottom: 20px;
}

.subtitle {
    color: #000;
    font-family: Montserrat;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}


.custom_bg {
    display: inline-block;
    text-align: center;
    padding: 100px 0;
}
.custom_bg .qr_img{
    margin-bottom: 20px;
    height: 50px;
}

.main_section {
    background-image: url('../images/curve-bg.png');
    background-position: left bottom;
    background-size: 44% 70%;
    background-repeat: no-repeat;
    margin: 75px 0;
}

footer .row {
    align-items: center;
}

.swiper {
    width: 600px;
    height: 300px;
  }

.row1{
    display: flex;
    width:100%;
    margin-left: 100px;
}

.spacing {
    margin-top: 15%;
  }

  .spacing-store-bottom{
    margin-top: 20em;
  }

  .spacing-blog-bottom{
    margin-top: 15em;
  }

  .spacing-pagination-bottom{
    margin-top: 5%;
  }


  .col-30 {
    display: flex;
    align-items: center;
    justify-items: center;
    text-align: left;
    width:30%;

}

  .col-40 {
    display: flex;
    align-items: center;
    justify-items: center;
    text-align: left;
    width:40%;

}

.col-50 {
    display: flex;
    align-items: center;
    justify-items: center;
    text-align: left;
    width:50%;

}

.col-60 {
    display: flex;
    align-items: center;
    justify-items: center;
    text-align: left;
    width:60%;
    margin-top: 50px;
}

.col-70 {
    display: flex;
    align-items: center;
    justify-items: center;
    text-align: left;
    width:70%;
    margin-top: 50px;
}

.col-80 {
    display: flex;
    align-items: center;
    justify-items: center;
    text-align: left;
    width:80%;
    margin-top: 50px;
    margin-left: 75px;
}

.col-90 {
    display: flex;
    align-items: center;
    justify-items: center;
    text-align: left;
    width:90%;
    margin-top: 50px;
}

.col-100 {
    display: flex;
    align-items: center;
    justify-items: center;
    text-align: left;
    width:100%;
    margin-top: 50px;
}

.footer-column-title {
color: #fff;
font-family: Montserrat;
font-size: 1.5em;
font-weight: 600;
margin-bottom: 10px;
}

.footer {
    background: #62B8BF;
    padding-top: 5%;
    padding-bottom: 7.5%;
  }
  
  .footer-content {
    display: flex; /* Make logo and columns display side-by-side */
    align-items: start; /* Align logo and columns vertically */
  }
  
  .footer-logo {
    width: 120px; /* Set fixed width for logo */
    margin-left: 50px;
  }
  
  .footer-columns {
    flex: 1; /* Allow columns to fill remaining space */
    display: flex;
    justify-content:space-around; /* Distribute columns evenly */
    margin-left: 250px;
  }

  .footer-columns2 {
    flex: 1; /* Allow columns to fill remaining space */
    display: flex;
    justify-content:left; /* Distribute columns evenly */
    margin-left: 50px;
  }
  
  .footer-column {
    width: 25%; /* Set width for each column */
  }

  .footer-columm888{
    width: 35%; /* Set width for each column */
  }


  .join-newsletter-column{
    width: 25%; /* Set width for each column */
    margin-left: 22.75%;
  }

  .join-newsletter{
    margin-bottom: 7.5%;
    font-weight: 500;
    font-size: 1.2em;
    margin-left: 45%;
    width: 100%;
  }
  
    .footer-container {
        display: flex;
        justify-content: space-between;
        align-items: start;
        padding: 20px;
        }

        .footer-container123 {
            display: flex;
            justify-content: space-between;
            align-items: start;
            padding-top: 5%;
            }
  
  .join-newsletter-container {
    flex: 1;
    margin: 0 10px;
    align-items: start;
  }
  
  .join-newsletter-desktop {
    display: flex;
    flex-direction: column;
    align-items: start;
  }

  .join-newsletter-mobile {
    display: flex;
    flex-direction: column;
    align-items: start;
  }
  
  .footer-column h3 {
    margin-bottom: 15px;
  }
  
  .footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer-column li {
    margin-bottom: 5px;
  }

  .section-title{
    margin-left: 20%;
    margin-top: 5%;
  }

@media screen and (max-width: 1199px) {
    .main_section {
        background-position: left 70%;
        background-size: 50% 55%;
    }

    .title {
        font-size: 120px;
        line-height: 120px;
    }
    .scan_div img:first-child{
        max-width: 100px;
    }
    .scan_div img:last-child{
        max-width: 280px;
    }
}

@media screen and (max-width: 991px) {
    .main_section {
        background-image: none;
    }

    .hero .row {
        flex-direction: column-reverse;
        text-align: center;
    }
    .main_section{
        text-align: center;
    }
    footer{
        text-align: center;
    }
    footer p{
        line-height: 50px;
    }
    .custom_bg{
        padding: 0;
        margin-bottom: 100px;
    }
    .hero_banner{
        text-align: center !important;
    }

}

@media screen and (max-width: 390px){
    .scan_div img:first-child{
        max-width: 70px;
    }
    .scan_div img:last-child{
        max-width: 260px;
    }
}

.hero_banner{
    text-align: right;
}
.hero_banner img{
    width: 100%;
}

.app-screens{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22em;
    height: 50em;
    margin-left: 20%;
}

.app-screens-main{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22em;
    height: 50em;
    margin-left: 30%;
}

.oldo-benefits {
    padding: 20px;
    font-family: Montserrat;
    font-size: 1.5em;
    font-weight: 500;
}

.oldo-benefits h2 {
    text-align: center;
    color: #333;
}

.oldo-benefits-list {
    list-style-type: none;
    padding: 0;
}

.oldo-benefit-item {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 4px;
}

.oldo-benefit-item strong {
    color: #000;
}

.tag-how-to {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: auto;
    position: relative;
    margin-left: 15%;
    margin-top: 5%;
}

.tag-how-to-index {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 85%;
    height: auto;
    position: relative;
    margin-left: 15%;
}

    .slider {
        position: relative;
        width: 80%;
        overflow: hidden;
    }
    
    .slides {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

.slide {
    min-width: 100%;
    box-sizing: border-box;
}

.slide img {
    width: 100%;
    display: block;
    border-radius: 2.5%;
}






.tag-how-to-image-index-main {
    width: 100%;
    height: 80%;
    box-sizing: border-box;
    margin-top: 25%;
}

.tag-how-to-image-index-dog-tags {
    width: 100%;
    height: 90%;
    flex: 0 0 auto; /* Ensure images don't shrink or grow */
    box-sizing: border-box;
    margin-top: 25%;
}


.tag-how-to-image-index-app-screens {
    height: auto;
    width: 50%;
    flex: 0 0 auto; /* Ensure images don't shrink or grow */
    box-sizing: border-box;
    margin-left: 25%;
    margin-top: 7.5%;
}


.tag-how-to-image {
    width: 33.33%; /* Show 3 images on desktop */
    flex-shrink: 0;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: 10%;
    padding: 16 px;
    margin-top: -22px;
    color: rgb(83, 83, 83);
    font-weight: bold;
    font-size: 3.5em;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(222, 217, 217, 0.755);
    opacity: 100%;
}





.prev {
    left: 0;
    border-radius: 3px 0 0 3px;
    opacity: 50%;
}

.next {
    right: 0;
    border-radius: 0 3px 3px 0;
    opacity: 50%;
}


.prev:hover, .next:hover {
    background-color: #333366;
    color: #fff;
    opacity: 75%;
}


.prev44, .next44 {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: 10%;
    padding: 16 px;
    color: #fff;
    font-weight: bold;
    font-size: 3.5em;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: #333366;
    opacity: 100%;
}





.prev44 {
    left: 0;
    border-radius: 3px 0 0 3px;
    opacity: 50%;
}

.next44 {
    right: 0;
    border-radius: 0 3px 3px 0;
    opacity: 50%;
}


.prev44:hover, .next44:hover {
    color: #fff;
    opacity: 100%;
}


.app-screens2{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15%;
    margin-left: 20%;
}

.coming-soon{
    width: 100%;
    color: #000000;
    font-family: Montserrat;
    font-size: 4em;
    font-weight: 800;
    line-height: 1.3em;
    text-align: center;
    margin-top: 7.5%;
}

.coming-soon-title{
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 3.5em;
    font-weight: 600;
    text-align: left;
    justify-content: left;
    padding-left: 5%;
    width: 100%;
    padding-top: 5%;
    margin-bottom: 5%;
}

.coming-soon-categories{
    display: flex;
    color: #fff;
    font-family: Montserrat;
    font-size: 2em;
    font-weight: 500;
    text-align: center;
    justify-content: center;
    align-items: end;
    padding-bottom: 2.5%;
    width: 27.5vw;
    height: 27.5vw;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: 5%;
    margin-right: 5%;
    background-color: #DBDBDB;
    border-radius: 5%;
}

.coming-soon-categories2{
    display: flex;
    color: #fff;
    font-family: Montserrat;
    font-size: 2em;
    font-weight: 500;
    text-align: center;
    justify-content: center;
    align-items: end;
    padding-bottom: 2.5%;
    width: 27.5vw;
    height: 27.5vw;
    margin-top: 5%;
    margin-bottom: 5%;
    background-color: #DBDBDB;
    border-radius: 5%;
}

.coming-soon-items{
    display: flex;
    color: #fff;
    font-family: Montserrat;
    font-size: 2em;
    font-weight: 500;
    text-align: center;
    justify-content: space-around;
    align-items: end;
    width: 50%;
    height: 30vh;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 5%;
    padding-bottom: 2.5%;
    background-color: #DBDBDB;
    border-radius: 25px;
}

.opening-statement{
    width: 100%;
    color: #fff;
    font-family: Montserrat;
    font-size: 4em;
    font-weight: 800;
    line-height: 1.3em;
    margin-left: 20%;
    padding-right: 20%;
}

.opening-statement1{
    width: auto;
    color: #333366;
    font-family: Montserrat;
    font-size: 4.75em;
    font-weight: 800;
    line-height: 1.3em;
    margin-left: 20%;
    padding-right: 20%;
    margin-top: 5%;
}

.opening-statement111{
    width: auto;
    color: #333366;
    font-family: Montserrat;
    font-size: 4.75em;
    font-weight: 800;
    line-height: 1.3em;
    margin-left: 25%;
    padding-right: 20%;
    margin-top: 5%;
}


.opening-statement2{
    width: 100%;
    color: #fff;
    font-family: Montserrat;
    font-size: 5em;
    font-weight: 800;
    line-height: 1.3em;
    margin-left: 5%;
    margin-top: 2%;
    text-shadow: 0.25px 0.25px #333366;
    
}

.opening-statement23{
    width: 80%;
    color: #fff;
    font-family: Montserrat;
    font-size: 3.5em;
    font-weight: 800;
    line-height: 1.3em;
    margin-left: 5%;
    margin-top: 0%;
    text-shadow: 0.25px 0.25px #333366;
    
}

.opening-statement234{
    width: 100%;
    color: #fff;
    font-family: Montserrat;
    font-size: 4em;
    font-weight: 800;
    line-height: 1.3em;
    padding-left: 25%;
    padding-right: 20%;
    margin-top: 2%;
}

.opening-statement2345{
    width: 100%;
    color: #fff;
    font-family: Montserrat;
    font-size: 4em;
    font-weight: 800;
    line-height: 1.3em;
    padding-left: 25%;
    padding-right: 10%;
    margin-top: -20%;
}

.opening-statement-partnerships{
    width: 50%;
    color: #fff;
    font-family: Montserrat;
    font-size: 3.5em;
    font-weight: bolder;
    line-height: 1.3em;
    padding-left: 5%;
    display: flex;
    text-shadow: 0.25px 0.25px #333366;
}

.opening-statement-store{
    width: 90%;
    color: #fff;
    font-family: Montserrat;
    font-size: 3.5em;
    font-weight: 800;
    line-height: 1.3em;
    margin-left: 5%;
    display: flex;
    margin-top: 0%;
    text-shadow: 0.25px 0.25px #333366;
}


.opening-statement-about{
    width: 100%;
    color: #fff;
    font-family: Montserrat;
    font-size: 3.5em;
    font-weight: 800;
    line-height: 1.3em;
    margin-left: 6.5%;
    display: flex;
    margin-top: 0%;
    text-shadow: 0.25px 0.25px #333366;
}

.opening-statement-careers{
    width: 100%;
    color: #fff;
    font-family: Montserrat;
    font-size: 3.5em;
    font-weight: 800;
    line-height: 1.3em;
    margin-left: 7.5%;
    display: flex;
    margin-top: 0%;
    text-shadow: 0.25px 0.25px #333366;
}

.opening-statement-blog{
    width: 100%;
    color: #fff;
    font-family: Montserrat;
    font-size: 3.5em;
    font-weight: 800;
    line-height: 1.3em;
    display: flex;
    margin-top: 0%;
    margin-left: 2.5%;
    text-shadow: 0.25px 0.25px #333366;
}

.opening-statement-policies{
    width: 100%;
    color: #fff;
    font-family: Montserrat;
    font-size: 3.5em;
    font-weight: 600;
    line-height: 1.3em;
    padding-left: 5%;
    display: flex;
}

.hidden {
    display: none;
}



.opening-statement-sub {
    display: flex;
    color: #fff;
    font-family: Montserrat;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 10px;
}

.opening-statement-sub-bold-1{
    width: 100%;
    color: #fff;
    font-family: Montserrat;
    font-size: 26px;
    font-weight: 500;
    margin-top: 15%;
    margin-left: 20%;
}

.opening-statement-sub-bold-123{
    width: 100%;
    color: #fff;
    font-family: Montserrat;
    font-size: 26px;
    font-weight: 500;
    margin-top: 15%;
    margin-left: 25%;
}

.opening-statement-sub-bold-4{
    width: 80%;
    color: #fff;
    font-family: Montserrat;
    font-size: 26px;
    font-weight: 500;
    margin-top: 5%;
    margin-left: 10%;
}

.opening-statement-sub-bold-3{
    width: 100%;
    color: #fff;
    font-family: Montserrat;
    font-size: 26px;
    font-weight: 500;
    margin-top: 25px;
    
}

.opening-statement-store-sub{
    width: 100%;
    color: #fff;
    font-family: Montserrat;
    font-size: 26px;
    font-weight: 500;
    margin-top: 4%;
    margin-left: 5%;
    
}

/* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Center the title */
h1 {
    text-align: center;
}

/* Create a row with two columns */
.custom-row {
    display: flex;
    align-items: center;
}

/* Create a row with two columns */
.custom-row-item-lil-pics {
    display: flex;
    justify-content: left;
    align-items: center;
}

.custom-row-payment-methods {
    display: flex;
    margin-top: 5%;
}

.custom-row-item-details{
    display: flex;
    align-items: start;
}

.custom-row-categories {
    display: flex;
    justify-content: space-around;
}

.custom-row-items {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Default to 5 columns */
    margin-left: 1.5%;
    gap: 2%;
}

.coming-soon-item {
    display: flex;
    flex-direction: column;
    width: 16.5vw;
    margin: 1%;
}

.coming-soon-item2 {
    display: flex;
    flex-direction: column;
    width: 20vw;
    margin: 1%;
}

.item-image-container {
    border-radius: 5%;
    padding: 2.5%;
    width: auto;
    height: 50vh;
    width: 25vw;
    display: flex;
    justify-content: center;
    align-items: center;
}


.item-detail-image-container{
    background-color: #DBDBDB;
    border-radius: 5%;
    padding: 2.5%;
    width: 32.5vw;
    height: 32.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin-left: 15%;
}

.item-detail-image-container-small{
    background-color: #DBDBDB;
    border-radius: 10%;
    margin-top: 5%;
    margin-right: 5.5%;
    padding: 1.5%;
    width: 9vw;
    height: 9vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container {
    display: flex;
}




.item-detail-image-container-small-1{
    background-color: #DBDBDB;
    border-radius: 10%;
    margin-top: 5%;
    margin-right: 5.5%;
    margin-left: 15%;
    padding: 1.5%;
    width: 9vw;
    height: 9vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-image {
    height: 80%;
    max-width: 90%;
    border-radius: 15px;
    object-fit: cover;
}

.item-image-poop-bag {
    height: auto;
    width: 80%;
    border-radius: 15px;
    object-fit: cover;
}



.item-image-detail {
    width: 90%;
    height: 90%;
    border-radius: 15px;
    object-fit: cover;
}

.item-image-detail2 {
    width: 100%;
    height: 100%;
    border-radius: 10%;
    object-fit: cover;
}



.item-name {
    color: #000;
    font-family: Montserrat;
    font-size: 2.25em;
    font-weight: 600;
    text-align: left;
    margin-top: 0.5em;
}

.item-name-detail {
    color: #000;
    font-family: Montserrat;
    font-size: 5em;
    font-weight: 600;
    text-align: left;
}

.item-price {
    color: #000;
    font-family: Montserrat;
    font-size: 1.75em;
    font-weight: 500;
    text-align: left;
    margin-top: 0.5em;
}

.tag-image-container {
    background-color: #f0f0f0; /* Light grey background */
    border-radius: 15px; /* Rounded corners */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 23em; /* Adjust the height and width for the tag container */
    width:100%;
}


.item-price-detail{
    color: #000;
    font-family: Montserrat;
    font-size: 2.5em;
    font-weight: 500;
    text-align: left;
    margin-top: 0.25em;
}

.item-quantity{
    color: #000;
    font-family: Montserrat;
    font-size: 1em;
    font-weight: 400;
    text-align: left;
    margin-top: 2em;
}


.quantity-button {
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 25px; /* Increase border radius for a slightly bigger rectangle */
    padding: 8px 22.5px; /* Adjust padding for consistent size */
    min-width: 70px; /* Set a minimum width for consistency */
    text-align: center; /* Center align content */
    font-size: 1em; /* Adjust font size for better visibility */
    margin-top: 1%;
  }
  
  button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 1em; /* Adjust font size to match quantity display */
  }
  
  #quantity {
    display: inline-block;
    width: 20px; /* Set a fixed width to ensure consistent size */
    margin: 0 10px; /* Adjust margin for spacing */
    text-align: center; /* Center align content */
  }

  .button-container {
    display: flex;
  }

  .optionalParent{
    margin-left: 52.5%;
  }

  .popup {
    position: absolute;
    bottom: 2.5%;
    right: 2.5%;
    background-color: white;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    z-index: 200;
  }

  .popup-right {
    position: fixed;
    top: 2.5%;
    right: 0;
    height: 95%;
    width: 33vw;
    background-color: #ffffff;
    border-left: 1px solid #ccc;
    overflow-y: auto;
    z-index: 200;
  }
  
  .top-row {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }
  
  .cart-text {
    font-weight: bold;
  }
  
  .close-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
  }
  
  .middle-row {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }
  
  .left-column,
  .right-column {
    flex: 1;
  }
  
  .dog-tag {
    width: 50px;
    height: 50px;
  }
  
  .price {
    font-weight: bold;
  }
  
  .line {
    border-bottom: 1px solid #ccc;
    margin: 10px 0;
  }
  
  .bottom-row {
    display: flex;
    flex-direction: column;
    padding: 10px;
  }
  
  .total-column {
    display: flex;
    justify-content: space-between;
  }
  
  .total-price {
    font-weight: bold;
  }
  
  .message {
    margin-top: 10px;
  }
  
  .order-note {
    margin-top: 10px;
    text-align: center;
  }
  
  .buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  
  .view-cart-btn,
  .checkout-btn {
    padding: 10px 20px;
    border: none;
    background-color: blue;
    color: white;
    border-radius: 20px;
    cursor: pointer;
  }
  
  .view-cart-btn:hover,
  .checkout-btn:hover {
    background-color: darkblue;
  }
  
  .row1-custom {
    margin-bottom: 10px;
  }
  
  .green-box-custom {
    background-color: green;
    color: white;
    padding: 10px;
    border-radius: 5px;
  }
  
  .row2-custom {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .img-custom {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
  
  .details-custom {
    display: flex;
    flex-direction: column;
  }
  
  .name-custom {
    font-weight: bold;
  }
  
  .row3-custom {
    display: flex;
    justify-content: space-between;
  }
  
  .button-custom {
    padding: 10px 20px;
    border: none;
    background-color: blue;
    color: white;
    border-radius: 20px;
    cursor: pointer;
  }
  
  .button-custom:hover {
    background-color: darkblue;
  }
  
  .add-cart-button {
    width: 18em;
    padding: 2.5%;
    border: none;
    background-color: #62B8BF;
    border-radius: 50px;
    color: #fff;
    font-size: 1em;
    font-family: Montserrat;
    font-weight: 600;
    margin-top: 5%;
    margin-bottom: 10%; /* Added margin-bottom to separate from social buttons */
}

  .buy-card-button {
    flex: 1;
    width: 100%; /* Each button takes 45% of the container */
    padding: 5%;
    border: none;
    background-color: #5533EA;
    border-radius: 50px;
    color: #fff;
    font-size: 1em;
    font-family: Montserrat;
    font-weight: 600;
    margin-top: 10%;
  }
  
  .custom-button:hover {
    background-color: #0056b3;
  }

  .custom-button2:hover {
    background-color:  #333366;
    color: #fff;
  }

  .job-openings {
    margin-top: 2%;
    margin-left: 15%;
}

.job {
    display: flex;
}

.job-title {
    display: block;
    background: none;
    border: none;
    text-align: left;
    padding: 10px;
    font-size: 18px;
    cursor: pointer;
    font-size: 1.25em;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    position: relative;
    margin-bottom: 1.25%;
    width: 78%;
}

.job-title:hover {
    background-color: #f0f0f0;
}

.job-description {
    display: none;
    width: 78%;
    margin: 0 0 20px 10px;
    padding: 20px;
    border-left: 2px solid #333366;
    background-color: #f9f9f9;
    font-family: Montserrat, sans-serif;
}

.job-description p {
    margin-bottom: 10px;
    line-height: 1.5;
}

.job-description p:nth-child(1),
.job-description p:nth-child(4),
.job-description p:nth-child(11),
.job-description p:nth-child(16) {
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 20px;
    margin-bottom: 15px;
}

.job-description p:empty {
    height: 20px;
}

  .item-review{
    display: flex;
    margin-top: 5%;
    margin-bottom: 7.5%;

  }

  .icons-section {
    display: flex;
    justify-content: space-between;
    margin-left: 8%;
    margin-right: 3%;
    margin-top: 2%;
  }
  
  .icons-section img {
    width: 50px;
    height: 50px;
  }

  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
  }

  .faq-item {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  .faq-icon {
    font-size: 1.8em;
    flex-shrink: 0;
  }

  .faq-icon-container {
    display: flex;
    align-items: center;
  }

  .indicator{
    font-size: 1.5em;
  }


  .faq {
    width: 85%;
    margin-left: 7.5%;
    margin-right: 7.5%;
  }
  
  .faq-title {
    font-family: Montserrat;
    font-weight: 800;
    font-size: 2em;
    flex-grow: 1;
    margin-right: 10px; /* Add some space between the title and the icon */
  }
  
  .faq-content {
    display: none;
    width: 100%;
    font-family: Montserrat;
    font-size: 1.2em;
    font-weight: 400;
    margin-top: 10px;
  }

  .center-placeholder{
    display: flex;
    justify-content: center;
  }

  .center {
    align-items: center;
  }

  .wacky-cart-container {
    width: 80%;
    max-width: 800px;
    margin: 50px auto;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.cart-container{
position: relative;
display: inline-block;
}

.wacky-notification-circle {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 60%;
    height: 60%;
    background-color: #DC6C53;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.wacky-cart-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
}

.wacky-cart-content {
    display: flex;
    justify-content: space-between;
}

.wacky-product-list {
    flex: 2;
    margin-right: 20px;
}

.wacky-product-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.wacky-product-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin-right: 10px;
}

.wacky-product-details {
    flex: 1;
}

.wacky-product-name {
    display: block;
    font-size: 16px;
    margin-bottom: 5px;
}

.wacky-product-price {
    color: #888;
    font-size: 14px;
}

.wacky-product-quantity {
    display: flex;
    align-items: center;
}

.wacky-quantity-input {
    width: 50px;
    margin-right: 10px;
}

.wacky-remove-link {
    color: #ff0000;
    text-decoration: none;
}

.wacky-product-total {
    font-size: 16px;
    font-weight: bold;
}

.wacky-cart-summary {
    flex: 1;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
}

.wacky-summary-item,
.wacky-summary-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.wacky-summary-total {
    font-size: 18px;
    font-weight: bold;
}

.wacky-summary-note {
    display: block;
    margin: 10px 0;
    font-size: 12px;
    color: #888;
}

.wacky-order-note {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.wacky-checkout-button {
    width: 100%;
    padding: 15px;
    background-color: #000;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

.wacky-checkout-container {
    display: flex;
    justify-content: center;
    padding: 20px;
    gap: 20px;
}

.wacky-checkout-left, .wacky-checkout-right {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.wacky-checkout-left {
    flex: 2;
}

.wacky-checkout-right {
    flex: 1;
    max-width: 400px;
}

.wacky-express-checkout {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.wacky-express-button {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-right: 10px;
}

.wacky-express-button:last-child {
    margin-right: 0;
}

.shop-pay {
    background-color: #5a31f4;
    color: white;
}

.paypal {
    background-color: #ffc439;
    color: black;
}

.google-pay {
    background-color: #000000;
    color: white;
}

.wacky-or-divider {
    text-align: center;
    margin: 20px 0;
}

.wacky-contact-section, .wacky-delivery-section, .wacky-shipping-section, .wacky-payment-section, .wacky-remember-section {
    margin-bottom: 20px;
}

.wacky-contact-section label, .wacky-payment-section h2, .wacky-delivery-section h2, .wacky-shipping-section h2 {
    display: block;
    margin-bottom: 10px;
    font-size: 18px;
}

.wacky-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.wacky-checkbox-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 10px;
}

.wacky-checkbox {
    margin-right: 10px;
}

.wacky-input-row {
    display: flex;
    gap: 10px;
}

.wacky-radio-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 10px;
}

.wacky-radio {
    margin-right: 10px;
}

.wacky-credit-card-icons img, .wacky-payment-method img {
    margin-right: 5px;
}

.wacky-pay-button {
    width: 100%;
    padding: 15px;
    background-color: #000;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

.wacky-pay-button:hover {
    background-color: #333;
}

.wacky-order-summary {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
}

.wacky-product-summary {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.wacky-product-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin-right: 10px;
}

.wacky-product-details {
    flex: 1;
}

.wacky-product-name {
    display: block;
    font-size: 16px;
    margin-bottom: 5px;
}

.wacky-product-price {
    color: #888;
    font-size: 14px;
}

.wacky-discount-code {
    display: flex;
    margin-bottom: 20px;
}

.wacky-discount-code .wacky-input {
    flex: 1;
    margin-right: 10px;
}

.wacky-apply-button {
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.wacky-apply-button:hover {
    background-color: #0056b3;
}

.wacky-summary-details {
    border-top: 1px solid #ccc;
    padding-top: 20px;
}

.wacky-summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.wacky-summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: bold;
}

.wacky-checkout-button:hover {
    background-color: #333;
}

.wacky-payment-methods {
    margin-top: 20px;
    text-align: center;
}

.wacky-payment-methods img {
    width: 100%;
    max-width: 400px;
}
  
  .faq-content.show {
    display: block;
    width: 100%;
    margin-top: 2.5%;
    text-align: justify;
  }


.category {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25vw;
    height: 25vw;
    margin: 0 2.5%;
    text-align: center;
    background-color: #62B8BF;
    border-radius: 5%;
    padding: 2.5% 0;
    justify-content: space-between; /* To space out image and title */
}

.category-coming-soon-leashes {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25vw;
    height: 25vw;
    margin: 0 2.5%;
    text-align: center;
    background-color: #DBDBDB;
    opacity: 40%;
    border-radius: 2.5%;
    padding: 2.5% 0;
    justify-content: space-between; /* To space out image and title */
}

.category-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25vw;
    height: 25vw;
    margin: 0 2.5%;
    text-align: center;
    background-color: #DBDBDB;
    opacity: 40%;
    border-radius: 2.5%;
    padding: 2.5% 0;
    justify-content: space-between; /* To space out image and title */
}


.category-image {
    max-height: 80%; /* Adjust as needed to fit the container */
    max-width: 100%;
    border-radius: 2.5%;
    object-fit: contain; /* Ensure the image fits within the container without being cropped */
}

.category-image-coming-soon {
    max-height: 80%; /* Adjust as needed to fit the container */
    max-width: 100%;
    border-radius: 2.5%;
    object-fit: contain; /* Ensure the image fits within the container without being cropped */
    opacity: 50%;
}

.category-title {
    color: #fff;
    font-family: Montserrat;
    font-size: 2.5em;
    font-weight: 500;
}

.item-leash {
    margin: 0;
}

.item-leash1 {
    margin: 0;
}

.item-leash2 {
    margin: 0;
}

.item-leash3 {
    margin: 0;
}

.item-leash4 {
    margin: 0;
}


.custom-column2 {
    display: flex;
    align-items: center;
    width: 100%;
}

.custom-column3 {
    display: flex;
    align-items: center;
    width: 100%;
}


.nav-items {
    flex: 1;
    display: flex;
    justify-content: right;
    width: 100%;
    margin-right: 8%;
}




/* Each column takes 50% of the width */
.custom-column {
    flex: 1;
    padding: 20px;
}


.custom-column444{
    flex: 1;
    padding: 20px;
}

.custom-column555{
    flex: 1;
    padding: 20px;
}

.custom-column666{
    flex: 1;
    
}

.custom-column-payment-methods {
    display: flex;
    flex-direction: column;
    align-items: left;
    flex: 1;
    padding-right: 5%;
    z-index: 300;
}

.custom-column-item-details{
    flex: 1;
}


/* Style the text in the first column */
.custom-text-column {
    text-align: left;
    align-items: center;
    display: flex;
    max-width: 700px; /* Adjust the value as needed */
    margin-left: 100px;
    color: #000;
    font-family: Montserrat;
    font-size: 24px;
    font-weight: 500;
    text-align: left;
    margin-left: 130px;
}


/* Style the text in the first column */
.custom-text-column2 {
    text-align: justify;
    align-items: left;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1.6em;
    font-weight: 500;
    width: 100%;
    padding-top: 2.5%;
    padding-left: 5%;
    padding-right: 15%;
}

.custom-text-column21 {
    text-align: justify;
    align-items: left;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1.6em;
    font-weight: 500;
    width: 100%;
    padding-right: 20%;
    padding-top: 10%;
}

.custom-text2-webapp-column2 {
    text-align: justify;
    align-items: left;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1.6em;
    font-weight: 500;
    width: 100%;
    padding-right: 20%;
    padding-top: 2.5%;
    margin-left: 0%;
    padding-left: 0%;
}

.custom-text2-webapp-column21 {
    text-align: justify;
    align-items: left;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1.6em;
    font-weight: 500;
    width: 100%;
    padding-right: 20%;
    padding-top: 2.5%;
    margin-left: 0%;
}

.custom-text-column22 {
    text-align: justify;
    align-items: left;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1em;
    font-style: italic;
    font-weight: 500;
    width: 100%;
    padding-right: 20%;
    padding-top: 5%;
}

.custom-text-webapp-column2 {
    text-align: justify;
    align-items: left;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1.6em;
    font-weight: 500;
    width: 100%;
    padding-top: 2.5%;
    padding-left: 5%;
    padding-right: 35%;
}

.custom-text-policies {
    text-align: justify;
    align-items: center;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1em;
    font-weight: 500;
    width: 100%;
    padding-right: 10%;
    padding-left: 10%;
    padding-top: 5%;
}

.custom-text-policies2 {
    text-align: justify;
    align-items: center;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1em;
    font-weight: 500;
    width: 100%;
    padding-right: 15%;
    padding-left: 15%;
    padding-top: 4%;
}

.custom-text-policies22 {
    text-align: justify;
    align-items: center;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1em;
    font-weight: 500;
    width: 100%;
    padding-right: 15%;
    padding-left: 15%;
    padding-top: 1%;
}

.custom-button2 {
    padding: 10px 20px;
    margin-right: 5%;
    border: 1px solid #ccc;
    cursor: pointer;
    background-color: #f0f0f0;
  }
  .custom-button2.active {
    background-color: #333366; /* Green */
    color: white;
    border: 1px solid #333366;
  }

  .active-pagination{
    font-weight: 600;
  }

.custom-text-partnerships {
    text-align: justify;
    align-items: center;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1.5em;
    font-weight: 500;
    width: 100%;
    padding-right: 7.5%;
    padding-left: 7.5%;
    padding-top: 5%;
}

.custom-text-careers {
    text-align: justify;
    align-items: center;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1.6em;
    font-weight: 500;
    width: 90%;
    padding-right: 7.5%;
    padding-left: 15%;
    padding-top: 5%;
}

.custom-title-current-openings {
    text-align: justify;
    align-items: center;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 2em;
    font-weight: 600;
    width: 100%;
    padding-right: 7.5%;
    padding-left: 15%;
    padding-top: 5%;
}

.custom-text-partnerships-bold {
    text-align: justify;
    align-items: center;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1.5em;
    font-weight: 600;
    width: 100%;
    padding-right: 10%;
    padding-left: 10%;
    padding-top: 5%;
}



.custom-text-webapp-how-to-download {
    text-align: justify;
    align-items: center;
    justify-content: center;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 2.5em;
    font-weight: 600;
    width: 100%;
    padding-right: 10%;
    padding-left: 10%;
    padding-top: 10%;
}

.custom-text-webapp-qr-code {
    text-align: center;
    align-items: center;
    color: #000;
    font-family: Montserrat;
    font-size: 1.5em;
    font-weight: 600;
    width: 100%;
    padding-right: 10%;
    padding-left: 10%;
    padding-top: 5%;
    
}

.custom-text-webapp-qr-code-explanation1{
    text-align: center;
    align-items: center;
    color: #000;
    font-family: Montserrat;
    font-size: 1.45em;
    font-weight: 600;
    width: 100%;
    padding-right: 10%;
    padding-left: 10%;
    padding-top: 3.5%;
    padding-bottom: 3.5%;
    
}

.custom-text-webapp-qr-code-explanation2{
    text-align: center;
    align-items: center;
    color: #000;
    font-family: Montserrat;
    font-size: 1.25em;
    font-weight: 500;
    width: 100%;
    padding-right: 10%;
    padding-left: 10%;
    margin-top: 5%;
}

.custom-text-webapp-qr-code-explanation222{
    align-items: center;
    text-align: justify;
    color: #000;
    font-family: Montserrat;
    font-size: 1.5em;
    font-weight: 500;
    width: 90%;
    padding-right: 10%;
    padding-left: 20%;
    margin-top: 5%;
}

.border-radius111{
    border-radius: 2.5%;
}

.border-radius1112{
    border-radius: 2.5%;
    width: 80%;
}

.custom-text-webapp-smartphone {
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center ;
    color: #000;
    font-family: Montserrat;
    font-size: 1.25em;
    font-weight: 500;
    width: 100%;
    padding-top: 2%;
}

.custom-text-webapp-smartphone2 {
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center ;
    color: #000;
    font-family: Montserrat;
    font-size: 1.25em;
    font-weight: 500;
    width: 45%;
    padding-top: 2%;
    margin-left: 27.5%;
}

.lost-dog-owner-name {
    text-align: center;
    align-items: center;
    justify-content: center;
    align-content: center;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 5em;
    font-weight: 500;
    width: 100%;
    padding-right: 10%;
    padding-left: 10%;
    padding-top: 5%;
    padding-bottom: 7.5%;
}

.lost-dog-found {
    text-align: center;
    align-items: center;
    justify-content: center;
    align-content: center;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 5.5em;
    font-weight: 600;
    width: 100%;
    padding-right: 10%;
    padding-left: 10%;
    padding-top: 5%;
}


.lost-dog-owner-contacts {
    text-align: center;
    align-items: center;
    justify-content: center;
    align-content: center;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 3em;
    font-weight: 500;
    width: 100%;
    padding-right: 10%;
    padding-left: 10%;
    padding-top: 5%;
}

.owner-contact-buttons{
    text-align: center;
    align-items: center;
    justify-content: center;
    align-content: center;
    display: flex;
    color: #fff;
    font-family: Montserrat;
    font-size: 2em;
    font-weight: 600;
    background-color: #25D366;
    border-radius: 5em;
}

.lost-dog-name {
    text-align: center;
    align-items: center;
    justify-content: center;
    align-content: center;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 5em;
    font-weight: 500;
    width: 100%;
    padding-right: 10%;
    padding-left: 10%;
    padding-top: 2.5%;
}

.whatsapp-button {
    width: 10%;
}

.custom-text-column3 {
    text-align: justify;
    align-items: left;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1.6em;
    font-weight: 500;
    width: 100%;
    padding-left: 15%;
    padding-top: 2.5%;
}

.custom-text-webapp-column3 {
    text-align: justify;
    align-items: left;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1.6em;
    font-weight: 500;
    width: 100%;
    padding-left: 30%;
    padding-top: 2.5%;
}

.custom-text-column33 {
    text-align: justify;
    align-items: left;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1.6em;
    font-weight: 500;
    width: 100%;
    padding-left: 5%;
    padding-top: 2.5%;
}


.custom-text-column333 {
    text-align: justify;
    align-items: left;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1.6em;
    font-weight: 500;
    width: 100%;
    padding-left: 15%;
    padding-top: 2.5%;
    padding-right: 15%;
}

.custom-text-column456 {
    text-align: justify;
    align-items: left;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1.6em;
    font-weight: 500;
    width: 100%;
    padding-left: 7.5%;
    padding-top: 5%;
    padding-right: 15%;
}

.custom-text-column789 {
    text-align: justify;
    align-items: left;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1.6em;
    font-weight: 500;
    width: 100%;
    padding-left: 7.5%;
    padding-right: 15%;
}

.custom-text-column35 {
    text-align: justify;
    align-items: left;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1.6em;
    font-weight: 500;
    width: 100%;
    padding-left: 5%;
    padding-top: 2.5%;
}

.custom-text-column33 {
    text-align: justify;
    align-items: left;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1.6em;
    font-weight: 500;
    width: 100%;
    padding-top: 2.5%;
    padding-right: 15%;
}

.custom-text-column31 {
    text-align: justify;
    align-items: left;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1.6em;
    font-weight: 500;
    width: 100%;
    padding-left: 20%;
    padding-top: 10%;
}

.custom-text-webapp-column31 {
    text-align: justify;
    align-items: left;
    display: flex;
    color: #000;
    font-family: Montserrat;
    font-size: 1.6em;
    font-weight: 500;
    width: 100%;
    padding-left: 30%;
    padding-top: 2.5%;
}

.text-container span {
    display: inline-block; /* Makes both spans act like a single line */
  }

/* Make the image responsive */
.custom-image-column-left img {
    height: auto;
    display: block;
    margin: 0 auto;
    width: 22em;
}

.custom-image-column-left-desktop img {
    height: auto;
    display: block;
    margin: 0 auto;
    width: 22em;
}

.custom-image-column-left-desktop-not-app {
    position: relative;
}

.custom-image-column-left-desktop-not-app2   {
    position: relative;
}


.background-square {
    position: absolute;
    top: 50px; /* Adjust the value to translate down */
    left: 25px; /* Adjust the value to translate left */
    width: 38em; /* Same width as the image */
    height: 38em; /* Same height as the image */
    background-color: #62B8BF;
    border-radius: 2.5%;
    z-index: 1;
}

.device-filters-webapp {
    display: flex;
    justify-content: center;
    margin-top: 1.25%;
  }

.device-btn {
    font-family: 'Montserrat', sans-serif;
    color: white;
    background-color: #DBDBDB;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    margin: 0 10px;
    cursor: pointer;
    transition: opacity 0.3s ease;
  }
  
  .device-btn:hover {
    opacity: 0.3;
    background-color: #62B8BF;
  }
  
  .device-btn.active {
    background-color: #62B8BF;
  }

  .device-section {
    display: block; /* Changed from flex to block */
  }

.custom-image-column-left-desktop-not-app img {
    height: 38em;
    display: block;
    margin: 0 auto;
    border-radius: 2.5%;
    position: relative;
    z-index: 2; /* Ensure the image is in front of the square */
}

.custom-image-column-left-desktop-not-app2 img {
    border-radius: 1.5%;
    position: relative;
}



.custom-image-column-left-mobile img {
    height: auto;
    display: block;
    margin: 0 auto;
    width: 22em;
}


.custom-image-column-left123 img {
    height: auto;
    display: block;
    margin: 0 auto;
    width: 42em;
}

.custom-image-column-left-desktop123 img {
    height: auto;
    display: block;
    margin: 0 auto;
    width: 42em;
}

.custom-image-column-left22 img {
    height: auto;
    display: block;
    margin: 0 auto;
    width: 35em;
}

.custom-image-column-right img {
    height: auto;
    display: block;
    margin: 0 auto;
    width: 22em;
}

.custom-image-column-right-xpz img {
    height: auto;
    display: block;
    margin: 0 auto;
    width: 40em;
}

.custom-image-column-right-mobile img {
    height: auto;
    display: block;
    margin: 0 auto;
    width: 22em;
}

.custom-image-column-right-desktop img {
    height: auto;
    display: block;
    margin: 0 auto;
    width: 22em;
}

.custom-image-column-right234 img {
    height: auto;
    display: block;
    margin: 0 auto;
    width: 22em;
}

.custom-image-column-right123 img {
    height: auto;
    display: block;
    margin: 0 auto;
    width: 42em;
}

.custom-image-column-right22 img {
    height: auto;
    display: block;
    margin: 0 auto;
    width: 35em;
    border-radius: 3%;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.custom-image-column-right333 img {
    height: auto;
    display: block;
    margin: 0 auto;
    width: 50%;
}

.qr-code {
    height: auto;
    width: 22em;
    margin:0 auto;
    display:block;
    margin-top: 10%;
}


.opening-statement-sub-bold-2{
    width: 100%;
    color: #fff;
    font-family: Montserrat;
    font-size: 26px;
    font-weight: 600;
    margin-top: 35px;
}



.test123{
    margin-top: 60px;
}



.hero .title{
    margin-bottom: 30px;
}
@media screen and (min-width: 1200px) {
    .hero .title{
        margin-bottom: 40px;
    } 
}
.service_row{
    justify-content: center;
}
footer .col-lg-7{
    text-align: center;
}
.img{
    max-width: 120px;
}

.logo{
    max-width: 120px;

}

.footer-columns{
    color: #fff;
    font-family: Montserrat;
    font-size: 12px;
    font-weight: 500;
}

.hero .title{
    font-size: 60px;
    line-height: 60px;
    margin-bottom: 25px;
}
.hero p{
    line-height: 20px;
}
.scan_div img:first-child{
    max-width: 120px;
}
.scan_div .qr_img{
    max-width: 240px !important;
}
.logo_two{
    width: 100px;
    margin-right: 10px;
}

.dog-tags {
  width: auto;
  height: 300px; /* Adjust height as desired */
  max-width: 150%;
}


.app-features-screens {
    width: auto;
    height: 700px; /* Adjust height as desired */
    max-width: 150%;
  }


.footer_text{
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer_text p {
    display: inline-block;
    color: #000;
    font-family: Montserrat;
    font-size: 32px;
    font-style: italic;
    font-weight: 500;
    margin-bottom: 0;
}

.spacing-features-lol {
    margin-top: 7.5%;
}


.hamburger-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
    margin-left: 60%;
}

.hamburger-menu-size{
    height: 70%;
}


.hamburger-menu .bar {
    width: 26px;
    height: 3px;
    background-color: #333;
    margin: 4px 0;
}

/* Mobile Styles */
@media only screen and (max-width: 600px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
        width: 100vw;
    }

    .nav-items {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #fff;
        position: absolute;
        top: 3.5em; /* Adjust based on your navbar height */
        left: 0;
        border-top: 1px solid #DBDBDB;
    }

    .nav-items a {
        padding: 1em;
        text-align: center;
        border-bottom: 1px solid #DBDBDB;
    }

    .hamburger-menu {
        display: flex;
        margin-right: 10%;
        height: 80%;
        margin-top: 2.5%;
    }

    .hero-section-landing-page {
        flex-direction: column;
        padding-top: 2.5em;
        padding-bottom: 5%;
    }

    .custom-column {
        padding: 5px;
        width: 100%; /* Ensure columns take full width */
    }

    .custom-row {
        flex-direction: column; /* Ensure rows become columns */
    }

    .title-feature-right, .title-feature-left {
        font-size: 1.75em;
        padding-left: 7.5%;
        padding-right: 7.5%;
    }

    .custom-text-column2, .custom-text-column3 {
        font-size: 14px;
    }

    .opening-statement234{
        padding-left: 10%;
        padding-right: 10%;
        font-size: 3em;
    }

    .opening-statement23{
        width: 100%;
        font-size: 1.9em;
        font-weight: 800;
        line-height: 1.3em;
        margin-left: 4%;
        margin-top: 35%;
        text-shadow: 0.25px 0.25px #333366;
        
    }

    .opening-statement111{
        font-size: 3em;
        margin-top: 0%;
        margin-left: 10%;
    }

    .opening-statement-sub-bold-123{
        font-size: 1em;
        width: 90%;
        margin-left: 10%;
    }

    .download-statement {
        font-size: 0.8em;
        padding-right: 15%;
        margin-top: 4%;
        margin-bottom: 25%;
        font-weight: 300;
        width: 90%;
        margin-left: 10%;
      }

    .downloads{
        margin-left: 10%;
        width: 90%;
      }

      .download-demo-webapp {
        margin-right: 1em;
        width: 10em;
      }
      
      .download-app-store{
        margin-right: 1em;
      }
    
      .navbar {
        padding: 2%;
    }

    .custom-image-column-right234 img {
        width: 65vw;
        margin-top: 0%;
    }

    .custom-image-column-right img {
        width: 70vw;
        margin-top: 10%;
    }

    .custom-image-column-left img {
        width: 70vw;
        margin-top: 10%;
    }

    .custom-image-column-left-mobile img {
        width: 70vw;
        margin-top: 10%;
    }

    
    .custom-image-column-right-mobile img {
        width: 70vw;
        margin-top: 10%;
    }

    .custom-image-column-left-desktop img {
        width: 70vw;
        margin-top: 10%;
    }

    .custom-image-column-right-desktop img {
        width: 70vw;
        margin-top: 10%;
    }

    .spacing-features {
        margin-top: 15%;
    }

    .spacing-features-index1 {
        margin-top: 5%;
    }

    .spacing-features-lol {
        margin-top: 10%;
    }

    .spacing-features-index2{
        margin-top: 5%;
    }

    .custom-text-column2 {
        padding-right: 7.5%;
        padding-left: 7.5%;
        font-size: 1em;
        text-align:justify;
        margin-bottom: 2.5%;
        
    }

    .custom-text-column3 {
        padding-right: 7.5%;
        padding-left: 7.5%;
        font-size: 1em;
        text-align: justify;
        margin-bottom: 2.5%;
        margin-top: 10%;
    }

    .custom-text-column333 {
        padding-right: 7.5%;
        padding-left: 7.5%;
        font-size: 1em;
        text-align: justify;
        margin-bottom: 2.5%;
    }

    .custom-text-column33 {
        font-family: Montserrat;
        font-size: 1em;
        font-weight: 500;
        width: 100%;
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 2.5%;
    }


    .custom-text-column35 {
        text-align: justify;
        font-size: 1.2em;
        padding-right: 7.5%;
        padding-left: 7.5%;
    }

    .cta-store {
        margin-left: 7.5%;
        margin-bottom: 5%;
        margin-top: 2.5%;
        width: 11em;
        border-radius: 20px;
    }



    .sub-feature-left{
        margin-left: 7.5%;
        margin-bottom: 5%;
        margin-top: 2.5%;
        padding: 3%;
    }

    .sub-feature-right{
        margin-left: 7.5%;
        margin-bottom: 5%;
        margin-top: 2.5%;
        padding: 3%;
        width: 40%;
    }

    .footer-columns {
        margin-left: 0%;
      }

      .footer-columns2
      {
        margin-left: 0%;
      }
    
    .join-newsletter-column {
        margin-left: 0%;
    }

 
    .footer-column-title {
        font-size: 0.8em;
    }

    .nav-link3 {
        font-size: 0.65em; /* Adjust font size as desired */
        padding-bottom: 5%;
        padding-top: 5%;
    }

    .nav-link444 {
        font-size: 0.65em; /* Adjust font size as desired */
        padding-bottom: 5%;
        padding-top: 5%;
    }

    .nav-link555 {
        font-size: 0.65em; /* Adjust font size as desired */
        padding-bottom: 5%;
        padding-top: 0%;
    }

    .nav-link4 {
        font-size: 0.65em; /* Adjust font size as desired */
      }

      .footer-logo {
        width: 15%; /* Set fixed width for logo */
        margin-left: 0%;
      }

      .navbar-brand {
        width: 3em;
        height: auto;
        margin-left: 5%;
    }

    .nav-link2 {
        margin-left: 0em;
    }

    .nav-link2:hover {
        margin-left: 0em;
    }

    .spacing {
        margin-top: 35%;
      }

      .spacing-store-bottom{
        margin-top: 25em;
      }

      .col-lg-5{
        width: 75vw;
        margin-left: 12.5vw;
    }

    .footer {
        padding-top: 10%;
        padding-bottom: 10%;
      }

      .footer-content {
        display: flex; /* Make logo and columns display side-by-side */
        align-items: flex-start;
      }

      .footer-column {
        width: 25%; /* Set width for each column */
      }

      .footer-column-footer {
        width: 100%; /* Set width for each column */
      }

      .footer-columns {
        justify-content:space-evenly; /* Distribute columns evenly */
      }

      .nav-link:hover {
        font-size: 0.9em; /* Adjust font size as desired */
    }

    .socials {

        width: 1.75em;
        }




        .choose-language-text{
            margin-left: 5%;
            font-size: 0.8em;
            font-weight: 600;
        }

        .choose-language-select{
            margin-left: 17.5%;
            margin-top: 5%;
            width: 100%;
        }

        .language-select-container{
            margin-left: 5%;
            margin-top: 7.5%;
        }

        .hero-section-blog  {
            width: 100vw;
            height: 13em;
        }

        .hero-section-partnerships {
            width: 100vw;
            height: 13em;
        }

        .hero-section-how-to {
            width: 100vw;
            height: 13em;
        }

        .hero-section-careers {
            width: 100vw;
            height: 13em;
        }

        .hero-section-about {
            width: 100vw;
            height: 13em;
        }

        .hero-section-policies{
            width: 100vw;
            height: 13em;
        }

        .hero-section-store {
            width: 100vw;
            height: 13em;
        }


        .opening-statement-partnerships{
            font-size: 2.5em;
            padding-left: 5%;
            margin-top: 7.5%;
        
        }

        .opening-statement-careers{
            font-size: 3.5em;
            padding-left: 5%;
            margin-top: 15%;
        
        }

        .opening-statement-policies{
            font-size: 2em;
            padding-left: 5%;
            margin-top: 10%;
            width: 85%;
        }

        .opening-statement-store-sub{
            font-size: 0.75em;
            margin-top: 5%;
            width: 50%;
        }

        .custom-image-column-right123 img {
            padding-left: 7.5%;
            padding-right: 7.5%;
            margin-top: 5%;
        }

        .custom-image-column-right123xpz img {
            padding-left: 7.5%;
            padding-right: 7.5%;
            margin-top: 5%;
            margin-bottom: 7.5%;
        }

        .custom-image-column-left123 img {
            padding-left: 7.5%;
            padding-right: 7.5%;
            margin-top: 5%;
        }

        .custom-text-partnerships {
            padding-right: 7.5%;
            padding-left: 7.5%;
            font-size: 1.2em;
            text-align: justify;
            padding-top: 5%;
        }

        .opening-statement-about{
            font-size: 3.5em;
            padding-left: 5%;
            padding-top: 25%;
        }

        .opening-statement-store {
            font-size: 2em;
            padding-left: 2.5%;
            margin-top: 35%;
            width: 90%;
        }

        .opening-statement-blog  {
            font-size: 1.5em;
            margin-top: 5%;
            width: 50%;
            margin-left: 0%;
            text-align: left;
        }

        .opening-statement2{
            font-size: 2em;
            padding-left: 5%;
            margin-top: 10%;
            width: 85%;
        }

        .opening-statement-sub-bold-4{
            width: 90%;
            font-size: 0.75em;
            margin-top: 5%;
            margin-left: 5%;
        }

        .custom-title-current-openings {
            padding-right: 7.5%;
            padding-left: 7.5%;
        }

        .job-description     {
            width: 90%;
            margin: 0;
            font-size: 1em;
        }

        .job-title {

            width: 90%;

        }

        .custom-text-policies {
            font-size: 0.65em;
            padding-top: 7%;
        }

        .custom-text-policies2 {
            font-size: 0.65em;
            padding-top: 4%;
        }
        
        .custom-text-policies22 {
            font-size: 0.65em;
            padding-top: 4%;
        }


        .custom-text-webapp-qr-code-explanation222{
            padding-right: 12.5%;
            padding-left: 12.5%;
            font-size: 1em;
            text-align:justify;
            margin-bottom: 2.5%;
            margin-top: 10%;
        }

        .coming-soon-title{
            font-size: 1.75em;
            margin-top: 7.5%;
        }


        .custom-row-items {
            grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
            gap: 2%;
            margin-left: 5%;
        }

        .coming-soon-item {
            display: flex;
            flex-direction: column;
            width: 40vw;
            margin: 1%;
        }

        .item-image {
            height: auto;
            max-width: 100%;
        }

        .tag-image-container {
            height: 13em; /* Adjust the height and width for the tag container */
        }

        .item-name {
            font-size: 1.15em;
        }
        
        .item-price {
            font-size: 1em;
        }

        
        .category {
            width: 25vw;
            height: 25vw;
            border-radius: 7.5%;
            margin-left: 6%;
        }

        .category-coming-soon {
            width: 25vw;
            height: 25vw;
            border-radius: 7.5%;
        }

        .category-coming-soon-leashes {
            width: 25vw;
            height: 25vw;
            border-radius: 7.5%;
            margin-right: 6%;
        }
        
        
        .category-title {
            font-size: 0.55em;
        }

        .item-name-detail {
            font-size: 1.5em;
            margin-left: 5%;
        }

        .item-price-detail{
            font-size: 1em;
            margin-left: 5%;    
        }

        .item-detail-image-container{
            width: 45vw;
            height: 45vw;
            margin-left: 7.5%;
        }

        .item-quantity{
            font-size: 0.65em;
            margin-left: 5%;
            margin-top: 5%;
        }
        
        .quantity-button {
            width: 7em;
            padding: 8px 0px; /* Adjust padding for consistent size */
            margin-left: 5%;
            font-size: 0.75em;
          }
          
          .add-cart-button {
            width: 11em;
            margin-left: 5%;
            font-size: 0.6em;
            font-weight: 600;
            margin-top: 15%;
            padding: 5%;
        }

        .item-detail-image-container-small{
            width: 17.5vw;
            height: 17.5vw;
            padding: 0%;
        }
        
       
        
        .item-detail-image-container-small-1{
            width: 17.5vw;
            height: 17.5vw;
            padding: 0%;
            margin-left: 7.5%;
        }

        .custom-row {
            justify-content: space-around; /* Ensure space is evenly distributed */
        }

        .latest-blogs {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* Default to 5 columns */
            margin-left: 2.5%;
            gap: 1%;
            padding-bottom: 40%;
        }

        .blog-post {
            width:40vw;
            height: 50vh;
            margin-left: 5%;
        }

        .post-title {
            font-size: 1em;
        }

        .post-title-detail {
            font-size: 2em;
        }

        .post-title-blog-text1 {
            font-size: 1em; /* Adjust font size as desired */
            margin-right: 15%;
            font-weight: 500;
            margin-top: 15%;
        }

        .post-title-blog-text2 {
            font-size: 1em; /* Adjust font size as desired */
            margin-right: 15%;
            font-weight: 500;
        }

        .post-title-blog-text3 {
            font-size: 1em; /* Adjust font size as desired */
            margin-right: 15%;
            font-weight: 500;
        }

        .post-title-blog-text4 {
            font-size: 1em; /* Adjust font size as desired */
            margin-right: 15%;
            font-weight: 500;
        }

        .post-title-blog-text5 {
            font-size: 1em; /* Adjust font size as desired */
            margin-right: 15%;
            font-weight: 500;
        }

        .post-title-blog-text6 {
            font-size: 1em; /* Adjust font size as desired */
            margin-right: 15%;
            font-weight: 500;
        }


        .icons-section {
            margin-left: 4%;
            margin-top: 4%;
          }
          
          .icons-section img {
            width: 30px;
            height: 30px;
          }

          .socials-buy {
            width: 10em;
            
        }
        
        
        .socials-instagram-buy{
            width: 1.75em; /* Adjust as needed */
        }
    
    
        .socials-facebook-buy {
            width: 1.75em; /* Adjust as needed */
        }
        

        .faq-title {
            font-weight: 700;
            font-size: 0.9em;
          }

          .faq {
            margin-top: 10%;
            margin-left: 7.5%;
            margin-right: 7.5%;
          }

          .faq-icon {
            font-size: 1em;
            flex-shrink: 0;
          }

          .custom-image-column-left-desktop-not-app img {
            height: auto;
            display: block;
            margin: 0 auto;
            border-radius: 2.5%;
            padding-left: 7.5%;
            padding-right: 7.5%;
        }

        .tag-how-to-index{
            width: 100%;
            margin-left: 0%;
        }

        .custom-column-mobile{
            margin-top: 15%;
        }

        .spacing-features-item-details{
            margin-top: 5%;
            margin-bottom: 5%;
        }

        .faq-content{
            font-weight: 500;
            font-size: 0.65em;
            text-align: justify;
          }

          .faq-content.show{
            width: 100%;
          }



          .custom-column666{
            grid-template-columns: repeat(1, 1fr); /* 2 columns on mobile */
        }



        .tag-how-to-image{
           width: 100%;
        }



        .custom-image-column-left22 img {
            margin-left: 7.5%;
            margin-right: 7.5%;
            width: 85%;
        }

        .custom-image-column-right22 img {
            margin-left: 7.5%;
            margin-right: 7.5%;
            width: 85%;
        }

        .title-feature-right-1234{
            font-size: 1.75em;
            padding-left: 7.5%;
            padding-right: 7.5%;
            margin-top: 5%;
}

.title-feature-left-poww{
    font-size: 1.75em;
    padding-left: 7.5%;
    margin-bottom: 5%;
    margin-top: 6%;
}

.custom-text-column456 {
    padding-right: 7.5%;
    padding-left: 7.5%;
    font-size: 1em;
    text-align: justify;
    margin-bottom: 2.5%;
    margin-top: 5%;
}

.custom-text-column789 {
    padding-right: 7.5%;
    padding-left: 7.5%;
    font-size: 1em;
    text-align: justify;
    margin-bottom: 2.5%;
}

.spacing-pagination-bottom{
    margin-top: 7.5em;
  }

  .spacing-blog-bottom{
    margin-top: 10em;
  }

  .custom-text-careers {
    margin-top: 10%;
    font-size: 1em;
    margin-bottom: 5%;


}

    .join-newsletter{
        margin-left: 10%;
        font-size: 0.8em;
        font-weight: 600;
    }


  
    .mc-field-group{
        margin-left: 17.5%;
        width: 90%;
    }

    .socials1 {
        margin-left: 5%;
        margin-bottom: 15%;
        }

    .socials-cta{
        margin-left: 10%;
        font-size: 0.8em;
        font-weight: 600;
        margin-top: 5%;
        }


        .footer-container123 {
        width: 100%;
            }

            .optionalParent{
                margin-left: 17.5%;
              }


              .pagination {
                margin-top: 10%;    /* Space above the pagination */
                position: relative; /* Change to relative for better flow on mobile */
                bottom: auto;       /* Reset bottom position */
            }
        
            .pagination button {
                margin: 0 5px;       /* Space between the buttons */
                padding: 10px;       /* Add some padding to the buttons */
                font-size: 1em;      /* Adjust font size */
                cursor: pointer;     /* Pointer cursor on hover */
            }
        
            .pagination button:hover {
                background-color: #ccc;  /* Background color on hover */
                font-weight: 600;
            }

      
            .post-blog-img1{
                display: flex;
                justify-content: center;
                width: 70vw;
                margin-left: 15vw;
                margin-top: 10%;
            }
            
            .post-blog-img2{
                width: 70vw;
                margin-left: 15vw;
                margin-top: 10%;
            }
            
            .post-blog-img3{
                width: 70vw;
                margin-left: 15vw;
                margin-top: 10%;
            }
            
            .post-blog-img4{
                width: 70vw;
                margin-left: 15vw;
                margin-top: 10%;
            }
            
            .post-blog-img5{
                width: 70vw;
                margin-left: 155vw;
                margin-top: 10%;
            }


            .custom-dropdown-btn {
                margin-bottom: 5%;
                margin-top: 5%;
                margin-left: 4%;
            }

            .flag-icon {
                width: 22px;
                height: auto;
            }

            .custom-dropdown-content {
                margin-left: 0.25%;
                margin-top: 1%;
            }

            .nav-link333 {
            border-bottom: 1px solid #DBDBDB;
        }

        .nav-link-44{
            width: 45%;
        }

        .tag-how-to-image-index-main {
            margin-top: 15%;
        }
}