@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');


:root{
	--blue:#00F;
	--darkorange:#F60;
	--purple:#903;
    --orange:#EC7A5C;
    --black:#000;
    --light-color:#000;
    --box-shadow:.5rem .5rem 0 rgba(255, 204, 102, .2);
    --text-shadow:.4rem .4rem 0 rgba(0, 0, 0, .2);
    --border:.2rem solid var(--orange);
	 --green:#090;
	 --black:#333;
	 --red:#F00;
}

/* Product Character Section Styling */
.product-charact {
  padding: 3rem 20px;
  background: #fdfdfd;
  text-align: center;
}

.charact-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  padding: 2rem max(5%, 20px);
}

.charact-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 2.5rem 1.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.charact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(236, 122, 92, 0.15); /* Soft themed orange shadow */
  border-color: var(--orange);
}

/* Modifying background accents for standard vs negative features */
.charact-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: rgba(236, 122, 92, 0.1); /* 10% opacity of theme orange */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.charact-icon i {
  font-size: 2.4rem;
  color: var(--orange);
}

/* Subtle styling variants for "No" indicators to stand out elegantly */
.charact-card.negative .charact-icon {
  background-color: rgba(240, 0, 0, 0.07);
}

.charact-card.negative .charact-icon i {
  color: #d9534f;
}

.charact-card h3 {
  font-size: 1.6rem;
  color: #333;
  margin-bottom: 1rem;
  font-weight: 600;
}

.charact-card p {
  font-size: 1.3rem;
  color: #666;
  line-height: 1.5;
  white-space: normal; /* Override structural global pre tags if any */
}

.charact-card p.status-no {
  color: #d9534f;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .charact-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .charact-card {
    padding: 2rem 1.2rem;
  }
}


p {
  white-space: pre;
}

p span {
  display: block;
}

.item-group {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

label {
  font-size: 16px;
}



.blogs .box-container. .boxes .slide .img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
   position: absolute;
  z-index: 8;
}


.blogs .box-container. .boxes .slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
   position: absolute;
  z-index: 8;
}




.filter-toggle {
  position: fixed;
  left: 0;
  top: 30%;
  transform: translateY(-50%);
  width: 50px;
  height: 120px;
  background: #27ae60;
  color: white;
  border: none;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  z-index: 999;
  box-shadow: 2px 0 10px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}



.filter-toggle:hover {
  background: #cbf5dd;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}


/* Mobile version */
@media (max-width: 768px) {
  .filter-toggle {
    top: 30%;           /* move down a bit */
    transform: none;    /* stop centering */
    width: 25px;        /* 50% of original width */
    height: 60px;       /* 50% of original height */
    font-size: 12px;    /* slightly smaller text */
    border-radius: 0 3px 3px 0; /* proportionally smaller corners */
  }
}


/* Light-Themed Filter Panel */
.ffilter-panel-left {
  position: fixed;
  top: 0;
  left: -320px;
  width: 300px;
  height: 100vh;
  background: #fff;
  box-shadow: 2px 0 15px rgba(0,0,0,0.1);
  z-index: 1000;
  transition: left 0.3s ease;
  padding: 25px;
  overflow-y: auto;
  border-right: 1px solid #eee;
}

.ffilter-panel-left.open {
  left: 0;
}

.ffilter-panel-left h2 {
  color: #333;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  font-size: 1.5rem;
}

/* Light Theme Filter Groups */
.filter-group {
  margin-bottom: 25px;
  background: #f8f9fa;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #eee;
}

.filter-group h3 {
  color: #333;
  margin-bottom: 15px;
  font-size: 1.1rem;
}

.filter-option {
  margin-bottom: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.filter-option:last-child {
  border-bottom: none;
}

.filter-option label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: color 0.2s;
}

.filter-option label:hover {
  color: #27ae60;
}

.filter-option input {
  margin-right: 10px;
  accent-color: #27ae60;
}

/* Apply Button */
.apply-filters {
  background: #27ae60;
  color: white;
  border: none;
  padding: 12px;
  cursor: pointer;
  width: 100%;
  margin-top: 20px;
  border-radius: 5px;
  font-weight: bold;
  transition: background 0.3s;
}

.apply-filters:hover {
  background: #2ecc71;
}

/* Close Button */
.close-filter {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  color: #888;
  font-size: 24px;
  cursor: pointer;
  transition: color 0.2s;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-filter:hover {
  color: #333;
}

/* Overlay */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  z-index: 999;
  backdrop-filter: blur(3px);
}

.overlay.active {
  display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .filter-toggle {
    left: 10px;
    top: 10px;
  }
  
  .ffilter-panel-left {
    width: 280px;
  }
}




.back-to-top {
    position: fixed;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    padding: 12px 18px;
    background-color: black;
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1000;
}

.back-to-top:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.05);
}

/*
.center-btn {
    display: flex;
    justify-content: center;
    gap: 20px; /* space between buttons 
    flex-wrap: wrap; /* allows wrapping on smaller screen
    margin: 30px 0; /* spacing above and below the group 
}

.pet-btn {
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    white-space: nowrap; /* keeps text on one line 
}

.pet-btn:hover {
    background-color: #218838;
    transform: translateY(-2px);
}
*/

.center-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.pet-btn {
  display: inline-block;
  padding: 8px 14px;
  background: #28a745;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s ease;
}
.pet-btn:hover {
  background: #1e7e34;
}





.center-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.pet-btns {
  padding: 10px 20px;
  background: #28a745;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  transition: 0.3s;
  text-align: center;
}



/*
@media (max-width: 600px) {
  .pet-btns {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 0;
    font-size: 1rem; 
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    color: transparent; 
    position: relative;
    overflow: hidden;


  .btn-tamper::after {
    content: "��";  
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    z-index: 10;
    font-size: 1.2rem; 
  }
  
  .btn-tm3000::after {
    content: "⚪";   
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    z-index: 10;
    font-size: 1.2rem;
  }
  
  .btn-tm4000::after {
    content: "âš«";   
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    z-index: 10;
    font-size: 1.2rem; 
}
*/


@media (max-width: 600px) {
  .pet-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 0;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    color: transparent;
    position: relative;
    overflow: hidden;
  }

  .btn-tamper::after {
    content: "🔒"; 
  }
  
  .btn-tm3000::after {
    content: "○"; 
  }
  
  .btn-tm4000::after {
    content: "●";
  }
}

  /* Color variants */
        .round {
            background-color: #ff6b6b;
            color: white;
        }
        
        .rectangle {
            background-color: #48dbfb;
            color: white;
        }
        
        .square {
            background-color: #1dd1a1;
            color: white;
        }
        
        .oval {
            background-color: #feca57;
            color: white;
        }
        
        .screw {
            background-color: #ff9ff3;
            color: white;
        }
        
        .other {
            background-color: #54a0ff;
            color: white;
        }
        
        /* Shape containers */
        .shape-container {
            background: white;
            border-radius: 15px;
            padding: 30px;
            margin: 30px 0;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            min-height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        
        .shape-container h2 {
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 2rem;
        }
        
        .shape {
            width: 200px;
            height: 200px;
            margin: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 1.2rem;
        }
        
        #roundcontainer .shape {
            background-color: #ff6b6b;
            border-radius: 50%;
        }
        
        #rectanglecontainer .shape {
            background-color: #48dbfb;
            width: 300px;
        }
        
        #squarecontainer .shape {
            background-color: #1dd1a1;
            width: 200px;
            height: 200px;
        }
        
        #ovalcontainer .shape {
            background-color: #feca57;
            border-radius: 50%;
            width: 250px;
            height: 150px;
        }
        
        #screwcontainer .shape {
            background-color: #ff9ff3;
            position: relative;
            border-radius: 5px;
        }
        
        #screwcontainer .shape::before {
            content: "";
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(45deg, #fff, #ccc);
            top: -20px;
            left: calc(50% - 20px);
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
        }
        
        #othercontainer .shape {
            background-color: #54a0ff;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        }
        
        /* Mobile styles */
        @media (max-width: 768px) {
            .pet-btn {
                font-size: 0; /* Hide text */
                width: 50px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                padding: 0;
            }
            
            .pet-btn i {
                margin-right: 0;
                font-size: 20px;
            }
            
            .center-btn {
                gap: 10px;
            }
            
            .shape {
                width: 150px;
                height: 150px;
            }
            
            #rectanglecontainer .shape {
                width: 220px;
            }
            
            #ovalcontainer .shape {
                width: 180px;
                height: 120px;
            }
        }

.mata-btn {
    padding: 10px 20px;
    background-color: #cc5801;
    color: white;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    white-space: nowrap; /* keeps text on one line */
}

.mata-btn:hover {
    background-color: #FC6A03;
    transform: translateY(-2px);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}


.videowrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  padding-top: 25px;
  height: 0;
}

.videowrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 📱 Mobile version (reduce height for smaller screens) */
@media (max-width: 768px) {
  .videowrapper {
    padding-bottom: 75%; /* taller but not too big — adjust as needed */
  }
}

/* 📱 Even smaller phones */
@media (max-width: 480px) {
  .videowrapper {
    padding-bottom: 90%; /* if still too wide, increase or adjust here */
  }
}


html {
  scroll-behavior: smooth;
}



@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#loading-spinner {
    text-align: center;
    margin-top: 20px;
}

/* Style the result item */
/*.result-item {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

/* Style the images in the result 
*/
	
	
	
	/* Style the results container */
#results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 20px; /* Space between grid items */
    padding: 20px;
    margin: 0;
}

.result-item img {
	width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Style each result item */
.result-item {
    background: #f9f9f9; /* Light background for contrast */
    border: 1px solid #ddd; /* Subtle border */
    border-radius: 8px; /* Rounded corners */
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add slight shadow */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Highlight search terms */
.highlight {
    background-color: yellow;
    font-weight: bold;
    font-size: 1.2rem; /* Match size to result item font size */
}

/* Hover effect for result items */
.result-item:hover {
    transform: scale(1.02); /* Slight zoom */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
}



/* Style the "Found in" text */
.result-item p strong {
    color: #333; /* Darker text for readability */
    font-size: 0.9em; /* Slightly smaller text for emphasis */
}

/* Style the links */
.result-item a {
    color: #007bff; /* Link color */
    text-decoration: none;
}

.result-item a:hover {
    text-decoration: underline; /* Underline on hover */
}

.result-item p {
    margin: 10px 0; /* Add vertical spacing between paragraphs */
    font-size: 0.9rem; /* Slightly smaller font size */
    line-height: 1.4; /* Improve readability with line spacing */
    color: #555; /* Neutral gray color for the text */
}

/* Emphasize "Found in:" text */
.result-item p strong {
    font-weight: bold;
    color: #333; /* Darker color for emphasis */
}

/* Style the link inside the paragraph */
.result-item p a {
    color: #007bff; /* Blue color for links */
    text-decoration: none;
    font-weight: bold; /* Make the link stand out */
}

.result-item p a:hover {
    text-decoration: underline; /* Underline link on hover */
    color: #0056b3; /* Slightly darker blue on hover */
}

/* Differentiate 'Current Page' text */
.result-item p .current-page {
    font-style: italic;
    color: #888; /* Subtle gray for 'Current Page' */
    font-weight: normal;
}
 



/* Style for highlighted text (search terms) */
.highlight {
    background-color: yellow;
    font-weight: bold;
}

/* Style the result content */
.result-item p {
	font-size: 1rem;
    margin: 10px 0;
}

#search-section {
    padding: 20px;
    text-align: center;
    background-color: var(--neutral-white);
    box-shadow: var(--box-shadow-light);
    margin: 20px;
}



#searchInput {
    width: 97%;
	padding: 10px;
    font-size: 1.5rem;
    border: 2px solid var(--orange);
    border-radius: 5px;
}


#search-section input {
	width: 100%; /* Search box width */
    max-width: 1500px;
    padding: 10px 20px;
    font-size: 2rem;
    background: linear-gradient(90deg, #ffffff, #808080); /* White to grey gradient */
    color: #333; /* Text color */
    border: 2px solid #333; /* Default border to make it visible */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    box-sizing: border-box;
    transition: all 0.3s ease;
    margin-top: 2rem;
}


#searchInput:hover {
    border-color: var(--hover-color, #ff6600); /* Change the border color on hover */
    box-shadow: 0 0 8px rgba(255, 102, 0, 0.5); /* Add a subtle shadow effect */
}

.search-icon {
    position: relative;
    left: -1.5rem; /* Adjust the icon 1.5rem away from the input */
    font-size: 1.5rem;
    color: var(--orange);
    pointer-events: none; /* Prevent icon interaction */
}



#searchInput:focus {
    border: 2px solid #ec7a5c; /* Reapply the same border or use a different color for focus */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Deeper shadow on focus */
    background: #fff; /* Solid white background on focus */

}



#spacer {
  height: 5rem; /* Adjust based on root font size */
  position:relative;

}

.login-text {
  margin-top: 5px; /* Add some space between the icon and text */
  font-size: 16px; /* Adjust text size */
  color: #333; /* Optional: Set a specific color */
}


   .login-link {
            text-align: center;
            color: #333;
            text-decoration: none;
        }

        .login-link .material-icons {
            font-size: 80px;
            color: #4CAF50;
            transition: color 0.3s ease;
        }

        .login-link:hover .material-icons {
            color: #45a049;
        }

        .login-link p {
            margin-top: 10px;
            font-size: 20px;
            font-weight: 500;
        }


.yellow {
  color: yellow;
  text-shadow:.1rem .1rem 0 rgba(0, 0, 0);
}

.gold {
  color: gold;
    text-shadow:.1rem .1rem 0 rgba(0, 0, 0);
}

.gold {
  color: #d4af37; /* classic gold */
  text-shadow:
    0.05rem 0.05rem 0 rgba(255, 255, 255, 0.6),
    0.1rem 0.1rem 0 rgba(120, 90, 10, 0.8);
}


.silver {
  color: #c0c0c0; /* silver */
  text-shadow:
    0.05rem 0.05rem 0 rgba(255, 255, 255, 0.8),
    0.1rem 0.1rem 0 rgba(90, 90, 90, 0.7);
}


.black {
  color: black;
    text-shadow:.1rem .1rem 0 rgba(0, 0, 0);
}


.clear {
  color: grey;
    text-shadow:.1rem .1rem 0 rgba(0, 0, 0);
}

.red {
  color: red;
    text-shadow:.1rem .1rem 0 rgba(0, 0, 0);
}

.lightgreen {
  color: #0F6;
    text-shadow:.1rem .1rem 0 rgba(0, 0, 0);
}

.lightblue {
  color: #36F;
    text-shadow:.1rem .1rem 0 rgba(0, 0, 0);
}

*{
    font-family: 'Poppins', sans-serif;
    margin:0; padding: 0;
	box-sizing: border-box;
    outline: none; border: none;
    text-transform: capitalize;
    text-decoration: none;

}
.wrapper{
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  position: fixed;
  width: 100%;
   	  z-index: 11;
}

.wrapper nav{
  position: relative;
  display: flex;
  max-width: calc(80% - 100px);
  margin: 0 auto;
  height: 70px;
  align-items: center;
  justify-content: space-between;
   	  z-index: 1000;
 
}

/*start of zoom in out button*/




.zoom-controls {
  position: fixed;
  bottom: 20px; /* Position it at the bottom of the viewport */
  right: 20px;  /* Position it to the right */
  z-index: 1000; /* Ensure buttons stay on top of other content */
  background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

.zoombutton1 {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  left: 50%; /* Center the first button */
  transform: translateX(calc(-100% - 0.5rem)); /* Move it to the left, with 0.5rem gap */
  background-color: #FC0; /* Yellow background */
  color: #FFF; /* White text */
  border-radius: 40px; /* Make it round */
  text-align: center;
  font-size: 40px;
  box-shadow: 2px 2px 3px #999;
  z-index: 500; /* Ensure it's above other content */
}

.zoombutton2 {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  left: 50%; /* Center the second button */
  transform: translateX(calc(0.5rem)); /* Move it to the right, with 0.5rem gap */
  background-color: #FC0; /* Yellow background */
  color: #FFF; /* White text */
  border-radius: 40px; /* Make it round */
  text-align: center;
  font-size: 40px;
  box-shadow: 2px 2px 3px #999;
  z-index: 500; /* Ensure it's above other content */
}

.zoom-text {
  position: fixed;
  color:#000;/* Darker text color */
  font-size:8px; /* Font size for the text */
  bottom: px;
  left: 45%; /* Center the second button */
  transform: translateX(calc(0.5rem)); /* Move it to the right, with 0.5rem gap */
   z-index: 500; /* Ensure it's above other content */
  
}


.zoombutton:hover {
  background-color: #0056b3; /* Change color on hover */
}

.zoomcontent {
  text-align: center;
  margin-top: 100px;
}


/*end of zoom in out button*/



#floatingWindow2 {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  max-width: 100%;
  max-height: 100vh;
  background-color: #666;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  overflow: auto;
  text-align: center; /* Center the content horizontally */
}


/* Styling for the image within the floating window */
#floatingWindow2 img {
  display: block; /* Ensures the image is treated as a block element */
  margin: 0 auto; /* Center the image horizontally */
  max-width: 100%; /* Make sure the image doesn't exceed the floating window's width */
}


#floatingWindow {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;             /* Wider window: 80% of viewport width */
  height: 60vh;            /* Taller window: 80% of viewport height */
  background-color: #EEEDE7;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  overflow: auto;
  text-align: center;
}


/*#floatingWindow {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  max-width: 100%;
  max-height: 100vh;
  background-color: #EEEDE7;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  overflow: auto;
  text-align: center; /* Center the content horizontally 
}*/


/* Styling for the image within the floating window */
#floatingWindow img {
  display: block; /* Ensures the image is treated as a block element */
  margin: 0 auto; /* Center the image horizontally */
  max-width: 100%; /* Make sure the image doesn't exceed the floating window's width */
}

/* Styling for the "x" icon */
#closeButton {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  font-size: 60px;
  font-weight: bold;
  color:var(--orange);
}


#closeButton2 {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  font-size: 60px;
  font-weight: bold;
  color:var(--orange);
}

/* 📱 Mobile version */
@media (max-width: 768px) {
  #closeButton,
  #closeButton2 {
    font-size: 35px;   /* smaller icon for mobile */
    top: 10px;
    right: 10px;
  }
}
/*css for slider~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.carousel {
  	display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap:2rem;
	position: relative;
	 touch-action: pan-y; /* Allows vertical scrolling but prevents horizontal scroll */
  overflow: hidden; /* Prevents scrollbars from appearing during swipes */
}

/* Common Styles for Both Buttons */
.carousel-button {
    position: absolute;
    top: 50%; /* Center vertically within the div */
    transform: translateY(-50%);
    background-color: rgba(255, 165, 0, 0.8); /* Orange with 60% opacity */
    /*background-color: rgba(0, 0, 0, 0.6); /* Optional styling */
    color: white; /* Optional styling */
    border: none; /* Optional styling */
    border-radius: 50%; /* Optional styling */
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index:8;
}

/* Previous Button Specific Styles */
.carousel-button.prev {
    left: 0; /* Position at the left edge of the div */
    margin-left: 10px; /* Add spacing from the edge */
}

/* Next Button Specific Styles */
.carousel-button.next {
    right: 0; /* Position at the right edge of the div */
    margin-right: 10px; /* Add spacing from the edge */
}


.blogs h8 {
	color:var(--green);
	text-align:center;
    font-size: 1.5rem;
	display:block;
	}

	

.boxes {
  border: var(--border); /* Border styling */
  box-shadow: var(--box-shadow); /* Box shadow styling */
  position: relative; /* Relative positioning */
  overflow: hidden; /* Hide overflow content */
  border-radius: 2rem; /* Rounded corners */
  padding: 0.20rem; /* Padding around the content */
  align-items: center; /* Align items vertically */
}


.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
  height: 100%;
  object-fit: cover;
  justify-content: center; /* Center items horizontally */
  align-items: center; /* Center items vertically */
 z-index: 1;
}

.slide {
width: 50%; /* Ensure images fill their container */
  height: 50%; /* Ensure images fill their container */
  object-fit: cover; /* Maintain aspect ratio while covering container */
  border-radius: 0.5rem; /* Rounded corners for slides */
   flex: 0 0 100%; /* Each slide takes full width */
  display: none; /* Slides are hidden by default */
}




.slide[data-active] {
  opacity: 1;
  z-index: 1;
  transition-delay: 0ms;
    object-fit: cover;
      width: 100%;
  height: 100%;
    display: block; /* Active slide is visible */

}




.blogs .box-container .box .copycat {
    bottom: 6px;
    right: 6x;
    background: #28a745; /* Bootstrap success green */    color: white;
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2)
     cursor: pointer;
    transition: transform 0.2s ease;;

}

    

.blogs .box-container .box .copycat:hover {
    background: #e65c00;
}

.copy-toast {
  position: fixed;            /* viewport-based */
  background: #4CAF50;
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  transform: translateY(8px); /* start slightly down */
  transition: opacity .18s ease, transform .18s ease;
}
.copy-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Hide copycat button on mobile & tablet (up to 1024px wide) */
@media (max-width: 1024px) {
  .blogs .box-container .box .copycat {
    display: none !important;
  }
}


.blogs .box-container .box 

input, select{
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  font-size: 16px;
  background-color:#ede8d0;
}

button{
     width: 100%;
  margin: 10px 0;
  padding: 10px;
  font-size: 16px;
    background-color: var(--orange);
}



#results p {
  font-size: 18px;
  margin-top: 15px;
  border: 1px solid #FFC; /* Change #FFC to your desired border color */
  padding: 10px; /* Optional: add padding for spacing inside the border */
}



.blogs .box-container .box .cone img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;	
  object-fit: cover;
  z-index: 8;
}



.blogs .box-container .box .cone5 img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;	
  object-fit: contain;
  z-index: 8;
}



/* Styling for the button to open the floating window */
#openButton {
  margin-top: 20px;
}


#openButton2 {
  margin-top: 20px;
}



.blogs .box-container .box .cone2 img{
	 
	 
	 display: block;
  margin-left: auto;
  margin-right: auto;
    height: 700px;
    width: 400px;	
    object-fit: cover;
}

.blogs .box-container .box .cone3 img{
	display: block;
	margin-left: auto;
  margin-right: auto;
  width: 30%;	
    object-fit: cover;
}


.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:20px;
	right:20px;
	background-color:#25d366;
	color:#FFF;
	border-radius:40px;
	text-align:center;
  font-size:40px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}



.blogs .right img {
	padding-top:5rem;
	width: 100%;
  height: auto;
  position:relative}
  

.header .logo{
    font-size: 1.60rem;
    color: var(--black);
}

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

nav .content .links{
  margin-left:200px;
  display: flex;

  }
  
.content .logo a{
  color: #000;
  font-size: 22px;
  font-weight: 600;
  padding-left:0.5rem;
}

.content .links li{
  list-style: none;
  line-height: 70px;
}
/*main nagivation bar*/
.content .links li a,
.content .links li label{
  color: #000;
  font-size: 15px;
  font-weight: 500;
  padding: 9px 17px;
  border-radius: 5px;
  }

.content .links li label{
  display: none;
}

.content .links li a:hover,

/*when mouse on very nagivation included the sub navigation*/

.content .links li label:hover{
  background: rgba(0, 153, 51, 0.50);
}

.wrapper .search-icon,
.wrapper .menu-icon{
  color: #000;
  font-size: 18px;
  cursor: pointer;
  line-height: 70px;
  width: 70px;
  text-align: center;
  z-index: 1002;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.wrapper .menu-icon{
  display: none;
}

.wrapper #show-search:checked ~ .search-icon i::before{
  content: "\f00d";
}

.wrapper .search-box{
  position: absolute;
  height: 100%;
  max-width: calc(100% - 50px);
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  
}
.wrapper #show-search:checked ~ .search-box{
  opacity: 1;
  pointer-events: auto;
}

.search-box input{
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 17px;
  color: #fff;
  background: #171c24;
  padding: 0 100px 0 15px;
}
.search-box input::placeholder{
  color: #f2f2f2;
}
.search-box .go-icon{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 60px;
  width: 70px;
  background: #171c24;
  border: none;
  outline: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.wrapper input[type="checkbox"]{
  display: none;
}



.videowrapper { 
        float: none;
        clear: both;
        width: 1000px;
        position: relative;
        padding-bottom: 45%;
        padding-top: 25px;
        height: 0;
        margin: 0 auto;
        max-width: 100%;
    }



/* Dropdown Menu code start */
.content .links ul{
  position: absolute;
  background-color: rgba(255, 255, 240, 0.95);
  letter-spacing:0.20px;
  top: 80px;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
}

.content .links li:hover > ul{
  top: 70px;
  opacity: 1;
  visibility: visible;
   transition: all 0.5s ease;
    z-index: -1;
 }


 
 
/*dropdown main navigation bar attaching material*/
.content .links ul li a{
  display: block;
  width: 100%;
  line-height: 10px;
  border-radius: 2px!important;
  z-index:-1;
clear:both;
    white-space: nowrap;
	Z-index:1000;}
	


.content .links ul ul{
  position: absolute;
  background-color:#F9B076;
/*  background-color:#F4EBD0;*/
  top: 0;
  right: calc(-100% + 8px);
}

.content .links ul li{
  position: relative;
  
  }
.content .links ul li:hover ul{
  top: 0;
}




.about .row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap:0.50rem;
}

.about .row .image{
    flex:1 1 20rem;
}

.about .row .image img{
    width: 100%;
}

.about .row .content{
    flex:1 1 20rem;
}

.about .row .content h3{
    color: #663;
    font-size: 2rem;
    line-height: 3rem;
	text-align:center;
	padding-top:2rem;
	padding-bottom:1rem;
}

.about .row .content p{
    color: var(--light-color);
    padding:0.50rem 0;
    font-size: 0.50rem;
    line-height: 0.50;
}

/* css from hospital page-----------------------------------------------*/





.header{
    padding:1rem 9%;
    position: fixed;
    top:0; left: 0; right: 0;
    z-index: 1000;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
    display: flex;
    align-items:center;
    justify-content: space-between;
    background: #fff;
}

.header-text {
	 text-align:left;
 	 position: static;
 	 width:30%;
 	 font-size: 2rem;
     letter-spacing: .1rem;
	 z-index:1;
	}

.heading{
    text-align: center;
	padding-top:2rem;
    padding-bottom: 0.50rem;
    text-shadow: var(--text-shadow);
    text-transform: uppercase;
    color:var(--black);
    font-size: 5rem;
    letter-spacing: 1rem;
}



.industry-peer-heading {
    text-align: center;
	padding-top:2rem;
    padding-bottom: 0.50rem;
    text-shadow: var(--text-shadow);
    text-transform: uppercase;
    color:var(--green);
    font-size: 5rem;
    letter-spacing: 1rem;
}



.relevant{
    text-align: center;
	padding-top:1rem;
    padding-bottom: 0.50rem;
 	 text-shadow: 1px 1px 1px gray;
    text-transform: uppercase;
    color:var(--black);
    font-size: 3rem;
    letter-spacing: 1rem;
}


hr.new5 {
  border: 10px solid green;
  border-radius: 5px;
}


.header .logo{
    font-size: 2.5rem;
    color:#000;
    z-index: 1000;
}

.header .logo i{
    color: var(--orange);
      z-index: 1000;
}

/*not relevant*
#menu-btn{
    font-size: 1.50rem;
    border-radius: .5rem;
    background: #CCC;
    color:var(--orange);
    padding: 1rem 1.5rem;
    cursor: pointer;
    display: none;
}
/*not relevant*/

html{
    font-size: 62.5%;
       scroll-padding-top: 8rem;
	     /* overflow: hidden; */
    scroll-behavior: smooth;
}

section{
    padding:1rem 9%;
}

section:nth-child(even){
    background: #f5f5f5;}
 
  
.heading span{
    text-transform: uppercase;
    color:var(--orange);
}

.btn{
    display: inline-block;
    margin-top: 1rem;
    padding: .3rem;
    padding-left: 1rem;
    border:var(--border);
    border-radius: .5rem;
    box-shadow: var(--box-shadow);
    color:var(--orange);
    cursor: pointer;
    font-size: 1.7rem;
    background: #fff;
}

.btn span{
    padding:.7rem 1rem;
    border-radius: .5rem;
    background: var(--green);
    color:#fff;
    margin-left: .5rem;
}

.btn:hover{
    background: var(--orange);
    color:#fff;
	transition: 0.3s;
	
}

.btn:hover span{
    color: var(--green);
    background:#fff;
    margin-left: 1rem;
}








.icons-container{
    display: grid;
    gap:2rem;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.icons-container .icons{
    border:var(--border);
    box-shadow: var(--box-shadow);
    border-radius: .5rem;
    text-align: center;
    padding: 2.5rem;
}

.icons-container .icons i{
    font-size: 4.5rem;
    color:var(--orange);
    padding-bottom: .7rem;
}

.icons-container .icons h3{
    font-size: 4.5rem;
    color:var(--black);
    padding: .5rem 0;
    text-shadow: var(--text-shadow);
}

.icons-container .icons p{
    font-size: 1.7rem;
    color:var(--light-color);
}

.services .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap:2rem;
}

.services .box-container .box{
    background:#fff;
    border-radius: .5rem;
    box-shadow: var(--box-shadow);
    border:var(--border);
    padding: 2.5rem;
}


.services .box-container .box i{
    color: var(--orange);
    font-size: 5rem;
    padding-bottom: .5rem;
}

.services .box-container .box h3{
    color: var(--black);
    font-size: 2.5rem;
    padding:1rem 0;
}

.services .box-container .box p{
    color: var(--light-color);
    font-size: 1.4rem;
    line-height: 2;
}


.about .row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap:2rem;
}

.about .row .image{
    flex:1 1 45rem;
}

.about .row .image img{
    width: 100%;
}

.about .row .content{
    flex:1 1 45rem;
}


.about .row .content p{
    color: var(--light-color);
    padding:1rem 0;
    font-size: 1.5rem;
    line-height: 1.8;
}



.doctors .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap:0.30rem;	
}


.doctors .box-container .box{
    text-align: center;
    background:#EEEDE7;
    border-radius: .5rem;
    border:var(--border);
    box-shadow: var(--box-shadow);
    padding:0.3rem;
	
}

.doctors .box-container .box img{
    height: 15rem;
	overflow:hidden;
    border:var(--border);
    border-radius: .3rem;
    margin-top: 0.80rem;
    margin-bottom: 0.80rem;
	object-fit: contain;
	
}
.doctors .box-container .box .image{
    height: 20rem;
    overflow:hidden;
    border-radius: .5rem;
}

.doctors .box-container .box .box img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.doctors .box-container .box:hover img{
    transform:scale(1.2);
}

.doctors .box-container .box h3{
    color:var(--black);
    font-size: 1.50rem;
}


.doctors .box-container .box:hover h3{
color:#060;
}

.doctors .box-container .box span{
    color:var(--orange);
    font-size: 1.0rem;
}

.doctors .box-container .box .share{
    padding-top: 1rem;
}

.doctors .box-container .box .share a{
    height: 5rem;
    width: 5rem;
    line-height: 4rem;
    font-size: 1rem;
    color:var(--orange);
    border-radius: .5rem;
    border:var(--border);
    margin:.3rem;
}

.doctors .box-container .box .share a:hover{
    background:var(--orange);
    color:#fff;
    box-shadow: var(--box-shadow);
	
}


.book .row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap:2rem;
}
 
.book .row .image{
    flex:1 1 45rem;
}

.book .row .image img{
    width: 50%;
}

.book .row form{
    flex:1 1 45rem;
    background: #fff;
    border:var(--border);
    box-shadow: var(--box-shadow);
    text-align: center;
    padding: 2rem;
    border-radius: .5rem;
}

.book .row form h3{
    color:var(--black);
    padding-bottom: 1rem;
    font-size: 3rem;
}

.book .row form .box{
    width: 50%;
    margin:.7rem 0;
    border-radius: .5rem;
    border:var(--border);
    font-size: 1.6rem;
    color: var(--black);
    text-transform: none;
    padding: 1rem;
}

.book .row form .btn{
    padding:1rem 4rem;
}


.review {
	background:#EEEDE7;}



.review .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
	    gap:2rem;
}

.review .box-container .box{
    border:var(--border);
    box-shadow: var(--box-shadow);
    border-radius: 3rem;
    padding:0.20rem;
    background:#fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.review .box-container .box img{
    height: 20rem;
    width: 20rem;
    border-radius: 80%;
    object-fit: cover;
    border:.5rem solid #fff;
	transition: transform 0.3s ease;
  max-width: 100%;
	
}



.review .box-container .box:hover img{
  transform: scale(1.2); /* Enlarge the image by 20% */
}




.review .box-container .box h3{
    color:#000;
    font-size: 2.0rem;
    padding: 1rem 0;
	z-index:0;
}

.review .box-container .box .text{
    color:var(--light-color);
    line-height: 1.8;
    font-size: 1.2rem;
    padding-top: 1rem;
	 padding-bottom: 1rem;
	 clear:both;
    white-space: nowrap;
	 
}

.review .box-container .box::before{
    content: '';
    position: absolute;
    top:-4rem; left: 50%;
    transform:translateX(-50%);
    background:var(--orange);
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    height: 25rem;
    width: 120%;
    z-index: -1;
}



.section-divider {
    border: none;                     /* Removes standard browser border styles */
    height: 2px;                      /* Thickness of your line */
    background-color: #e0e0e0;        /* Color of your line (matches your page's theme) */
    width: 80%;                       /* Centers the line with 80% width instead of full edge-to-edge */
    margin: 4rem auto;                /* Generates top/bottom spacing and centers horizontally */
    opacity: 0.7;                     /* Slightly softens the color */
}
/*-----stye for abcd------*/
/* Container layout for 8 items per row on Desktop */
.blogs .box-containers {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 1rem;
    width: 100%;
}

/* 1. Add a smooth transition to the baseline card layout */
.blogs .box-containers .box {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: .4rem solid var(--orange);
    border-radius: .5rem;
    padding: 2rem;
    
    /* Crucial for a smooth animation when moving up/down */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
    cursor: pointer; 
}

/* 2. The Protrude Effect: Lifts the whole box up and shifts the shadow */
.blogs .box-containers .box:hover {
    transform: translateY(-10px); /* Physically pushes the card up by 10px */
    
    /* Creates a realistic floating depth shadow as it lifts */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); 
    
    /* Optional: subtly changes border color to highlight selection */
    border-color: #d35400;
}

.blogs .box-containers .box .title h3{
    color:var(--green);
    font-size:1.50rem;
    text-align:center;
    font-weight:bold;
    transition: color 0.2s ease;
}

.blogs .box-containers .box:hover .title h3{
    color: var(--green); /* Turns text green when the box is hovered */
}

.blogs .box-containers .box .title h12{
    color:var(--black);
    text-align:center;
    font-size: 1.4rem;
    font-weight:bold;
    display:block;
    background:#FF9;
}

/* Constrain the .abcd wrapper box */
.blogs .box-containers .box .abcd {
    width: 100%;
    height: 18rem; /* Sets fixed frame height so images don't burst out */
    overflow: hidden;
    border-radius: 0.50rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff; /* Optional: background frame for transparent images */
}

/* Force the link wrapper to fill the box frame */
.blogs .box-containers .box .abcd a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Perfect constraints for the plastic cup image */
.blogs .box-containers .box .abcd a img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Keeps cup proportion exact, no stretching or cropping */
    object-position: center;
    transition: transform 0.2s ease;
}

/* Nice slight hover effect for interactivity */
.blogs .box-containers .box .abcd a img:hover {
    transform: scale(1.05);
}
/*-------end of style abcd -----*/


/* =======================================================
   MOBILE RESPONSIVENESS (Adjusts everything for small screens)
   ======================================================= */
@media (max-width: 768px) {
  /* 1. Hide the entire section if it has the hide-on-mobile class */
  .hide-on-mobile {
    display: none !important;
  }
  
  /* 2. Fix the 8-column squeeze: Make it 2 clean columns on mobile instead */
  .blogs .box-containers {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
    gap: 0.8rem; /* Slightly tighter spacing for small screens */
  }

  /* 3. Scale down the boxes slightly so they look compact */
  .blogs .box-containers .box {
    padding: 1rem; /* Less internal padding so content isn't choked */
    border-width: .2rem; /* Thinner borders look cleaner on mobile */
  }

  /* 4. Shrink the image container frame height so it matches mobile viewports */
  .blogs .box-containers .box .abcd {
    height: 10rem; 
  }

  /* 5. Make the fonts smaller so the layout doesn't break text onto awkward rows */
  .blogs .box-containers .box .title h3 {
    font-size: 1.1rem;
  }
  .blogs .box-containers .box .title h12 {
    font-size: 1.0rem;
  }
}

.blogs .box-container .box h1{
   color:var(--green);
    font-size:1.50rem;
	text-align:center;
	font-weight:bold;}
	
	

.blogs .box-container .box .title h1{
    color:var(--green);
    font-size:1.50rem;
	text-align:center;
	font-weight:bold;
/*	 padding:1rem 0;*/	
}

.blogs .box-container .box .title h2{
    color:var(--blue);
	text-align:center;
    font-size: 3rem;
	font-weight:bold;
	display:block;}
	
	

.blogs .box-container .box .title h3{
    color:var(--green);
    font-size:1.50rem;
	text-align:center;
	font-weight:bold;
}


/*
.blogs .box-container .box .title h4{
    margin: 5px 0;
  font-family: Arial, sans-serif;
  font-size: 0.95em;
  color: #555;
}*/


    .blogs .box-container .box .title h4{
    color:#603;
    font-size: 1.40rem;
        /*padding:1rem 0;*/
	text-align:center;
}



.blogs .box-container .box .title h5{
    color:var(--blue);
    font-size: 1.50rem;
		text-align:center;
/*    line-height: 1.5;*/
/*    padding:1rem 0;*/
}



.blogs .box-container .box .title h6{
    color:var(--blue);
	text-align:center;
    font-size: 1.30rem;
	font-weight:bold;
	display:block;	}
	
	
	
.blogs .box-container .box .title h7{
    color: var(--black);
    font-size: 1.80rem;
    font-weight: bold;
    text-align: center;
	display: none;
    /*display: block;*/
    text-shadow: 2px 2px #FC0;
}



.blogs .box-container .box .title h8{
    color:var(--grey);
	text-align:center;
    font-size: 1rem;
	display:block;
	
}
	
	
	
.blogs .box-container .box .title h9{
    color:var(--purple);
	text-align:center;
    font-size: 1.30rem;
	font-weight:bold;
	display:block;
		}
	
	
		
.blogs .box-container .box .title h10{
    color:var(--red);
	text-align:center;
    font-size: 1.30rem;
	font-weight:bold;
	display:block;
	
	}
	
	
	
			
.blogs .box-container .box .title h11{
    color:var(--orange);
	text-align:center;
    font-size: 1.30rem;
	font-weight:bold;
	display:none;
	text-decoration: line-through;
	}
	
	
	
.blogs .box-container .box .title h12{
    color:var(--black);
	text-align:center;
    font-size: 1.8rem;
	font-weight:bold;
	display:block;
	background:#FF9;
		}
		
		
					
.blogs .box-container .box .title h13{
    color:var(--orange);
	text-align:center;
    font-size: 1.30rem;
	font-weight:bold;
	display:block;
	}
	
	
	
	.blogs .box-container .box .title p{
    color:var(--light-color);
    font-size: 1.0rem;
		text-align:center;

}
	

.blogs .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap:2rem;
}

.blogs .box-container .box{
    border:var(--border);
    box-shadow: var(--box-shadow);
    border-radius: .5rem;
    padding: 2rem;
}

.blogs .box-container .box .image{
    height: 10rem;
    overflow:hidden;
    border-radius: .5rem;
		object-fit: contain;
}

.blogs .box-container .box .image img{
    height: 100%;
    width: 100%;
    object-fit: contain;
}



/*.blogs .box-container .box:hover img{
    transform:scale(1.2);
}*/



.blogs .box-container .box .abc{
    height: 30rem;
    overflow:hidden;
    border-radius: 0.50rem;
}

.blogs .box-container .box .abc img{
    height: 100%;
    width: 100%;
    object-fit: contain;
	  object-position: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.blogs .box-container .box .abc img:hover{
    transform: scale(1.02);
}

.blogs .box-container .box .abc img:active{
    transform: scale(1.2);
}

/* Image Modal Overlay */
.image-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.image-modal.active {
    display: flex;
}

.image-modal-content {
    max-width: 80vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    cursor: default;
}

.image-modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
    transition: color 0.3s;
}

.image-modal-close:hover {
    color: #ccc;
}



.blogs .box-container .box .content{
    padding-top: 0.50rem;
}

.blogs .box-container .box .content .icon{
    padding: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blogs .box-container .box .content .icon a{
    font-size: 0.5rem;
    color: var(--light-color);
}

.blogs .box-container .box .content .icon a:hover{
    color:var(--orange);
}

.blogs .box-container .box .content .icon a i{
    padding-right: .5rem;
    color: var(--orange);
}

.blogs .box-container .box .content h3{
    color:#090;
    font-size: 1rem;
}

.blogs .box-container .box .content p{
    color:var(--light-color);
    font-size: 1.5rem;
    line-height: 1.8;
    padding:1rem 0;
}



/***-box container 2 for relevant item linking*****/


.blogs .box-container2{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap:1rem;
}


  
.blogs .relevant span{
    text-transform: uppercase;
    color:var(--orange);
}



.blogs .box-container2 .box{
    border:var(--border);
    box-shadow: var(--box-shadow);
    border-radius: .5rem;
    padding: 2rem;
}


.blogs .box-container2 .box .small{
    height: 20rem;
    overflow:hidden;
    border-radius: .2rem;
}

.blogs .box-container2 .box .small img{
  	height: 100%;
    width: 100%;
    object-fit: cover;
}


.blogs .box-container2 .title h1{
    color:var(--green);
    font-size: 1.5rem;
    line-height: 10px;
    padding:1rem 0;
	text-align:center;
}


.blogs .box-container2 .box .content{
    padding-top: 0.30 rem;
}

.blogs .box-container2.box .content .icon{
    padding: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blogs .box-container2 .box .content .icon a{
    font-size: 0.5rem;
    color: var(--light-color);
}

.blogs .box-container2 .box .content .icon a:hover{
    color:var(--orange);
}

.blogs .box-container2 .box .content .icon a i{
    padding-right: .5rem;
    color: var(--orange);
}

.blogs .box-container2 .box .content h3{
    color:#090;
    font-size: 1rem;
}

.blogs .box-container2 .box .content p{
    color:var(--light-color);
    font-size: 1.5rem;
    line-height: 1.8;
    padding:1rem 0;
}



/*****----end of box container 2*****/


.doctors .content2 h7{
font-size: 2.0rem;
  position: relative;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;}
  
  
  
  


	
	/*using title as style---------------------------------------- css*/

		/*-------------------------content2-----------------wording for product description-*/

.blogs .box-container .box .content2 p{
    color:var(--light-color);
    font-size: 1.0rem;
		text-align:center;

}


.blogs .box-container .box .content2{
   /* padding-top: 0.50rem;*/
}

.blogs .box-container .box .content2 .icon{
/*    padding: 1rem 0;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blogs .box-container .box .content2 .icon a{
    font-size: 0.5rem;
    color: var(--light-color);
}

.blogs .box-container .box .content2 .icon a:hover{
    color:var(--orange);
}

.blogs .box-container .box .content2 .icon a i{
    padding-right: .5rem;
    color: var(--orange);
}

.blogs .box-container .box .content2 h1{
    color:var(--green);
    font-size:1.50rem;
	text-align:center;
	font-weight:bold;
/*	 padding:1rem 0;*/
	
}
.blogs .box-container .box .content2 h2{
    color:var(--blue);
	text-align:center;
    font-size: 3rem;
	font-weight:bold;
	display:block;
		  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adjust the shadow properties as desired */

	}

.blogs .box-container .box .content2 h3{
    color:var(--green);
    font-size:1.50rem;
	text-align:center;
	Padding-bottom:1rem;
/*	 padding:1rem 0;*/

}


.blogs .box-container .box .content2 h4{
    color:var(--darkblue);
    font-size: 1.40rem;
/*    line-height: 1.5;*/
/*    padding:1rem 0;*/
	text-align:center;
}


.blogs .box-container .box .content2 h5{
    color:var(--green);
    font-size: 2.00rem;
		text-align:center;
	text-shadow:1px 1px 2px rgba(0, 0, 0, 0.5); /* Adjust the shadow properties as desired */

/*    line-height: 1.5;*/
/*    padding:1rem 0;*/
}




.blogs .box-container .box .content2 h6{
    color:var(--blue);
	text-align:center;
    font-size: 1.30rem;
	font-weight:bold;
	display:block;	}
	

.blogs .box-container .box .content2 h7{
    color:var(--black);
    font-size: 1.20rem;
     font-weight:bold;
	text-align:center;
	   display: none;
		/*display:block;*/
		
	

}

.blogs .box-container .box .content2 h9{
    color:var(--purple);
	text-align:center;
    font-size: 1.30rem;
	font-weight:bold;
	display:block;
	
/*    line-height: 1.5;*/
/*    padding:1rem 0;*/

}

.blogs .box-container .box .contactus h10{
    color:#F30;
	text-align:center;
	  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adjust the shadow properties as desired */

    font-size: 3rem;
	display:block;	}
	
	
	
.blogs .box-container .box .contactus h5{
    color:var(--green);
    font-size: 4.00rem;
		text-align:center;
			  text-shadow:1px 1px 2px rgba(0, 0, 0, 0.5); /* Adjust the shadow properties as desired */

/*    line-height: 1.5;*/
/*    padding:1rem 0;*/
}

.blogs .box-container .box .contactus h2{
    color:var(--blue);
	text-align:center;
    font-size: 3rem;
	font-weight:bold;
	display:block;}
		  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adjust the shadow properties as desired */





/*--------------------------------------end of product description----------------------------*/


.footer .box-container{
   
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap:2rem;
}

.footer .box-container .box h3{
    font-size: 2.5rem;
    color:var(--black);
    padding: 1rem 0;
}

.footer .box-container .box a{
    display: block;
    font-size: 1.5rem;
    color:var(--light-color);
    padding: 1rem 0;
}

.footer .box-container .box a i{
    padding-right: .5rem;
    color:var(--orange);
}

.footer .box-container .box a:hover i{
    padding-right:2rem;
}

.footer .credit{
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    padding: 1rem;
    padding-top: 2rem;
    margin-top: 2rem;
    text-align: center;
    font-size: 2rem;
    color:var(--light-color);
    border-top: .1rem solid rgba(0, 0, 0, .1);
}

.footer .credit span{
    color:var(--orange);
}


/****************************end of css from page*******************----------------*/


/* Responsive code start */
@media screen and (max-width: 1250px){
	
	
	
#search-section {
    padding: 20px;
    text-align: center;
    background-color: var(--neutral-white);
    box-shadow: var(--box-shadow-light);
    margin: 20px;
}



#searchInput {
    width: 97%;
	padding: 10px;
    font-size: 1.5rem;
    border: 2px solid var(--orange);
    border-radius: 5px;
}


#search-section input {
	width: 100%; /* Search box width */
    max-width: 1500px;
    padding: 10px 20px;
    font-size: 2rem;
    background: linear-gradient(90deg, #ffffff, #808080); /* White to grey gradient */
    color: #333; /* Text color */
    border: 2px solid #333; /* Default border to make it visible */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    box-sizing: border-box;
    transition: all 0.3s ease;
    margin-top: 2rem;
}


#searchInput:hover {
    border-color: var(--hover-color, #ff6600); /* Change the border color on hover */
    box-shadow: 0 0 8px rgba(255, 102, 0, 0.5); /* Add a subtle shadow effect */
}

.search-icon {
    position: relative;
    left: -1.5rem; /* Adjust the icon 1.5rem away from the input */
    font-size: 1.5rem;
    color: var(--orange);
    pointer-events: none; /* Prevent icon interaction */
}



#searchInput:focus {
    border: 2px solid #ec7a5c; /* Reapply the same border or use a different color for focus */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Deeper shadow on focus */
    background: #fff; /* Solid white background on focus */

}

	
  .wrapper nav{
    max-width: 100%;
    padding: 0 15px;
  }
  
  nav .content .links{
    margin-left: 30px;
  }
  .content .links li a{
    padding: 8px 13px;
  }
  .wrapper .search-box{
    max-width: calc(100% - 100px);
  }
  .wrapper .search-box input{
    padding: 0 100px 0 15px;
  }
  
  
  .blogs .box-container .box .image {
    height: 200px;  /* Set the height to 300px */
    width: 200px;   /* Set the width to 300px */
    overflow: hidden;
    border-radius: .5rem;
}

.blogs .box-container .box .image img {
    height: 100%;   /* Set the image to cover 100% of the container height */
    width: 100%;    /* Set the image to cover 100% of the container width */
    object-fit: contain; /* Ensures the image maintains its aspect ratio and covers the entire container */
}
  
  
}

@media screen and (max-width: 900px){
	
	
#search-section {
    padding: 20px;
    text-align: center;
    background-color: var(--neutral-white);
    box-shadow: var(--box-shadow-light);
    margin: 20px;
}



#searchInput {
    width: 97%;
	padding: 10px;
    font-size: 1.5rem;
    border: 2px solid var(--orange);
    border-radius: 5px;
}


#search-section input {
	width: 100%; /* Search box width */
    max-width: 1500px;
    padding: 10px 20px;
    font-size: 2rem;
    background: linear-gradient(90deg, #ffffff, #808080); /* White to grey gradient */
    color: #333; /* Text color */
    border: 2px solid #333; /* Default border to make it visible */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    box-sizing: border-box;
    transition: all 0.3s ease;
    margin-top: 2rem;
}


#searchInput:hover {
    border-color: var(--hover-color, #ff6600); /* Change the border color on hover */
    box-shadow: 0 0 8px rgba(255, 102, 0, 0.5); /* Add a subtle shadow effect */
}

.search-icon {
    position: relative;
    left: -1.5rem; /* Adjust the icon 1.5rem away from the input */
    font-size: 1.5rem;
    color: var(--orange);
    pointer-events: none; /* Prevent icon interaction */
}



#searchInput:focus {
    border: 2px solid #ec7a5c; /* Reapply the same border or use a different color for focus */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Deeper shadow on focus */
    background: #fff; /* Solid white background on focus */

}

/* Mobile navigation styles */
.wrapper .menu-icon{
  display: block;
}

.wrapper #show-menu:checked ~ .menu-icon i::before{
  content: "\f00d";
}

nav .content .links{
  display: block;
  position: fixed;
  background:#FFF;
  height: 100%;
  width: 100%;
  top: 70px;
  left: -100%;
  margin-left: 0;
  max-width: 350px;
  overflow-y: auto;
  padding-bottom: 100px;
  transition: all 0.3s ease;
  z-index: 1200;
}
nav #show-menu:checked ~ .content .links{
  left: 0%;
}
.content .links li{
  margin: 15px 20px;
}

/*cup plate packaging bag*/
.content .links li a,
.content .links li label{
  line-height: 25px;
  font-size: 18px;
  display: block;
  padding: 8px 18px;
  cursor: pointer;
}
.content .links li a.desktop-link{
  display: none;
}

.content .links li a,
.content .links li label{
  line-height: 25px;
  font-size: 25px;
  display: block;
  padding: 8px 18px;
  cursor: pointer;
}

.content .links li a.desktop-link{
  display: none;
  font-size: 15px;
}

/* dropdown responsive code start */
.content .links ul,
.content .links ul ul{
  position: static;
  opacity: 1;
  visibility: visible;
  max-height: 0px;
  overflow:hidden;
}
.content .links #show-features:checked ~ ul,
.content .links #show-services:checked ~ ul,
.content .links #show-plate:checked ~ ul,
.content .links #show-microwave:checked ~ ul,
.content .links #show-packaging:checked ~ ul,
.content .links #show-box:checked ~ ul,
.content .links #show-jar:checked ~ ul,
.content .links #show-items:checked ~ ul,
.content .links #show-paperbag:checked ~ ul,
.content .links #show-foodwrap:checked ~ ul,
.content .links #show-food:checked ~ ul
{
  max-height: 200vh;
}
.content .links ul li{
  margin: 2px 5px;
}
/*attaching material navigation in mobile */
.content .links ul li a{
  font-size: 20px;
  line-height: 30px;
  border-radius: 5px!important;
}

}


@media (max-width: 768px) {
  .carousel-button {
    width: 60px;
    height: 60px;
    font-size: 28px;
  }
}

@media screen and (max-width: 400px){
  .wrapper nav{
    padding: 0 10px;
  }
  .content .logo a{
    font-size: 27px;
  }
  .wrapper .search-box{
    max-width: calc(100% - 20px);
  }
  .wrapper .search-box .go-icon{
    width: 30px;
    right: 0;
  }
  .wrapper .search-box input{
    padding-right: 30px;
  }
  
  
  
/* Common Styles for Both Buttons */
.carousel-button {
    position: absolute;
    top: 50%; /* Center vertically within the div */
    transform: translateY(-50%);
    background-color: rgba(255, 165, 0, 0.8); /* Orange with 60% opacity */
    /*background-color: rgba(0, 0, 0, 0.6); /* Optional styling */
    color: white; /* Optional styling */
    border: none; /* Optional styling */
    border-radius: 50%; /* Optional styling */
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index:10;
}


/* Previous Button Specific Styles */
.carousel-button.prev {
    left: 0; /* Position at the left edge of the div */
    margin-left: 10px; /* Add spacing from the edge */
}

/* Next Button Specific Styles */
.carousel-button.next {
    right: 0; /* Position at the right edge of the div */
    margin-right: 10px; /* Add spacing from the edge */
}