:root {

  --offer-bg-img: url(../images/hero-img/hero-img-offers.png);

  --offer-card-img-height: 110px;

  --news-card-height: 23em;

  --news-card-thumb-height: 10em;

  --amana-light-yellow: #ffe790;

  --amana-light-apple: rgb(129, 189, 65,0.1);

  --amana-gold: #FFD700;

  --amana-telemedicine-blue: #2e64af;

}

/*

Common style Classes - Start ------------->>

*/



.ma-0 {

  margin: 0px;

}

.ma-10 {

  margin: clamp(0.3125rem, 0.6944444444vw, 0.625rem);

}



.ma-20 {

  margin: clamp(0.625rem, 1.3888888889vw, 1.25rem);

}



.ma-30 {

  margin: clamp(0.9375rem, 2.0833333333vw, 1.875rem);

}



.ma-40 {

  margin: clamp(1.25rem, 2.7777777778vw, 2.5rem);

}



.ma-50 {

  margin: clamp(1.5625rem, 3.4722222222vw, 3.125rem);

}

.pa-0 {

  padding: 0px;

}

.pa-10 {

  padding: clamp(0.3125rem, 0.6944444444vw, 0.625rem);

}



.pa-20 {

  padding: clamp(0.625rem, 1.3888888889vw, 1.25rem);

}



.pa-30 {

  padding: clamp(0.9375rem, 2.0833333333vw, 1.875rem);

}



.pa-40 {

  padding: clamp(1.25rem, 2.7777777778vw, 2.5rem);

}



.pa-50 {

  padding: clamp(1.5625rem, 3.4722222222vw, 3.125rem);

}

.ml-10 {

  margin-left: clamp(0.3125rem, 0.6944444444vw, 0.625rem);

}



.ml-20 {

  margin-left: clamp(0.625rem, 1.3888888889vw, 1.25rem);

}



.ml-30 {

  margin-left: clamp(0.9375rem, 2.0833333333vw, 1.875rem);

}



.ml-40 {

  margin-left: clamp(1.25rem, 2.7777777778vw, 2.5rem);

}



.ml-50 {

  margin-left: clamp(1.5625rem, 3.4722222222vw, 3.125rem);

}



.pl-10 {

  padding-left: clamp(0.3125rem, 0.6944444444vw, 0.625rem);

}



.pl-20 {

  padding-left: clamp(0.625rem, 1.3888888889vw, 1.25rem);

}



.pl-30 {

  padding-left: clamp(0.9375rem, 2.0833333333vw, 1.875rem);

}



.pl-40 {

  padding-left: clamp(1.25rem, 2.7777777778vw, 2.5rem);

}



.pl-50 {

  padding-left: clamp(1.5625rem, 3.4722222222vw, 3.125rem);

}

.mr-10 {

  margin-right: clamp(0.3125rem, 0.6944444444vw, 0.625rem);

}



.mr-20 {

  margin-right: clamp(0.625rem, 1.3888888889vw, 1.25rem);

}



.mr-30 {

  margin-right: clamp(0.9375rem, 2.0833333333vw, 1.875rem);

}



.mr-40 {

  margin-right: clamp(1.25rem, 2.7777777778vw, 2.5rem);

}



.mr-50 {

  margin-right: clamp(1.5625rem, 3.4722222222vw, 3.125rem);

}



.pr-10 {

  padding-right: clamp(0.3125rem, 0.6944444444vw, 0.625rem);

}



.pr-20 {

  padding-right: clamp(0.625rem, 1.3888888889vw, 1.25rem);

}



.pr-30 {

  padding-right: clamp(0.9375rem, 2.0833333333vw, 1.875rem);

}



.pr-40 {

  padding-right: clamp(1.25rem, 2.7777777778vw, 2.5rem);

}



.pr-50 {

  padding-right: clamp(1.5625rem, 3.4722222222vw, 3.125rem);

}

.section-lg-pa {

  padding: clamp(3.125rem, 6.9444444444vw, 6.25rem);

}

.section-lg-pr {

  padding-right: clamp(3.125rem, 6.9444444444vw, 6.25rem);

}

.section-lg-pl {

  padding-left: clamp(3.125rem, 6.9444444444vw, 6.25rem);

}

.section-lg-pt {

  padding-top: clamp(3.125rem, 6.9444444444vw, 6.25rem);

}

.section-lg-pb {

  padding-bottom: clamp(3.125rem, 6.9444444444vw, 6.25rem);

}

.section-lg-ma {

  margin: clamp(3.125rem, 6.9444444444vw, 6.25rem);

}

.section-lg-mr {

  margin-right: clamp(3.125rem, 6.9444444444vw, 6.25rem);

}

.section-lg-ml {

  margin-left: clamp(3.125rem, 6.9444444444vw, 6.25rem);

}

.section-lg-mt {

  margin-top: clamp(3.125rem, 6.9444444444vw, 6.25rem);

}

.section-lg-mb {

  margin-bottom: clamp(3.125rem, 6.9444444444vw, 6.25rem);

}

.section-title {

  font-family: var(--bai-jamjuree-font);

}



.card-para {

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

}



.dot-list {

  list-style: disc;

}



.pe-auto {

  cursor: pointer;

}



.card-href {

  font-family: var(--bai-jamjuree-font);

}



.opaci-05{

  opacity: 0.5;

}

/* Background Colors CSS - Start ------------------------------*/

.gray-bg {

  background-color: var(--amana-bright-gray);

}

.light-apple-bg {

  background-color: var(--amana-light-apple);

}

.white-bg {

  background-color: var(--amana-white);

}

.black-bg{

  background-color: var(--amana-black);

}

.light-yellow-bg {

  background-color: var(--amana-light-yellow);

}

/* Background Colors CSS - End ------------------------------*/



/* Button CSS - Black btn - Start ------------------------------*/

.tab-button-black {

  padding: clamp(0.4375em, 0.6944444444vw, 0.625em)

    clamp(0.9375em, 2.0833333333vw, 1.875em);

  text-transform: capitalize;

  border: 0;

  position: relative;

  border-radius: 3px;

  overflow: hidden;

  line-height: 1;

}



.tab-button-black span {

  position: relative;

  z-index: 2;

}



.tab-button-black::before {

  content: "";

  position: absolute;

  width: 100%;

  height: 100%;

  left: 0;

  top: 0;

  z-index: 0;

  transition: all 0.25s linear;

  border: 2px solid transparent;

  border-radius: clamp(1.25rem, 2.7777777778vw, 2.5rem);

}



.tab-button-black::after {

  content: "";

  position: absolute;

  width: 0%;

  height: 100%;

  left: 0;

  top: 0;

  z-index: 1;

  transition: all 0.25s linear;

  opacity: 0;

  border: 2px solid transparent;

  border-radius: clamp(1.25rem, 2.7777777778vw, 2.5rem);

  background-color: var(--amana-black);

}



.tab-button-black:hover::before {

  opacity: 0;

}



.tab-button-black:hover::after {

  width: 100%;

  opacity: 1;

  color: var(--amana-white);

}



.tab-button-black.amana-black::before {

  border-color: var(--amana-black);

}



.tab-button-black.hover-amana-black {

  color: var(--amana-black);

}



.tab-button-black:hover {

  color: var(--amana-white);

}



.tab-button-black.hover-amana-black::after {

  border-color: var(--amana-black);

}

.tab-button-black::after {

  width: 0%;

  /* height: 0%; */

}

.tab-button-black:hover::after svg path {

  width: 100%;

  height: auto;

  opacity: 1;

  color: var(--amana-white);

  stroke: var(--amana-white);

}

.tab-button-black:hover svg path {

  color: var(--amana-white);

  stroke: var(--amana-white);

}

/* Button CSS - Black btn - End ------------------------------*/



/* Button CSS - White btn - Start ------------------------------*/

.cus-button-white {

  padding: clamp(0.4375em, 0.6944444444vw, 0.625em)

    clamp(0.9375em, 2.0833333333vw, 1.875em);

  text-transform: capitalize;

  border: 0;

  position: relative;

  border-radius: 3px;

  overflow: hidden;

  line-height: 1;

}



.cus-button-white span {

  position: relative;

  z-index: 2;

}



.cus-button-white::before {

  content: "";

  position: absolute;

  width: 100%;

  height: 100%;

  left: 0;

  top: 0;

  z-index: 0;

  transition: all 0.25s linear;

  border: 2px solid transparent;

  border-radius: clamp(1.25rem, 2.7777777778vw, 2.5rem);

}



.cus-button-white::after {

  content: "";

  position: absolute;

  width: 0%;

  height: 100%;

  left: 0;

  top: 0;

  z-index: 1;

  transition: all 0.25s linear;

  opacity: 0;

  border: 2px solid transparent;

  border-radius: clamp(1.25rem, 2.7777777778vw, 2.5rem);

  background-color: var(--amana-black);

}



.cus-button-white:hover::before {

  opacity: 0;

}



.cus-button-white:hover::after {

  width: 100%;

  opacity: 1;

  color: var(--amana-white);

}



.cus-button-white.amana-white::before {

  border-color: var(--amana-white);

}



.cus-button-white.hover-amana-white {

  color: var(--amana-white);

}



.cus-button-white:hover {

  color: var(--amana-white);

}



.cus-button-white.hover-amana-white::after {

  border-color: var(--amana-black);

}

.cus-button-white::after {

  width: 0%;

  /* height: 0%; */

}

.cus-button-white:hover::after svg path {

  width: 100%;

  height: auto;

  opacity: 1;

  color: var(--amana-white);

  stroke: var(--amana-white);

}

.cus-button-white:hover svg path {

  color: var(--amana-white);

  stroke: var(--amana-white);

}

/* Button CSS - White btn - End ------------------------------*/



/* Button CSS - gold btn - Start ------------------------------*/

.cus-button-gold {

  padding: clamp(0.9375em, 0.6944444444vw, 0.625em)

    clamp(0.9375em, 2.0833333333vw, 1.875em);

  text-transform: capitalize;

  border: 0;

  position: relative;

  border-radius: 3px;

  overflow: hidden;

  line-height: 1;

}



.cus-button-gold span {

  position: relative;

  z-index: 2;

}



.cus-button-gold::before {

  content: "";

  position: absolute;

  width: 100%;

  height: 100%;

  left: 0;

  top: 0;

  z-index: 0;

  transition: all 0.25s linear;

  border: 3px solid var(--amana-gold);

  border-radius: clamp(1.25rem, 2.7777777778vw, 2.5rem);

}



.cus-button-gold::after {

  content: "";

  position: absolute;

  width: 0%;

  height: 100%;

  left: 0;

  top: 0;

  z-index: 1;

  transition: all 0.25s linear;

  opacity: 0;

  border: 2px solid transparent;

  border-radius: clamp(1.25rem, 2.7777777778vw, 2.5rem);

  background-color: var(--amana-gold);

}



.cus-button-gold:hover::before {

  opacity: 0;

}



.cus-button-gold:hover::after {

  width: 100%;

  opacity: 1;

  color: var(--amana-gold);

}



.cus-button-gold.amana-white::before {

  border-color: var(--amana-gold);

}



.cus-button-gold.hover-amana-gold {

  color: var(--amana-gold);

}



.cus-button-gold:hover {

  color: var(--amana-white);

}



.cus-button-gold.hover-amana-white::after {

  border-color: var(--amana-gold);

}

.cus-button-gold::after {

  width: 0%;

  /* height: 0%; */

}

.cus-button-gold:hover::after svg path {

  width: 100%;

  height: auto;

  opacity: 1;

  color: var(--amana-gold);

  stroke: var(--amana-gold);

}

.cus-button-gold:hover svg path {

  color: var(--amana-gold);

  stroke: var(--amana-gold);

}

/* Button CSS - gold btn - End ------------------------------*/


/* Button CSS - telemedicine btn - Start ------------------------------*/

.cus-button-telemedicine {

  padding: clamp(0.9375em, 0.6944444444vw, 0.625em)

    clamp(0.9375em, 2.0833333333vw, 1.875em);

  text-transform: capitalize;

  border: 0;

  position: relative;

  border-radius: 3px;

  overflow: hidden;

  line-height: 1;

}



.cus-button-telemedicine span {

  position: relative;

  z-index: 2;

}



.cus-button-telemedicine::before {

  content: "";

  position: absolute;

  width: 100%;

  height: 100%;

  left: 0;

  top: 0;

  z-index: 0;

  transition: all 0.25s linear;

  border: 3px solid var(--amana-telemedicine-blue);

  border-radius: clamp(1.25rem, 2.7777777778vw, 2.5rem);

}



.cus-button-telemedicine::after {

  content: "";

  position: absolute;

  width: 0%;

  height: 100%;

  left: 0;

  top: 0;

  z-index: 1;

  transition: all 0.25s linear;

  opacity: 0;

  border: 2px solid transparent;

  border-radius: clamp(1.25rem, 2.7777777778vw, 2.5rem);

  background-color: var(--amana-telemedicine-blue);

}



.cus-button-telemedicine:hover::before {

  opacity: 0;

}



.cus-button-telemedicine:hover::after {

  width: 100%;

  opacity: 1;

  color: var(--amana-telemedicine-blue);

}



.cus-button-telemedicine.amana-white::before {

  border-color: var(--amana-telemedicine-blue);

}



.cus-button-telemedicine.hover-amana-telemedicine-blue {

  color: var(--amana-telemedicine-blue);

}



.cus-button-telemedicine:hover {

  color: var(--amana-white);

}



.cus-button-telemedicine.hover-amana-white::after {

  border-color: var(--amana-telemedicine-blue);

}

.cus-button-telemedicine::after {

  width: 0%;

  /* height: 0%; */

}

.cus-button-telemedicine:hover::after svg path {

  width: 100%;

  height: auto;

  opacity: 1;

  color: var(--amana-telemedicine-blue);

  stroke: var(--amana-telemedicine-blue);

}

.cus-button-telemedicine:hover svg path {

  color: var(--amana-telemedicine-blue);

  stroke: var(--amana-telemedicine-blue);

}

/* Button CSS - telemedicine btn - End ------------------------------*/


/*

Common style Classes - End ------------->>

*/



.hero-img-section {

  margin-bottom: clamp(2.5rem, 6.25vw, 5.625rem);

}



.hero-img-section .offer-hero-banner {

  padding: clamp(1.875rem, 3.4722222222vw, 3.125rem)

    clamp(1.875rem, 6.25vw, 5.625rem);

  background-image: var(--offer-bg-img);

  border-radius: clamp(1.25rem, 2.7777777778vw, 2.5rem);

  height: 460px;

  background-repeat: no-repeat;

  background-position: center;

  background-size: cover;

}



.section-header .rht-tabs {

  display: flex;

  justify-content: flex-end;

  align-items: center;

}

.section-header .rht-tabs ul {

  margin: 0 !important;

}



.offers-section .nav-pills {

  gap: 10px;

}



.offers-section .nav-pills .nav-link {

  border-radius: clamp(1.25rem, 2.7777777778vw, 2.5rem);

}



.offers-section .nav-pills .nav-link.active,

.nav-pills .show > .nav-link {

  color: var(--amana-white);

  background-color: var(--amana-black);

}



.offer-cards-area .tab-pane.active {

  display: flex;

}

.offer-cards-area .tab-pane .card-grid-box {

  min-width: 300px;

}

.offer-image {

  width: 100%;

  height: var(--offer-card-img-height);

  border-radius: 20px;

  background-color: var(--amana-bright-gray);

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}

.offer-image img {

  width: auto;

  height: auto;

  width: clamp(3.75rem, 6.25vw, 5.625rem);

  aspect-ratio: 1/1;

  -o-object-fit: contain;

  object-fit: contain;

  -o-object-position: center;

  object-position: center;

  margin: 10px;

}

.offer-card {

  height: 415px;

  background-color: var(--amana-white);

  border-radius: 25px;

}

.offer-card .offer-title {

  font-family: var(--bai-jamjuree-font);

  text-transform: capitalize;

}

.offer-card .offer-details {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  height: calc(100% - var(--offer-card-img-height));

}



.feild-title {

  opacity: 0.4;

  font-family: var(--bai-jamjuree-font);

}



/* offer inner popup CSS - Start ------------------------ */

.modal-header {

  border-bottom: 0px solid transparent;

}

.modal-body {

  padding-top: 0px;

  padding: 0px 100px 50px;

}

.modal-content {

  border-radius: 0px;

  border-color: none;

}

.offer-inner-detail-sec {

  display: flex;

  flex-direction: row;

}



.offer-inner-detail-sec .oid-rht .offer-img {

  display: flex;

  justify-content: center;

  overflow: hidden;

  border-radius: 20px;

  width: 100%;

  height: -webkit-fit-content;

  height: -moz-fit-content;

  height: fit-content;

  background-color: antiquewhite;

}



.offer-inner-detail-sec .oid-rht img {

  height: auto;

  width: 100%;

}

.modal-title {

  font-family: var(--bai-jamjuree-font);

  text-transform: capitalize;

}

.offer-data-box p {

  margin: 0px;

}

.offer-data-box .offer-data {

  text-transform: capitalize;

}

.offer-data-list-item {

  margin-bottom: 10px;

  font-family: var(--pt-sans-font);

}

/* offer inner popup CSS - End ------------------------ */



/* news page CSS - Start ------------------------ */



.news-desc-para {

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 4;

  -webkit-box-orient: vertical;

}

.news-title-para {

  line-height: 1.5rem;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 4;

  -webkit-box-orient: vertical;

}

.news-card {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  border-radius: 20px;

  overflow: hidden;

  height: var(--news-card-height);

  /* height: 100%; */

  min-height: clamp(15rem, 23.9583333333vw, 21.5625rem);

  --news-card-img-height: calc(crz(60, 90, 90) + 10px);

}

.news-card .news-thumb {

  max-height: var(--news-card-thumb-height);

  -o-object-position: center;

  object-position: center;

  -o-object-fit: cover;

  object-fit: cover;

  width: 100%;

}

.news-detail-box {

  height: auto;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}

.news-card-top {

  overflow: hidden;

}

/* news page CSS - End ---------- */



/* addtional CSS for offer include section - Start ---------- */

.black-details-inner {

  padding: clamp(1.875rem, 2.4722222222vw, 3.125rem)

    clamp(1.875rem, 6.25vw, 5.625rem);

  background: var(--amana-black-gray-gradient);

  border-radius: clamp(1.25rem, 2.7777777778vw, 2.5rem);

  align-items: center;

}



.black-details-inner .rht {

  display: flex;

}



.black-details-inner .rht .contact-form .input-group ::-moz-placeholder {

  color: var(--amana-white);

  opacity: 0.5;

  font-weight: 400;

}

.black-details-inner

  .rht

  .contact-form

  .input-group

  ::-webkit-input-placeholder {

  color: var(--amana-white);

  opacity: 0.5;

  font-weight: 400;

}

.black-details-inner .rht .contact-form .input-group :-ms-input-placeholder {

  color: var(--amana-white);

  opacity: 0.5;

  font-weight: 400;

}

.black-details-inner .rht .contact-form .input-group ::-ms-input-placeholder {

  color: var(--amana-white);

  opacity: 0.5;

  font-weight: 400;

}

.black-details-inner

  .rht

  .contact-form

  .input-group

  ::-webkit-input-placeholder {

  color: var(--amana-white);

  opacity: 0.5;

  font-weight: 400;

}

.black-details-inner .rht .contact-form .input-group ::-moz-placeholder {

  color: var(--amana-white);

  opacity: 0.5;

  font-weight: 400;

}

.black-details-inner .rht .contact-form .input-group ::-webkit-input-placeholder {

  color: var(--amana-white);

  opacity: 0.5;

  font-weight: 400;

}

.black-details-inner .rht .contact-form .input-group :-ms-input-placeholder {

  color: var(--amana-white);

  opacity: 0.5;

  font-weight: 400;

}

.black-details-inner .rht .contact-form .input-group ::-ms-input-placeholder {

  color: var(--amana-white);

  opacity: 0.5;

  font-weight: 400;

}

.black-details-inner .rht .contact-form .input-group ::placeholder {

  color: var(--amana-white);

  opacity: 0.5;

  font-weight: 400;

}

.black-details-inner .rht .contact-form .input-group .form-control {

  background-color: transparent;

  border: 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  outline: transparent;

  box-shadow: none;

  border-radius: 0;

  padding-left: 0;

  padding-bottom: clamp(0.625rem, 1.0416666667vw, 0.9375rem);

}

.black-details-inner .rht .contact-form .input-group .form-control:focus {

  color: var(--amana-white);

  --current-color: #fff;

  --current-color-rgb: rgb(255, 255, 255);

}

.black-details-inner .rht .contact-form .input-group + .input-group {

  margin-top: clamp(1.25rem, 2.4305555556vw, 2.1875rem);

}

.black-details-inner .rht .contact-form .submit-btn {

  margin-top: clamp(1.5625rem, 2.4305555556vw, 2.1875rem);

}

.btn span svg {

  width: 40px;

  height: 40px;

}

.btn {

  padding: 0px;

}

.sec-footer {

  display: flex;

  flex-direction: row;

}



.sec-footer > div {

  width: 50%;

}

.sec-footer-rht {

  display: flex;

  justify-content: end;

  align-items: start;

}

.offer-details {

  text-align: left;

}



.word-tail::after {

  content: " ";

  background: url("../images/elements/word-tail.svg");

  display: inline-block;

  position: relative;

  width: 0.7em;

  height: 0.7em;

  background-repeat: no-repeat;

  background-size: contain;

}

.offers-section .word-tail::after {

  top: -0.4em;

  left: -0.2em;

}

/* addtional CSS for offer include section - End ---------- */



/* news inner CSS - Start ---------- */

.article .container{

  position: relative;

}

.back-btn.arrow{

  position: absolute;

  left: -20px;

  top: 10px;

}

.article-title.title {

  font-family: var(--pt-sans-font);

}

.article-image img {

  -o-object-fit: cover;

  object-fit: cover;

  border-radius: 30px;

  height: 20em;

  width: 100%;

}

.article-content p{

  text-align: justify;

}

.article-content p {

  text-align: justify;

}

.article-image {

  float: left;

}



/* news inner CSS - End ---------- */





/* csr article CSS - Start ---------- */

.article-banner-image img{

  border-radius: 5px;

}

.support-logo-area{

  display: block;

}

.support-logo{

  display: inline-block;

  margin: 5px 10px 5px 0px;

}

/* csr article CSS - End ---------- */



/* product page CSS - Start ----------*/

.text-icon{

  height: 25px !important;

  margin-top: 6px !important;

}

.products-section .products-outer .product .product-description .product-description-info .product-description-info-bottom .in .icon{

  max-width: -webkit-fill-available;

}

/* product page CSS - Start ----------*/



/* reports section CSS - Start ----------*/

.report-section .report-grid{





}

.report-section .annual-report-card{

  background-color: var(--amana-cultured);

  color: var(--amana-black);

  transition: background-color 0.3s ease;

}

.report-section .annual-report-card:hover{

  transition: 0.3s;

  background-color: var(--amana-bright-gray);

}

.annual-report-card:hover .download-symbol{

  transition: 0.3s;

  background-color: var(--amana-black);

}

.annual-report-card:hover .download-symbol svg path{

  transition: 0.3s;

  stroke: var(--amana-cultured);

}

.report-section .report-card,

.interim-report-card,

.sub-interim-report-card{

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

  border-radius: 20px;

}

.download-symbol{

  background-color: var(--amana-bright-gray);

  border-radius: 100px;

  width: 36px;

  height: 36px;

  display: flex;

  justify-content: center;

  align-items: center;

  transition: background-color 0.3s ease;

}

.interim-report-section{

  border-radius: 20px;

}



.interim-report-box .collapsed .expand-mark svg rect:first-child {

  transform: rotate(0deg);

  transform-origin: 50%;

  transition: transform 0.3s ease;

  

}

/* .expand */

.interim-report-box .expand-mark svg rect:first-child {

  transition: 0.3s ease;

  transform-origin: 50%;

  transform: rotate(90deg);

}

.interim-report-box{

  border-radius: 20px;

}

.sub-interim-report-card { 

  color: var(--amana-white)

}

.expand-mark{

  display: flex;

  align-items: center;

}

.interim-report-box .download-symbol{

  width: 32px;

  height: 32px;

}

.sub-interim-report-card:hover{

  opacity: 0.9;

}

/* reports section CSS - End ---------- */



/* about CSR popup section CSS - Start ---------- */



.logo_area_csr_popup .logo-item{

  width: 100%;

  max-width: 120px;

  height: auto;

  margin-right: 1em;

}



/* about CSR popup section CSS - End ---------- */











@media (max-width: 1199px) {

  .offer-cards-area .tab-pane .card-grid-box {

    width: 50%;

  }

}

@media (max-width: 991px) {

  .back-btn.arrow{

    position: inherit;

    padding-bottom: 2em;

    display: block;

    left: auto;

  }

  .article .content-box{

    padding-left: 0px;

    padding-right: 0px;

  }

  .article .article-image{

    margin-right: 0px;

  }

  .article-image {

    float: inherit;

  }

}

@media (max-width: 767px) {

  .rht-tabs {

    justify-content: flex-start !important;

  }

  .rht-tabs .nav-pills {

    justify-content: flex-start;

  }

  .offer-cards-area .tab-pane .card-grid-box {

    width: 100%;

  }

  .offer-inner-detail-sec {

    flex-direction: column-reverse;

  }

  .offer-inner-detail-sec .oid-rht img {

    width: 250px;

  }

  .offer-inner-detail-sec .oid-rht {

    padding: 0px;

    margin-bottom: clamp(1.5625rem, 3.4722222222vw, 3.125rem);

  }

  .offer-inner-detail-sec .oid-lft {

    padding: 0px;

  }

  .modal-body {

    padding: 0px 50px 30px;

  }

  .carousel-inner .carousel-item > div {

    display: none;

  }

  .carousel-inner .carousel-item > div:first-child {

    display: block;

  }

  .carousel-inner .carousel-item-end.active,

  .carousel-inner .carousel-item-next {

    transform: translateX(33.333%);

  }

  .carousel-inner .carousel-item-start.active,

  .carousel-inner .carousel-item-prev {

    transform: translateX(-33.333%);

  }

}

@media (max-width: 575px) {

  .article-image img {

    height: 16em;

  }

}

@media (max-width: 480px) {

  .modal-body {

    padding: 0px 30px 30px;

  }

  .offer-inner-detail-sec .oid-rht img {

    width: 200px;

  }

  .article-image img {

    height: 12em;

  }

}







/*--------------------------- Changes CSS - Start ----------------------------------*/

.article .amana-header .offcanvas-trigger .line{

  background-color: var(--amana-black);

}

.comp-switch{

  display: flex;

  justify-content: space-between;

  margin-bottom: 40px;

}

.comp-switch .comp-btn{

  border-radius: 200px;

  width: 100%;

  align-items: center;

  justify-content: center;

  display: flex !important;

}

.comp-switch li{

  width: 48%;

  min-width: 150px;

}

.comp-switch .comp-btn.active{

  border-radius: 200px;

  background-color: var(--amana-black);

}

.comp-switch .comp-btn img{

  vertical-align: middle;

  z-index: 2;

  position: relative;

  padding: 16px 0px;

  width: 70%;

  min-width: 120px;

  max-width: 150px;

}

.comp-switch .comp-btn::before{

  border-radius: 200px;

}

.report-pill{

  margin-top: 30px;

}

.interim-report-section-general, .interim-report-section-life{

  border-radius: 20px;

}



@media (max-width: 992px) {

  .about-amana-inner .cop_container{

    padding-left: 0px;

    padding-right: 0px;

  }

  .comp-switch .comp-btn img{

    padding: 11px 0px;

  }  

}



.empty-box{

  border: 2px dashed gray;

  border-radius: 5px;

  padding: 30px 20px;

  display: flex;

  justify-content: center;

  align-items: center;

}

.empty-box-text{

  text-align: center;

  color: gray;

  margin: 0px;

}



/* .home-awards .award-slider .swiper-slide .slide-inner .name {

  font-size: clamp(0.625rem, 0.8333333333vw, 0.75rem);

  display: block;

  line-height: 1.4;

  margin-top: clamp(0.5rem, 0.8333333333vw, 0.75rem);

} */



#btn-back-to-top {

  position: fixed;

  bottom: 20px;

  right: 20px;

  display: none;

  background-color: var(--amana-apple);

  z-index: 3;

  padding: 8px;

  transition: 0.4s;

}



#btn-back-to-top svg{

  transform: rotate(270deg);

    position: relative;

    top: -3px;

}

@media (max-width: 991px) {

  .offcanvas-header .inner .logo{

    display: none;

  }

  .offcanvas-header .inner .offcanvas-close{

    display: none;

  }

  .offcanvas-header .inner{

    justify-content: center !important;

  }

}



@media (max-width: 768px) {

  .offcanvas-header{

    align-items: flex-start;

  }

  .offcanvas-header .inner .offcanvas-close{

    display: block;

    position: absolute !important;

    left: 0px !important;

    top: 10px !important;

  }

  .offcanvas-header .inner .offcanvas-close svg{

    width: 25px !important;

  }

}



@media (max-width: 575px) {

  .home-awards .award-slider .swiper-slide .slide-inner .circle, .home-awards .award-slider .swiper-slide.swiper-slide-visible .slide-inner .circle{

    width: 35% !important;

  }

  .home-top-slider .txt-container .txt .bottom .l-sec .logo{

    padding: clamp(0.625rem, 1.7361111111vw, 1.5625rem) clamp(0.25rem, 2.7777777778vw, 2.5rem) !important;

  }

}

.header-bg-canvas{

  width: 100vw;

  max-width: 100%;

  height: 0vh;

  transition: 0.3s;

  background-color: transparent;

  opacity: 0;

  z-index: 0;

  position: fixed;

  bottom: 0;

  left: 0;

}

.header-bg-canvas.active{

  height: 100vh;

  transition: 0.3s;

  background-color: var(--amana-black);

  opacity: 0.5;

  z-index: 100;

}



.current-openings-inner #careers .career .top{

  margin-bottom: 20px;

}



/*------------------recaptcha------------------------------*/



 .grecaptcha-badge {

  width: 70px !important;

  overflow: hidden !important;

  transition: all 0.3s ease !important;

  left: 4px !important;

}

.grecaptcha-badge:hover {

  width: 256px !important;

}





/*--------------------------- Changes CSS - End ----------------------------------*/


/* blog page CSS - Start ------------------------ */


.blog-desc-para {

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 4;

  -webkit-box-orient: vertical;

}

.blog-title-para {

  line-height: 1.5rem;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 4;

  -webkit-box-orient: vertical;

}

.blog-card {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  border-radius: 20px;

  overflow: hidden;

  height: var(--news-card-height);

  min-height: clamp(15rem, 23.9583333333vw, 21.5625rem);

  --news-card-img-height: calc(crz(60, 90, 90) + 10px);

}

.blog-card .blog-thumb {

  max-height: var(--news-card-thumb-height);

  -o-object-position: center;

  object-position: center;

  -o-object-fit: cover;

  object-fit: cover;

  width: 100%;

}

.blog-detail-box {

  height: auto;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}

.blog-card-top {

  overflow: hidden;

}

/* blog page CSS - End ---------- */