/* 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 ***********************************/
      
/********************achraf**********/
      :root{
  --iso-red:#B02030;
  --iso-dark:#202020;
  --iso-grey:#B0B0B0;
  --iso-white:#fff;
  --iso-soft:#F4F4F4;
  --iso-radius:22px;
  --iso-shadow: 0 18px 60px rgba(0,0,0,.18);
}

.iso-hero{
  position:relative;
  min-height:100vh;
  color:var(--iso-white);
  background:var(--iso-dark);
  overflow:hidden;
}

.iso-hero-bg{ position:absolute; inset:0; pointer-events:none; }
.iso-noise{ position:absolute; inset:-20%; width:140%; height:140%; opacity:.55; mix-blend-mode:overlay; }
.iso-grid{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity:.20;
  transform: translateZ(0);
}
.iso-glow{
  position:absolute; width:56vmax; height:56vmax; border-radius:50%;
  filter: blur(38px);
  opacity:.55;
  animation: isoFloat 10s ease-in-out infinite;
}
.iso-glow-1{ left:-12vmax; top:-14vmax; background: radial-gradient(circle at 30% 30%, var(--iso-red), transparent 60%); }
.iso-glow-2{ right:-14vmax; bottom:-18vmax; background: radial-gradient(circle at 70% 70%, rgba(255,255,255,.22), transparent 60%); animation-duration: 13s; }

@keyframes isoFloat{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(2vmax, -1.5vmax, 0) scale(1.05); }
}

.iso-hero-wrap{
  position:relative;
  max-width: 1240px;
  margin:0 auto;
  padding: 110px 22px 46px;
}

.iso-hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 18px;
}

.iso-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  font-weight:600;
  letter-spacing:.2px;
}
.iso-badge .dot{
  width:10px;height:10px;border-radius:50%;
  background: var(--iso-red);
  box-shadow: 0 0 0 6px rgba(176,32,48,.18);
}

.iso-controls{ display:flex; gap:10px; }
.iso-btn{
  width:44px;height:44px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  transition:.2s ease;
}
.iso-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }

.iso-slider{ position:relative; }
.iso-track{ position:relative; }

.iso-slide{
  display:none;
  opacity:0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
}
.iso-slide.is-active{
  display:block;
  opacity:1;
  transform: translateY(0);
}

.iso-slide-inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 34px;
  align-items:center;
  padding: 26px;
  border-radius: var(--iso-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: var(--iso-shadow);
  backdrop-filter: blur(14px);
}

.iso-kicker{
  margin:0 0 10px;
  color: rgba(255,255,255,.82);
  font-weight:600;
  letter-spacing:.4px;
}

.iso-title{
  margin:0 0 14px;
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.8px;
}
.iso-title .accent{ color: var(--iso-red); text-shadow: 0 10px 30px rgba(176,32,48,.22); }

.iso-desc{
  margin: 0 0 18px;
  color: rgba(255,255,255,.84);
  font-size: 16px;
  line-height:1.55;
  max-width: 56ch;
}
.iso-desc b{ color:#fff; }

.iso-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom: 16px; }
.iso-primary, .iso-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  font-weight:700;
  text-decoration:none;
  transition:.2s ease;
  border:1px solid transparent;
}
.iso-primary{
  background: var(--iso-red);
  color:#fff;
  box-shadow: 0 14px 34px rgba(176,32,48,.28);
}
.iso-primary:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.iso-ghost{
  background: rgba(255,255,255,.06);
  color:#fff;
  border-color: rgba(255,255,255,.16);
}
.iso-ghost:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }

.iso-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.iso-chips span{
  font-size: 13px;
  color: rgba(255,255,255,.88);
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
}

.iso-media{ position:relative; }
.iso-media-frame{
  position:relative;
  border-radius: calc(var(--iso-radius) + 10px);
  overflow:hidden;
  min-height: 420px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}
.iso-media-img{
  position:absolute; inset:0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  filter: saturate(1.05) contrast(1.02);
  will-change: transform;
}
.iso-media-strokes span{
  position:absolute;
  inset:auto;
  border:1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  opacity:.75;
}
.iso-media-strokes span:nth-child(1){ inset: 16px; }
.iso-media-strokes span:nth-child(2){ inset: 32px; opacity:.55; }
.iso-media-strokes span:nth-child(3){ inset: 48px; opacity:.35; }

.iso-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top: 14px;
}

.iso-dots{ display:flex; gap:10px; flex-wrap:wrap; }
.iso-dot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.20);
  cursor:pointer;
  transition:.2s ease;
}
.iso-dot.is-active{
  width:26px;
  background: var(--iso-red);
  border-color: rgba(176,32,48,.55);
  box-shadow: 0 0 0 6px rgba(176,32,48,.18);
}

.iso-progress{
  width: 220px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
}
.iso-progress .bar{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--iso-red), rgba(255,255,255,.55));
}

.reveal{
  display:inline-block;
  transform: translateY(18px);
  opacity:0;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .55s ease;
}
.iso-slide.is-active .reveal{
  transform: translateY(0);
  opacity:1;
}
.iso-slide.is-active .reveal:nth-child(1){ transition-delay:.02s; }
.iso-slide.is-active .reveal:nth-child(2){ transition-delay:.10s; }
.iso-slide.is-active .reveal:nth-child(3){ transition-delay:.18s; }
.iso-slide.is-active .reveal:nth-child(4){ transition-delay:.26s; }

@media (max-width: 980px){
  .iso-slide-inner{ grid-template-columns: 1fr; }
  .iso-media-frame{ min-height: 320px; }
  .iso-progress{ width: 160px; }
}