@font-face {
   font-family: dana;
   font-style: normal;
   font-weight: 900;
   src: url('../webfonts/woff2/Dana-Black.woff2') format('woff2'),
     /* FF39+,Chrome36+, Opera24+*/
     url('../webfonts/woff/Dana-Black.woff') format('woff');
   /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
 }

 @font-face {
   font-family: dana;
   font-style: normal;
   font-weight: bold;
   src: url('../webfonts/woff2/Dana-Bold.woff2') format('woff2'),
     /* FF39+,Chrome36+, Opera24+*/
     url('../webfonts/woff/Dana-Bold.woff') format('woff');
   /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
 }

 @font-face {
   font-family: dana;
   font-style: normal;
   font-weight: normal;
   src: url('../webfonts/woff2/Dana-Regular.woff2') format('woff2'),
     /* FF39+,Chrome36+, Opera24+*/
     url('../webfonts/woff/Dana-Regular.woff') format('woff');
   /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
 }

 .ss02 {
   -moz-font-feature-settings: "ss02";
   -webkit-font-feature-settings: "ss02";
   font-feature-settings: "ss02";
 }

 body {
   background-color: #ffffff;
   font-family: dana, sans-serif;
   font-feature-settings: "ss02";
   overflow-x: hidden;
 }

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 #war-template-root p {
   margin-bottom: 0 !important;
 }


 .promo-banner {
   background-color: #E67B2D;
   width: 100%;
   height: 66px;
   color: #000000;
   direction: rtl;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;

 }

 .promo-code {
   font-size: 20px;
   font-weight: bold;
   color: #0066FF;
   padding-right: 8px;
   line-height: 20px;
   display: inline-flex;
   align-items: center;
 }

 .promo-text {
   font-size: 20px;
   font-weight: bold;
   color: #000000;
 }

 .promo-content {
   display: flex;
   align-items: center;
   gap: 88px;
   ;
 }

 .code-container {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   cursor: pointer;
   position: relative;
 }

 .copy {
   width: 18px;
   height: 18px;
   display: block;
 }

 .cat {
   width: 69px;
   height: 42px
 }

 .hero-section img {
   width: 100%;

   height: 445px;
   object-fit: cover;
   object-position: center;
 }

 .text-section {
   width: 100%;
   /* height: 445px; */
   display: flex;
   flex-direction: column;
   gap: 16px;
   padding: 0 40px;
 }

 .text-section.container {
   padding: 60px 40px !important;
 }

 .text1 {
   font-size: 18px;
   line-height: 28px;
   font-weight: bold;
   color: #0A244B;
   padding-top: 0 !important;
 }

 .text2 {
   font-size: 18px;
   line-height: 32px;
   font-weight: 400;
   color: #0A244B;
   padding-bottom: 0;
 }

 .text-section p {
   margin-bottom: 0 !important;
 }



 .pet-section {
   width: 100%;
   overflow: hidden;
 }

 .slider {
   position: relative;
 }

 .slides {
   display: flex;
   direction: rtl;
 }

 .slide {
   min-width: 50%;
   height: 420px;
   background-size: cover;
   background-position: center;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   color: #fff;

 }

 .slide-right {
   background-image: url(../img/pic1.png);
 }

 .slide-left {
   background-image: url(../img/pic2.png);
 }

 .slide-text {
   font-size: 24px;
   line-height: 36px;
   font-weight: bold;
   color: #ffffff;
   max-width: 463px;
   width: 70%;
 }

 .slide-text p {
   font-size: 18px;
   line-height: 32px;
   font-weight: 400;
   color: #ffffff;
   padding-top: 16px;
 }

 .center-icon {
   position: absolute;
   left: 45.5%;
   top: 35%;
   width: 128px;
   height: 128px;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 3;
 }



 .prev,
 .next {
   position: absolute;
   top: 85%;
   background: #fff;
   stroke: #0066FF;
   border: none;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   cursor: pointer;
   display: none;
 }

 .prev {
   right: 35%;
 }

 .next {
   left: 35%;
 }

 .pagination {
   display: none;
 }


 .consult-section {
   min-height: 412px;
   padding: 120px 40px;

 }

 .consult-wrapper {
   display: flex;
   align-items: center;
   align-self: center;
   gap: 56px;

 }

 .title {
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
   color: #424242;
   padding-bottom: 16px;
   padding-top: 16px;
 }


 .img-main img {
   height: 411px;
   width: 540px;

 }


 .consult-content {
   max-width: 554px;
 }

 .consult-content h2 {
   font-size: 20px;
   line-height: 30px;
   font-weight: bold;
   color: #424242;
 }

 .consult-content h2 span {
   color: #0066ff;
 }

 .desc {

   font-size: 16px;
   color: #424242;
   line-height: 28px;
   font-weight: 400;
   padding-top: 16px;
 }

 .features {
   list-style: none;
   padding: 0;
   margin-bottom: 16px;
 }

 .features li {
   padding-bottom: 8px;

   font-size: 14px;
   line-height: 22px;
   color: #424242;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .features img {
   width: 18px;
   margin-left: 8px;
   display: block;
   flex: 0 0 auto;
 }

 #war-template-root .btn-call {
   display: flex;
   justify-content: center;
   gap: 8px;
   background: #0066ff;
   color: #ffffff !important;
   padding: 0px 22px;
   height: 48px;
   max-width: 235px;
   border-radius: 8px;
   text-decoration: none;
   align-items: center;
   font-size: 16px !important;
   line-height: 28px !important;
   font-weight: 500 !important;
 }

 #war-template-root a.btn-call,
 #war-template-root a.btn-call:link,
 #war-template-root a.btn-call:visited,
 #war-template-root a.btn-call:hover,
 #war-template-root a.btn-call:focus,
 #war-template-root a.btn-call:active {
   color: #ffffff !important;
   text-decoration: none !important;
 }

 #war-template-root .btn-call * {
   color: #ffffff !important;
   text-decoration: none !important;
 }

 #war-template-root .btn-call p {
   margin: 0;
   line-height: 28px !important;
   font-size: 16px !important;
   font-weight: 500 !important;

 }

 #war-template-root .btn-call span {
   line-height: 28px !important;
   font-size: 16px !important;
   font-weight: 500 !important;
 }

 #war-template-root .btn-call img,
 #war-template-root .btn-call svg {
   width: 24px !important;
   height: 24px !important;
   flex: 0 0 auto;
 }



 .tips-section {
   padding: 120px 40px;

 }

 .tips-header {
   text-align: right;
   padding-bottom: 24px;
 }

 .tips-header h2 {
   font-size: 20px;
   margin-bottom: 10px;
   color: #424242;
 }

 .tips-header span {
   color: #0066ff;
 }

 .tips-header p {
   color: #424242;
   font-size: 14px;
 }

 .tips-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 48px;
 }

 .tip {
   display: flex;
   flex-direction: column;
   gap: 12px;
   text-align: center;
   max-width: 250px;
   align-items: center;
 }

 .tip img {
   width: 60px;
   margin-bottom: 15px;
 }

 .tip h3 {
   font-size: 16px;
   color: #424242;
 }

 .tip p {
   font-size: 14px;
   color: #424242;
   line-height: 26px;
 }

 .blog-box-section {
   display: flex;
   gap: 8px;
   flex-direction: column;
   padding: 0 40px;
 }

 .blog-box-in {
   display: flex;
   gap: 8px;
   flex-wrap: nowrap;
 }

 .blog-section {
   display: flex;
   flex-direction: column;
   gap: 24px;
   max-width: 900px;
   overflow: auto;
   flex: 1 1 auto;
 }

 .blog-header {
   display: flex;
   justify-content: space-between;
   gap: 480px;
   align-items: center;
   overflow-x: hidden;
   padding-top: 8px;
 }

 .blog-view-all-mobile {
   display: none;
 }

 .blog-title {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }

 .blog-title h2 {
   font-size: 20px;
   font-weight: 700;
   color: #424242;
   line-height: 28px;
 }

 .blog-title span {

   color: #0066ff;

 }

 .blog-title p {
   color: #424242;
   font-size: 14px;
   line-height: 20px;
   font-weight: 400;
   padding-bottom: 8px;
 }

 .blog-view-all {
   text-decoration: none;
   color: #0066FF;
   font-size: 14px;
   font-weight: 400;
   display: flex;
   align-items: center;
   gap: 6px;
 }


 .blog-categories {
   display: flex;
   border: #D1D5DB solid 1px;
   border-radius: 8px;
   height: 40px;
 }

 .blog-category {
   background: #ffffff;
   padding: 4px 24px;
   border-radius: 8px;
   font-weight: 400;
   border: none;
   /* cursor: pointer; */
   font-size: 16px;
   /* transition: 0.3s; */
 }

 .blog-category.active {
   background: #0066FF;
   color: #ffffff;
 }


 .blog-section-box {
   display: flex;
   gap: 24px;
   justify-content: space-between;
   padding-bottom: 10px;
   overflow-x: auto;
   flex-wrap: nowrap;
   scrollbar-width: none;
   user-select: none;
   cursor: grab;
 }

 .blog-section-box::-webkit-scrollbar {
   display: none;
 }

 .blog-section-box.grabbing {
   cursor: grabbing;
 }

 .blog-box {
   width: 271px;
   min-width: 271px;
   border-radius: 16px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   flex: 0 0 auto;

 }

 .blog-box-image {
   position: relative;
   width: 100%;
   /* aspect-ratio: 4 / 3; */
   overflow: hidden;
 }

 .blog-box-image img {
   width: 271px;
   height: 174px;
   object-fit: cover;
   border-radius: 16px;
 }

 .blog-badge {
   position: absolute;
   /* top: 4px; */
   padding: 3px 12px;
   font-size: 11px;
   border-radius: 16px;
   line-height: 16.5px;
   text-align: center;
   z-index: 5;
 }





 .blog-text {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }

 .blog-text p {
   font-size: 14px;
   color: #424242;
   font-weight: 700;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   /* max-height: 44px; */
   /* overflow-x: hidden; */
 }

 .blog-date {
   font-size: 12px;
   color: #888;
   display: flex;
   gap: 8px;
 }

 .blog-date svg {
   width: 20px;
   height: 20px;
 }

 .blog-date p {
   font-size: 13px;
   font-weight: 400;
   color: #6E7A86;
   line-height: 20px;
 }

 .change-blog {
   display: flex;
   gap: 24px;

 }

 .change-blog.active {
   color: #0066ff;
 }

 .blue-card {
   flex: 0 0 237px;
   min-width: 180px;
 }

 .blue-card img {
   height: 338px;
   width: 100%;
 }

 @media (max-width: 1024px) {
   .blog-section {
     max-width: 720px;
   }
 }

 @media (max-width: 900px) {
   .blog-section {
     max-width: 640px;
   }
 }

 @media (max-width: 768px) {
   .blog-section {
     max-width: 520px;
   }

   .blue-card {
     flex: 0 0 180px;
     min-width: 180px;
   }

   .text-section.container {
     padding: 60px 20px !important;
   }
 }

 .blog-pagination {
   display: flex;
   justify-content: center;
   gap: 8px;
   margin-top: 20px;
 }

 .blog-pagination span {
   width: 10px;
   height: 10px;
   background: #ccc;
   border-radius: 50%;
   display: block;
 }

 .blog-pagination span.active {
   background: #007aff;
   width: 18px;
   border-radius: 10px;
 }

 .blog-section-box {
   display: flex;
   overflow-x: auto;
   gap: 16px;
   scroll-behavior: smooth;
 }

 .blog-box {
   flex: 0 0 auto;
 }

 .change-blog svg path {
   stroke: #DDEAFF;
   transition: stroke 0.3s ease;
 }

 .change-blog svg.active-arrow path {
   stroke: #0066ff;
 }

 .change-blog svg {
   cursor: not-allowed;
   opacity: 0.5;
 }

 .change-blog svg.active-arrow {
   cursor: pointer;
   opacity: 1;
 }