.bg1
{
	background-color:#d9251d;

}


.bg2
{
	background-color:#000;

}

.text-justify
{
	text-align:justify!important;

}

.text-center
{
	text-align: center!important;
}


.pt
{

	font-size: 35px!important;
	line-height: 40px!important;
	margin-bottom: 10px!important;
	font-weight: 700!important;
}



::selection {
    background-color: #d9251d;
    color: #fff;
}


::-moz-selection {
  background: #d9251d;
  color: #fff;
  text-shadow: none;
}

::-webkit-scrollbar {
  background-color: #ccc;
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background-color:#d9251d;
}



.foo{

	margin-top: 20px!important;
}


.slidert
{
	font-size: 50px!important;
	line-height: 55px!important;
}




/*======= keyframes & Animation =======*/
@-webkit-keyframes sticky {
    0% {
        top: -200px;
    }

    100% {
        top: 0;
    }
}

@keyframes sticky {
    0% {
        top: -200px;
    }

    100% {
        top: 0;
    }
}

@-webkit-keyframes float-bob-x {
    0% {
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }

    50% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

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

@keyframes float-bob-x {
    0% {
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }

    50% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

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

@-webkit-keyframes float-bob-y {
    0% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    50% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

@keyframes float-bob-y {
    0% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    50% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

@-webkit-keyframes preloader {
    0% {
        transform: perspective(160px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg);
    }

    50% {
        transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
        -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
    }

    100% {
        transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
        -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
    }
}

@keyframes preloader {
    0% {
        transform: perspective(160px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg);
    }

    50% {
        transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
        -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
    }

    100% {
        transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
        -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
    }
}

@-webkit-keyframes pulse-border {
    0% {
        -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}

@keyframes pulse-border {
    0% {
        -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}

.animate-float-bob-x {
    -webkit-animation-name: float-bob-x;
    animation-name: float-bob-x;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

.animate-float-bob-y {
    -webkit-animation-name: float-bob-y;
    animation-name: float-bob-y;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}





/*============= COMMON CSS AREA ENDS===============*/
.image-anime {
  position: relative;
  overflow: hidden;
}

.image-anime:after {
  content: "";
  position: absolute;
  width: 200%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 1;
}

.image-anime:hover:after {
  height: 250%;
  transition: all 600ms linear;
  background-color: transparent;
}






  /* ─────────────────────────────────────────
       CSS VARIABLES  (swap red shades here)
    ───────────────────────────────────────── */
    :root {
      --pf-red:        #d9251d;
      --pf-red-dark:   #000000;
      --pf-red-light:  #fdf0f2;
      --pf-text:       #333333;
      --pf-subtext:    #777777;
      --pf-border:     #eeeeee;
      --pf-white:      #ffffff;
      --pf-shadow:     0 8px 32px rgba(0,0,0,0.18);
      --pf-radius:     14px;
      --pf-btn-size:   54px;
    }

    /* ─────────────────────────────────────────
       FLOATING TRIGGER BUTTON
    ───────────────────────────────────────── */
    #cta-trigger {
      position: fixed;
      bottom: 28px;
      right: 24px;
      width: var(--pf-btn-size);
      height: var(--pf-btn-size);
      border-radius: 50%;
      background: var(--pf-red);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 18px rgba(232,23,58,0.45);
      z-index: 9999;
      transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
      outline: none;
    }
    #cta-trigger:hover {
      background: var(--pf-red-dark);
      transform: scale(1.08);
      box-shadow: 0 6px 24px rgba(232,23,58,0.55);
    }
    #cta-trigger i {
      color: var(--pf-white);
      font-size: 22px;
      transition: transform 0.35s cubic-bezier(.4,0,.2,1);
    }
    #cta-trigger.active i {
      transform: rotate(135deg);
    }

    /* Pulse ring */
    #cta-trigger::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 2px solid var(--pf-red);
      animation: pulse-ring 2s ease-out infinite;
    }
    @keyframes pulse-ring {
      0%   { transform: scale(1);   opacity: 0.7; }
      70%  { transform: scale(1.55); opacity: 0;   }
      100% { transform: scale(1.55); opacity: 0;   }
    }

    /* ─────────────────────────────────────────
       POPUP PANEL
    ───────────────────────────────────────── */
    #cta-panel {
      position: fixed;
      bottom: 94px;           /* sits just above the trigger */
      right: 24px;
      width: 310px;
      background: var(--pf-white);
      border-radius: var(--pf-radius);
      box-shadow: var(--pf-shadow);
      z-index: 9998;
      overflow: hidden;
      /* closed state */
      opacity: 0;
      transform: translateY(18px) scale(0.97);
      transform-origin: bottom right;
      pointer-events: none;
      transition:
        opacity     0.28s cubic-bezier(.4,0,.2,1),
        transform   0.28s cubic-bezier(.4,0,.2,1);
    }
    #cta-panel.open {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: all;
    }

    /* Close (×) inside panel */
    #cta-close {
      position: absolute;
      top: 10px;
      right: 12px;
      background: none;
      border: none;
      font-size: 20px;
      color: #aaa;
      cursor: pointer;
      line-height: 1;
      padding: 0;
      z-index: 1;
      transition: color 0.15s;
    }
    #cta-close:hover { color: var(--pf-red); }

    /* ─────────────────────────────────────────
       OPTION ROWS
    ───────────────────────────────────────── */
    .cta-options {
      padding: 10px 0 4px;
    }

    .cta-option {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 13px 20px;
      text-decoration: none;
      cursor: pointer;
      background: var(--pf-white);
      border: none;
      width: 100%;
      text-align: left;
      transition: background 0.18s;
    }
    .cta-option:hover {
      background: var(--pf-red-light);
    }
    .cta-option + .cta-option {
      border-top: 1px solid var(--pf-border);
    }

    /* Icon circle */
    .cta-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1.5px solid var(--pf-border);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: var(--pf-white);
      transition: border-color 0.18s, background 0.18s;
    }
    .cta-option:hover .cta-icon {
      border-color: var(--pf-red);
      background: var(--pf-red-light);
    }
    .cta-icon i {
      font-size: 17px;
      color: var(--pf-text);
      transition: color 0.18s;
    }
    .cta-option:hover .cta-icon i {
      color: var(--pf-red);
    }

    /* Text */
    .cta-label {
      font-size: 13px;
      color: var(--pf-subtext);
      font-weight: 400;
      line-height: 1.2;
    }
    .cta-label span {
      font-size: 14.5px;
      font-weight: 600;
      color: var(--pf-red);
      display: block;
    }

    /* ─────────────────────────────────────────
       STILL NEED HELP  –  BOTTOM BANNER
    ───────────────────────────────────────── */
    .cta-help {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 20px;
      background: var(--pf-red);
      cursor: pointer;
      text-decoration: none;
      transition: background 0.18s;
    }
    .cta-help:hover {
      background: var(--pf-red-dark);
    }
    .cta-help i {
      font-size: 22px;
      color: var(--pf-white);
      flex-shrink: 0;
    }
    .cta-help-text {
      line-height: 1.25;
    }
    .cta-help-text strong {
      display: block;
      font-size: 14.5px;
      font-weight: 700;
      color: var(--pf-white);
    }
    .cta-help-text small {
      font-size: 12px;
      color: rgba(255,255,255,0.82);
    }

    /* ─────────────────────────────────────────
       STAGGER ANIMATION for options
    ───────────────────────────────────────── */
    .cta-option,
    .cta-help {
      opacity: 0;
      transform: translateX(12px);
      transition:
        opacity   0.22s ease,
        transform 0.22s ease,
        background 0.18s;
    }
    #cta-panel.open .cta-option,
    #cta-panel.open .cta-help {
      opacity: 1;
      transform: translateX(0);
    }
    #cta-panel.open .cta-option:nth-child(1) { transition-delay: 0.07s; }
    #cta-panel.open .cta-option:nth-child(2) { transition-delay: 0.12s; }
    #cta-panel.open .cta-option:nth-child(3) { transition-delay: 0.17s; }
    #cta-panel.open .cta-help               { transition-delay: 0.22s; }








@media only screen and (max-width: 767px){
	
	
	.about-three{
	position:relative;
	overflow:hidden;
	padding:30px 0px 50px!important;
}


.foo{

	margin-top: 0px!important;
}

.main-footer{
	position:relative;
	padding-top:50px;
	

}

.slidert
{
	font-size: 30px!important;
	line-height: 35px!important;
}








}