/* What is term insurance css start */
/* .what-is-term-insu .container {
  padding-top: 50px;
  padding-bottom: 50px;
} */
.whatisti section {
  padding-block: 50px;
}

.whatisti .dsp-n{
  display: none;
}

.whatisti .image-replace{
  height: 100%;
  width: 100%;
}

/* NEEDED TO FIX THE P TAG MARGIN-BOTTOM AS IT IS OVERWRITTEN FROM SOME OTHER CSS START*/
.whatisti p {
  margin-bottom: 1rem;
  font-size: 16px;
  line-height: 20px;
  color: #454545;
  font-weight: 300;
}

/* NEEDED TO FIX THE P TAG MARGIN-BOTTOM AS IT IS OVERWRITTEN FROM SOME OTHER CSS END*/

.wht-term-insu-1 {
  padding-right: 100px;
  text-align: justify;
}

/* .wht-term-insu-2{background-image: url(clientlib/img/tv-bg.svg);background-size: contain;background-repeat: no-repeat;background-position: 0px 170px;height: 600px;} */
.tv-main {
  height: 498px;
}

.animateTerm .tv-main {
  height: unset;
}

.tv-bg {
  position: relative;
  z-index: 1;
  width: 100%;
  top: -208px;
}

.tv-frame {
  position: relative;
  z-index: 2;
}

.tv-frame .btn-sm {
  padding: 2px 4px;
  font-size: 10px;
}

.tv-btn-wrap {
  background-color: #233253;
  width: max-content;
  padding: 2px 5px 5px 5px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  margin: 0 auto;
}

.whatisti .sofa {
  position: relative;
  z-index: 1;
  top: -485px;
  left: -132px;
  display: block;
  left: 0;
  width:75%;
  margin: 0 auto;
}

.whatisti .tv{
  border: 10px solid #005E9E;
  border-radius: 4px;
  -webkit-box-shadow: 0px -2px 12px 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px -2px 12px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0px -2px 12px 3px rgba(0, 0, 0, 0.3);
}

.whatisti .iframe-wrapper{
  height: 238px;
  position: relative;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.whatisti .youtube_icon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -34px;
  margin-top: -24px;
}

.what-is-term-insu iframe {
  width: 100%;
  height: 100%;
}


.wht-term-insu-1 {
  padding-right: 100px;
  text-align: justify;
}

/* .wht-term-insu-2{background-image: url(clientlib/img/tv-bg.svg);background-size: contain;background-repeat: no-repeat;background-position: 0px 170px;height: 600px;} */


.term-family {
  position: relative;
  z-index: 1;
  top: 10px;
}

.star1 {
  position: absolute;
  right: 10%;
  top: 10%;
  z-index: 2;
  width: 10%;
  animation: blink-it-man 2.5s infinite ease-in-out;
}

.star2 {
  position: absolute;
  right: 34%;
  top: 1%;
  z-index: 2;
  width: 5%;
  animation: blink-it-man 1.2s infinite ease-in-out;
}

.star3 {
  position: absolute;
  right: 70%;
  top: 4%;
  z-index: 2;
  width: 5%;
  animation: blink-it-man 1.4s infinite ease-in-out;
}

.star4 {
  position: absolute;
  left: 4%;
  top: 33%;
  z-index: 2;
  width: 4%;
  animation: blink-it-man 1.6s infinite ease-in-out;
}

.star5 {
  position: absolute;
  right: 75%;
  top: 20%;
  z-index: 2;
  width: 3%;
  animation: blink-it-man 1.8s infinite ease-in-out;
}

.star6 {
  position: absolute;
  right: 11%;
  top: 40%;
  z-index: 2;
  width: 4%;
  animation: blink-it-man 2s infinite ease-in-out;
}

.cloud1 {
  position: absolute;
  right: 72%;
  top: 6%;
  z-index: 2;
  width: 15%;
  animation: cloud-move 8s infinite alternate ease-in-out;
}

.cloud2 {
  position: absolute;
  right: 82%;
  top: 17%;
  z-index: 3;
  width: 18%;
  animation: cloud-move 8s infinite alternate-reverse ease-in-out;
}

.cloud3 {
  position: absolute;
  left: 68%;
  animation: cloud3-move 15s infinite alternate ease-in-out;
}

.moon {
  position: absolute;
  right: 78%;
  top: 10%;
  z-index: 2;
  width: 10%;
}


@keyframes blink-it-man {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.star2 {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.star3 {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.star4 {
  -webkit-animation-delay: 0.10s;
  animation-delay: 0.10s;
}

.star5 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.star5 {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}


@keyframes cloud-move {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(50px);
  }
}

@keyframes cloud3-move {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-300px);
  }
}

.cloud2 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.cloud3 {
  -webkit-animation-delay: 1s;
  animation-delay: 0.6s;
}



@media screen and (min-width: 100px) and (max-width: 1023px) {
  .page-heading {
    font-size: 34px !important;
  }

}


@media screen and (max-width:1280px) {
  .wht-term-insu-1 {
    padding-right: 60px;
  }

  .tv-bg {
    position: relative;
    z-index: 1;
    width: 430px;
    top: -250px;
  }

  .whatisti .tv-bg{
    top: -208px;
  }

}

@media screen and (max-width: 1200px){
.whatisti .tv-bg {
    top: -240px;
    width: 100%;
}


.whatisti .sofa {
  top: -507px;
}

}

@media screen and (max-width:767px) {
  .whatisti .sec-spc-top {
    padding-top: 20px;
  }
  .whatisti .sec-spc-btm {
    padding-bottom: 20px;
  }
  .whatisti .tv-bg {
    top: -217px;
    left: 0;
    
  }

  .wht-term-insu-1 {
    padding-right: 15px;
  }


}


@media screen and (max-width:480px) {
  .why-do-need .card .circle-number {
    top: 15px;
    left: -5px;

  }

  .wht-term-insu-1 {
    text-align: center;
  }


}



@media screen and (min-width: 100px) and (max-width: 1023px) {
  .page-heading {
    font-size: 34px !important;
  }

  .animateTerm .tv-main .term-family {
    margin-bottom: 10px;
  }


}


@media screen and (max-width:1280px) {
  .wht-term-insu-1 {
    padding-right: 60px;
  }
  .whatisti .sec-title{
    font-size: 24px;
  }
  .tv-bg {
    position: relative;
    z-index: 1;
    width: 430px;
    top: -250px;
  }



}



@media screen and (max-width:767px) {
  .tv-bg {
    top: -217px;
    left: -15px;
    width: 100%;
  }


  .wht-term-insu-1 {
    padding-right: 15px;
  }


}


@media screen and (max-width:480px) {
  .why-do-need .card .circle-number {
    top: 15px;
    left: -5px;

  }

  .wht-term-insu-1 {
    text-align: center;
  }


}

/* What is term insurance css end */

/* BOOTSTRAP CSS RECALL DUE TO SOME UNKNOWN ISSUE START */

@media (min-width: 992px) {

  .what-is-term-insu .col-lg-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }

}

/* BOOTSTRAP CSS RECALL DUE TO SOME UNKNOWN ISSUE END */

/*css for red color button start*/
.whatisti .btnRed {
  background: red;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  border: 1px solid #ed1c24;
  height: 30px;
  padding: 5px 18px 26px 18px;
  min-width: 104px;
}

.whatisti .btnRed:focus {
  box-shadow: unset;
}

.whatisti .btnRed:hover {
  color: white;
  box-shadow: 0 5px 7px rgb(228 24 32 / 40%);
}
/*css for red color button end*/

/*css for white color button start*/
.whatisti .btnTransparent {
  background: transparent;
  color: red;
  border-radius: 4px;
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  border: 1px solid #ed1c24;
  height: 30px;
  padding: 5px 18px 26px 18px;
  min-width: 104px;
}

.whatisti .btnTransparent:focus {
  box-shadow: unset;
}

.whatisti .btnTransparent:hover {
  color: #ed1c24;
  box-shadow: 0 5px 7px rgb(228 24 32 / 40%);
}
/*css for white color button end*/

@media screen and (max-width:768px) {

  .whatisti .sofa {
    width: 80%;
    top: -492px;
  }
}

/* .whatisti .sec-spc-btm{
  padding-bottom: 50px;
}
.whatisti .sec-spc-top{
  padding-top: 50px;
} */

.whatisti .version-2 .container {
  max-width: 1200px;
}

.whatisti .version-2 .tv-main {
  flex: unset;
  width: 60%;
  max-width: 60%;
}

.whatisti .version-2 .wht-term-insu-1 {
  flex: unset;
  width: 40%;
  max-width: 40%;
  padding-right: 0px;
}

.benefits-section {
  padding: 60px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.benefits-container {
  position: relative;
  margin: 0 auto;
}

.benefit-card {
  border-radius: 16px;
  background: linear-gradient(180deg, #1260A2 0%, #ED1F29 100%);
  position: absolute;
  width: 270px;
  padding: 6px;
  z-index: 2;
}

.benefit-card-overlay {
  min-height: 80px;
  border-radius: 10px;
  display: flex;
  align-items: stretch;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  background-color: #fff;
  overflow: hidden;
}

.benefit-card-img {
  flex: none;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #E2F2FF;
}

.benefit-card img {
  width: 60%;
  height: auto;
}

.benefit-card-content {
  width: calc(100% - 50px);
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  padding: 0px 10px;
}

.benefit-card-content p {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 0px !important;
}

.benefits-center {
  background: linear-gradient(180deg, #1260A2 0%, #ED1F29 100%);
  clip-path: polygon(
    25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%
  );
  padding: 4px;
}

.hexagon {
  width: 240px;
  height: 200px;
  background: #fff;
  clip-path: polygon(
    25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%
  );
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

.hexagon img {
  max-width: 70%;
  max-height: 70%;
}

.double-arrow {
  display: flex;
  justify-content: center;
}

.double-arrow-img {
  width: 20px;
  height: auto;
  transition: all 0.5s ease;
}

.benefit-card:nth-child(1) {
  top: -60px;
  right: 60%;
}

.benefit-card:nth-child(2) {
  top: -60px;
  left: 60%;
}

.benefit-card:nth-child(3) {
  top: 50%;
  left: -230px;
  transform: translateY(-50%);
}

.benefit-card:nth-child(4) {
  top: 50%;
  right: -230px;
  transform: translateY(-50%);
}

.benefit-card:nth-child(5) {
  bottom: -60px;
  right: 60%;
}

.benefit-card:nth-child(6) {
  bottom: -60px;
  left: 60%;
}

@media (min-width: 768px) {
  .row-reverse {
    flex-direction: row-reverse;
  }
}

@media (max-width: 768px) {
  .whatisti .layout-wrap {
    flex-direction: column-reverse;
  }

  .benefits-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .benefits-section {
    padding: 20px 0px;
  }

  .benefit-card {
    width: 100%;
    position: static;
  }

  .benefit-card:nth-child(3) {
    transform: translateY(0px);
  }

  .benefit-card:nth-child(4) {
    transform: translateY(0px);
  }

  .hexagon,
  .benefits-center {
   display: none;
  }

  .whatisti .version-2 .tv-main,
  .whatisti .version-2 .wht-term-insu-1  {
    width: 100%;
    max-width: 100%;
  }

  .whatisti .version-2 .wht-term-insu-1 {
    padding-right: 15px;
  }
}