/* white you custom css code here. only css code will work */

/******************* body color ***************************************/
  body {
    background-image: url("https://wml.quikol.com/assets/uploads/media-uploader/bgg3.png");
  }

/***********************added for values on homepage ***********************************/
 
.latest-cause-area .row {
  max-width:90%;
  margin-left:5%;
}

.latest-cause-area .row .col-lg-4 {
  flex-basis: 25%; 
  padding: 0px;
  box-sizing: border-box;
}

.latest-cause-area .container{
   display: flex;
   flex-wrap:wrap;
}

.latest-cause-area .container .row .col-lg-4{
  flex-grow:1;
  flex-basis:200;
}
 
.political-single-what-we-cover-item .thumb img {
	-webkit-transform: scale(1.25);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.political-single-what-we-cover-item .thumb :hover img {
	-webkit-transform: scale(0.75);
	transform: scale(0.75);
}

/********************image featured product on homepage***************************************/

  .political-cta-area-wrapper {
    background-size: cover;
    padding-top: 20px; /* Adjust as needed for mobile */
    padding-bottom: 10px; /* Adjust as needed for mobile */
    margin-bottom: 20px; /* Adjust as needed for mobile */
}

.political-cta-area-wrapper::before,
.political-cta-area-wrapper::after {
    content: "";
    position: absolute;
    width: calc(100% - 40px); /* Adjust width as needed */
    height: 2px; /* Border thickness */
    background-color: #0033ab; /* Border color */
    top: 0;
}

/* Media query for screens smaller than or equal to 990px (including mobile) */
@media (max-width: 990px) {
    .political-cta-area-wrapper {
        padding-top: 10px; /* Adjust padding for smaller screens */
        padding-bottom: 5px; /* Adjust padding for smaller screens */
        margin-bottom: 10px; /* Adjust margin for smaller screens */
    }

    /* Optionally, adjust other styles as needed for smaller screens */
    .cta-area-inner {
        /* Example: Reduce font size for smaller screens */
        font-size: 16px;
    }
}

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

.medical-about-area .right-content-area img {
    transition: transform 0.5s ease, opacity 0.5s ease;
  }

.medical-about-area .right-content-area:hover img {
    transform: scale(1.2);
    opacity: 1;
  }

.medical-about-area .right-content-area img {
    transform: scale(0.9);
    opacity: 0.8;
  }
/*------- Offer-item-wrap ---------------------------------------------
.offer-item-wrap {
    align-self: flex-end;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
}
.offer-item-wrap:hover {
    animation-name: bounce;
    animation-timing-function: ease;
}
@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-50px); }
  100% { transform: translateY(0); }
}
*/
.offer-item-wrap {
  transition: transform 0.3s;
}

.offer-item-wrap:hover {
  transform: scale(1.1);
}

/*------- Heart Pulse ---------------------------------------------*/

.right-image {
  transform: perspective(500px) rotateX(30deg) rotateY(30deg);
}

.right-image {
  animation:  pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  
  50% {
    transform: scale(1.2);
  }
  
  100% {
    transform: scale(1);
  }
}

/*------- Animation Box ---------------------------------------------*/
.box {
      border-radius: 20px;
      box-shadow:  0 0 0 #cccccc,
                   0 0 0 #ffffff,
                    10px 10px 10px #cccccc inset,
                    -10px -10px 10px #ffffff inset;
      animation: anime 3s cubic-bezier(0.16, 1, 0.3, 1) 1s infinite alternate;
      /* animation-fill-mode: forwards; */
    }

    @keyframes anime {
      0% {
        width: 60px;
        height: 60px;
        box-shadow:  0 0 0 #cccccc,
                     0 0 0 #ffffff,
                      10px 10px 10px #cccccc inset,
                      -10px -10px 10px #ffffff inset;
      }
      25% {
        width: 60px;
        height: 60px;
        background: #f8f8f8;
        box-shadow:  10px 10px 10px #cccccc,
                     10px 10px 10px #ffffff,
                     0 0 0 #cccccc inset,
                     0 0 0 #ffffff inset;
      }
      50% {
        width: 60px;
        height: 240px;
        background: #f8f8f8;
        box-shadow:  10px 10px 10px #cccccc,
                     10px 10px 10px #ffffff,
                     0 0 0 #cccccc inset,
                     0 0 0 #ffffff inset;
      }
      100% {
        width: 480px;
        height: 240px;
        background: #fafafa;
        box-shadow:  40px 40px 40px #cccccc,
                     0 0 0 #ffffff,
                     0 0 0 #cccccc inset,
                     2px 2px 2px #ffffff inset;
      }
      
 /**************** Header Health care right-image-wrap **********************************/     
.right-image-wrap{       
       /* animation: balance 2s infinite; */
  		animation: rotate 4s infinite linear;
}

@keyframes rotate {
  0% {
    transform: rotateY(3deg);
  }
  
  100% {
    transform: rotateY(360deg);
  }
}
  
/*****************************Page HEALTHCARE ***********************************/

      
/*****************************END Page HEALTHCARE ***********************************/