:root{
	--deep-blue-sd:#12345a;
	--black-sd:#000000;
	--white-sd:#ffffff;
	--light-sky-sd:#dfedff;
	--deep-green-sd:#3d6b47;
	--deep-gray-sd:#303030;

	--deep-blue-rgb-sd-v1:3,22,47;

	--body-font:"Open Sans", sans-serif;
	--headline:"Kanit", sans-serif;
}
body {
	padding-top: 0px;
	padding-bottom: 0px;
	/*-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;*/
	font-family: 'Open Sans', sans-serif;
	position:relative;
	color: var(--deep-gray-sd);
	font-size: 20px;
	font-weight: 400;
}
a,
a:active,
a:focus,
button,
button:focus,
button:active,
.btn,
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn.active.focus {
	outline: none;
	outline: 0;
}
 input::-moz-focus-inner {
 border: 0;
}

.theme-dropdown .dropdown-menu {
  position: static;
  display: block;
  margin-bottom: 20px;
}

.theme-showcase > p > .btn {
  margin: 5px 0;
}

.theme-showcase .navbar .container {
  width: auto;
}
li a:hover {
	text-decoration:none;
}
.no-resize {
	resize:none !important;
}
input[type="file"].form-control {
	height:auto !important;
}

/********************************************************
********************************************************/
header{
	background-color: var(--deep-blue-sd);
	padding-top: 25px;
	padding-bottom: 25px;
}
header .logo_area{
	width: auto;
	height: 269px;
	display: inline-block;
	border: var(--white-sd) 2px solid;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
}
header .logo_area img{
	width: auto;
	height: 100%;
}

.btn-black {
    width: auto;
    color: var(--white-sd);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
	font-family: var(--body-font);
    text-transform: uppercase;
    border: var(--black-sd) 1px solid;
    padding: 10.5px 43px;
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    display: inline-block;
	background: var(--black-sd);
}
.btn-black:focus, .btn-black:hover {
	background: var(--deep-green-sd);
	   color: var(--white-sd);
	   border: var(--deep-green-sd) 1px solid;
	   transition-duration: 0.5s;
	   -webkit-transition-duration: 0.5s;
	   outline: 0;
   }


.btn-darkgreen {
    width: auto;
    color: var(--white-sd);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
	font-family: var(--body-font);
    text-transform: uppercase;
    border: var(--deep-green-sd) 1px solid;
    padding: 10.5px 43px;
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    display: inline-block;
	background: var(--deep-green-sd);
}
.btn-darkgreen:focus, .btn-darkgreen:hover {
	background: var(--black-sd);
	color: var(--white-sd);
	border: var(--black-sd) 1px solid;
	transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	outline: 0;
}

   .head_list{
	padding: 0;
	margin: 0;
	list-style: none;
   }
   .head_list li{
	padding: 0 7px;
	margin: 0;
	display: inline-block;
   }
   .head_list li:first-child{
	margin-right: 20px;
   }
   .social_item{
	width: auto;
	height: auto;
	display: flex;
	align-items: center;
   }
   .social_item .social_ico{
	width: 56px;
	height: 56px;
	border-radius: 50%;
	line-height: 55px;
	text-align: center;
	background-color: var(--white-sd);
   }
   .social_item .social_ico img{
	width: auto;
	height: 25px;
   }
.social_item .social_txt{
	padding-left: 12px;
}
   .social_item .social_txt p{
	font: 400 18px/1 var(--body-font);
	color: var(--light-sky-sd);
	margin-bottom: 8px;
   }
    .social_item .social_txt h4{
	font: 400 24px/1 var(--body-font);
	color: var(--white-sd);
	margin-bottom: 0;
   }
   .social_item .social_txt h4 a{
	text-decoration: none;
	color: var(--white-sd);
	transition-duration: .5s;
	-o-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-webkit-transition-duration: .5s;
   }
   .social_item .social_txt h4 a:hover{
	color: var(--deep-green-sd);
	transition-duration: .5s;
	-o-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-webkit-transition-duration: .5s;
   }

.banner_sec{
	position: relative;
}
.banner_sec img {
    width: 100%;
    height: auto;
}

.banner_sec:after{
	width: 60%;
	height: 100%;
	background: #03162F;
background: linear-gradient(90deg,rgba(3, 22, 47, 0.85) 0%, rgba(3, 22, 47, 0) 100%);
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 1;
}
.banner_sec .banner_caption{
	width: 50%;
	height: 145px;
	position: absolute;
	left: 7%;
	top: 0;
	bottom: 0;
	z-index: 2;
	margin: auto;
}
.banner_sec .banner_caption h1{
	font: 500 64px/1 var(--headline);
	color: var(--white-sd);
}

section{
	padding-top: 50px;
	padding-bottom: 50px;
}

/********************************************************
********************************************************/
.wedo_img_area {
    position: relative;
    text-align: center;
}
.wedo_img_area .wedo_img{
	width: auto;
	height: 630px;
	position: relative;
	z-index: 1;
}
.wedo_img_area .wedo_img img{
	width: auto;
	height: 100%;
}

.wedo_img_area .wedo_img_bg {
    width: 475px;
    height: 475px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: 50px;
    right: 0;
    margin: 0 auto;
}
.wedo_img_area .wedo_img_bg img{
	width: auto;
	height: 100%;
}
.headline{
	margin-bottom: 42px;
}
.headline h2{
	font: 500 55px/1 var(--headline);
	color: var(--deep-green-sd);
}


/********************************************************
********************************************************/
.adoptable_list{
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: center;
}
.adoptable_list li{
	width: 24%;
	height: auto;
	padding: 0 13px;
	margin: 0 0 80px 0;
	display: inline-block;
}
.adoptable_area{
	width: 100%;
	height: auto;
	position: relative;
	
}
.adoptable_area .adoptable_img{
	width: auto;
	height: 460px;
	border-radius: 16px;
	overflow: hidden;
	background-color: var(--deep-blue-sd);
	
}

.adoptable_area .adoptable_img img{
	width: auto;
	height: 100%;
	opacity: 1;
	transition-duration: .5s;
	-o-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-webkit-transition-duration: .5s;
}
.adoptable_area:hover .adoptable_img img{
	opacity: .5;
	transition-duration: .5s;
	-o-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-webkit-transition-duration: .5s;
}
.adoptable_area .adoptable_txt{
	width: 85%;
	height: auto;
	padding: 19px 10px;
	border-radius: 12px;
	text-align: center;
	background-color: var(--white-sd);
	box-shadow: 0px 4px 11px 0px rgba(0,0,0,0.15);
-webkit-box-shadow: 0px 4px 11px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 4px 11px 0px rgba(0,0,0,0.15);
position: absolute;
left: 0;
right: 0;
bottom: -36px;
margin: 0 auto;
}
.adoptable_area .adoptable_txt h3{
	font: 500 30px/1 var(--headline);
	color: var(--deep-green-sd);
}
.adoptable_area.adopted_area .adoptable_txt{
	border-radius:0px 0px 12px 12px;
}
.adoptable_area.adopted_area .adopted_txt{
	width: 85%;
	height: auto;
	background-color: var(--deep-green-sd);
	padding: 10px;
	border-radius: 12px 12px 0px 0px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 36px;
	margin: 0 auto;
}
.adoptable_area .adopted_txt p{
	font: 400 17.5px/1 var(--body-font);
	color: var(--white-sd);
	margin-bottom: 0;
	display: inline-block;
	text-transform: uppercase;
}
.adoptable_area .adopted_txt img{
	width: auto;
	height: 28px;
	display: inline-block;
	margin-right: 7px;
}
.btn-green {
    width: auto;
    color: var(--white-sd);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
	font-family: var(--body-font);
    text-transform: uppercase;
    border: var(--deep-green-sd) 1px solid;
    padding: 18.5px 36px;
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    display: inline-block;
	background: var(--deep-green-sd);
}
.btn-green:focus, .btn-green:hover {
	background: var(--black-sd);
	   color: var(--white-sd);
	   border: var(--black-sd) 1px solid;
	   transition-duration: 0.5s;
	   -webkit-transition-duration: 0.5s;
	   outline: 0;
   }
.btn-green img{
	width: auto;
	height: 27px;
}
.zindex-2{
	position: relative;
	z-index: 2;
}

/********************************************************
********************************************************/
.weare_sec{
	position: relative;
	background-position: right !important;
}
.weare_sec:after {
    width: 70%;
    height: 100%;
    background: #03162F;
    background: linear-gradient(90deg,rgba(3, 22, 47, 0.85) 0%, rgba(3, 22, 47, 0) 100%);
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
}
.weare_img{
	width: 100%;
	height: auto;
	display: flex;
}
.weare_sec .headline h2{
	color: var(--white-sd);
}
.weare_sec h4{
	font: 400 27px/1.2 var(--body-font);
	color: var(--white-sd);
	margin-bottom: 35px;
}

/********************************************************
********************************************************/
footer{
	background-color: var(--deep-blue-sd);
	padding-top: 30px;
}
footer .footer_logo{
	width: auto;
	height: 228px;
	display: inline-block;
	border: var(--white-sd) 2px solid;
}
footer .footer_logo img{
	width: auto;
	height: 100%;
}
.footer_list{
	text-align: center;
	padding: 0;
	margin: 0;
	list-style: none;
   }
   .footer_list li{
	padding: 0 37px;
	margin: 0;
	display: inline-block;
	text-align: left;
   }

footer hr {
    margin: 26px 0 20px;
    border-color: #8fbaf5;
    margin-top: 31px !important;
    padding-top: 12px;
}
footer .social_item .social_txt h5{
	font: 400 18px/1 var(--body-font);
	color: var(--white-sd);
	margin-bottom: 0;
}
.copy_footer {
    padding-bottom: 15px;
}
.copy_footer p{
	font: 400 18px/1 var(--body-font);
	color: var(--white-sd);
}
.copy_footer p a{
	text-decoration: none;
	color: var(--white-sd);
	transition-duration: .5s;
	-o-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-webkit-transition-duration: .5s;
}
.copy_footer p a:hover{
	text-decoration: none;
	color: var(--deep-green-sd);
	transition-duration: .5s;
	-o-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-webkit-transition-duration: .5s;
}

/********************************************************
********************************************************/
.adoption_pending { position:absolute; top:-18px; left:20px; background:#fff; padding:6px 10px; border-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,0.1); z-index:20; display:inline-flex; align-items:center; gap:8px; font-weight:600; }
.adoption_pending img { width:26px; height:auto; display:block; }
.adoption_pending.nothing { opacity:0.8; color:#333; display: none; }
.adoption_pending.new { border: 2px solid #eee; }
.carousel.carousel-main .carousel-cell { background-position:center; background-size:cover; position:relative; background-size: 500%; }
.carousel.carousel-main .carousel-cell img{ display:block; width:100%; height:auto; object-fit:cover; }
.carousel.carousel-nav .carousel-cell{ overflow:hidden; }
.fancybox-container { z-index:99999 !important; } /* ensure Fancybox overlays above theme elements */
.flickity-enabled.is-draggable .flickity-viewport{border-radius: 15px;}
.carousel.carousel-nav.bottom.flickity-enabled.is-draggable {
    margin-top: 10px;
}
.inner_banner_sec{padding: 3% 0;
    margin-top: 0px;
    background-size: cover;
    background-color:#c2e0f9;}
.carousel.carousel-main .carousel-cell { height:auto; background-position:center; background-size:cover; }
    .carousel.carousel-main .carousel-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
    .carousel.carousel-nav .carousel-cell { width:120px; height:90px; overflow:hidden; }
    .carousel.carousel-nav .carousel-cell img{ width:100%; height:auto; object-fit:cover; display:block; }
    .flickity-prev-next-button { background: rgba(0,0,0,0.35); width:44px; height:44px; border-radius:50%; }
    .flickity-prev-next-button .flickity-button-icon { fill:#fff; }
.float-right {
    float: right;
    margin-top: -6px;
}
.about_txt p{font-size: 20px;}


/* Loader overlay for carousel */
.ggsdr-carousel-loader {
  position: relative;
  width: 100%;
  height: 504px; /* match your carousel height; change if adaptive */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  z-index: 25;
}

/* When Flickity resizes to fit content, loader height can be dynamic.
   If you use adaptiveHeight: true, set height:auto and let JS manage overlay positioning. */

/* Center spinner */
.ggsdr-spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 5px solid rgba(0,0,0,0.08);
  border-top-color: rgba(0,0,0,0.6);
  animation: ggsdr-spin 0.9s linear infinite;
  box-sizing: border-box;
}

/* small text under spinner (optional) */
/* .ggsdr-carousel-loader .ggsdr-text{ margin-top:10px; font-size:14px; color:#444; } */

@keyframes ggsdr-spin {
  to { transform: rotate(360deg); }
}

/* Hide loader when hidden (used by JS) */
.ggsdr-carousel-loader.ggsdr-hidden {
  display: none !important;
}


ul.pdf_list_new{list-style-type: none; margin: 50px 0px!important;}
ul.pdf_list_new li {
    background: #c2e0f9;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    padding-left: 80px;
    margin-bottom: 30px;
    counter-increment:item;
    margin-left: 50px;
}
ul.pdf_list_new li img{
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 46px;
	
}
ul.pdf_list_new li a {
    color: #001a7d !important;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    display: inline-block;
	text-decoration: none;
}
ul.pdf_list_new li:before {
    width: 15px;
    height: 55px;
    margin: auto;
    counter-increment: li;
    content: counter(item, decimal-leading-zero);
    /* content: "0" counter(item); */
    color: #3d6b47;
    text-align: center;
    font-family: "Kanit", sans-serif;
    font-size: 38px;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
    opacity: .8;
    position: absolute;
    left: -60px;
    transform: translateY(-50%);
    top: 50%;
}
.adoption_pending.new.adopted {
    background: #3d6b47;
    color: #fff;
    border-radius: 0px 0px 10px 10px;
}
.adoption_pending.new.foster-needed{
    background: #3d6b47;
    color: #fff;
    border-radius: 0px 0px 10px 10px;
}
.flickity-enabled{
	border-radius: 20px;
	overflow: hidden;
}
/* .btn-adoptme{display: none!important;} */
/* If you want loader overlay to sit absolutely over the carousel, wrap carousel and loader in relative container and use absolute positioning:
   .ggsdr-carousel-wrap { position: relative; }
   .ggsdr-carousel-loader { position: absolute; top:0; left:0; right:0; bottom:0; }
*/

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

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

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

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

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

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

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

/* Reset small bits for the 404 area */
body.error404 { background: var(--light-sky-sd); }
.error-404-wrap{
  min-height: 70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4rem 1.5rem;
}
.card-404{
  background: linear-gradient(180deg, rgba(255,255,255,0.98), var(--white-sd));
  border-radius:18px;
  box-shadow: 0 12px 40px rgba(18,52,90,0.12);
  max-width:1100px;
  width:100%;
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:2rem;
  padding:2.5rem;
  align-items:center;
}

@media (max-width:900px){
  .card-404{ grid-template-columns: 1fr; padding:1.5rem; }
}

.left-404 h1{
  font-size: clamp(28px, 5vw, 44px);
  margin:0 0 .5rem 0;
  color: var(--deep-blue-sd);
  letter-spacing:-0.5px;
}
.left-404 p.lead{
  margin:0 0 1rem 0;
  color: var(--deep-gray-sd);
  font-size:18px;
}
.big-404{
  font-weight:900;
  font-size: clamp(64px, 10vw, 120px);
  color: transparent;
  -webkit-text-stroke: 2px var(--deep-blue-sd);
  margin:0 0 .75rem 0;
}

.btn-row{ display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:1rem }
.btn-cta{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.65rem 1rem; border-radius:10px; text-decoration:none; font-weight:600;
}
.btn-primary{ background:var(--deep-green-sd); color:var(--white-sd); }
.btn-outline{ border:2px solid var(--deep-blue-sd); color:var(--deep-blue-sd); background:transparent; }

.search-box{ margin-top:1rem; display:flex; gap:.5rem; }
.search-box input[type="search"]{ flex:1; padding:.6rem .75rem; border-radius:10px; border:1px solid #d7e6ff; font-size:15px }
.search-box button{ padding:.6rem .85rem; border-radius:10px; border:none; background:var(--deep-blue-sd); color:var(--white-sd); font-weight:600 }

.right-404{ text-align:center }
.illustration{ max-width:360px; margin:0 auto; }
.suggest-list{ margin-top:1.25rem; text-align:left }
.suggest-list a{ display:block; padding:.5rem 0; color:var(--deep-blue-sd); text-decoration:none }
.suggest-list a:hover{ text-decoration:underline }
.small-note{ margin-top:1rem; color:#6b7788; font-size:13px }

/* subtle floating animation for illustration */
.illus-float{ animation:floaty 6s ease-in-out infinite; }
@keyframes floaty{ 0%{ transform:translateY(0)} 50%{ transform:translateY(-8px)} 100%{ transform:translateY(0)} }

/********************************************************
********************************************************/
.outersection {
    min-height: 100vh;
    position: relative;
    height: auto;
}
#innercontainer {
    padding-bottom: 490px;
    overflow-x: hidden;
}
footer {
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 0px;
   
}
/********************************************************
********************************************************/
.stellarnav.mobile.right > ul {
	z-index: 99;
}
@media (min-width:1920px){.container{max-width:1720px}}
/* @media (min-width:1200px){.container{max-width:1170px}} */
/********************************************************
********************************************************/