/*
Theme Name: mypetdmv
Theme URI: http://underscores.me/
Description: This theme is developed for My Petdmv
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mypetdmv
Tags:
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
mypetdmv is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/
*{
	margin:0;
	padding:0;
}
body{
	font-size:14px;
	/*font-family: 'Roboto', sans-serif;*/

}
/*@font-face {
    font-family: 'appleberryregular';
    src: url('appleberry-webfont.eot');
    src: url('appleberry-webfont.eot?#iefix') format('embedded-opentype'),
         url('appleberry-webfont.woff') format('woff'),
         url('appleberry-webfont.ttf') format('truetype'),
         url('appleberry-webfont.svg#appleberryregular') format('svg');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'appleberryregular';
	src: url('appleberry-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
  }
  */

/*
@font-face {
  font-family: 'Raleway-SemiBold';
  src: url('Raleway-SemiBold.eot');
  src: url('Raleway-SemiBold.eot?#iefix') format('embedded-opentype'),
       url('Raleway-SemiBold.woff') format('woff'),
       url('Raleway-SemiBold.ttf') format('truetype'),
       url('Raleway-SemiBold.svg#Raleway-SemiBold') format('svg');
}
@font-face {
	font-family: 'Raleway-SemiBold';
	src: url('Raleway-SemiBold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
  }


@font-face {
    font-family: 'appleberryappleberry';
    src: url('fonts/appleberry-webfont.woff2') format('woff2'),
         url('fonts/appleberry-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}
@font-face {
    font-family: 'Raleway-SemiBold';
    src: url('fonts/raleway-semibold-webfont.woff2') format('woff2'),
         url('fonts/raleway-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}
*/
.header_wrapper {
	/*background-image: url(images/header_bg_02.png);
	background-repeat: repeat-x;*/
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
	height: 78px;
	width: 100%;
	position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #fff;
}
.logo_container {	
	float: left;
	margin-top: 10px;
}
.logo_container_static {	
margin:auto;
	margin-top: 10px;
}
.nav_container{
	float:left;
	margin-top:19px;
}
.nav_container ul{
	list-style:none;
	float:left;
}
.nav_container ul li{
	float:left;	
}
.nav_container ul li a{
	float: left;
	text-decoration: none;
	color: #3d3d3d;
	/*font-family: 'Raleway', sans-serif;*/
	font-size: 16px;
	padding: 5px 11px;
	text-transform:uppercase;
	
/*font-weight: bold;*/
}
.main-navigation > div > ul > li > a {
	border-radius: 8px;
  }
  
.design_now{
	float:right;
	margin-top:0.5em;
}
.left_dog{
	float:left;
}
.idcard{
	float:right;
}
.top_heading {
	font-family: 'appleberryappleberry';
	color: #00ccff;
	float: right;
	width: 100%;
	text-align: right;
	font-size: 3em;
	margin:0;
	/*margin-bottom:0.5em;*/
	margin-top:0.5em;
}
.top_heading2 {
	font-family: 'appleberryappleberry';
	color: #3d3d3d;
	float: right;
	width: 100%;
	text-align: right;
	font-weight: normal;
	font-size: 2.7em;
	margin:0;
	/*margin-bottom:0.5em;*/
}
.top_heading3 {
	color: #00ccff;
	float: right;
	width: 100%;
	text-align: right;
	font-weight: normal;
	font-size: 14px;
	/*font-family: 'Raleway-SemiBold';*/
}
.top_heading3 a {
	color: #00ccff;
	text-decoration: none;
}
.top_heading3 a:hover{
	 color:#f9821a;
text-decoration: underline;
}
.right_card_img{
	margin-top:-84px;
}
.blue_wrapper {
	width: 100%;
	height: 33px;
	background-color: #00ccff;
	clear: both;
	margin-top: 20px;
}
.blue_pra{
	float:left;
}
.blutxt {
	float: left;
	padding-left: 23px;
	/*font-family: 'Raleway', sans-serif;*/
	font-weight: bold;
	color: #fff;
	line-height: 36px;
	font-size:14px;
}
.orangebox_container{
	float:right;
}
.orange_box {
	float: right;
	background-image: url(images/box_03.png);
	width: 260px;
	height: 103px;
	margin-right: 121px;
	margin-top: -40px;
	position: relative;
	z-index:100;
}
.orange_box h2 {
	color: #fff;
	font-size: 21px;
	/*font-family: 'Raleway-SemiBold',sans-serif;*/
	text-align: center;
	margin-top: 9px;
	margin-bottom: 2px;
}
.orange_box p {
	line-height: none!important;
	font-size: 12px;
	font-weight: normal;
	width: 100%;
	text-align: center!important;
	margin: 0!important;
	/*font-family: 'Raleway', sans-serif;*/
	color: #fff;
}
.orange_box label {
	margin-left: 28px;
	margin-top: 4px;
	float: left;
}
.orange_box select {
	width: 200px;
	margin-left: -30px;	
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #dddddd;
	background-color: #ffffff;
	padding: 6px 5px;
	margin-bottom: 12px;
	color: #999999;
	margin-left: 3px;
	font-size:14px;
}
.mid_dogs{
	background-image:url(images/mid_dogs_03.png);
	width:100%;
	margin-top: 1px;
	background-size:contain;
    background-position:center;
	height:399px;
	background-repeat:no-repeat;
}
.mid_dogs:hover{
	background-image:url(images/mid_dogs_03_hover.png);
}
.gry_border {
	background-color: #f1f1f1;
	height: 47px;
	width: 100%;
	clear: both;
}
.bottom_wrapper{
	/*margin-top: -105px;*/
	margin-top: 0px;	
	padding: 7px 0px;
	float: left;
	background-color: #fff;
}
.asseen {
	background-image: url(images/as-seen-img_03.png);
	height: 102px;
	margin: 20px auto;
	background-size:contain;
    background-position:center;
	width:100%;
	background-repeat:no-repeat;
	clear:both;
}

.asseenheader {
	background-image: url(images/as-seen-img_03.png);
	height: 102px;
	background-size:contain;
        background-position:center;
	width:100%;
	background-repeat:no-repeat;
	clear:both;
}

.utubev{
	float:left;
}
.bottom_para {
	float: right;
}
.bottom_para p {
	/*font-family: 'Raleway', sans-serif;*/
	color: #000;
	font-size: 14px;
	line-height: 20px;
}
.testimonials{
	color: #00ccff;
	text-decoration: none;
	font-size: 14px;
	float: left;
	/*font-family: 'Raleway', sans-serif*/;
}
.bottom_para a:hover {
	color: #f9821a;
	text-decoration: underline;
}
.footer_wrapper {
	background-image: url(images/footer_bg_03.png);
	height: 58px;
	background-repeat: repeat-x;
	clear: both;
	margin-bottom: 30px;
	width:100%;
}
.footer_nav {
	float: left;
	margin-top: 20px;
}
.footer_nav ul {
	list-style: none;
	float: left;
}
.footer_nav ul li {
	float: left;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #333333;
}
.footer_nav ul li a {
	color: #000000;
	text-decoration: none;
	/*font-family: 'Raleway', sans-serif;*/
	font-size: 14px;
	padding: 5px 13px;
	text-decoration: underline;
}
.footer_nav_social {
	float: right;
	margin-top: 8px;
}
.social_icon{
	padding-left:7px;
	padding-top:7px;
	float:left;
}
.ssl_icon{
	float:right;	
}
.footer_nav_dis{
	/*font-family: "Raleway",sans-serif;*/
	float: left;
	font-size: 11px;
	margin-top: 20px;
	margin-bottom: 50px;
}
.dogbox h3 {
  width: 100%;
  text-align: center;
  font-size: 16px;
  /* font-family: 'Raleway-SemiBold'; */
}
.dogbox p {
  /* font-family: 'Raleway-SemiBold'; */
  float: left;
  width: 100%;
  padding: 5px;
  font-size: 12px;
}
.bottom_content, .bottom_boxex_container{
	float:left;
}
.client_heading {
  /* font-family: 'Myriad Pro';*/
  width: 100%;
  text-align: center;
  font-weight: normal;
  font-size: 28px;
  margin: 10px 0;
}
.bottom_wrapper2 {
  /* margin-top: -105px; */
  padding: 7px 0px;
  float: left;
  background-color: #fff;
}
.full_width{
	width:100%;
}
/*For ID card generator card page*/
.redeem_id {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    display: block;
    font-size: 14px;
    height: 34px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 200px;
}
.id_heading_blue {
  /* font-family: 'appleberryappleberry'; */
  color: #00ccff;
  float: right;
  width: 100%;
  text-align: left;
  font-weight: normal;
  font-size: 22px;
}
.form_box {
  float: left;
  width: 100%;
  background-color: #f5f5f5;
  border: 1px solid #e7dee1;
  /* min-height: 300px; */
  margin-top: 24px;
}
.form_box_frn {
  float: left;
  background-color: #f5f5f5;
  border: 1px solid #e7dee1;
  /* min-height: 300px; */
  margin-top: 24px;
}
.form_box label {
 /* margin-left: 10px;
  margin-top: 3px;
  margin-bottom: 3px;*/
  /*  font-family: 'Raleway', sans-serif;*/
  font-size: 13px;
}
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Normalize
2.0 Typography
3.0 Elements
4.0 Forms
5.0 Navigation
	5.1 Links
	5.2 Menus
6.0 Accessibility
7.0 Alignments
8.0 Clearings
9.0 Widgets
10.0 Content
	10.1 Posts and pages
	10.2 Asides
	10.3 Comments
11.0 Infinite scroll
12.0 Media
	12.1 Captions
	12.2 Galleries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
1.0 Normalize
--------------------------------------------------------------*/
html {
	/*font-family: sans-serif;*/
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
}
body {
	margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}
audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}
audio:not([controls]) {
	display: none;
	height: 0;
}
[hidden],
template {
	display: none;
}
a {
	background-color: transparent;
}
a:active,
a:hover {
	outline: 0;
}
abbr[title] {
	border-bottom: 1px dotted;
}
b,
strong {
	font-weight: bold;
}
dfn {
	font-style: italic;
}
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}
mark {
	background: #ff0;
	color: #000;
}
small {
	font-size: 80%;
}
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
img {
	border: 0;
}
svg:not(:root) {
	overflow: hidden;
}
figure {
	margin: 1em 40px;
}
hr {
	box-sizing: content-box;
	height: 0;
}
pre {
	overflow: auto;
}
code,
kbd,
pre,
samp {
	/*font-family: monospace, monospace;*/
	font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}
button {
	overflow: visible;
}
button,
select {
	text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}
button[disabled],
html input[disabled] {
	cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}
input {
	line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}
input[type="search"] {
	-webkit-appearance: textfield;
	box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}
legend {
	border: 0;
	padding: 0;
}
textarea {
	overflow: auto;
}
optgroup {
	font-weight: bold;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
td,
th {
	padding: 0;
}
/*--------------------------------------------------------------
2.0 Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
	color: #404040;
	font-size: 16px;
	/*font-size: 1rem;*/
	line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}
p {
	margin-bottom: 1.5em;
}
dfn,
cite,
em,
i {
	font-style: italic;
}
blockquote {
	margin: 0 1.5em;
}
address {
	margin: 0 0 1.5em;
}
pre {
	background: #eee;
	/*font-family: "Courier 10 Pitch", Courier, monospace;*/
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}
code,
kbd,
tt,
var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
}
abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}
mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}
big {
	font-size: 125%;
}

/*--------------------------------------------------------------
3.0 Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
}
*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}
body {
	/*background: #fff;  Fallback for when there is no custom background color defined. 
	font-family:'Raleway', sans-serif;
	font-size: 1.5em;*/

	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-style: normal; 
	
}
blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}
blockquote,
q {
	quotes: "" "";
}
hr {
	/*background-color: #ccc;*/
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}
ul,
ol {
	margin: 0 0 1.5em 3em;
}
ul {
	list-style: disc;
}
ol {
	list-style: decimal;
}
li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}
dt {
	font-weight: bold;
}
dd {
	/*margin: 0 1.5em 1.5em;*/
}
img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}
table {
	margin: 0 0 1.5em;
	width: 100%;
}
.site-content a:link, .site-content a:visited {
	color: #2d6897;
	text-decoration: none;

  }
/*--------------------------------------------------------------
4.0 Forms
--------------------------------------------------------------*/
/*button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05);
	color: rgba(0, 0, 0, .8);
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1;
	padding: .6em 1em .4em;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02);
}*/
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	border-color: #aaa #bbb #bbb;
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
	color: #111;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"] {
	padding: 3px;
}
textarea {
	padding-left: 3px;
	width: 100%;
}
/*--------------------------------------------------------------
5.0 Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
5.1 Links
--------------------------------------------------------------*/
a {
	color: royalblue;
}
a:visited {
	color: purple;
}
a:hover,
a:focus,
a:active {
	color: midnightblue;
}
a:focus {
	outline: thin dotted;
}
a:hover,
a:active {
	outline: 0;
}
/*--------------------------------------------------------------
5.2 Menus
--------------------------------------------------------------*/
.main-navigation {
	clear: both;
	display: block;
	float: left;
	width: 100%;
}
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}
.main-navigation li {
	float: left;
	position: relative;
	
}
.main-navigation > div > ul > li {
	margin-left: 20px;
  }
  
.main-navigation a {
	display: block;
	text-decoration: none;
}
.main-navigation a:hover {
	display: block;
	text-decoration: none;
	color:#fff;
	background-color:#00ccff;
}
.main-navigation ul ul a{
	padding:8px;
	margin:0;
	text-transform:none;
}
.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 2.1em;
	left: -999em;
	z-index: 99999;
	background-color:#C8C8C8;
}
.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}
.main-navigation ul ul a {
	width: 200px;
}
.main-navigation ul ul li {
}
.main-navigation li:hover > a {
}
.main-navigation ul ul :hover > a {
}
.main-navigation ul ul a:hover {
}
.main-navigation ul li:hover > ul {
	left: auto;
}
.main-navigation ul ul li:hover > ul {
	left: 100%;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
}
/* Small menu. */
.menu-toggle {
	display: none;
}
@media screen and (max-width: 600px) {
	.menu-toggle,
	.main-navigation.toggled .nav-menu {
		display: block;
	}
	.main-navigation ul {
		display: none;
	}
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}
/*--------------------------------------------------------------
6.0 Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}
/*--------------------------------------------------------------
7.0 Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
/*--------------------------------------------------------------
8.0 Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
}
.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}
/*--------------------------------------------------------------
9.0 Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 1.5em;
}
/* Make sure select elements fit in widgets. */
.widget select {
	max-width: 100%;
}
/* Search widget. */
.widget_search .search-submit {
	display: none;
}
/*--------------------------------------------------------------
10.0 Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
10.1 Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}
.hentry {
	margin: 0 0 1.5em;
}
.byline,
.updated:not(.published) {
	display: none;
}
.single .byline,
.group-blog .byline {
	display: inline;
}
.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}
.page-links {
	clear: both;
	margin: 0 0 1.5em;
}
/*--------------------------------------------------------------
10.2 Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}
/*--------------------------------------------------------------
10.3 Comments
--------------------------------------------------------------*/
.comment-content a {
	word-wrap: break-word;
}
.bypostauthor {
	display: block;
}
/*--------------------------------------------------------------
11.0 Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
	display: none;
}
/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
	display: block;
}
/*--------------------------------------------------------------
12.0 Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}
/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}
/*--------------------------------------------------------------
12.1 Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 0 auto;
}
.wp-caption-text {
	text-align: center;
}
.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}
/*--------------------------------------------------------------
12.2 Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}
.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}
.gallery-columns-2 .gallery-item {
	max-width: 50%;
}
.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
	max-width: 25%;
}
.gallery-columns-5 .gallery-item {
	max-width: 20%;
}
.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}
.gallery-caption {
	display: block;
}
.left_sidebar, .right_content_part{
	float:left;
	margin-top: 15px;
}
@media(max-width:800px){
#click-menu {
  right: 82%!important;
  top: 10px!important;
}
}
@media(max-width:990px){
	.top_heading, .top_heading2{
	font-size:2.3em;
}
}
@media(max-width:990px) and (min-width:560px) {
.top_heading3{
	  margin-bottom: 33px;
}
}
@media(max-width:767px){
.blutxt{
	padding-left: 0px;
	font-size:12px;
}
.blue_pra {
  height: 33px;
}
/**/
.orangebox_container {
  float: left!important;
  margin-top: 5px;
  margin-bottom: 5px;
}
.orange_box_small {
	float: right;
	/*background-image: url(images/box_03.png);*/
	background-color:#f9821a;
}
.orange_box_small h2 {
	color: #fff;
	font-size: 24px;
	font-family: 'Raleway-SemiBold',sans-serif;
	text-align: center;
	margin-top: 9px;
	margin-bottom: 2px;
}
.orange_box_small p {
	line-height: none!important;
	font-size: 12px;
	font-weight: normal;
	width: 100%;
	text-align: center!important;
	margin: 0!important;
	font-family: 'Raleway', sans-serif;
	color: #fff;
}
.orange_box_small label {
	margin-top: 4px;
	float: left;
	width:100%;
}
.orange_box_small select {
/*	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #dddddd;
	background-color: #ffffff;
	padding: 6px 5px;
	margin-bottom: 12px;
	color: #999999;
	font-size:14px;
	width:100%!important;
	float:left;*/
	width: 100%;
  border: 0;
  line-height: 1.5;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  appearance: none;
  color:#000;
  background: #fff url("images/BipJkdI.png") no-repeat scroll 97% 8px;
  margin-bottom: 12px;
}
.orange_box_small {
  float: left!important;
  margin-right:0!important;
  margin-top: 5px!important;
}
.bottom_wrapper {
  margin-top:0!important;
}
.asseen {
  margin: 5px auto!important;
}
.design_now_mobile{
	float:right;
}
.dsg_now_btn{
	background-color:#00ccff;
	color:#fff!important;
	font-size:16px;
	font-family: 'Raleway', sans-serif;
	text-decoration:none;
	font-weight:bold;
	float: right;
  margin-right: -15px;
  margin-top: 11px;
}
.dsg_now_btn:hover{
	background-color:#f9821a;
}
.footer_nav ul li a{
	  font-size: 11px!important;
	  padding: 5px 2px!important;
}
.footer_nav ul li:last-child{
	border:none;
}
.footer_nav ul{
	margin-left:0!important;
}
}
@media(max-width:380px){
.asseen {
  height: 62px!important;
  margin: 5px auto!important;
}
.footer_nav ul li a {
  font-size: 13px;
  padding: 5px 6px;
  float: left;
  line-height: 7px;
}
.blutxt{
	padding-left: 0px;
	font-size:11px;
}
/**/
/*.orange_box_small select {
    background: -webkit-linear-gradient(white, #666);
    border: 1px solid #ccc;
    border-radius: 5px;
    color: white;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    -webkit-appearance: none;
}*/
.orange_box_small select {
 width: 100%;
  border: 0;
  line-height: 1.5;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  appearance: none;
  color:#000;
  background: #fff url("images/BipJkdI.png") no-repeat scroll 97% 8px;
}
/**/
}
@media only screen and (max-width:768px){
.mobile_bottom_space{
	margin-bottom:15px;
}
}
.entry-title{
	/* font-family:'appleberryappleberry'; */
}
.approve{
	border-radius: 21px;
    background-color: #f9821a;
    color: #fff;
    font-family: "Raleway",sans-serif;
    font-weight: bold;
    margin-top: 5px;
}
@media only screen and (max-width:988px){
	.top_heading2{
		font-size: 2.0em;
	}
}
/*For gallery */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2)
{
	.ngg-gallery-thumbnail-box{
		    padding-left: 26px!important;
	}
}
@media(max-width:480px){
	.logo_container {
		margin-left:50px;
	}
	.design_now_mobile{
		margin-left:-28px;
	}
.footer_wrapper{
	 background-repeat:no-repeat;
	 background-color:#e8e8e8;
	 height:123px;
}
}
@media(min-width:500px) and (max-width:667px) {
		.logo_container {
		margin-left: 199px;
    width: 252px;
	}
		.design_now_mobile{
		margin-left:-100px;
	}
}
.footer_nav a{
	padding:7px;
	float:left;
}
.btn_cls{
	background-color: #f9821a;
    color: #fff;
}
.btn_cls:hover{
	background-color: #00ccff;
    color: #fff;
}
.pic_container {
	margin-left: auto;
   /* width: 68%; */
    text-align: center;
    margin-right: auto;
}
.famer {
    background-color: #FFFFFF;
    /*box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);*/
    font-size: 14px;
    line-height: 19px;
    margin: 15px 0 15px 14px;
    overflow: hidden;
    display: inline-block;
    width: 312px;
height:400px;
}
.famer p{
	text-align:center;
	width:100%;
}
.famer img {
    border: 3px solid #fff;
}
.famer img:hover {
    border: 3px solid #fc9a24;
}
.woocommerce table.cart img, .woocommerce #content table.cart img, .woocommerce-page table.cart img, .woocommerce-page #content table.cart img {
    width: 175px !important;
    border: 1px solid #cfcfcf;
    border-radius: 10px !important;
    margin-bottom: 25px !important;
}
/*REMOVE THE QTY FROM TABLE */
.woocommerce table.cart td:nth-of-type(5), .woocommerce table.cart th:nth-of-type(5) {
display: none;
}
.product-quantity{
display:none;
}
.woocommerce div.product p.price, .woocommerce div.product span.price {   
    font-size: 28px;
}
.price{
margin-bottom: 10px;
}
.woocommerce-checkout .woocommerce form .form-row-first, .woocommerce-checkout .woocommerce form .form-row-last, .woocommerce-checkout .woocommerce-page form .form-row-first, .woocommerce-checkout .woocommerce-page form .form-row-last{
	width:100%!important;
}
.woocommerce div.product div.images img {
    display: none;
}
.petid petid_space_bottom hidden-sm hidden-md hidden-lg{
    display: none;
}
.woocommerce-breadcrumb {
    display: none;
}
.onsale {
    display: none;
}

.socialicons ul {
/*    width: 210px;
    position: absolute;
    left: 38%;
    margin-top: -40px;
    padding: 0;
    list-style: none;*/
	width: 210px;
    /* position: absolute; */
    /* left: 38%; */
    margin-top: -40px;
    padding: 0;
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.empty_spance {
    float: left;
    width: 100%;
    height: 25px;
}
.shoping_button_mid {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #20bef8;
    padding: 8px 17px;
    text-align: center;
    margin-top: 4px;
}
@media screen and (max-width: 768px){
.woocommerce #content table.cart .product-thumbnail,
.woocommerce table.cart .product-thumbnail,
.woocommerce-page #content table.cart .product-thumbnail,
.woocommerce-page table.cart .product-thumbnail {
    display: block !important;
}
.woocommerce #content table.cart .product-thumbnail img,
.woocommerce table.cart .product-thumbnail img,
.woocommerce-page #content table.cart .product-thumbnail img,
.woocommerce-page table.cart .product-thumbnail img {
    max-width: 100% !important;
    float: none;
    display: table;
    margin: 0 auto;
}
.woocommerce #content table.cart .product-thumbnail::before,
.woocommerce table.cart .product-thumbnail::before,
.woocommerce-page #content table.cart .product-thumbnail::before,
.woocommerce-page table.cart .product-thumbnail::before {
    display: none !important;
}
}
.first_continue {
	text-align:right;
	margin-right:3%;
	margin-bottom:4%;
}
.second_continue {
	text-align:right;
	margin-right:3%;
	margin-bottom:4%;
}
.first_continue input[type="button"] {
	background-color:#00ccff;
	color:#fff;
	width:100%;
	border-radius: 4px;
        border-color: #00ccff;
        padding: 5px;
}
.second_continue input[type="button"] {
	background-color:#00ccff;
	color:#fff;
	width:100%;
	border-radius: 4px;
        border-color: #00ccff;
        padding: 5px;
}
@media screen and (max-width: 990px) {
	.first_continue input[type="button"] {
		width:100%
		padding: 5px;
	}
	.second_continue input[type="button"] {
		width:100%
		padding: 5px;
	}
}

@media screen and (min-width: 991px) {
	.first_continue input[type="button"] {
		width:100%
		padding: 5px;
	}
	.second_continue input[type="button"] {
		width:100%
		padding: 5px;
	}
}

.sku_wrapper{
  display: none;
}  


@media screen and (max-width: 700px) {
	.toptext {
  font-size: 20px;
}


}


.fab.fa-facebook-square,
.fab.fa-instagram,
.fab.fa-twitter-square,
.fab.fa-youtube-square {
    color: #00ccff;
    font-size: 40px;
}

.fab.fa-facebook-square:hover,
.fab.fa-instagram:hover,
.fab.fa-twitter-square:hover,
.fab.fa-youtube-square:hover {
    color: #f9821a;
}




/*.fa.fa-instagram, .fa.fa-twitter-square{
	margin-left: 10px;
}*/
.design-btn, .btn_paw, body.woocommerce button.single_add_to_cart_button, .checkout-button {
   background-color: #00ccff;  /* blue */
	/*background-color: #008bdc;*/
   color: #fff!important;
    padding: 12px 20px;         /* vertical and horizontal padding */
    border: none;               /* no border */
    /*border-radius: 5px;          rounded corners */
    font-size: 17px;            /* adjust as needed */
    cursor: pointer;            /* hand cursor on hover */
    display: inline-flex;       /* use flex to align items in the button */
    align-items: center;        /* vertically align the icon and text */
    justify-content: center;    /* horizontally center the content */
    transition: background 0.3s ease; /* smooth background transition for hover effect */
	font-weight: 600;

    /*background: linear-gradient(90deg, #42a5f5, #1976d2);*/
    color: #ffffff;
    
   
    border: none;
    border-radius: 5px;
  
    transition: background 0.3s ease, transform 0.3s ease;

}

.design-btn i, .design-btn_orange_view_page i {
    margin-right: 8px;         /* space between the icon and the text */
	font-size: 26px;
	transform: rotate(328deg);
}

.design-btn:hover {
    /*background-color: #f9821a;   a darker blue on hover */
    /*background: linear-gradient(90deg, #64b5f6, #2196f3);*/
	/*background-color: #f9821a;*/
	background-color: #006bc2;
    transform: translateY(-2px);
	color: #fff;
}

.design-btn_orange_view_page {
    
	background-color: #f9821a;  
    color: white;             /* white text */
    padding: 12px 20px;         /* vertical and horizontal padding */
    border: none;               /* no border */
    border-radius: 5px;         /* rounded corners */
    font-size: 17px;            /* adjust as needed */
    cursor: pointer;            /* hand cursor on hover */
    display: inline-flex;       /* use flex to align items in the button */
    align-items: center;        /* vertically align the icon and text */
    justify-content: center;    /* horizontally center the content */
    transition: background 0.3s ease; /* smooth background transition for hover effect */
	font-weight: bold;
}

.design-btn_orange_view_page:hover {
    background-color: #00ccff;  /* blue */
	color: #fff;
}
.design-btn_orange_view_page:visited {
    color: white!important;
}
.notification-bar {
	background-color: #E1F3D9; /* Lighter green background */
	/*border: 1px solid #158550;  Darker green border */
	color: #00703C; /* Darker green text color */
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
	margin-bottom: 10px;
}
.notification-bar span, .notification-bar_err span{
	font-size: 15px;
}
.notification-bar .fa, .notification-bar_err .fa {
	font-size: 24px;
}

.notification-bar_err {
	background-color: #ece1c1; /* Lighter green background */
	/*border: 1px solid #158550;  Darker green border */
	color: #995a08; /* Darker green text color */
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
	margin-bottom: 10px;
}
#petid{



	margin: 0; 
    display: flex;
    flex-direction: column;  /* Stack items vertically */
    justify-content: center;
    align-items: center;
     /*gap: 10px;  Adds space between the buttons */
}
#petid .design-btn_orange_view_page, #petid .design-btn, .btn_paw {
	width: 220px;    
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 20px;
}
/*Media Query which will work on mobile devices for cropping image*/

@media screen and (max-width: 400px) {
    /* Your styles for mobile devices go here */
	.upload_demo{
		/*position: relative!important; */
		float: left;
		top: -280px!important;


	border: 3px dotted rgb(236, 143, 143);    /* This adds a gray border around your image */
    display: block;            /* To allow margin to work properly */
    margin: 10px 0;            /* Optional: This adds some space around your image */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* Optional: Adds a subtle shadow for more emphasis */
	width: 180px;
	
	}
	.output_demo{
		position: absolute;
		top: 560px;
		/* overflow: hidden; */
		z-index: 1;
		left: 50px;
		width: 95px;
	
	
	}
	.card_container{
		margin-top: 280px;
	}

	/*Rounded Arrow*/
	

}

/* Arrow */
.r_arrow {
	content: "\21B7";
    font-size: 102px;
    color: red;
	transform: rotate(30deg);
	display: inline-block;
	float: right;
	margin-top: -110px;
	margin-left: -20px;
	animation: flash 2s infinite;
  }

  @keyframes flash {
    0%, 50% {
        opacity: 1;
    }
    50.01%, 100% {
        opacity: 0;
    }
}
/*Woocommerce custom CSS*/
.woocommerce div.product p.price, .woocommerce div.product span.price{
	/*color: #00ccff!important;*/
	/*color: #c96610!important;*/
	color: #8BC34A !important

}
/*Flex box CSS for 50 State Page*/
.grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
  }
  .grid-item {
    flex: 1 1 calc(33.333% - 20px);
    box-shadow: 0px 0px 4px 1px lightgray;
    border: 1px solid lightgray;
    margin-bottom: 10px;
	border-radius: 10px; 
  }
.grid-item:hover{
	/*box-shadow: 0px 0px 4px 1px #00ccff;*/
}
  .grid-item img {
    width: 100%;
    display: block;
  }
  .grid-item h2 {
    font-size: 1.5em;
    margin: 0.5em;
	
  }
.grid-item h2 a{
	color:#c8740c;
	font-size: 0.9em;
    font-weight: 600;
}
  .grid-item p {
    margin: 0.5em;
  }
.btn-container {
  display: flex;
  justify-content: center;
  margin: 1em;
}

.design-btn_state {
  padding: 10px 20px; /* Adjust padding to your liking */
  font-size: 1em; /* Adjust font size to your liking */
  text-align: center;
  border: none;
  color: #FFFFFF; /* This is the text color */
	/*background-color: #c8740c;  This is the background color */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; /* To align the icon and text */
  align-items: center; /* To align the icon and text */
  background-color: #00ccff;
  font-weight: 600;
}

.design-btn_state i {
  margin-right: 5px; /* Space between icon and text */
}

.design-btn_state:hover {
   /* Hover background color */
 text-decoration:none;
	color:#fff;
	background-color: #c8740c;
}

a.btn-container {
  text-decoration: none; /* This removes the underline from the link */
}

  @media (max-width: 768px) {
    .grid-item {
      flex-basis: calc(50% - 20px);
    }
  }
  @media (max-width: 480px) {
    .grid-item {
      flex-basis: 100%;
    }
  }


.page-id-129302 .page-id-129535 * {
    font-family: Arial, sans-serif!important;
    color: #333;
}
#video img{
	width: 100%;
}

.state_conent_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;

}

.state_text-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.state_text-content  h2{
	color: #c96610;
    font-size: 1.6em;
    line-height: 1.5em;
    font-weight: 800;
}
.image-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-content img {
    max-width: 100%;
    height: auto;
    /*border-radius: 8px;*/    
    border: 1px solid #dddddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

}
.image-content img:hover{
transform:scale(1.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0, 0.2);
}
.state_conent_container a{
	/*color: #2995b0 !important;*/
	color:#1a77d3 !important;
}
@media(max-width:768px){

	.state_conent_container{
		grid-template-columns: 1fr;
	}
}
@media (min-width: 768px) {
body.parent-pageid-129302 .entry-title {
   
   /*ackground:linear-gradient(45deg, #ff9800, #ff5722);*/
    text-align: center !important;
    color: #fff !important;
    
    
    border-radius:5px;
	
   

        font-size: 40px;
    font-weight: 700;    
    margin: 60px auto 40px;
    padding: 36px 24px;
    max-width: 900px;    
    background: linear-gradient(135deg, #ff8a00, #ff4d00);   

    letter-spacing: -0.5px;
    line-height: 1.2;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

}
@media (max-width: 768px) {
	body.parent-pageid-129302 .entry-title {
		font-size: 1.4em;
		font-weight: bold;

		
		text-align: center !important;
		color: #00ccff !important;
		padding-top: 5px !important;
		padding-bottom: 5px !important;
		 width: 100%!important;
		 margin-bottom: 0!important;
	}
	.state_text-content h2{
		font-size: 1.1em!important;

	}
	.entry-content{
		margin-top: 0!important;
	}
}

.footer_black {
	background-color: #222;
	color: #aaa;
	padding: 30px 0;
	font-size: 14px;
	width: 98%; /* Fixed width less than 100% */
	/*max-width: 1200px;  Max width to limit the footer width */
	margin: 20px auto; /* Center align the footer with spacing */
	border-radius: 15px; /* Rounded corners */
  }
  
  .footer-container {
	display: flex;
	flex-direction: column;
	align-items: center;
  }
  
  .footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 20px;
  }
  
  .footer-column {
	flex: 1;
	min-width: 150px;
	padding: 10px;
	text-align: left;
  }
  .footer-column-two{
	flex: 1;
	min-width: 100px;
	padding: 10px;
	text-align: left;
  }
  .footer-column a {
	color: #aaa;
	text-decoration: none;
	display: block;
	margin: 10px 0;
	transition: color 0.3s;
  }
  
  .footer-column a:hover {
	color: #fff;
  }
  
  .footer-social {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-bottom: 20px;
  }
  
  .footer-social .social-icons,
  .footer-social .app-icons {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
  }
  
  .footer-social span {
	color: #aaa;
	margin-bottom: 5px;
  }
  
  .footer-social a {
	color: #aaa;
	font-size: 20px;
	transition: color 0.3s;
  }
  
  .footer-social a:hover {
	color: #fff;
  }
  .footer-disclaimer {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-bottom: 20px;
  }
  .disclaimer_text{
	  flex: 1;
	  min-width: 96%;
	  padding: 0 20px;
	  text-align: left;
  }
  .footer-bottom {
	text-align: center;
	color: #777;
	/*margin-top: 20px;*/
	width: 100%;
  }
  
  .footer-bottom hr {
	border: none;
	border-top: 1px solid #555;
	margin: 5px 0;
  }
  .footer-bottom p{
	margin-bottom: 0;
	margin-top: 10px;
  }
  /* Responsive Design */
  @media (max-width: 768px) {
	.footer-links {
	  flex-direction: column;
	  align-items: center;
	}
  
	.footer-column {
	  text-align: center;
	  padding: 10px 0;
	}
}
/*
.product_img_container{
	float: left;
    background-image: url(https://www.mypetdmv.com/card_maker/images/background_template.png);
    width: 437px;
    background-repeat: no-repeat;
    background-size: cover;
    height: 336px;
    padding-left: 17px;
    padding-top: 40px;
}
*/

.state_conent_container, .entry-title, .design-btn, .offer_container {
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.hex_breadcrumb {
    font-size: 14px;
    margin: 10px 0;
}
.hex_breadcrumb a {
    text-decoration: none;
    color: #1a77d3;
}
.hex_breadcrumb a:hover {
    text-decoration: underline;
}
.hex_breadcrumb  {
    margin: 10px 0px;
}
/* HTML Sitemap Page CSS */
.html_sitemap {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 20px 0;
}
.html_sitemap h2 {
    font-size: 20px;
    margin-bottom: 10px;
}
.html_sitemap ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 20px;
}
.html_sitemap ul li {
    margin-bottom: 5px;
}
.html_sitemap ul li a {
    text-decoration: none;
    color: #0073aa;
}
.html_sitemap ul li a:hover {
    text-decoration: underline;
}
 .wc-pao-addon{
	background-color:#fbe9d0!important;
	padding: 12px;
	border: 1px solid #ea931a;
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor*)) .woocommerce #respond input#submit.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor*)) .woocommerce a.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor*)) .woocommerce button.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor*)) .woocommerce input.button.alt:hover {
    /*background-color: #7249a4;
    color: #fff;*/

	background: linear-gradient(90deg, #64b5f6, #2196f3);
    transform: translateY(-2px);
    color: #fff;
}
.checkout-button, .button{
	padding: 12px 20px;
    border: none;
    font-size: 17px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    font-weight: 600;
    background: linear-gradient(90deg, #42a5f5, #1976d2);
    color: #ffffff;
    border: none;
    border-radius: 5px;
    transition: background 0.3s ease, transform 0.3s ease;
	text-transform: uppercase;
	
}
.checkout-button:hover{
	background: linear-gradient(90deg, #64b5f6, #2196f3);
    transform: translateY(-2px);
    color: #fff;
	text-decoration: none;
}
.actions .input-text{
	font-size: 17px;
	padding: 12px 20px!important;
}
/*Blog home.php Page CSS code starts from here*/
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.post-item {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 5px;
    background: #fff;
    text-align: left;
}

.post-thumbnail img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.post-content h2 {
    font-size: 20px;
    margin: 15px 0;
}

.post-content p {
    font-size: 14px;
    color: #555;
}

.read-more {
    display: inline-block;
    margin-top: 10px;
    color: #0073aa;
    text-decoration: none;
}

.read-more:hover {
    text-decoration: underline;
}

.pagination {
    text-align: center;
    margin-top: 20px;
}

.pagination a {
    margin: 0 5px;
    padding: 8px 12px;
    background: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
}

.pagination a:hover {
    background: #005177;
}

/*Blog Page CSS ends here*/
.sales_section{
	/*border-radius: 20px;
	background-color: #f9f9f9;
	padding: 20px;*/
	/*border: 1px solid #e0e0e0;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0, 0.1);*/
	color: #333333;
	font-style: 1rem;
	line-height: 1.6;

}
.wp-custom-banner-title{
	text-transform: capitalize;
}
.nav-previous a, .nav-next a{
	font-size: 1.1em;
    font-weight: 600;
}
.nav-previous a::before {
	content: "<< ";
	font-size: 1em;
	margin-right: 5px;
  }
  
  /* Style for Next link using >> on the right */
  .nav-next a::after {
	content: " >>";
	font-size: 1em;
	margin-left: 5px;
  }
.sales_section h2{
	color: #003865;
    font-size: 2.8rem;
    font-weight: 600;
    text-align: center;
	margin-top: 0;
	letter-spacing: 0.1rem;

}
.key-feature-list{
	color: #1565c0;
}
.ul-key-feature-list{
	margin: 0;
}
.ul-key-feature-list li{
	list-style: none;
	margin: 5px 0;
}
.ul-key-feature-list li::before{
	content: '✔'; /* Replace with icon */
	/*content: "\f1b0";*/
	color: #1565C0;
	margin-right: 10px;
}
.cta_button_container{
	width: 100%;
    text-align: center;
	margin-bottom: 10px;
}
.cta-button {
	background-color: #00ccff;
	transition: background 0.3s ease, transform 0.3s ease;
    color: #FFFFFF;
    font-size: 1.9rem;
    font-weight: 600;
    padding: 10px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    margin-top: 20px;
  }
  .cta-button:hover {
	background-color: #f9821a;
  }
  .cta-button i{
  margin-right: 8px;
  font-size: 2.4rem;
  transform: rotate(328deg);
  }
  /*As seen section css code starts*/
  .as-seen-on-section {
	text-align: center;
	padding: 10px 20px;
	/*background-color: #f9f9f9;*/
  }

  .as-seen-on-section h2 {
	font-size: 2.8rem;
	margin-bottom: 10px;
	margin-top: 0;
	color: #333;
	letter-spacing: 0.1rem;

  }

  /* Slider Wrapper */
  .slider {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
  }

  .slider-track {
	display: flex;
	gap: 20px;
	animation: slide 12s linear infinite;
  }

  .slider-track img {
	width: 120px;
	height: auto;
	object-fit: contain;
	filter: grayscale(100%);
	transition: transform 0.3s, filter 0.3s;
  }

  .slider-track img:hover {
	filter: grayscale(0%);
	transform: scale(1.1);
  }

  @keyframes slide {
	0% {
	  transform: translateX(0);
	}
	100% {
	  transform: translateX(-100%);
	}
  }

  /* Responsive Styles */
  @media (max-width: 768px) {
	.slider-track img {
	  width: 90px;
	}
  }

  @media (max-width: 480px) {
	.sales_section{
		padding-top: 20px;
	}
	.slider-track img {
	  width: 70px;
	}
  }
  /*As seen section css code ends*/
  /*Line breaker css code starts*/
  .line-breaker {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
    margin: 20px auto;
}
  /*Line breaker css code ends*/

  
/* Top new Header CSS code date 25-01-2025*/
.site-header_mobile {
    background-color: #fff;
    padding: 1rem;
    position: relative;
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo Section */
.logo-container_mobile {
    flex: 1;
    text-align: center;
}

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

/* Call-to-Action Button */
.cta-button_mobilenew {
    flex: 1;
    text-align: right;
}

.cta-btn {
    padding: 1rem 1rem;
    font-size: 14px;
    background-color: #00ccff ;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
	font-weight: 600;
}

.cta-btn:hover {
    background-color: #d97706;
}

/* Menu Toggle */
.menu-toggle_mobile {
    background: none;
    border: none;
    font-size: 2.5rem;
    cursor: pointer;
    flex: 1;
    text-align: left;
	color: #d97706;
	font-weight: bold;
}

/* Mobile Navigation Menu */
.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 75%; /* Adjust width */
    background-color: #f9f9f9;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 999;
    padding: 1.5rem 1.0rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav li {
    position: relative;
    margin: 0;
}

.mobile-nav a {
	text-decoration: none;
    font-size: 1.5rem;
    color: #333;
    display: block;
    padding: 0.88rem 0;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #e0e0e0;
	padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.mobile-nav a:hover {
    background-color: #00ccff;
	color: #fff;

}

/* Submenu Styles */
.mobile-nav .sub-menu {
    display: none; /* Hidden by default */
    padding-left: 1rem;
}
.mobile-nav .dropdown-menu{
	min-width: 254px!important;
}

.mobile-nav li.active > .sub-menu {
    display: block; /* Show when active */
}

.mobile-nav .menu-item-has-children > a::after {
    /*content: "▼";*/
	content:"︾";
    float: right;
    font-size: 1.3rem;
    font-weight: bold;
}

.mobile-nav .menu-item-has-children.active > a::after {
   /* content: "▲"; */
   content: "︽";
}
.mobile-nav  .dropdown-menu .dropdown-item{
	padding-top: 0.8rem!important;
	padding-bottom: 0.8rem!important;
}
/* Close Button */
.close-btn {
    background: none;
    border: none;
    font-size: 2.5rem;
    color: #333;
    align-self: flex-end;
    cursor: pointer;
}

/* Show Mobile Navigation */
.mobile-nav.active {
    transform: translateX(0);
}

/* Responsive Styling */
@media (max-width: 768px) {
    .menu-toggle_mobile {
        display: block;
    }

    .header-container {
        flex-direction: row;
    }

    .logo-container_mobile {
        order: 2;
		flex-basis: 45%;
    }

    .menu-toggle_mobile {
        order: 1;
		flex-basis: 12%;
    }

    .cta-button_mobilenew {
        order: 3;
		flex-basis: 30%;
    }
}


/*Top nw Header CSS code End*/

/** Page Bottom Section Start **/
.age_bottom_section{
	background-color: #eaf6ff;
	width:100%;
	display: flex;
}
 /***Start CSS code for pet ID card process diagram***/
 .full_grid_container{
	display: flex;
	flex-wrap: wrap;
	/*width: 100vw;
	height: 50vh;*/
	width: 100%;
	min-height: 230px;
	padding: 10px;
	gap: 10px;
	justify-content: center;
	align-items: center;
	/*background-color: #1565C0;
	background: linear-gradient(90deg, #1565C0, #1976d2);*/
	background: #e2ecfc;
	margin-top: 10px;
    margin-bottom: 10px;
 }

 .full_grid_container h2{
	text-align: center;
	width: 100vw;
	color: #003865;
	margin-top: 5px;
	font-weight: 800;
 }
 .petstate_timeline-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90%;
	max-width: 1200px;
	/*padding: 20px;*/
	height: auto;
	flex-direction: column;
}

.petstate_timeline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-height: 500px;
	position: relative;
	flex-wrap: wrap;
}

.petstate_timeline-step {
	text-align: center;
	width: 150px;
	position: relative;
	margin-bottom: 20px;
}

.petstate_timeline-icon {
	width: 70px;
	height: 70px;
	background-color: #fff;
	border: 2px solid #003865;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	transition: transform 0.3s ease;
}

.petstate_timeline-icon img {
	width: 40px;
	height: 40px;
}

.petstate_timeline-step h3 {
	font-size: 16px;
	margin: 10px 0 5px;
	color: #003865;
	font-weight: 600;
}

.petstate_timeline-step p {
	font-size: 14px;
	color: #003865;
	margin: 0;
}

/*.petstate_timeline-line {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #ddd;
	z-index: -1;
}
*/
.petstate_timeline-step:hover .petstate_timeline-icon {
	transform: scale(1.1);
}

/* Responsive */
@media (max-width: 768px) {
	.petstate_timeline {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.petstate_timeline-step {
		/*width: auto;*/
		width: 50%;
	}
	.petstate_timeline-line {
		width: 3px;
		height: 100%;
		left: 50%;
		top: 0;
		background-color: #ddd;
	}
	.petstate_timeline{
		max-height: 300px;
	}
}
@media (max-width: 480px) {

	.petstate_timeline {
        /*flex-direction: row;*/
	}

}

 /***End CSS code for pet ID card process diagram***/
 /**** FAQ CSS Code Start  ****************/
 /**** FAQ CSS Code Ends  *******************/

 /********** State Slider CSS Code Start **********/
 .state_slider{
	background-color: #e2ecfc;
	width: 100%;
	padding: 20px;
	border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
	position: relative;
	clear: both;
    
 }
 .state_slider h2{
	text-align: center;
    font-size: 1.8em;
    font-weight: 700;
    color: #003865;
 }
 .state_slider h2 a{
	color: #E65100;
	font-weight: 500;
 }
  /* Prevent horizontal scrollbar */
  html, body {
	overflow-x: hidden;
}

/* Full-Width Slider */
.swiper-container {
	max-width: 100%;
	overflow: hidden;
	padding: 20px 0;
	position: relative;
}

/* Swiper Wrapper */
.swiper-wrapper {
	align-items: center; /* Align slides vertically */
}

/* Swiper Slide */
.swiper-slide {
	position: relative;
	text-align: center;
	overflow: hidden;
}

/* Slide Images */
.swiper-slide a {
	display: block;
	width: 100%;
	height: 100%;
}

.swiper-slide img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	border-radius: 8px;
	transition: transform 0.3s ease;
}

/* Caption (Hidden Initially) */
.caption {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 10px;
	text-align: center;
	font-size: 14px;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Show Caption on Hover */
.swiper-slide:hover .caption {
	opacity: 1;
	transform: translateY(0);
}

/* Navigation Buttons - Fixed Alignment */
.swiper-button-next,
.swiper-button-prev {
	color: white;
	background: rgba(0, 0, 0, 0.7);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.3s;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

/* Button Hover Effect */
.swiper-button-next:hover,
.swiper-button-prev:hover {
	background: rgba(0, 0, 0, 0.9);
}

/* Move Buttons Closer */
.swiper-button-prev {
	left: 10px;
}
.swiper-button-next {
	right: 10px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	.swiper-button-next,
	.swiper-button-prev {
		width: 40px;
		height: 40px;
		font-size: 14px;
	}
}
 /********** State Slider CSS Code End **********/

 /** CSS over ride on bootstrap main container max width **/
 @media (min-width: 1200px) {
    .container {
        width: 1400px;
    }
}
/**============================================== **/
/** Slider navigation button custom code **/
/**============================================== **/
/* Ensure Navigation Buttons Are Circular */
.swiper-button-next,
.swiper-button-prev {
    width: 40px !important;  /* Set a fixed width */
    height: 40px !important; /* Ensure it remains circular */
    border-radius: 50% !important; /* Make it round */
    background: rgba(0, 0, 0, 0.5) !important; /* Semi-transparent background */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.3s ease-in-out !important;
}

/* Ensure the arrow icon is visible */
.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 16px !important; /* Adjust arrow size */
    color: white !important; /* Arrow color */
}

/* Hover Effect */
.swiper-button-prev:hover,
.swiper-button-next:hover {
    background: rgba(0, 0, 0, 0.8) !important; /* Darker background on hover */
}


/*============================================================================*/
/*     Tick icon in content         */
/*===========================================================================*/
.tick-list {
	list-style: none;
    padding-left: 0;
    margin: 5px 0 15px 0;
}
.tick-list li{
	line-height: 32px;
}
.tick-list li::before {
    content: "✔";
    color: green; /* Adjust color if needed */
    font-size: 16px; /* Adjust size if needed */
    font-weight: bold;
    margin-right: 8px;
}
.elementor-button-icon{
	transform: rotate(328deg);
}
/*Hero banner content  starts*/


.hero-content {
    max-width: 1000px;
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius: 10px;
	color: #fff;
}
.header_fullwidth_img h1 {
    font-size: 42px;
    font-weight: bold;
}
.header_fullwidth_img .hero-cta {
    /*background: #00bfff;*/
	background: #00ccff;
	transition: background 0.3s ease, transform 0.3s ease;
    padding: 14px 28px;
    color: white;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
	font-weight: 600;
    text-decoration: none;
}
.header_fullwidth_img .hero-cta:hover {
	background-color: #f9821a;
}
/***New Code***/
.mypetdmv-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 1300px;
	margin: auto;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 12px;
	padding: 40px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.05);
	min-height: 370px;
  }

  .mypetdmv-column {
	flex: 1;
	min-width: 300px;
	margin: 10px;
  }

  .mypetdmv-column h1 {
	font-size: 35px;
	color: #fff;
	margin-bottom: 10px;
	margin-top: 0;
  }

  .mypetdmv-column p {
	font-size: 18px;
	color: #fff;
	margin-bottom: 35px;
  }

  .mypetdmv-button {
	display: inline-block;
	padding: 10px 20px;
	font-size: 16px;
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 6px;
	text-decoration: none;
	transition: background 0.3s;
  }

  .hero-cta:hover {
	background-color: #0099cc;
  }

  .mypetdmv-dropdown-wrapper {
	width: 100%;
	position: relative;
  }

  .mypetdmv-dropdown {
	background-color: #ffffff;
	border: 2px solid #007bff;
	border-radius: 30px;
	padding: 14px 20px;
	font-size: 16px;
	color: #333;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0, 123, 255, 0.1);
	position: relative;
  }

  .mypetdmv-dropdown::after {
	content: '▼';
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	color: #007bff;
  }

  .mypetdmv-dropdown-options {
	display: none;
	position: absolute;
	width: 100%;
	background-color: white;
	border: 2px solid #007bff;
	border-radius: 12px;
	box-shadow: 0 6px 20px rgba(0, 123, 255, 0.15);
	max-height: 320px;
	overflow-y: auto;
	z-index: 999;
	padding: 15px;
	margin-top: 10px;
  }

  .mypetdmv-dropdown-open .mypetdmv-dropdown-options {
	display: block;
  }

  .mypetdmv-search-box input {
	width: 100%;
	padding: 10px;
	font-size: 14px;
	border: 1px solid #ccc;
	border-radius: 6px;
	margin-bottom: 15px;
  }

  .mypetdmv-options-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
  }

  .mypetdmv-dropdown-option {
	flex: 0 0 calc(33.333% - 10px);
	background-color: #eaf4ff;
	padding: 10px;
	text-align: center;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s ease;
	font-size: 14px;
  }

  .mypetdmv-dropdown-option:hover {
	background-color: #0099cc;
	color: white;
  }

  @media (max-width: 768px) {
	.mypetdmv-container {
	  flex-direction: column;
	}

	.mypetdmv-dropdown-option {
	  flex: 0 0 100%;
	}
  }
/*Hero banner content  ends*/
/*Bottom Hero blue bar starts*/


/* Hero Section Placeholder */
.pet-hero-section {
	background: url('https://via.placeholder.com/1600x400?text=Hero+Image') no-repeat center center/cover;
	height: 400px;
	position: relative;
  }

  /* Unique Feature Section Styling */
  .pet-feature-section {
	background-color: #e2ecfc;
	padding: 25px 20px;
	text-align: center;
  }

  .pet-feature-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
	max-width: 1400px;
	margin: 0 auto;
  }

  .pet-feature-box {
	flex: 1 1 220px;
	max-width: 260px;
	padding: 20px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .pet-feature-box:hover {
	transform: translateY(-8px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  }

  .pet-feature-icon {
	width: 60px;
	height: 60px;
	margin-bottom: 15px;
	/*filter: invert(46%) sepia(99%) saturate(4500%) hue-rotate(180deg);  #00bfff coloring trick */
	filter: invert(50%) sepia(62%) saturate(3000%) hue-rotate(180deg);
  }

  .pet-feature-box h4 {
	font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #777777;
  }

  .pet-feature-box p {
	font-size: 14px;
	color: #777;
	line-height: 1.4;
  }
/*Bottom Hero blue bar ends*/
/*******CUSTOM CSS CODE FROM WP ADMIN Start ************/
.woocommerce div.product form.cart .button {
    font-size: 22px;
}

.button.wc-backward {
    background: #f9821a !important;
    color: white !important;
}

.woocommerce table.cart td.actions .input-text, .woocommerce-page #content table.cart td.actions .input-text, .woocommerce-page table.cart td.actions .input-text {
    width: 180px;
}

    /* Remove Continue Shopping Button Add Cart */
body.page-id-789 .woocommerce-message .button {
    display: none
}

.petid {
    border: 2px solid #cfcfcf;
    border-radius: 25px;
    box-shadow: 3px 3px 12px 0 #607d8b;
    margin-top: 30px;
}

div.product-addon-totals {
	display:none;
}

.wc-pao-addon-name {
    margin-bottom: 15px!important;
}

.wc-pao-addon {
	
	    background-color: #03a9f429;
    border-radius: 10px;
	
}


.woocommerce form .form-row input.input-text {
  font-size: 20px;
	padding: 10px;
}

.woocommerce form .form-row .input-checkbox {
    -webkit-appearance:none;
    width:30px;
    height:30px;
    background:white;
    border-radius:5px;
    border:2px solid #555;
}

.woocommerce-checkout .checkout .col-2 h3#ship-to-different-address {
    padding-left: 20px;
}

.woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
    font-size: 20px;
}

.orange_box {
	    z-index: 9999;
	
}

.woocommerce-shipping-destination {display:none;}

.woocommerce-privacy-policy-text {display:none;}

.entry-meta{display:none;}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  /*height: 100vh;  Set the height to cover the viewport height */
}
/*
.myButton {
	background-color:#00ccff;
	-webkit-border-radius:28px;
	-moz-border-radius:28px;
	border-radius:28px;
	border:1px solid #00ccff;
	display:inline-block;
	cursor:pointer;
	color:#ffffff!important;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	font-weight:bold;
	
}
.myButton:hover {
	background-color:#0081ff;
	text-decoration:none!important;
}
*/
.button-container .myButton {
    background-color: #00c3ff;
    border: none;
    color: white;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 10px;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.button-container .myButton:hover {
    background-color: #009ec3;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}
.myButton:active {
	position:relative;
	top:1px;
}
body{
	font-size: 1.7em!important;
}
.home .header_fullwidth_img{
background-image: url(https://www.mypetdmv.com/wp-content/uploads/2023/04/mypetdmv_licenses.jpg);
    background-size: cover;
    background-position: center;
    /* height: 383px; */
    background-attachment: fixed;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
	box-shadow: inset 0 40px 40px -10px rgba(0, 0, 0, 0.4),
	inset 0 -40px 40px -10px rgba(0, 0, 0, 0.4);
	position: relative; /* Required if you plan to layer other elements inside */
	z-index: 1;
}
.small_dev_header_full_width {
	display: none;
  }
/*-------------------- Small devices header code start ------------------ */
  /* Show on devices ≤991px */
  @media screen and (max-width: 991px) {
	.small_dev_header_full_width {
	  display: block;
	  width: 100%;
	  height: 260px; /* Adjust based on your image height */
	  background-image: url('https://www.mypetdmv.com/wp-content/themes/mypetdmv/images/mobile_banner.webp'); /* Replace with your image */
	  background-size: cover;
	  background-position: center center;
	  background-repeat: no-repeat;
	  background-color: #f5f5f5; /* Optional fallback color */
	  -webkit-background-size: cover; /* Safari support */
	  -moz-background-size: cover;
	  -o-background-size: cover;
	}
  }

  /*-------------------- Small devices header code end ------------------ */
  
.bdp_blog_template a.bd-more-tag:hover {
    background-color: #f9821a !important;
   
}

.page-id-133016 .entry-title {
	display:none;	
}
.page-id-133016 .sm\:-ml-44  {
	display:none!important;	
}
.page-id-133016 .min-h-screen  {
	min-height: 0!important;
}

.page-id-133016 .__className_aaf875 {

  margin-top: -50px;
}

/*transition: background 0.3s ease, transform 0.3s ease;*/
/*********** CUSTOM CSS CODE from ADMIN ENDS ***/
/* --------------- Blog Custom Design Start ------------- */
h1, h2,h3, h4, h5, h6{
	font-family: "Poppins", sans-serif!important;
}
.post .entry-title{
	font-size: 30px!important;
    font-weight: 700!important;
}
.post h2{
	font-size: 22px!important;
    font-weight: 600!important;

}
/* --------------- Blog Custom Design End ------------- */

/* ----------------Testimonial Section Code start ------ */
.client-testimonials {
	padding: 30px 20px;
	background: #e6f2ff;
	text-align: center;
	border-radius: 15px;
  }

  .client-section-title {
	font-size: 2.9rem;
	margin-bottom: 40px;
	color: #2d6897;
	font-weight: 700;
  }

  .client-testimonial-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
  }

  .client-testimonial-card {
	background: #fff;
	border-radius: 20px;
	padding: 25px;
	max-width: 300px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .client-testimonial-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  }

  .client-avatar {
	width: 125px;
	height: 125px;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid #2496f2;
	margin-bottom: 15px;
	box-shadow: 0 5px 10px rgba(0,0,0,0.1);
  }

  .client-testimonial-card h3 {
	font-size: 1.6rem;
	margin-bottom: 5px;
	color: #444;
  }

  .client-location {
	display: block;
	font-size: 1.4rem;
	color: #999;
	font-weight: normal;
	margin-bottom: 15px;
  }

  .client-testimonial-card p {
	font-size: 1.3rem;
	color: #666;
	line-height: 1.5;
  }

  @media (max-width: 768px) {
	.client-testimonial-card {
	  max-width: 90%;
	}
  }
/* ----------------Testimonial Section Code End ------ */

/*----------------- About us Page CSS Starts------------ */
.aboutus-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	/*padding: 60px 30px;*/
	background: #ffffff;
	max-width: 1400px;
	margin: 0 auto;
	gap: 40px;
	font-family: 'Poppins', sans-serif;
	color: #333;
  }

  .aboutus-text-block {
	flex: 1 1 60%;
  }


  .aboutus-text-block p {
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 20px;
  }

  .aboutus-text-block ul {
	list-style: none;
	padding: 0;
	margin-left: 0;
  }

  .aboutus-text-block li {
	margin-bottom: 16px;
	font-size: 16px;
	line-height: 1.6;
  }

  .aboutus-text-block li strong {
	color: #2d6897;
  }

  .aboutus-image-block {
	flex: 1 1 35%;
	display: flex;
	justify-content: center;
  }

  .aboutus-image-block img {
	max-width: 100%;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }

  .aboutus-cta-button {
	display: inline-block;
	padding: 12px 24px;
	background: #00ccff;
	color: #fff;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	margin-top: 20px;
	transition: background 0.3s ease;
	font-size: 18px;
  }

  .aboutus-cta-button:hover {
	background: #f9821a;
	color: #fff;
  }
  .site-content .aboutus-cta-button:link,   .site-content .aboutus-cta-button:visited{
	color: #fff;
	text-decoration: none;
  }

  @media (max-width: 768px) {
	.aboutus-container {
	  flex-direction: column;
	  
	}

	.aboutus-text-block,
	.aboutus-image-block {
	  flex: 1 1 100%;
	}

	.aboutus-text-block h2 {
	  font-size: 28px;
	}
  }
  /*----------------- About us Page CSS End------------ */
  /* -----------------Custom Elements CSS Start--------------*/
  .site-content .button-container .myButton:link,   .site-content .button-container .myButton:visited{
	color: #fff;
	text-decoration: none;
	font-weight: bold;
  }
  .footer-column a:link, .footer-column a:visited,  .footer-column a{
	color: #fff;

  }
  /* -----------------Custom Elements CSS End--------------*/
/*Hero Image header*/

/*Hero Image Header end*/

  /*===========================================================*/
  /*       Skeleton CSS Code Starts                            */
  /************************************************************/

/* Hide by default (mobile/tablet) */
.skeleton-hero-box {
  display: none;
}

/* Show only on desktop */
@media (min-width: 992px) {
  .skeleton-hero-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 380px; /* match your hero height */
    background: #f2f2f2;
    border-radius: 8px;
    margin-bottom: 30px;
  }

  .skeleton-hero-spinner {
    width: 50px;
    height: 50px;
    border: 6px solid #ccc;
    border-top: 6px solid #333;
    border-radius: 50%;
    animation: skeleton-hero-rotate 1.2s linear infinite;
  }

  @keyframes skeleton-hero-rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}

/*Home Slider code*/
.lazy-slider-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 250px; /* Approx height of slider */ 
  width: 100%;
  background-color: #e2ecfc;

    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    clear: both;

}

.lazy-slider-spinner {
  width: 40px;
  height: 40px;
  border: 5px solid #ccc;
  border-top: 5px solid #333;
  border-radius: 50%;
  animation: spinSlider 1.6s linear infinite;
  
}

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


  /*===========================================================*/
  /*       Skeleton CSS Code Ends                             */
  /************************************************************/

  .state-page-h2{
	color: #2d6897;
    font-size: 1.6em;
    line-height: 1.5em;
    font-weight: 800;
  }
 
  /* ===========================
   MyPetDMV – Pet ID Section (Canada) Start
   Scoped to .canada-pet-id to avoid conflicts
   =========================== */

.canada-pet-id {
  --mpdvmx: clamp(16px, 2vw, 22px);     /* base text size */
  --mpdvlead: 1.65;                     /* line height */
  --mpdv-gap: clamp(14px, 2vw, 20px);   /* spacing unit */
  --mpdv-radius: 7px;                  /* rounded corners */
  --mpdv-maxw: 100%;                   /* readable width */
  --mpdv-bg: #ffffff;
  --mpdv-fg: #111;
  --mpdv-muted: #5e6673;
  --mpdv-accent: #0b6cff;               /* adjust to your brand if needed */
  --mpdv-shadow: 0 8px 24px rgba(0,0,0,.08);
  --mpdv-border: 1px solid rgba(0,0,0,.08);

  margin: 0 auto var(--mpdv-gap);
  padding: calc(var(--mpdv-gap) * 2) var(--mpdv-gap);
  max-width: var(--mpdv-maxw);
  color: var(--mpdv-fg);
  background: var(--mpdv-bg);
  border: var(--mpdv-border);
  border-radius: var(--mpdv-radius);
  box-shadow: var(--mpdv-shadow);
  font-size: var(--mpdvmx);
  line-height: var(--mpdvlead);
}

/* Headings */
.canada-pet-id header h2 {
  margin: 0 0 calc(var(--mpdv-gap) * 1.25);
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* Hero block */






/* Body copy */
.canada-pet-id p {
  margin: 0;
  text-wrap: pretty;
}

/* Links */
.canada-pet-id a {
  color: var(--mpdv-accent);
  text-decoration: none;
  border-bottom: 1px dashed rgba(11,108,255,.35);
  transition: color .15s ease, border-color .15s ease;
}
.canada-pet-id a:hover,
.canada-pet-id a:focus {
  color: #084db6;
  border-bottom-color: rgba(8,77,182,.6);
  outline: none;
}

/* Lists (if you add any later) */
.canada-pet-id ul,
.canada-pet-id ol {
  padding-left: 1.2em;
  margin: var(--mpdv-gap) 0 0;
}

/* Simple callouts (optional utility) */
.canada-pet-id .note {
  margin-top: var(--mpdv-gap);
  padding: calc(var(--mpdv-gap) * .75);
  border-radius: 12px;
  background: #f5f8ff;
  border: 1px solid rgba(11,108,255,.12);
  color: #163b73;
}

/* Media queries for wider screens */
@media (min-width: 560px) {

}

@media (min-width: 960px) {
  .canada-pet-id {
    padding: calc(var(--mpdv-gap) * 2.25) calc(var(--mpdv-gap) * 1.25);
  }
}

/* High contrast / Dark mode support */
@media (prefers-color-scheme: dark) {
  .canada-pet-id {
    --mpdv-bg: #0f1115;
    --mpdv-fg: #e8ebf1;
    --mpdv-muted: #aab2c0;
    --mpdv-accent: #7fb0ff;
    --mpdv-shadow: 0 8px 24px rgba(0,0,0,.45);
    border-color: rgba(255,255,255,.08);
  }

  .canada-pet-id a:hover,
  .canada-pet-id a:focus {
    color: #a9c7ff;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .canada-pet-id a {
    transition: none;
  }
}
 /* ===========================
   MyPetDMV – Pet ID Section (Canada) End
   Scoped to .canada-pet-id to avoid conflicts
   =========================== */

/******************POP-up classes starts ============= *****/
.pum-theme-135573 .pum-title, .pum-theme-enterprise-blue .pum-title {
    color: #1565c0!important;
    font-weight: 600!important;
	font-size: 27px!important;

}

.popup_actionButton {
    display: inline-block;
    padding: 14px 32px;
    background: #1f2937; /* modern dark base */
    color: #ffffff;
    text-decoration: none;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: 
        background 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.2s ease;
    cursor: pointer;
}

/* Hover state */
.popup_actionButton:hover {
    background: #f9821a;
    box-shadow: 0 14px 35px rgba(249, 130, 26, 0.45);
    transform: translateY(-2px);
	text-decoration: none;
}

/* Active / pressed */
.popup_actionButton:active {
    background: #00ccff;
    box-shadow: 0 8px 22px rgba(0, 204, 255, 0.45);
    transform: scale(0.96);
}

/************************************************************************/

/* scoped only inside this popup content */
.petPromo3{font-family:inherit;color:#0f172a;max-width:980px;margin:0 auto}
.petPromo3 *{box-sizing:border-box}

/* make headings readable inside lightbox */
.petPromo3__badge{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  font-size:13px;
  color:#334155;
  margin:0 0 14px;
}
.petPromo3__badge strong{color:#0f766e}

.pum-content .petPromo3__title { 
    margin: 0 0 6px;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 550;
    color: #64748b;
}
.petPromo3__subtitle{
    margin: 0 0 16px;
    font-size: 16px;
    color: #64748b;
    font-weight: 300;
}

/* layout */
.petPromo3__row{margin-left:-12px;margin-right:-12px}
.petPromo3__col{padding-left:12px;padding-right:12px}

/* image: STOP it from taking over */
.petPromo3__imageCard{
  border:1px solid #e2e8f0;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
.petPromo3__image{
  display:block;
  width:100%;
  max-height:330px;          /* key: control image height */
  object-fit:cover;          /* crop nicely instead of stretching */
}

/* benefits card */
.petPromo3__benefits{
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#fff;
  padding:14px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.petPromo3__benefits h4{
  margin:0 0 10px;
  font-size:15px;
  font-weight:800;
  color:#0f172a;
}
.petPromo3__list{list-style:none;padding:0;margin:0}
.petPromo3__list li{
  position:relative;
  padding:10px 0 10px 30px;
  border-top:1px solid #f1f5f9;
  font-size:15px;            /* bigger */
  color:#0f172a;
  line-height:1.35;
  font-weight: 300;
}
.petPromo3__list li:first-child{border-top:0}
.petPromo3__list li:before{
  content:"✓";
  position:absolute;
  left:0;
  top:10px;
  width:20px;height:20px;
  border-radius:6px;
  background:#ecfdf5;
  border:1px solid #bbf7d0;
  color:#10b981;
  font-weight:900;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* CTA */
.petPromo3__cta{
  margin-top:16px;
  border:1px solid #e2e8f0;
  background:#f8fafc;
  border-radius:14px;
  padding:14px;
}
.petPromo3__price{
  margin:0 0 6px;
  font-size:20px;
  font-weight:900;
  line-height:1.2;
}
.petPromo3__price strong{color:#0f766e}
.petPromo3__note{
	margin:0;
	color:#64748b;
	font-size:13px;
	font-weight: 300;
}

/* Button */


.petPromo3__fine{margin-top:8px;font-size:12px;color:#94a3b8;font-weight: 300}

/* responsive */
@media (max-width:767px){
  .petPromo3__title{font-size:19px}
  .petPromo3__image{max-height:260px}
  .petPromo3__list li{font-size:14px}
  .petPromo3__cta .text-right{text-align:left;margin-top:10px}
  .petPromo3__btn{width:100%;text-align:center}
}

/* OPTIONAL: remove extra top margin that WP editor sometimes adds */
.petPromo3 p{margin-top:0}

/********Pet PopUP CSS ends **********/

/*****************State Pages FAQ State CSS ode  17-02-2026***************************/
/* Modern 2026 FAQ UI (no extra classes needed)
   Works with your current structure:
   <section class="faq-statePages">
     <h2>...</h2>
     <h2>Q1...</h2><p>...</p>
     ...
   </section>
*/

.faq-statePages{
  --faq-bg: #0b1220;
  --faq-card: rgba(255,255,255,.06);
  --faq-card-2: rgba(255,255,255,.09);
  --faq-border: rgba(255,255,255,.14);
  --faq-text: rgba(255,255,255,.88);
  --faq-muted: rgba(255,255,255,.72);
  --faq-accent: #7dd3fc;
  --faq-shadow: 0 18px 50px rgba(0,0,0,.35);

  /*max-width: 920px;*/
  margin: clamp(18px, 3vw, 48px) auto;
  padding: clamp(18px, 2.5vw, 34px);
  border-radius: 22px;
  color: var(--faq-text);

  /* subtle modern backdrop */
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(125,211,252,.18), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(167,139,250,.14), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--faq-border);
  box-shadow: var(--faq-shadow);

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Title */
.faq-statePages > h2:first-of-type{
  margin: 0 0 14px 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.12;
}

/* Make each Q act like a clickable accordion header */
.faq-statePages > h2:not(:first-of-type){
  margin: 14px 0 0 0;
  padding: 18px 56px 18px 18px;
  border-radius: 16px;
  border: 1px solid var(--faq-border);
  background: var(--faq-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-weight: 600;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.25;
  cursor: pointer;
  user-select: none;

  position: relative;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* subtle hover */
.faq-statePages > h2:not(:first-of-type):hover{
  background: var(--faq-card-2);
  border-color: rgba(125,211,252,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transform: translateY(-1px);
}

/* chevron icon (pure CSS) */
.faq-statePages > h2:not(:first-of-type)::after{
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.75);
  border-bottom: 2px solid rgba(255,255,255,.75);
  transform: translateY(-55%) rotate(45deg);
  transition: transform .2s ease, border-color .2s ease;
}

/* optional small "Q" pill using existing h2 text */
.faq-statePages > h2:not(:first-of-type)::before{
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(125,211,252,.9);
  box-shadow: 0 0 0 4px rgba(125,211,252,.18);
  transform: translateY(-50%);
}

/* Answer blocks */
.faq-statePages > p{
  margin: 0;
  padding: 0 18px;
  color: var(--faq-muted);
  font-size: 16px;
  line-height: 1.7;
}

/* Default: collapse answers (accordion) */
.faq-statePages > h2:not(:first-of-type) + p{
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height .28s ease, opacity .22s ease, transform .22s ease, padding .22s ease;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}

/* Open state using :focus (click + keyboard).
   Note: If user clicks elsewhere, it may close; for persistent open you need tiny JS to toggle a class or aria-expanded. */
.faq-statePages > h2:not(:first-of-type):focus{
  outline: none;
  border-color: rgba(125,211,252,.55);
  background: rgba(125,211,252,.10);
  box-shadow: 0 14px 40px rgba(0,0,0,.30);
}

/* Make headings focusable if you add tabindex="0" to each question h2 */
.faq-statePages > h2:not(:first-of-type):focus::after{
  transform: translateY(-45%) rotate(225deg);
  border-color: rgba(125,211,252,.95);
}

.faq-statePages > h2:not(:first-of-type):focus + p{
  max-height: 420px; /* increase if answers are longer */
  opacity: 1;
  transform: translateY(0);
  padding-top: 12px;
  padding-bottom: 14px;

  /* visual connection to the header */
  border-left: 1px solid rgba(125,211,252,.35);
  border-right: 1px solid rgba(125,211,252,.12);
  background: linear-gradient(180deg, rgba(125,211,252,.06), rgba(255,255,255,0));
  border-radius: 0 0 16px 16px;
  margin: -10px 0 10px 0;
}

/* nicer spacing between items */
.faq-statePages > h2:not(:first-of-type) + p + h2{
  margin-top: 10px;
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .faq-statePages *{
    transition: none !important;
  }
}

/* Light mode fallback if your page background is light */
@media (prefers-color-scheme: light){
  .faq-statePages{
    --faq-card: rgba(0,0,0,.03);
    --faq-card-2: rgba(0,0,0,.045);
    --faq-border: rgba(0,0,0,.10);
    --faq-text: rgba(0,0,0,.88);
    --faq-muted: rgba(0,0,0,.72);
    --faq-shadow: 0 18px 50px rgba(0,0,0,.10);

    background:
      radial-gradient(1200px 600px at 20% -10%, rgba(14,165,233,.16), transparent 55%),
      radial-gradient(900px 500px at 100% 0%, rgba(99,102,241,.12), transparent 50%),
      linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.9));
  }

  .faq-statePages > h2:not(:first-of-type)::after{
    border-color: rgba(0,0,0,.65);
  }
}


/*****************End Pages FAQ State CSS ***************************/

/******************State Pages Paragraph Section Code Starts Dated 17-02-2026***********************************/
.state_PageParagraph {
  /* Layout */
  /*max-width: 75ch;*/
  margin: clamp(24px, 4vw, 60px) auto;
  padding: clamp(20px, 3vw, 40px);

  /* Modern clean background */
  background: linear-gradient(180deg, #fafafa, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);

  /* Typography (uses global font family) */
  font-size: clamp(16px, 0.4vw + 15px, 18px);
  line-height: 1.9;
  color: #1e293b;

  /* Better reading */
  letter-spacing: 0.2px;
}

/* Paragraph spacing rhythm */
.state_PageParagraph p {
  margin: 0;
}

.state_PageParagraph p + p {
  margin-top: 1.4em;
}

/* Modern emphasis styling */
.state_PageParagraph strong {
  font-weight: 600;
  color: #0f172a;
}

/* Optional subtle left accent line */
.state_PageParagraph::before {
  content: "";
  position: absolute;
  left: 0;
  width: 5px;
  height: 100%;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(to bottom, #2563eb, #22c55e);
}

/* Make accent work */
.state_PageParagraph {
  position: relative;
  overflow: hidden;
}

/*********************State Pages Paragraph Section Code Ends********************************/

/*************************State CTA Bar CSS Code Starts Here Written Date 17-02-2026*****************/
.tn-cta-bar{
  width: min(1100px, calc(100% - 32px));
  margin: 18px auto;
  padding: 18px 18px;
  border-radius: 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  background: #49bdf6; /* close to screenshot */
  color: #fff;

  box-shadow: 0 14px 35px rgba(0,0,0,.12);
}

.tn-cta-text{ min-width: 0; }

.tn-cta-title{
  font-size: clamp(18px, 1vw + 14px, 28px);
  line-height: 1.2;
  font-weight: 700;
  margin: 0;
}

.tn-cta-sub{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.4;
  opacity: .95;
}

.tn-cta-btn{
  flex: 0 0 auto;
  text-decoration: none;
  background: #fff;
  color: #0f172a;

  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;

  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.tn-cta-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
  opacity: .98;
}

@media (max-width: 640px){
  .tn-cta-bar{
    flex-direction: column;
    align-items: flex-start;
  }
  .tn-cta-btn{
    width: 100%;
    text-align: center;
  }
}
/*************************State CTA Bar CSS Code Ends Here*****************/

/**********************Top content for state top text and image CSS code starts ********************************/
/* Modern two-column hero-style layout */
.state_conent_container{
  /* spacing */
  width: min(1200px, calc(100% - 32px));
  /*margin: clamp(18px, 3vw, 50px) auto;*/
  padding: clamp(18px, 2.8vw, 40px);

  /* layout */
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(18px, 3vw, 42px);
  align-items: center;

  /* modern card look */
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), #fff);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);

  position: relative;
  overflow: hidden;
}

/* subtle top accent (modern) */
.state_conent_container::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, #f59e0b, #3b82f6);
  opacity: .95;
}

/* Text column */
.state_conent_container .state_text-content{
  max-width: 68ch;
}

/* Heading improvements */
.state_conent_container h2{
  margin: 0 0 12px 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-size: clamp(22px, 1.4vw + 16px, 38px);
}

/* Make the link in the heading look like a modern “accent link” */
.state_conent_container h2 a{
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid rgba(59, 130, 246, 0.35);
  padding-bottom: 2px;
}
.state_conent_container h2 a:hover{
  border-bottom-color: rgba(59, 130, 246, 0.85);
}

/* Paragraph rhythm */
.state_conent_container p{
  margin: 0;
  line-height: 1.8;
  font-size: clamp(15px, 0.35vw + 14px, 18px);
  color: rgba(15, 23, 42, 0.85);
}
.state_conent_container p + p{
  margin-top: 12px;
}

/* Make strong text feel premium, not harsh */
.state_conent_container strong,
.state_conent_container b{
  color: rgba(15, 23, 42, 0.96);
  font-weight: 700;
}

/* Links inside paragraphs */
.state_conent_container p a{
  color: #2563eb;
  text-decoration: none;
  border-bottom: 1px solid rgba(37, 99, 235, 0.35);
  padding-bottom: 1px;
}
.state_conent_container p a:hover{
  border-bottom-color: rgba(37, 99, 235, 0.8);
}

/* Image container */
.state_conent_container figure{
  margin: 0;
  justify-self: end;
  width: min(520px, 100%);
}

/* Image: modern card style */
.state_conent_container img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
  transform: translateZ(0);
}

/* Small “lift” on hover */
@media (hover:hover){
  .state_conent_container img{
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .state_conent_container:hover img{
    transform: translateY(-2px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  }
}

/* Responsive: stack nicely on mobile */
@media (max-width: 860px){
  .state_conent_container{
    grid-template-columns: 1fr;
  }
  .state_conent_container figure{
    justify-self: start;
  }
}
/******************Code End here*************************/
/*****************************State Pages main Heading CSS Code Starts*************************/



/**********************************************************************/