@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Playwrite+GB+J+Guides:ital@0;1&family=Playwrite+ZA:wght@100..400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Coda:wght@400;800&family=Noto+Sans+SC:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@300&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;500;600&display=swap');

html,
body {
  /* height: 100%;  */
  width: 100% !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
}






.cavv {
  width: 100vw;
  height: 20px;
  background-color: rgba(85, 56, 3, 0.445);
  font-size: 1rem;
  padding: 10px;
  font-weight: 600;
  color: rgba(107, 3, 3, 0.76);
  box-sizing: border-box;
}

/* project transparency  */

.ttcc2 {
  width: 80vw;
  height: 150px;
  background-color: rgba(253, 253, 253, 0.774);
  box-shadow: 0 5px 10px rgba(1, 33, 54, 0.575);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: orangered;
}

.ttcc2:hover {
  transition: 0.3s ease-in;
  box-shadow: 0 0px 2px rgba(1, 33, 54, 0.575);
  border-radius: 10px;
}

.ourss {
  color: #424242;
  font-size: 1rem;
  padding: 10px;
}

.ttcc2 img {
  width: 5%;
}

.ttcc3 {
  width: 90vw;
  height: auto;
  background-color: rgba(221, 221, 221, 0.699);
  margin-top: 10px;
  padding-top: 20px;
  padding-bottom: 50px;
}

@media (max-width: 1185px) {
  .ttcct {
    font-size: 16vw;
    padding-top: 15vh;
    color: rgba(37, 37, 37, 0.596);
  }

  .ttcc3 {
    width: 90vw;
    margin-top: -80px;
  }
}

@media (max-width: 796px) {
  .ttcc2 img {
    width: 10%;
  }
}

/* project transparency ends */

/* home animation */

.contactdiv2 {
  height: 80px;
  width: 100vw;
  /* background-image: url('../images/nnn.jpg'); */
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  margin-top: 0;
  display: flex;
  padding-left: 5px;
}

.contactdiv2 h3 {
  color: rgb(167, 128, 0);
  font-size: 2vw;
  font-weight: 400;
  animation: slider0 5s infinite linear;
  font-family: "Poppins", sans-serif;
  font-family: impact;
}

@keyframes slider0 {
  10% {
    font-size: 3.2vw;
    color: rgb(32, 0, 0);
  }
  33% {
    font-size: 3.1vw;
  }
  67% {
    color: rgb(0, 86, 112);
    font-size: 3.5vw;
  }
  99% {
    color: orangered;
    font-size: 3.3vw;
  }
}

.contactdiv3 {
  height: 80px;
  width: auto;
  padding-top: 2rem;
  font-size: 1.7rem;
  padding-left: 5rem;
  padding-right: 5rem;
  background-color: rgb(0, 66, 165);
  place-content: center;
  float: right;
  margin-bottom: 10px;
  margin-right: 10rem;
  color: orange;
}

.carde {
  width: auto;
  height: 80px;
}

.ctct {
  width: 90vw;
  height: auto;
  display: flex;
}

@media (max-width: 714px) {
  .ctct {
    display: block;
  }
}

.dividerk {
  width: 100vw;
  height: 50px;
  background-color: rgb(231, 183, 25);
}

.serv1 {
  padding: 50px;
  padding-top: 30px;
  padding-bottom: 50px;
  border-bottom-left-radius: 50px;
  border-top-right-radius: 50px;
  background-color: #f5f5f5da;
  text-align: center;
}

.serv1:hover {
  transition: 0.3s ease-in;
  background-color: #d0f2ffef;
}

.who {
  color: rgb(22, 22, 22);
  line-height: 130%;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 15px;
}


/* TRUSTED PARTNERS STARTS */
 @keyframes slidesxyzaffin {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
    }

    .logosAffin {
    overflow: hidden;
    padding: 30px 0px;
    white-space: nowrap;
    position: relative;
    display: flex;
    }

    .logosAffin:before, .logosAffin:after {
    position: absolute;
    top: 0;
    content: '';
    width: 250px;
    height: 100%;
    z-index: 2;
    }

    .logosAffin:before {
    left: 0;
    background: linear-gradient(to left, rgba(255,255,255,0), rgb(255, 255, 255));
    }

    .logosAffin:after {
    right: 0;
    background: linear-gradient(to right, rgba(255,255,255,0), rgb(255, 255, 255));
    }

    .logo_itemsAffin {
    display: inline-block;
    animation: 90s slidesxyzaffin infinite linear;
    display: flex;
    }

    .logosAffin:hover .logo_itemsAffin {
    animation-play-state: paused;
    }

    .logo_itemsAffin img{
    height: 100px;
    }

    .logosAffin:before,
    .logosAffin:after {
        background: none;
        width: 0;
    }
/* TRUSTED PARTNERS ENDS */






/* contact page center starts */

.containertv0{
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}


.containertv0 div{
  display: flex;
}

.containertv {
  position: relative;
  width: 20vw;
}

.image {
  display: block;
  width: 20vw;
  height: auto;
  filter: grayscale(0%);
}


@media screen and (max-width: 432px) {
  .containertv0{
    display: unset;
  }

  .containertv {
    position: relative;
    width: 50vw;
  }

  .image {
    width: 50vw;
  }
}

.overlaytp {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: #f71000b6;
  overflow: hidden;
  width: 100%;
  height: 5%;
  transition: 0.5s ease;
}

.containertv:hover .overlaytp {
  height: 100%;
}

.textun {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.main {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 626px) {
  .main {
    display: block;
    padding-left: 2rem;
  }
}

.covf {
  width: 100%;
  height: 300px;
  background-color: #ff0000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(255, 255, 255);
  font-size: 3rem;
  padding: 10px;
}



@media only screen and (max-width: 450px) {
  .covf {
    height: 200px;
    font-size: 1.5rem;
  }
}


.covf2{
  background-color: rgb(139, 0, 0);
  padding: 20px;
  color: rgb(190, 190, 190);
}



.covf h2{
  font-family: "Rajdhani", sans-serif;
  font-weight: 100;
}

.covf4 {
  font-weight: 600;
}

.covf5 {
  width: 1500px;
  height: 400px;
  /* background-color: #ffffff; */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}



.covf19 {
  width: 100%;
  height: 300px;
  background-color: #ff0000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(255, 255, 255);
  font-size: 3rem;
  padding: 10px;
  
}



@media only screen and (max-width: 450px) {
  .covf19 {
    height: 200px;
    font-size: 1.5rem;
  }
}



/* contact page center ends */

/* About page update  */

/* Sections */
.sectionf {
  height: 400px;
  position: relative;
  font-family: "Raleway", sans-serif;
}

/* Containers */
.content-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  clip: rect(auto, auto, auto, auto);
  pointer-events: none;
}
.content-inner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  padding: 0;
  z-index: 99;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  -webkit-perspective: 1000;
  perspective: 1000;
  pointer-events: all;
}
.content-center {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 150px;
}

/* Aesthetics */
.top-sectionf {
  background: linear-gradient(135deg, #ffc9c9 0%, #ffef94 100%);
}
.bottom-sectionf {
  background: #b8b8b8;
}
.sectionf h1 {
  font-size: 10vw;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  color: #ff0000;
  text-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  font-family: "Raleway", sans-serif;
}
.sectionf p {
  text-align: center;
  width: 80vw;
  font-size: 18px;
  color: #000000;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-weight: lighter;
}

.content-theme-dark h1 {
  color: #880000;
  text-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.content-theme-dark p,
.content-theme-dark a {
  color: #000000;
}

@media (max-width: 783px) {
  .sectionf p {
    width: 95vw;
  }

  .sectionf h1 {
    font-size: 18vw;
  }
}

/* for first in about page  */
.cvk {
  width: 100vw;
  height: fit-content;
  /* min-height: 200px;
  max-height: 500px; */

  filter: grayscale(100%);
  /* overflow: scroll; */
}

.cvk:hover {
  filter: grayscale(0%);
}

@media (max-width: 654px) {
  .cvk {
    overflow: scroll;
  }
}

/* about starts  */

.hero {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left;
  min-height: 400px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 50px;
  padding-bottom: 50px;
}

.hero-title {
  margin-bottom: 10px;
}

.hero-title > strong {
  display: block;
}

.hero-text {
  color: white;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--fs-8);
  line-height: 1.8;
  max-width: 46ch;
  margin-bottom: 25px;
}

/* about ends  */

/* project transparency  */

.ttcc {
  width: 100vw;
  height: 70vh;
  background-image: url("../images/city103.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.ttcct {
  font-size: 14vw;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  padding-top: 15vh;
  color: rgba(85, 85, 85, 0.596);
}

@media (max-width: 727px) {
  .ttcct {
    font-size: 4rem;
    font-weight: bold;
  }

  .ttcc {
    height: 200px;
  }
}

.ttcc2 {
  width: 80vw;
  height: auto;
  background-color: rgba(253, 253, 253, 0.774);
  box-shadow: 0 5px 10px rgba(1, 33, 54, 0.575);
  overflow: hidden;
  padding: 10px;
}

.ttcc2:hover {
  transition: 0.3s ease-in;
  box-shadow: 0 0px 2px rgba(1, 33, 54, 0.575);
  border-radius: 10px;
}

.ttcc3 {
  width: 95%;
  height: auto;
  background-color: rgba(221, 221, 221, 0.699);
  margin-top: -60px;
  padding-top: 20px;
  padding-bottom: 50px;
}

.ttcc3b {
  margin-top: 250px;
  background-color: #1b1b1b9c;
  /* margin-left: 2px; */
}

@media (max-width: 1185px) {
  .ttcct {
    font-size: 16vw;
    padding-top: 15vh;
    color: rgba(37, 37, 37, 0.596);
  }

  .ttcc3 {
    width: 90vw;
    margin-top: -80px;
  }
}

@media (max-width: 657px) {
  .ttcct {
    font-size: 20vw;
  }
}

/* new section  */
.cbk {
  background-color: orange;
  padding: 10px;
  margin-bottom: 20px;
}

.cbk:hover {
  transition: 0.2s ease-in;
  padding-top: 20px;
}

/* new section  */
.bigg {
  line-height: auto;
  font-size: 1.8rem;
  color: #ffffffb4;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  display: flex;
}

@media (max-width: 524px) {
  .bigg {
    font-size: 1.3rem;
  }
}

@media (max-width: 404px) {
  .bigg {
    font-size: 1rem;
  }
}

.big3 {
  background-color: #ff0000c2;
  max-width: 500px;
  border-radius: 0;
  animation: mo23 2s ease-in;
  height: auto;
  overflow: hidden;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  padding: 15px;
  /* margin-right: 250px;
  margin-top: 50px; */
}


@keyframes mo23 {
  1% {
    /* width: 10px; */
    height: 5px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  99% {
    height: auto;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
  }
}


.big3 p{
  color: white;
  font-family: "Rajdhani", sans-serif;
  /* font-weight: 600; */
  /* font-size: 15px; */
}

@media screen and (max-width: 674px) {
  .big3 p{
    font-family: unset;
    /* font-weight: 600; */
    /* font-size: 15px; */
  }
}


.seto {
  background-image: url("../images/cliparts/camera2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 380px;
  background-color: rgba(36, 23, 1, 0.555);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 661px) {
  .seto {
    height: 160px;
  }

  .title {
    padding-top: 10px;
  }
}


/* blue services on home page  */

.im22 {
  width: 95vw;
  height: 300px;
  background-color: #232b2b8a;
}

.im22:hover {
  background-color: #01354d;
}

.im223 {
  width: 100%;
  height: 300px;
  box-shadow: 11px -9px 12px -1px rgba(110,110,110,0.35);
-webkit-box-shadow: 11px -9px 12px -1px rgba(110,110,110,0.35);
-moz-box-shadow: 11px -9px 12px -1px rgba(110,110,110,0.35);

}

.cktg {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -120px;
}

.ovf {
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* social footer links  */
.social-list {
  display: flex;
  align-items: center;
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5px;
}

.kalx {
  background-color: rgb(196, 196, 196);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  color: black;
  padding-left: 15px;
}

.kalx:hover {
  transition: 0.2s ease-in;
  background-color: rgb(255, 219, 13);
  transform: rotate(360deg);
}

/* we do starts here  */
.wedo1 {
  width: 95vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wedo2 {
  width: 40vw;
  text-align: left;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ioni {
  padding: 10px;
  font-size: 50px;
  color: rgb(235, 2, 2);
}
.ioni:hover {
  color: rgb(0, 0, 0);
}

.ldd {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 534px) {
  .wedo1 {
    display: block;
  }

  .wedo2 {
    width: 90vw;
    text-align: left;
    padding: 5px;
  }
}

.xlll {
  font-size: 2rem;
  font-family: "Rajdhani", sans-serif;
  color: black;
}

@media (max-width: 556px) {
  .xlll {
    font-size: 1.2rem;
  }
}

/* we do ends here  */

.pimgo {
  width: auto;
  height: 250px;
}

.vl {
  background-color: #024350;
  padding-left: 20px;
  padding-right: 20px;
}

.ctbh {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* top color slide starts */

.slidertop {
  height: 40px;
  background-color: #293132;
  text-align: center;
  position: relative;
  animation: slideColor 10s forwards infinite;
  overflow: hidden;
}

.captiontop {
  line-height: 100px;
  font-size: 1rem;
  color: #fff;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  /* text-shadow: 0px 5px 5px rgba(0,0,0,.25); */
  margin-left: -300px;
}

.text-box {
  display: inline-block;
  position: relative;
  text-align: center;
}

.text-box div {
  display: inline-block;
  position: absolute;
  top: -200px;
  transform: rotateX(-90deg);
  opacity: 0;
  text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
  animation-timing-function: ease;
  width: auto;
  font-family: "Rajdhani", sans-serif;
  font-weight: 100;
}

.text-box div:nth-child(1) {
  animation: rollDown 10s forwards infinite;
}

.text-box div:nth-child(2) {
  animation: rollDown2 10s forwards infinite;
}

.text-box div:nth-child(3) {
  animation: rollDown3 10s forwards infinite;
}

@keyframes rollDown {
  0% {
    top: -200px;
    transform: rotateX(-90deg);
  }
  11% {
    top: -46px;
    transform: rotateX(0deg);
    opacity: 1;
  }
  22% {
    top: -46px;
    transform: rotateX(0deg);
    opacity: 1;
  }
  33% {
    top: 46px;
    transform: rotateX(30deg);
    opacity: 0;
  }
}

@keyframes rollDown2 {
  33% {
    top: -200px;
    transform: rotateX(-90deg);
  }
  44% {
    top: -46px;
    transform: rotateX(0deg);
    opacity: 1;
  }
  55% {
    top: -46px;
    transform: rotateX(0deg);
    opacity: 1;
  }
  66% {
    top: 46px;
    transform: rotateX(30deg);
    opacity: 0;
  }
}

@keyframes rollDown3 {
  66% {
    top: -200px;
    transform: rotateX(-90deg);
  }
  77% {
    top: -46px;
    transform: rotateX(0deg);
    opacity: 1;
  }
  88% {
    top: -46px;
    transform: rotateX(0deg);
    opacity: 1;
  }
  99% {
    top: 46px;
    transform: rotateX(30deg);
    opacity: 0;
  }
}

@keyframes slideColor {
  0% {
    background-color: #ff1865;
  }
  33% {
    background-color: #033a64;
  }
  66% {
    background-color: #da0d0dd8;
  }
  100% {
    background-color: #1a1a1a;
  }
}
/* top color slide ends  */

.qtyq {
  width: 80px;
  margin-bottom: 15px;
  height: 35px;
  border-radius: 15px;
  border: 0.5px solid rgb(134, 0, 67);
  text-align: center;
  margin-left: 5px;
}

.qtg {
  display: flex;
  align-items: center;
}

/* blog starts */

.modd1 {
  display: flex;
}

.modd {
  width: 25rem;
  height: auto;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

@media (max-width: 455px) {
  .modd1 {
    display: block;
  }

  .modd {
    width: 80vw;
    margin-left: 10px;
  }
}

.bdc {
  width: 100vw;
  height: 60vh;
  background-image: url("../images/newsblog.jpg");
  background-size: cover;
  background-position: top;
  font-size: 6rem;
  font-family: "Rajdhani", sans-serif;
  text-indent: 10%;
  color: rgba(255, 255, 255, 0.849);
  padding: 10px;
  text-shadow: -3px 0px 2px rgba(0, 0, 0, 0.62);
  display: flex;
  justify-content: center;
  align-items: center;
}

.bdc:hover {
  color: rgb(255, 196, 0);
}


@media screen and (max-width: 664px){
  .bdc{
    /* padding-top: 20%; */
    font-size: 3rem;
    /* padding-left: 20%; */
    padding-top: 10%;
    /* height: 150px; */
  }
}

.bdc2 {
  width: 100vw;
  padding: 15px;
  font-size: 3rem;
  /* font-weight: lighter; */
  font-family: "Rajdhani", sans-serif;
  font-weight: 300;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bdc4{
  width: 100%;
  
}

.bdc5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  padding: 12px 20px;
  margin: 8px;
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  flex: 1 1 auto;
  max-width: 220px;   /* prevent covering full width */
  text-align: center;
}

.bdc5 i {
  font-size: 20px;
}

/* Specific colors */
.read-btn {
  background: #e53935; /* red */
}
.read-btn:hover {
  background: #c62828; /* deep red */
}

.download-btn {
  background: #b71c1c; /* deep red */
}
.download-btn:hover {
  background: #7f0000; /* darker red */
}

/* Container */
.btn-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 15px;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  .bdc5 {
    width: 100%;
    max-width: 350px;
  }
}

.ccbgr{
  margin-bottom: 30px;
  margin-top: 30px;
}

.ccbgr p{
  width: 80vw;
  font-size: 1rem;
  color: rgb(73, 73, 73);
}

@media only screen and (max-width: 450px) {
  .ccbgr p{
    font-size: 18px;
  }
}


.htext {
  font-size: 2rem;
  color: rgb(32, 32, 32);
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-weight: lighter;
}

.blogimg {
  height: 10px;
  width: auto;
}

.comment {
  max-width: 95%;
  width: 95%;
  box-shadow: none;
  border-top: none;
}

.comment h1 {
  text-align: left;
  padding: 10px;
  font-size: 2rem;
  color: rgb(32, 32, 32);
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-weight: lighter;
}

.comment button {
  border-radius: 15px;
  background-color: #026b8b;
  margin-left: 0;
}


.comm {
  margin: 15px auto;
  padding: 15px 20px;
  /* max-width: 600px; */
  font-size: 14px;
  line-height: 1.5;
  
  /* Card look */
  background: #fff;
  border-radius: 10px;
  border: 1px solid #eee;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

  /* Smooth fade in animation */
  animation: fadeIn 0.4s ease-in-out;
}

/* Name (bold author) */
.comm b {
  font-size: 15px;
  color: #2c3e50;
  font-weight: 600;
}

/* Date (smaller and lighter) */
.comm i {
  font-size: 12px;
  color: #888;
  display: block;
  margin-top: 8px;
}

/* Add hover effect */
.comm:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: 0.2s ease;
}

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* blog ends  */

/* product page transparent header starts */

.backgroundtt {
  background: url("../images/affinservice/hh1.jpg");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  height: 60vh;
}

.transbox {
  background-color: rgba(0, 0, 0, 0.568);
  /* border: 1px solid rgba(0, 0, 0, 0.548); */
  opacity: 0.8;
  height: 60vh;
  padding-top: 10vh;
}

.transbox:hover {
  transition: 0.3s ease-in-out;
  background-color: rgba(0, 0, 0, 0.699);
}

.transbox h2 {
  color: white;
  text-align: center;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-weight: 800;
  font-size: 3.5rem;
  padding-top: 50px;
  color:  white !important;
}

.transbox p {
  color: rgb(162, 234, 252);
  text-align: center;
  font-family: Century Gothic;
  font-weight: lighter;
  font-size: 25px;
}

/* product page transparent header ends */

.strag {
  width: 80vw;
  height: 5px;
  background-color: rgb(1, 32, 80);
}

.stragmain {
  display: flex;
  align-items: center;
  justify-content: center;
}

.csha {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}

/* tooltips starts  */
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: rgb(255, 197, 70);
  color: #2b2b2b;
  text-align: center;
  padding: 5px 0;
  border-radius: 10px;
  font-size: 12px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext {
  top: 1px;
  right: 105%;
}
/* tooltips ends  */

/* Our services spinner starts here  */
.cator {
  background-color: white;
  border-top: 1px solid rgb(48, 76, 80);
  margin-bottom: 10px;
}

.citemc {
  border: none;
  height: auto;
  width: 130px;
  background-color: white;
}

.boxc {
  border-radius: 50%;
  padding: 15px;
  border: 2px solid rgb(114, 72, 72);
}

.flll {
  display: flex;
}

.fllltxt {
  text-transform: initial;
  color: rgb(63, 63, 63);
  text-align: left;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}

.myboxx {
  border: 2px solid rgb(255, 7, 7);
  padding: 10px;
  font-size: 25px;
  color: rgb(64, 79, 85);
  border-radius: 50%;
  width: 100px;
  height: 75px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

@media (max-width: 531px) {
  .myboxx {
    width: 90px;
  }

  .fllltxt {
    font-size: 17px;
  }
}

.myboxx2 {
  border: none !important;
}

.servih {
  padding-bottom: 10px;
  padding-top: 10px;
  font-weight: lighter;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 215%;
  text-align: center;
  color: rgb(255, 1, 1);
  width: 100vw;
  height: auto;
}

.servih span {
  color: rgb(145, 0, 0);
}

/* Our services spinner ends here  */

.btn3 {
  background-color: #fac22a;
  color: rgb(51, 1, 1);
  margin: 10px;
  padding: 10px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}

.btn3:hover {
  background-color: #e7aa03;
}

.maincover {
  height: 100%;
  width: 100%;
  background-image: url("../images/affinservice/hh3.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 10px;
  padding-left: 30px;
  padding-top: 30px;
}

.maincover:hover {
  transition: 1s ease-in-out;
  background-position: bottom;
}




/* jaguar accorddin startrs here  */
.accordioncbs {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 60vw;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
}

.active,
.accordioncbs:hover {
  background-color: #ccc;
}

.accordioncbs:after {
  content: "\002B";
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  color: #272727;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  text-align: left;
  width: 95vw;
}

.carkk {
  border: none;
  box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.418);
  border-radius: 0;
}

.btn8 {
  color: white;
  background-color: #05a9be;
  padding: 20px;
  font-size: 17px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  cursor: pointer;
  width: 80vw;
  max-width: 400px;
  box-shadow: 0 0 5px hsl(0, 0%, 0%);
  margin: 10px;
}

.btn8:hover {
  box-shadow: none;
  background-color: #3b6f7c;
}

/* acccordian ends  */

.smok {
  box-shadow: 0 5px 10px rgba(199, 0, 0, 0.575);
}

.brf1 {
  font-weight: lighter;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 215%;
  color: rgb(15, 76, 92);
}

@media (max-width: 1240px) {
  .brf1 {
    font-size: 2rem;
    font-weight: bolder;
  }
}

.briefp {
  font-size: 18px;
  color: rgb(76, 118, 167);
  height: fit-content;
}

.briefc1 {
  display: flex;
  padding: 10px;
  margin: 5px;
  overflow-x: hidden;
}

.briefc2 {
  background-color: rgb(241, 4, 4);
  height: 100px;
  width: 100px;
  margin: 15px;
  color: rgb(255, 255, 255);
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 100%;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  animation: presss 2s linear infinite;
  cursor: pointer;
}

@keyframes presss {
  0% {
    box-shadow: 0 0 2px #fff, 0 0 10px #fff, 0 0 20px #eb3b05, 0 0 30px #f30f0f,
      0 0 40px #0f0303, 0 0 10px #810404;
  }
  100% {
    box-shadow: none;
  }
}

@media (max-width: 1222px) {
  .briefc2 {
    height: 70px;
    width: 70px;
    margin: 2px;
    font-size: 0.8rem;
    padding: 3px;
  }
}

.briefc2:hover {
  transition: 5s ease-in;
  animation: none;
}

.hrfor {
  border-top: 0.1px solid rgb(0, 86, 136);
  padding: 10px;
  padding-top: 15px;
}

.hrfor:hover {
  transition: 0.5s ease-in-out;
  color: red;
  font-weight: 800;
}

@media (max-width: 420px) {
  .hrfor {
    font-size: 1.5rem;
    font-weight: 800;
  }
}

/* about page firs pattern  starts */
.abhh {
  font-family: "Rajdhani", sans-serif;
  font-weight: 200;
  color: rgb(255, 0, 0);
  font-size: 10rem;
  margin-top: -50px;
  padding-left: 10vw;
}

@media screen and (max-width: 989px){
  .abhh {
    font-weight: 300;
    font-size: 3rem;
    margin-top: unset;
    padding-left: 10px;
  }
}

.banner {
  position: relative;
  width: 450px;
  height: 230px;
  overflow: hidden;
  z-index: 1;
}

.banner24 h1 {
  padding-left: 5vw;
  font-size: 7rem;
  color: rgb(0, 0, 0);
  font-family: "Monoton", serif;
  font-weight: 400;
  font-style: normal;
  text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
}


@media screen and (max-width: 665px){
  .banner24 h1 {
  padding-left: 5px;
  font-size: 2rem;
  margin-top: 40px;
  /* margin-bottom: 20px; */
}
}


.banner video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner h1 {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "Rajdhani", sans-serif;
  font-size: 15vw;
  mix-blend-mode: screen;
  background-color: #ffffff;
}



.mabo {
  height: auto;
  width: 100vw;
  overflow: hidden;
  background-color: rgb(211, 211, 211);
  display: flex;
  justify-content: center;
  padding: 20px;
}

.mabo1 {
  width: 35%;
  height: auto;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: right;
  padding: 5px;
}


  .mabo1 img {
    width: 100%;
    padding: 10px;
  }

.mabo2 {
  width: 58%;
  height: auto;
  background-color: white;
  margin-left: 10px;
  font-size: 20px;
  padding-top: 200px;
  align-items: center;
  justify-content: left;
  padding: 20px;
  color: #1b1b1b;
}

.mabo42{
  width: 100%;
}

.mabo42 img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}


@media only screen and (max-width: 800px) {
  .mabo {
    display: block;
  }

  .mabo1 {
    width: 100%;
    height: auto;
    margin: 5px;
    justify-content: center;
    padding: 10px;
  }


  .mabo2 {
    width: 100%;
    margin: 5px;
    font-size: 18px;
  }

 
}


@media only screen and (max-width: 427px) {
    .mabo1 img {
    /* width: 100%; */
    
  }
}


.aboutsc2{
  width: 100%;
  min-height: 500px;
  padding: 15px;
  margin-top: 30px;
  margin-bottom: 30px;
  background-image: url("../images/abbbcc.jpg");
  background-position: left;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.aboutsc2 p{
  padding-top: 30px;
  padding-bottom: 30px;
  max-width: 1000px;
  text-align: left;
  font-size: 25px;
}


.aboutsc3{
  width: 100%;
}

.aboutsc3 img{
  width: 100%;
}

.aboutsc3 div{
  background-color: rgb(190, 0, 0);
  width: 100%;
  padding: 10vw;
  display: flex;
  justify-content: center;
  align-items: center;
}


.aboutsc3 div p{
  color: white;
  font-size: 25px;
  max-width: 1000px;
}


.liner {
  width: 80%;
  border-bottom: 1px solid red;
}

.liner2 {
  width: 80%;
  border-bottom: 10px solid rgb(197, 0, 0);
  margin-top: 30px;
  margin-bottom: 30px;
}
/* about page first pattern ends  */

.sdrq {
  width: 80%;
  background-color: red;
}

/* moving circles  */
.hero-shapek {
  position: absolute;
  z-index: 10;
  animation: rollox 4s ease-in-out infinite alternate;
  /* border-radius: 50%; */
  opacity: 60%;
}

.shape-1k {
  top: 10px;
  left: 40px;
}

.shape-2k {
  top: 200px;
  left: 10px;
}

@keyframes rollox {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(80vw);
  }
}
/* circle ends  */

/* bloghead starts  */

.bloghead {
  width: 100vw;
  height: auto;
  min-height: 500px;
  background-color: rgb(238, 238, 238);
  padding: 20px;
  overflow: hidden;
  font-size: 1.5rem !important;
}

.bloghead2 {
  width: 80vw;
  height: fit-content;
  border: 1px solid rgb(255, 7, 7);
  border-bottom-left-radius: 50px;
  border-top-right-radius: 50px;
  /* background-image: url('../images/covid19.jpeg'); */
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 5px 10px rgba(1, 33, 54, 0.575);
  background-color: white;
  overflow: hidden;
}

.bloghead2:hover {
  transition: 0.3s ease-in;
  box-shadow: 0 0px 2px rgba(1, 33, 54, 0.575);
}

.bloghead2 img {
  width: 100%;
}

@media (max-width: 435px) {
  .bloghead2 {
    height: 200px;
  }
}

.blogh {
  font-size: 4rem;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-weight: lighter;
  margin-left: 30px;
}

.blogh2 {
  font-size: 7rem;
  color: rgb(250, 25, 25);
  line-height: 120px;
  margin-left: 30px;
  font-family: Fugaz One;
  text-transform: capitalize;
}

.blogh2 span {
  float: right;
  padding-right: 30px;
  font-family: impact;
  animation: ardc 1.5s ease-in-out infinite;
  font-size: 8rem;
}

@media (max-width: 668px) {
  .blogh {
    transition: 1s ease-in;
    padding: 10px;
    font-size: 2rem;
    margin-left: 10px;
  }

  .blogh2 {
    font-size: 3rem;
    line-height: auto;
    margin: 5px;
    margin-left: 10px;
    padding: 2px;
    margin-top: -20px;
  }

  .blogh2 span {
    padding-right: 2px;
    font-size: 3rem;
  }

  .lhh {
    line-height: 50px;
  }
}

@keyframes ardc {
  1% {
    opacity: 2%;
    text-shadow: 0 30px 20px rgba(0, 0, 0, 0.938);
  }

  99% {
    opacity: 100%;
  }
}

.icknn {
  /* float: rig; */
  background-color: rgb(255, 0, 0);
  box-shadow: 0 2px 5px rgba(1, 33, 54, 0.575);
  color: rgb(255, 255, 255);
  font-size: 1rem;
  margin-bottom: 10px;
  padding: 10px;
  min-width: 200px;
  transform: skew(-10deg);
  margin-right: 10px;
}

.icknn span {
  color: rgb(255, 255, 255);
  font-weight: bold;
}

/* bloghead ends  */

/* new contact page ammendment starts */
.concm1 {
  display: block;
  overflow-x: hidden;
}

.concm2,
.concm3 {
  width: 100vw;
  height: auto;
  min-height: 60vh;
  background-color: rgb(146, 122, 122);
}

.concm3 {
  background-color: rgb(255, 243, 202);
}

@media (max-width: 1294px) {
  .sales-boxes2 {
    height: 80vh;
    width: 90%;
  }
}

.concm2 {
  background-color: none;
  background-image: url("../images/groups2/6.webp");
  background-position: right;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mnct {
  display: block;
}

.btext {
  font-size: 6rem;
  font-family: "Rajdhani", sans-serif;
  font-weight: lighter;
  color: white;
}

.btext span {
  color: red;
  font-size: 6rem;
  font-family: "Rajdhani", sans-serif;
  font-weight: lighter;
}

.cmcircle {
  width: 400px;
  height: 130px;
  margin: 10px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}


.circleic {
  border-radius: 50%;
  padding: 50px;
  font-size: 2rem;
  color: white;
  background-color: rgb(214, 8, 8);
  height: 100px;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circleic:hover {
  background-color: rgb(114, 4, 4);
}


.cp2 {
  margin-left: -20px;
  border: 2px solid white;
}

.cp23 {
  color: red;
  font-size: 2.5rem;
  text-align: center;
  font-family: "Rajdhani", sans-serif;
  font-weight: bolder;
}

.cmcircle2 {
  float: right;
  margin: 10px;

  margin-top: -70px;
  width: 12rem;
  height: 19rem;
}

.cck1 {
  /* background-image: url('../images/linbc2.jpg'); */
  background-position: bottom;
  background-size: contain;
  background-repeat: no-repeat;
  height: 70%;
  width: 100%;
  background-size: 50%;
  background-position: center;
  /* border: 4px solid white; */
  background-color: rgba(255, 166, 0, 0.63);
}




.cttma {
  display: flex;
  float: right;
  margin-right: 5vw;
}

.cmcircle2 p,
.cmcircle2 span {
  font-size: 2rem;
  color: rgb(255, 0, 0);
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
}

.cmcircle2 span {
  font-size: 1rem;
  color: rgb(0, 0, 0);
  font-family: "Rajdhani", sans-serif;
}

.addr {
  margin-left: 5vw;
  display: block;
}

.addrb {
  width: 200px;
  height: 100px;
  background-color: black;
}

.cmcircle2k {
  float: right;
  margin-right: 5rem;
  margin-top: -30px;
  width: 40rem;
  height: 19rem;
}

.cmpp,
.cmpp span {
  font-size: 1.2rem;
  color: rgb(255, 10, 10);
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
}

.cmpp span {
  font-size: 17px;
  color: rgb(65, 65, 65);
  font-family: arial;
}

.cmbd {
  width: 30rem;
  color: rgb(255, 255, 255);
  background-color: rgb(92, 0, 0);
  padding: 30px;
  height: 100px;
  box-shadow: rgba(224, 0, 0, 0.404) 0px 1px 2px, rgb(253, 4, 4) 0px 2px 4px,
    rgba(185, 0, 0, 0.397) 0px 4px 8px, rgba(0, 0, 0, 0.404) 0px 8px 16px,
    rgba(3, 60, 214, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
  font-size: 2.5rem;
  font-family: "Rajdhani", sans-serif;
  font-weight: 100;
}

.cmbd:hover {
  height: 80px;
  transition: 0.5s ease-in-out;
  box-shadow: none;
}

.whc1 {
  display: flex;
  background-color: rgb(243, 8, 8);
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.whc2,
.whc3 {
  background-color: white;
  height: 7rem;
  width: 50px;
  margin: 10px;
}

.whc2 {
  width: 30%;
}

.whc3 {
  width: 50%;
}

.ctmp {
  display: flex;
  justify-content: space-around;
  height: auto;
  padding: 10px;
  width: 100vw;
}

.ctmp1 {
  width: 30vw;
}

.ctmp2 {
  width: 60vw;
  padding-top: 50px;
  overflow: hidden;
  display: block;
}

.mapif {
  width: 60vw;
  height: 60vh;
}

@media (max-width: 1205px) {
  .ctmp {
    display: block;
  }

  .ctmp1 {
    width: 98vw;
    display: flex;
    place-content: center;
    align-items: center;
  }

  .ctmp2 {
    width: 97vw;
    padding: 5px;
  }

  .mapif {
    width: 95vw;
    height: 60vh;
  }
}

.onitp {
  display: none;
}

@media (max-width: 1297px) {
  .cttma {
    display: block;
    float: none;
    margin: 5px;
    padding: 5px;
  }

  .cmcircle2k {
    float: none;

    margin: 5px;
    width: auto;
    height: auto;
    padding: 5px;
  }

  .concm3 {
    height: auto;
  }

  .cm34 {
    display: none;
  }

  .onitp {
    display: block;
  }

  .cmbd {
    width: 80vw;
    font-size: 1.8rem;
  }
}

@media (max-width: 902px) {
  .circleic {
    padding: 10px;
    font-size: 1rem;
    height: 60px;
    width: 60px;
  }

  .cp23 {
    font-size: 1.5rem;
  }

  .cmpp,
  .cmpp span {
    font-size: 1rem;
  }

  .btext,
  .btext span {
    font-size: 4rem;
  }
}

@media screen and (max-width: 414px){
  .onitp p span{
  font-size: 18p7;
  font-family: arial;
  font-weight: unset;
  color: rgb(53, 53, 53);
}
}





/* new contact page ammendment ends  */

/* beddings start  */
.beddmain {
  width: 100vw;
  height: auto;
  text-align: center;
  overflow-x: hidden;
  padding: 10px;
  background: rgb(255, 249, 252);
  background: radial-gradient(
    circle,
    rgba(255, 249, 252, 0.514) 60%,
    rgba(241, 239, 241, 0.692) 100%
  );
  margin-top: 30px;
  margin-bottom: 5px;
  padding-top: 30px;
  padding-bottom: 10px;
}

.beddmain p {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #0f0f0f;
  /* text-transform: uppercase; */
  padding: 5px;
  font-weight: bold;
}

@media only screen and (max-width: 574px) {
  .beddmain p {
    font-size: 1.3rem;
    /* color: #4b0000; */
    padding: 10px;
    font-weight: 800;
    margin: unset;
  }
}

.beddmain .p23,
.p23 span {
  font-size: 5vw;
  font-family: "Rajdhani", sans-serif;
  font-weight: 100;
  color: rgb(0, 0, 0);
  line-height: 4rem;
}

.p23 span {
  font-family: Arial, Helvetica, sans-serif;
  background-color: rgb(0, 62, 119);
  font-weight: 600;
  padding: 10px;
  margin-left: -5px;
  border-radius: 50%;
  padding-left: 25px;
  padding-right: 25px;
  color: white;
}

@media (max-width: 996px) {
  .beddmain .p23,
  .p23 span {
    line-height: 35px;
  }

  .p23 span {
    font-size: 15px;
    margin-left: 0;
    padding: 3px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 400px) {
  .beddmain .p234 {
    font-weight: bolder;
    color: black;
    line-height: 5px;
    padding-top: 20px;
  }
}

.bedmg2 {
  display: flex;
  justify-content: center;
  align-items: center;
}


.wd{
  background-color: orangered;
}

.wd1 {
  height: 10px;
  width: 95vw;
  background-color: #f70000;
  display: flex;
  justify-self: center;
  animation: dcd2 5s ease-in-out infinite;
}

.wd2 {
  height: 10px;
  width: 60vw;
  background-color: #8d0000;
  display: flex;
  justify-self: center;
  margin-top: -10px;
  animation: dcd 3s ease-in-out infinite;
}

@keyframes dcd {
  1% {
    width: 70vw;
  }

  99% {
    width: 5vw;
  }
}

@keyframes dcd2 {
  1% {
    width: 10vw;
  }

  99% {
    width: 95vw;
  }
}

.rgt {
  text-align: right;
  padding-right: 5vw;
  color: red;
  padding-left: 10px;
}

/* bedding ends  */

@media (max-width: 703px) {
  .ttcct {
    padding-top: 15px;
  }
}

.btn1 {
  width: 100%;

  padding: 5px;
  color: rgb(255, 255, 255);
  border: none;
  background-color: rgb(160, 0, 0);

  margin-bottom: 5px;
  border-radius: 10px;
  font-size: 15px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}

.btn1:hover {
  transition: 0.3s ease-in;
  color: rgb(0, 0, 0);
  background-color: rgb(247, 199, 199);
  cursor: pointer;
}

.nmv1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90vw;
  margin: 10px;
}

.nmv {
  min-height: 25vh;
  font-size: 18px;
  font-family: arial;
  color: rgb(156, 1, 21);
  text-align: center;
  width: 300px;
  margin-top: 30px;
  padding: 30px;
}

.mtop {
  margin-top: 10px;
}

@media (max-width: 947px) {
  .mtop {
    margin-top: 0;
  }
}

/* message start  */

.message {
  position: sticky;
  top: 30vh;
  left: 0;
  z-index: 10000;
  border-radius: 0.5rem;
  padding: 1.5rem 2rem;
  margin: 0 auto;
  width: 300px;
  max-width: 80vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background-color: rgb(70, 189, 236);
  height: auto;
  box-shadow: rgba(0, 0, 0, 0.233) 0px 4px 12px;
}

.message .spn {
  font-size: 16px;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.message i {
  font-size: 2rem;
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
}

.message i:hover {
  transition: 0.2s ease-in;
  color: var(--red);
}
/* message ends  */

.cent {
  display: flex;
  align-items: center;
  justify-content: center;
}

.xpn {
  font: 400 15px "Open Sans", sans-serif, helvetica, Arial;
  border: 1px solid rgb(179, 5, 5);
  color: rgb(179, 5, 5);
  padding: 10px;
  font-size: 15px;
  width: fit-content;
}

.xpn:hover {
  transition: 0.5s ease-in-out;
  background-color: rgb(179, 5, 5);
  outline: none;
  border: none;
  color: white;
}

/* Frequent questions start  */
.fqtn1 {
  width: 100vw;
  height: auto;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.fqtn2 {
  width: 60%;
  height: 45vh;
  min-height: 400px;
  background-image: url("../images/affincards/af50.webp");
  background-size: cover;
  background-position: top;
  justify-content: right;
  display: flex;
}

.fqtn3 {
  width: 40%;
  background-color: #000000a2;
  height: 45vh;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 270%;
  font-family: "Rajdhani", sans-serif;
  color: rgba(255, 255, 255, 0.829);
  font-weight: bolder;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
}

.fqtn3:hover {
  transition: 0.5s ease-in;
  background-color: #ff0000bd;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
}

.fqtn4 {
  width: 40%;
  height: 45vh;
  min-height: 400px;
  padding: 10px;
  background-color: rgba(255, 7, 7, 0.452);
  padding-top: 5%;
}

.accor2 {
  width: 95%;
  background: rgb(117, 0, 0);
  color: white;
  font-family: "Rajdhani", sans-serif;
  font-weight: bolder;

}

.accor2:hover {
  background: rgb(65, 0, 0);
  border-radius: 20px;
}

.panel2 {
  width: 95%;
  font-family: "Open Sans", sans-serif, helvetica, Arial;
  font-size: 100%;
  text-align: left;
  height: auto;
}

.pp2 {
  font-family: "Coda", system-ui;
  font-weight: 400;
  font-style: normal;
}

@media (max-width: 910px) {
  .fqtn1 {
    display: block;
  }

  .fqtn2 {
    width: 100%;
    height: auto;
    min-height: 200px;
  }

  .fqtn3 {
    width: 80vw;
    font-size: 2rem;
    height: auto;
    min-height: 200px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
  }

  .fqtn4 {
    width: 100vw;
    height: auto;
    min-height: fit-content;
  }

  .panel2 {
    font-size: 1rem;
  }
}

/* Frequent questions start  */

/* further modification */
.orangeline {
  width: 60vw;
  height: 5px;
  background-color: orangered;
}

.ajup2 {
  background: rgb(163, 15, 72);
  padding: 30px;
}

.aju4 {
  background-color: rgb(243, 245, 247);
  padding-top: 5px;
  padding-bottom: 5px;
}

@media (max-width: 793px) {
  .orangeline {
    margin-top: -20px;
  }

  .ajup1 {
    margin-top: -50px;
  }

  .ajup2 {
    padding: 10px;
  }

  .beddmain {
    margin-top: -12px;
  }

  .aju4 {
    margin-top: -40px;
  }
}

.p404 {
  min-height: 40vh;
  width: 100vw;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 300%;
  font-family: "Rajdhani", sans-serif;
  color: rgb(100, 100, 100);
  text-align: center;
}

/* life support starts  */


.life30 {
  background: url("../images/affincards/af26.webp");
  background-size: cover;
  background-position: right;
  background-attachment: fixed;
  width: 100vw;
  /* padding-top: 20px; */
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
}

.aabout {
  background: url("../images/newimage/dcs11.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  width: 100vw;
  /* padding-top: 20px; */
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
}




@media screen and (max-width: 414px){
  .aabout {
    min-height: 30vh;
  }
}



#header30 {
  margin: 20px;
}
#header30 > h1 {
  text-align: center;
  font-size: 3rem;
  color: rgb(255, 255, 255);
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
}
#header30 > p {
  text-align: center;
  font-size: 1.5rem;
  color: rgb(255, 193, 193);
  font-family: "Rajdhani", sans-serif;
  width: auto;
}

.h302 h1{
  font-size: 8rem !important;
  color: rgb(255, 0, 0) !important;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
}



.h302 img{
  width: 30%;
  padding-bottom: 10px;
}


.h302 p{
  color: red !important;
}

.container30 {
  width: 100vw;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 40px 20px;
}
.card30 {
  display: flex;
  flex-direction: column;
  width: 350px;
  margin: 10px;
  margin-bottom: 60px;
}
.card30 > div {
  box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.5);
}
.card-image30 {
  width: 350px;
  height: 250px;
}
.card-image30 > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}
.card-text30 {
  margin: -15px auto;
  margin-bottom: -50px;
  height: 300px;
  width: 350px;
  background-color: #1d1c20;
  color: #fff;
  padding: 20px;
}
.card-meal-type30 {
  font-style: italic;
  font-family: "Playfair Display", serif;
}
.card-title30 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  margin-top: 5px;
  color: rgb(252, 76, 76);
  font-family: "Rajdhani", sans-serif;
  font-weight: 100;
}
.card-body30 {
  font-size: 1rem;
  font-size: 16px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: rgb(145, 145, 145);
}
.card-price30 {
  width: 350px;
  height: 100px;
  background-color: #970c0a;
  color: rgb(255, 124, 124);
  margin-left: auto;
  font-size: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  cursor: pointer;
  outline: none;
  border: none;
}

.card-price30:hover {
  transition: 0.3s ease-in;
  color: rgba(255, 255, 255, 0.397);
}

@media (max-width: 408px) {
  .card-price30 {
    width: 90vw;
  }

  .card-text30 {
    width: 90vw;
  }

  .card-image30 {
    width: 90vw;
  }

  .card30 {
    width: 90vw;
  }
}

/* life support ends */

.playcv {
  width: 100vw;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.733);
  margin-top: -145px;
  z-index: 1;
}

.slidtop {
  height: 150px;
  width: auto;
}

.pobox{
  padding: 10px;
  height: fit-content;
  width: 100vw;
  background-color: rgb(255, 0, 0);
  color: rgb(235, 235, 235);
  text-align: center;
  /* display: flex; */
  justify-content: center;
  align-items: flex-end;
  padding-right: 20px;
  font-size: 18px;
  font-family: "Poppins", sans-serif;
  padding-bottom: 20px;
  padding-right: 20px;
}

.pobox a{
  color: white !important;
}

.footerfx {
  width: 100vw;
  height: fit-content;
}

/* progress bar starts */

/* scroll progress  */
.headergg {
  position: fixed;
  top: 0;
  z-index: 10000;
  width: 100%;
  background-color: #037c35;
}



.pgal {
  color: red !important;
}

.pgal span {
  color: rgb(179, 0, 0);
}

.tfont {
  color: rgb(255, 255, 255) !important;
}

.ourhbtn1 {
  height: 30vh;
  width: 100vw;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ourhbtn1 a {
  color: rgb(143, 2, 2);
  border: 2px solid rgb(255, 130, 130);
  padding: 10px;
  border-radius: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.ourhbtn1 a:hover {
  color: rgb(143, 2, 2);
  background-color: rgba(255, 0, 0, 0.212);
  border: none;
}

/* new blog cards starts */

.containervbc {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.sidebarvbc {
  background-image: url("../images/groups/71.webp");
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  padding: 20px;
  width: 250px;
  box-sizing: border-box;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.sidebarvbc H4 {
  font-size: 4rem;
  transform: rotate(90deg);
  text-shadow: -3px 0px 2px rgba(0, 0, 0, 0.62);
  z-index: 2;
}

.sidebar-titlevbc {
  margin-top: 0;
}

.sidebar-listvbc {
  list-style-type: none;
  padding-left: 0;
}

.sidebar-itemvbc {
  margin: 10px 0;
}

.sidebar-itemvbc a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
}

.main-contentvbc {
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
}

.main-titlevbc {
  font-size: 30px;
  font-family: "Rajdhani", sans-serif;
  margin-bottom: 20px;
}

.card-containervbc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cardvbc {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.507);
  border-bottom: 1px solid red;
}

.cardvbc:hover {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card-imgvbc {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.card-contentvbc {
  padding: 10px;
  padding-bottom: 5px;
}

.card-contentvbc a{
  color: rgb(90, 0, 0);
  font-size: 18px;
  border-top: 1px solid pink;
  padding: 10px;
  padding-bottom: 10px;
  font-family: 'Barlow Condensed', sans-serif;
}

.card-contentvbc a:hover{
  color: rgb(20, 0, 0);
}

.card-contentvbc a{
  color: rgb(255, 15, 15);
}

.card-vbccategory{
  background-color: rgb(49, 49, 49);
  padding: 10px;
  text-align: center;
  font-size: 0.9rem;
  color: white;
}


.overlayttcx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* adjust opacity as needed */
  z-index: 1; /* sits above the image */
}



@media screen and (max-width: 414px){
  .card-contentvbc a{
    font-size: 12px;
  }
}




.card-titlevbc {
  font-size: 18px;
  color: rgb(71, 71, 71);
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
}


.cardbhv {
  font-size: 16px;
  color: #555;
  /* display: -webkit-box; */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: blue;
}

/* Media Query for Screen Width < 700px */
@media screen and (max-width: 700px) {
  .card-containervbc {
    grid-template-columns: repeat(2, 1fr);
  }

  .sidebarvbc {
    display: none;
  }
}

/* new blog cards ends */



/* loader starts */

.affinloader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999999999999;
  padding: 20px;
  text-align: center;
}

/* Logo pop-in */
@keyframes affinloader-popIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.affinloader-logo {
  width: 30%;
  max-width: 300px;
  height: auto;
  animation: affinloader-popIn 0.5s ease-out forwards;
}

/* Text fly-in from bottom */
@keyframes affinloader-flyInFromBottom {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.affinloader-message {
  color: rgb(0, 0, 0);
  font-size: 2rem;
  margin-top: 25px;
  opacity: 0;
  font-family: "Rajdhani", sans-serif;
}

/* Show message animation trigger */
.affinloader-show-message {
  animation: affinloader-flyInFromBottom 1s ease forwards;
}

/* Mobile Tweaks */
 @media screen and (max-width: 600px) {
  .affinloader-logo {
    width: 60%;
    max-width: none;
  }

  .affinloader-message {
    margin-top: 25px;
  }
}
/* loader ends */





/* cobas 2 starts  */
.cobasphone1 {
  display: none;
  width: 100%;
  overflow-x: hidden;
  padding: 10px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.cobasphone1 img {
  width: 100%;
}

@media screen and (max-width: 500px) {
  .cobasphone1 {
    display: block;
  }
}
/* cobas 2 ends  */



/* pagination starts */
.paginationcl {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.paginationcl ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

.paginationcl ul li {
  background-color: rgb(255, 255, 255);
  margin: 2px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.164);
}

.paginationcl ul li:hover {
  box-shadow: none;
  border: 1px solid rgb(206, 206, 206);
}

.paginationcl ul li a {
  color: rgb(0, 0, 0);
  text-decoration: none;
  font-size: 12px;
  padding: 10px;
  /* margin: 5px; */
}
/* pagination ends */







/* scroll progress  */
.headergg {
  position: fixed;
  top: 0;
  z-index: 10000;
  width: 100%;
  background-color: #f1f1f1;
}

/* The progress container (grey background) */
.progress-containergg {
  width: 100%;
  height: 8px;
  background: #8b0000;
}

/* The progress bar (scroll indicator) */
.progress-bargg {
  height: 8px;
  background: rgb(255, 0, 0);
  width: 0%;
}

/* scroll progress ends */

/* Filter bar starts */
.filterbar {
  width: fit-content;
  min-height: 60px;
  min-width: 80vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(216, 216, 216);
}

.filterbar form{
  display: flex;
  justify-content: center;
  align-items: center;
}

.filterbar form select{
  margin: 10px;
  border: none;
  padding: 10px;
  border-radius: 20px;
}


.filterbar form select option{
  padding: 10px;
  color: #353535;
  font-size: 16px;
}

.filterbar form button{
  border: none;
  padding: 10px;
  border-radius: 20px;
  background-color: rgb(156, 21, 21);
  color: white;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.603);
}

.filterbar form button:hover{
  border: none;
  padding: 10px;
  border-radius: 20px;
  background-color: rgb(156, 21, 21);
  color: white;
  box-shadow: none;
}



/* .crform{
  background-color: red;
  width: 90% !important;
}

.crform fieldset form{
  width: 90%;
} */
/* Filter bar ends */





/* new mision and vision starts */
.vsmm1{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  padding-top: 20px;
  padding-bottom: 20px;
  box-shadow: 11px -9px 12px -1px rgba(110,110,110,0.35);
-webkit-box-shadow: 11px -9px 12px -1px rgba(110,110,110,0.35);
-moz-box-shadow: 11px -9px 12px -1px rgba(110,110,110,0.35);
}

.vsmm2{
  padding: 30px;
}

.vsmm2 h2{
  font-family: "Rajdhani", sans-serif;
  font-weight: 800;
  padding: 20px;
}

.vsmm2 p{
  font-size: 15px;
  color: gray;
}

.vsmmicon img{
  width: 40%;
}

.v2m{
  border-left: 1px solid red;
}


@media only screen and (max-width: 588px) {
  .vsmm1{
    width: 100%;
    display: block;
    justify-content: center;
    align-items: center;
}

.vsmm2 h2{
  font-family: "Rajdhani", sans-serif;
  padding: 10px;
}

}


/* new mission and vision ends */





.shpwtx{
  padding: 10px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 16px;
  margin-top: -20px;  
  margin-bottom: 20px;
}

 


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

  .lossonp{
    display: none !important;
  }

  .affinmo-carousel{
    display: block;
  }

  .shringh{
    margin-top: -150px;
  }

  .shringh2{
    overflow: hidden !important;
    height: 400px !important;
    min-height: unset !important;
    max-height: fit-content !important;
  }

}


.adminmsg9{
  text-decoration: none;
  color: rgb(109, 109, 109);
  width: 100%;
  background-color: rgb(219, 219, 219);
  padding: 10px;
}


.adminmsg92 {
  color: rgb(192, 0, 0);
  padding: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 0.9rem;
}




/* back to top starts */
.floating-divbt {
  width: 50px;
  height: 50px;
  background-color:rgba(255, 0, 0, 0.5);
  border-radius: 50%;
  position: fixed;
  top: 70%;
  right: 5px;
  display: none; /* Initially hidden */
  z-index: 1000000;
  box-shadow: 0 5px 10px rgba(1, 33, 54, 0.575);
  cursor: pointer;
  color: white;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.floating-divbt:hover {
  background-color:rgba(141, 0, 0, 0.81);
  box-shadow: none;
}
/* back to top ends */


/* home banner */
.homebnn{
  width: 100%;
  height: 400px;
  margin-top: 0;
}
/* home banner ends */






/* new our vision cards starts */
.affin-card-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 20px;
  gap: 20px;
}

.affin-card {
  background: white;
  flex: 1; /* Each card takes equal space */
  min-width: 300px; /* Prevents cards from becoming too small */
  /* border-radius: 10px; */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.356);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.affin-card:hover {
  transform: translateY(-5px);
}

.affin-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: top;
}

.affin-card-content {
  /* padding: 15px; */
  text-align: center;
}

.affin-card-title {
  font-size: 1.2rem;
  margin-bottom: 10px;
  font-weight: bold;
  background-color: red;
  padding: 10px;
  color: white;
  width: 100%;
  font-family: 'Poppins', sans-serif;
}

.affin-card-text {
  font-size: 1rem;
  color: #2e2e2e;
  padding: 15px;
  font-family: 'Poppins', sans-serif;
  padding-bottom: 25px;
  text-align: left;
}

/* Responsive Design */
@media only screen and (max-width: 900px) {
  .affin-card-container {
      flex-direction: column;
      align-items: center;

      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding: 10px;
      gap: 5px;
      
  }

  .affin-card {
      width: 95%;
      margin-bottom: 30px;
  }

  .affin-card-text {
    font-size: 1.2rem;
  }
}

/* new our vision cards ends */





/* new home banner caro starts */
.slider-container-affin2 {
  position: relative;
  width: 100%;
  height: 90vh;
  overflow: hidden;
}

.slider-wrapper-affin2 {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 1s ease-in-out;
}

.slide-affin2 {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.slidexaf3{
  background-position: top;
}

.slidexaf2{
  background-position: top;
}



@media only screen and (max-width: 825px) {
  .slidexaf3{
    background-position: right;
  }
  
  .slidexaf2{
    background-position: left;
  }
}

.overlayp0-affin2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.582);
  z-index: 1;
}


.containerpo-affin2 {
  position: absolute;
  top: 20%;
  /* left: 50%; */
  /* transform: translateX(-50%); */
  z-index: 2;
  display: flex;
  align-items: center;
  text-align: center;
  color: rgba(255, 255, 255, 0.74);
  justify-content: center;
  width: 100%;
  padding: 10px;
}

.titlep0-affin2 {
  font-size: 8rem;
  text-align: right;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  line-height: 8rem;
}




.titlep0-affin2 span {
  color: rgba(255, 255, 255, 0.747);
  font-family: "Coda", system-ui;
  font-weight: 800;
  font-style: normal;
  
/*   
  text-shadow: 
    -2px -2px 0 #970000,
     2px -2px 0 #fff,
    -2px  2px 0 #fff,
     2px  2px 0 #700404; */
}


.txcdl{
  display: flex;
  align-items: center;
  justify-content: center;
}

.dividerp0-affin2 {
  width: 3px;
  height: 100px;
  background-color: white;
  margin: 0 20px;
}

.descriptionp0-affin2 {
  font-size: 1rem;
  max-width: 600px;
  line-height: 1.5;
  text-align: left;
}

.slider-buttons-affin2 {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
}



.slider-buttons-affin2 button {
  padding: 10px;
  font-size: 1.2rem;
  background-color: rgba(0, 0, 0, 0.479);
  border: none;
  cursor: pointer;
  color: white;
  transition: background 0.3s ease;
  border-radius: 10px;
}

.slider-buttons-affin2 button:hover {
  background-color: rgba(0, 0, 0, 0.651);
}

.brcc{
  display: none;
}

@media only screen and (max-width: 843px) {
  .titlep0-affin2 span{
    font-size: 7rem;
    line-height: 7rem;
  }

  .brcc{
    display: unset;
  }
}

@media only screen and (max-width: 677px) {
  .titlep0-affin2 span{
    font-size: 6rem;
    line-height: 6rem;
  }
}


@media only screen and (max-width: 583px) {
  .titlep0-affin2 span{
    /* padding-top: 100px; */
    font-size: 5rem;
    line-height: 5.5rem;
  }
}

@media only screen and (max-width: 494px) {
  .titlep0-affin2 span{
    padding-top: 100px;
    font-size: 3.5rem;
    line-height: 3.5rem;
  }
}
/* new home banner caro ends */



/* site map starts  */

.oursitemap{
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 10vw;
}

.oursitemap h3{
  font-size: 3rem;
  color: rgb(156, 0, 0);
  width: 100%;
  /* text-align: center; */
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  font-family: "Rajdhani", sans-serif;
  /* font-weight: 100; */
}

.oursitemap ul li{
  padding-bottom: 10px;
}


.oursitemap ul li a{
  text-decoration: none;
  color: rgb(22, 22, 22);
}

.oursitemap ul li a:hover{
  color: rgb(92, 0, 0);
}
/* site map ends */




.careerbg{
  width: 100%;
  /* max-width: 80vw; */
  padding-bottom: 50px;
  padding-top: 50px;
  font-size: 1rem;
  padding-left: 5%;
  padding-right: 5%;
  font-family: "Poppins", sans-serif;
  text-align: center;
  margin-bottom: 20px;
  background-color: rgb(185, 0, 0);
  color: white;
}

@media only screen and (max-width: 450px) {
  .careerbg{
    font-size: 18px;
    text-align: left;
  }
}

.careerbg2{
  width: 100%;
  /* max-width: 80vw; */
  padding-bottom: 50px;
  padding-top: 50px;
  font-size: 0.9rem;
  padding-left: 5%;
  padding-right: 5%;
  font-family: "Poppins", sans-serif;
  text-align: center;
  margin-bottom: 20px;
  color: black;
}





/* toggle button */
.switch-afn3 {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 40px;
}

.switch-afn3 input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-afn3 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  text-align: center;
  line-height: 40px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: white;
  width: 100%;
}

.slider-afn3:before {
  position: absolute;
  content: "";
  height: 32px;
  width: 32px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider-afn3 {
  background-color: #ff0d0d;
}

input:checked + .slider-afn3:after {
  content: "YES";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

input:not(:checked) + .slider-afn3:after {
  content: "NO";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

input:focus + .slider-afn3 {
  box-shadow: 0 0 1px #181818;
}

input:checked + .slider-afn3:before {
  -webkit-transform: translateX(60px);
  -ms-transform: translateX(60px);
  transform: translateX(60px);
}

/* Rounded sliders */
.slider-afn3.round-afn3 {
  border-radius: 40px;
}

.slider-afn3.round-afn3:before {
  border-radius: 50%;
}
/* toggle button */





/* account details */

.paydetailsax {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f4f4f4;
}
.containerax {
  display: flex;
  width: 80%;
  max-width: 1000px;
  background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
}



.leftax {
  flex: 1;
}
.leftax img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rightax {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
}
.rightax h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
  font-family: Arial, sans-serif;
}
.rightax p {
  font-size: 16px;
  font-family: Arial, sans-serif;
  color: #1f1f1f;
}

.acctx91 div{
  display: flex;
  padding: 3px;
}

.acctx91 div p:first-of-type {
  /* Your styles here */
  font-weight: bold;
}


@media (max-width: 768px) {
  .paydetailsax{
    margin-top: 40px;
  }
  .containerax {
      flex-direction: column;
  }
  .leftax {
      height: 250px;
  }
}


@media (max-width: 768px) {
.acctx91 div{
  display: block;
  padding: 5px;
}
}
/* account details */




.ccform{
  max-width: 800px;
  padding: 10px;
}





/* contact map starts */
.locationmp {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f4f4f4;
}
.containerlnnp {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 95%;
  /* max-width: 800px; */
}
.radio-grouplnnp {
  margin-bottom: 20px;
}
.radio-grouplnnp label {
  margin: 0 10px;
  font-weight: bold;
  cursor: pointer;
}

#maplnnp {
  width: 100%;
  height: 450px;
  margin-top: 20px;
}
.containerlnnp {
  /* max-width: 800px; */
  margin: auto;
}
.radio-grouplnnp {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
.radio-grouplnnp label {
  margin-left: 5px;
}
/* contact map ends */



/* port folio starts */
.affin9-container {
  width: 90%;
  margin: auto;
}
.affin9-title {
  font-size: 24px;
  text-align: center;
  margin: 20px 0;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
}
.affin9-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin: 20px 0;
}
.affin9-card {
  border: 1px solid #f7f7f7;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  padding: 10px;
  background: #f9f9f9;
  cursor: pointer;
}

.affin9-card:hover{
  box-shadow: 5px 5px 10px rgba(143, 143, 143, 0.514);
}

.affin9-card img {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #ddd;
}
.affin9-video {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.affin9-video iframe {
  width: 100%;
  height: 200px;
}
.affin9-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}
.affin9-modal-content {
  max-width: 90%;
  max-height: 90%;
}
.affin9-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}

.gallerybtn{
  text-decoration: none;
  color: rgb(59, 59, 59);
  width: 100%;
  text-align: right;
  font-size: 16px;
}


.gallerybtn:hover{
  color: rgb(189, 0, 0);
}


@media (max-width: 768px) {
  .affin9-grid {
      grid-template-columns: repeat(2, 1fr);
  }
  .affin9-video {
      grid-template-columns: repeat(1, 1fr);
  }
}
/* port folio ends */



.covf3{
  /* font-family: "Playwrite ZA", serif;
  font-optical-sizing: auto;
  font-style: normal; */
  max-width: 800px;
  font-size: 1.2rem;
  padding: 20px;
}


.servicebbg{
  background-color: rgb(221, 0, 0);
  color: white;
  width: 100%;
  min-height: 200px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
}




/* <!-- about us details  placement on home as requested by Dr. Affin starts --> */

.sprqabout{
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}

.sprqabout1{
  width: 100%;
  min-height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(126, 0, 0);
}

.sprqabout1 h2{
  color: white;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
}

.sprqabout2{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sprqabout3{
  width: 50%;
  padding: 40px;
}

.spro54{
  box-shadow: -10px -2px 12px -3px rgba(84,84,84,0.45);
-webkit-box-shadow: -10px -2px 12px -3px rgba(84,84,84,0.45);
-moz-box-shadow: -10px -2px 12px -3px rgba(84,84,84,0.45);
}

.spro54:hover{
  transition: 0.5s ease-in;
  box-shadow: -10px -2px 12px -3px rgba(84, 84, 84, 0.048);
-webkit-box-shadow: -10px -2px 12px -3px rgba(84, 84, 84, 0.048);
-moz-box-shadow: -10px -2px 12px -3px rgba(84, 84, 84, 0.068);
}

.sprqabout img{
  width: 100%;
}

.sprqabout5{
  width: 100%;
  padding: 5vw;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.sprqabout5 p{
  max-width: 800px;
}

.sprqabout3 p, .sprqabout5 p{
  font-size: 1.1rem;
  color: rgb(27, 27, 27);
  font-family: 'Poppins', sans-serif;
}


@media only screen and (max-width: 574px) {
  .sprqabout3 p, .sprqabout5 p{
    font-size: 1.2rem;
  }
}



/* responsive */

.sprqabout2{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sprqabout2 img{
  width: 50%;
  left: 50%;
  padding: 20px;
  display: none;
}

.sprq2{
  background-image: url("../images/fbanner.png");
  background-position: center;
  background-size: cover;
  min-height: 300px;
  padding: 20px;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
}

.sprq2 p{
  max-width: 600px;
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
}

@media only screen and (max-width: 574px) {
  .sprqabout2{
    width: 100%;
    display: block;
  }

  .sprqabout3{
    width: 100%;
    padding: 15px;
  }

  .sprqabout2 img{
    display: block;
  }

  .sprq2{
      background-image: url("../images/fbanner2.jpg");
      background-position: center;
      background-size: cover;
      min-height: 300px;
      padding: 20px;
      width: 100%;
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;
      color: white;
      justify-content: left;
      align-items: center;
      text-align: left;
  }
}

/* <!-- about us details  placement on home as requested by Dr. Affin ends --> */




/* social rep starts */
.affin4v-container {
  position: relative;
  width: 100%;
  min-height: 90vh;
  padding-top: 40px;
  padding-bottom: 40px;
  background: url('../images/affinbanners/ccpp.jpg') no-repeat center center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.affin4v-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Transparent black overlay */
}

.affin4v-content {
  position: relative;
  color: white;
  /* text-align: center; */
  z-index: 1;
}

.affin4v-content img{
  width: 50%;
  padding: 20px;
}

.affin4v-content h2 {
  font-size: 2rem;
  margin: 0;
  width: 100%;
  text-align: center;
}

.affin4v-content p {
  font-size: 1.2rem;
  padding: 15px;
  max-width: 800px;
  line-height: 140%;
}

@media screen and (max-width: 414px){
  .affin4v-content p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.712);
    padding: 15px;
  }

  .affin4v-overlay {
    background: rgba(0, 0, 0, 0.726); /* Transparent black overlay */
  }
}


/* social rep ends */



/* middle home slider starts */
.affinmo-carousel {
  width: 90%;
  max-width: 600px;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  display: none;
}

.affinmo-carousel-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.affinmo-carousel img {
  width: 100%;
  flex: 1 0 100%;
  border-radius: 10px;
}

/* Control Buttons */
.affinmo-controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.affinmo-controls button {
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.affinmo-controls button:hover {
  background: rgba(0, 0, 0, 0.8);
}

@media only screen and (max-width: 684px) {
  .affinmo-carousel{
    display: block;
  }
}
/* middle hoome slider ends */

@media only screen and (max-width: 800px) {
  .lsphone3{
    display: none !important;
  }
}


/* new newsletter starts */
.nsaffinm {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background: rgb(25, 26, 37);
}

.container-nsaffin {
  display: flex;
  width: 100%;
  max-width: 900px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  animation: fadeIn 1.2s ease-in-out;
}

.left-nsaffin {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.left-nsaffin h2 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.left-nsaffin p {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

.left-nsaffin input {
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.left-nsaffin input:focus {
  border-color: #ff758c;
  outline: none;
}

.left-nsaffin button {
  width: 100%;
  background: rgb(2, 6, 27);
  color: white;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.left-nsaffin button:hover {
  background: #9b0123;
}

.right-nsaffin {
  flex: 1;
  background: #ffe3e3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.right-nsaffin img {
  width: 100%;
  max-width: 350px;
}

@keyframes fadeIn {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .container-nsaffin {
      flex-direction: column;
  }

  .right-nsaffin {
      order: -1;
  }

  .left-nsaffin h2 {
    font-size: 20px;
  }
  
}
/* new newsletter ends */



/* 2 cards starts */
 /* Container for side-by-side layout */
 .affinlg-container {
  display: flex;
  width: 100%;
  flex-wrap: wrap; /* Allows wrapping on smaller screens */
  margin: 0;
  overflow: hidden;
}

/* Style for the left image section */
.affinlg-left-section {
  width: 30%; /* Default width of 50% */
  box-sizing: border-box;
  display: flex;
  justify-content: right;
  align-items: center;
  padding: 20px;
}

.affinlg-left-section img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Style for the right section with background image and overlay */
.affinlg-right-section {
  position: relative;
  width: 70%; /* Default width of 50% */
  background: url('../images/linbc2.jpg') no-repeat center center;
  background-size: cover;
  color: white; /* Text color */
  min-height: 300px; /* Set the height of the right section */
  box-sizing: border-box;
}

/* The overlay for the right section */
.affinlg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(65, 0, 0, 0.603); /* Transparent black overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* Style for the paragraph inside the overlay */
.affinlg-right-section p {
  font-size: 18px;
  text-align: center;
  margin: 0;
  font-family: "Coda", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
  /* On smaller screens, make each section take full width */
  .affinlg-left-section,
  .affinlg-right-section {
      width: 100%; /* 100% width for both sections */
  }

  .affinlg-right-section {
    min-height: 600px;
  }

  .affinlg-overlay p {
      font-size: 18px; /* Adjust text size for smaller screens */
      text-align: left;
      font-family: 'Poppins', sans-serif;
  }
}


/* 2 cards ends */



.pcontrol1 {
  display: none;
}


@media only screen and (max-width: 500px) {
  .pcontrol2 {
    display: none;
  }

  .pcontrol1 {
    display: block;
  }
}







/* new contact pg section starts */

.newcic{
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: rgba(255, 0, 0, 0.021);
}

.contact-container-afs25 {
  min-width: 88vw;
  background: #ffffff;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  text-align: center;
  min-height: 400px;
  padding-top: 50px;
  padding-bottom: 50px;
}
.contact-container-afs25 h2 {
  font-size: 32px;
  font-weight: 600;
  color: #222;
  margin-bottom: 10px;
}
.contact-container-afs25 p.subtitle-afs25 {
  font-size: 18px;
  color: #666;
  margin-bottom: 40px;
}
.contact-box-afs25 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px; /* adds even spacing between cards */
}
.contact-info-afs25 {
  flex: 1 1 calc(33.333% - 20px); /* ensures max 3 per row */
  min-width: 280px;
  background-color: rgb(211, 211, 211);
  padding: 25px 15px 35px;
  box-sizing: border-box;
}
.contact-info-afs25 i {
  font-size: 28px;
  color: #ff4d4d;
  margin-bottom: 10px;
}
.contact-info-afs25 h3 {
  font-size: 18px;
  font-weight: 600;
  color: #000000;
  font-family: 'Poppins', sans-serif;
}
.contact-info-afs25 p {
  font-size: 16px;
  line-height: 1.6;
  color: #3a3a3a;
  font-family: 'Poppins', sans-serif;
}
.email-afs25 a {
  color: #ff4d4d;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
}
.email-afs25 a:hover {
  text-decoration: underline;
}
@media (max-width: 768px) {
  .contact-box-afs25 {
      flex-direction: column;
      margin-right: 10px;
  }
}


@media only screen and (max-width: 392px) {
  .contact-info-afs25 {
    flex: 1 1 calc(33.333% - 20px); /* ensures max 3 per row */
    min-width: 200px !important;
    max-width: 350px !important;
    background-color: rgb(255, 223, 223);
    padding: 25px 15px 35px;
    box-sizing: border-box;
  }

  .contact-info-afs25 p {
    font-size: 14px;
  }
}


/* new contact pg section ends */






.adminmsg9b{
  text-decoration: none;
  color: rgb(97, 38, 38);
  width: 100%;
  padding: 10px;
  font-size: 0.9rem;
}

.adminmsg9:hover{
  color: red;
}

.adminmsg9b:hover{
  color: red;
}



.hbalance{
    display: none;
}



@media only screen and (max-width: 480px) {
  .hbalance{
    display: flex;
    width: 90%;
    height: 40px;
  }
}




/* home middle gallery starts */
.affingz-container {
  max-width: 1200px;
  margin: 40px auto;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border: 1px solid #f0d6df;

}

.affingz-content {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-left: -5px;
}

.affingz-image-box {
  display: flex;
  flex-direction: row;
  gap: 2px;
  flex: 1;
}

.affingz-photo-container {
  position: relative;
  flex: 1;
}

.affingz-photo-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.affingz-btn {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 6px 14px;
  background-color: #002b36;
  color: #fff;
  border: none;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
}

.affingz-meeting-photo {
  flex: 1;
}

.affingz-meeting-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 600px) {
  .affingz-image-box {
    display: none;
  }

  .affingz-meeting-photo img {
    width: 98vw;
  }

  .affingz-container {
    margin: 10px auto;
    padding: 10px;
    box-shadow: none;
    border: none;
  }
}
/* home middle gallery ends */


/* service page starts */
.affinss2-hero {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}



.affinss2-hero h1 {
  font-size: 3em;
  font-weight: 700;
  background-color: rgba(0, 0, 0, 0.74);
  padding: 20px;
  border-radius: 10px;
}

.affinss2-section {
  width: 100vw;
  /* margin: 60px auto; */
  /* padding: 0 20px; */
}


.affinss2-section h2{
  padding: 20px;
}

.affinss2-serimg {
  width: 100%;
  padding: 10px;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  margin-top: -20px;
  gap: 10px; /* Optional: adds space between images */
  background-color: rgb(218, 218, 218);
  margin-bottom: 20px;
  justify-content: center;
  align-items: center;
}

.affinss2-serimg img {
  width: 50%;
  max-width: 600px;
  object-fit: cover; /* Ensures the image covers its container */
}


.affinss2-section p {
  font-size: 1.1em;
  margin-bottom: 40px;
  width: 100%;
  max-width: 1000px;
  text-align: center;
  color: #333;
  padding: 15px;
}

.affinss2-content-block {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 60px;
  align-items: center;
  background-color: rgba(255, 179, 66, 0.404);
  display: flex;
  justify-content: center;
  align-items: center;
}

.affinss2-content-block img {
  flex: 1 1 45%;
  max-width: 50%;
  border-radius: 10px;
}

.affinss2-content-text {
  flex: 1 1 45%;
  /* background-color: orange; */
}

.affinss2-content-text h2 {
  font-size: 1.8em;
  color: #f00000;
  margin-bottom: 15px;
  padding: 15px;
}

.affinss2-content-text p{
  text-align: left !important;
}

.affinss2-cta {
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
  justify-content: center;
  transition: background 0.3s;
}


.affinss2-cta a {
  background-color: #aa0000;
  color: white;
  padding: 15px 30px;
  text-decoration: none;
  border-radius: 5px;
}

.affinss2-cta a:hover {
  background-color: #750000;
}

@media (max-width: 768px) {
  .affinss2-content-block {
    flex-direction: column;
    align-items: flex-start;
  }

  .affinss2-content-block img,
  .affinss2-content-text {
    max-width: 100%;
    flex: 1 1 100%;
  }

  .affinss2-content-block img {
    margin-bottom: 20px;
  }

  .affinss2-content-text h2 {
    font-size: 1.5em;
  }
}

/* service page ends */



.showplevels{
  display: none;
}


@media only screen and (max-width: 838px) {
  .showplevels{
    display: block;
    width: 100%;
    margin-bottom: 10px;
    margin-top: -30px;
  }

  .showplevels img{
    width: 100%;
  }

  .affinss2-content-block {
    gap: 20px;
    margin-bottom: 20px;
  }
}


/* about us card tiles starts */
.affingrid1 {
  display: flex;
  width: 100vw;
  height: 100vh;
}

.affingrid2,
.affingrid3 {
  width: 50%;
  height: 100%;
}

.affingrid2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding-right: 10px;
}

.affingrid3 {
  display: flex;
  flex-direction: column;
}

.affingrid4,
.affingrid5 {
  height: 50%;
  width: 100%;
}

.affingrid4 {
  background-color: #f0f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.affingrid4 h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  font-family: sans-serif;
}

.affingrid4 p {
  font-size: 1.1rem;
  line-height: 1.6;
  font-family: sans-serif;
}

.affingrid5 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile-friendly tweaks */
@media screen and (max-width: 674px) {
  .affingrid1 {
    flex-direction: column;
  }

  .affingrid2,
  .affingrid3 {
    width: 100%;
    height: auto;
  }

  .affingrid4,
  .affingrid5 {
    height: auto;
  }

  .affingrid4 {
    padding: 1.5rem;
  }

  .affingrid4 h1 {
    font-size: 1.5rem;
  }

  .affingrid4 p {
    font-size: 1rem;
  }

  .affingrid2 img,
  .affingrid5 img {
    height: auto;
    padding: unset;
  }
}
/* about us card tiles ends */


.afhcontrol2{
  display: none;
}

@media screen and (max-width: 991px){
  .afhcontrol2{
    display: unset;
  }

  .afhcontrol1{
    display: none;
  }
}



.servline{
  width: 80%;
  border: 1px solid darkred;
  margin-top: 20px;
  margin-bottom: 20px;
}


/* about cards start */
.affinxc-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.affinxc-card {
  width: 25%;
  /* padding: 10px; */
}

.affinxc-card img {
  width: 100%;
  height: auto;
  display: block;
}

.affinxc-card-text {
  background-color: red;
  color: white;
  padding: 20px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  font-size: 20px;

}

/* Tablet */
@media (max-width: 768px) {
  .affinxc-card {
    width: 50%;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .affinxc-card {
    width: 100%;
  }
}
/* about cards ends */



/* chairman message starts */
.chmsgx1{
  width: 100%;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  margin-bottom: -20px;
  z-index: 2;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
}

.chmsgx1 img{
  max-width: 300px;
}

.chmsgx2{
  padding: 20px;
}

.chmsgx2 p{ 
  color: white;
  font-size: 22px;
}

.chmsgx2 span{
  color: rgb(255, 255, 255);
  font-size: 8rem;
  margin-bottom: unset !important;
  padding-bottom: unset !important;
  font-family: "UnifrakturMaguntia", cursive;
  font-weight: 400;
  font-style: normal;
  padding: 10px;
}

.gapcc{
  margin-top: -70px !important;
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 603px) {
  .chmsgx1 {
    display: block;
  }

  .chmsgx1 img{
    max-width: 100%;
  }

  .covf h2{
    font-weight: 600;
    font-size: 2rem;
  }

  .covf{
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
/* chairman message ends */




/* home side and middle card starts */
.container-affinox1 {
  width: 100%;
  display: flex;
  align-items: stretch; /* Makes all cards same height */
  flex-wrap: wrap;
}

.card-affinox1 {
  overflow: hidden;
  display: flex;
}

.left-card-affinox1, .right-card-affinox1 {
  width: 25%;
}

.right-card-affinox1 img{
  object-position: right;
}

.left-card-affinox1 img{
  object-position: left;
}

.center-card-affinox1 {
  width: 50%;
  flex-direction: column;
}

.card-affinox1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.center-card-affinox1 img {
  object-fit: contain; /* Shows full image without cutting */
}

@media (max-width: 500px) {
  .left-card-affinox1,
  .center-card-affinox1,
  .right-card-affinox1 {
    width: 100%;
  }
}
/* home side and middle card starts */

/* in the fields of cards starts */
.affinlo2-main-card {
  width: 100%;
  padding: 10px;
  background-color: #f0f0f0;
}

.affinlo2-cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 cards per row for desktop */
  gap: 10px;
}

.affinlo2-card {
  background-color: white;
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.affinlo2-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 3 cards per row when screen width is less than 791px */
@media (max-width: 790px) {
  .affinlo2-cards-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 2 cards per row when screen width is less than 645px */
@media (max-width: 644px) {
  .affinlo2-cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1 card per row when screen width is less than 500px */
@media (max-width: 499px) {
  .affinlo2-cards-container {
    grid-template-columns: 1fr;
  }
}
/* in the fields of cards ends */


/* wellbeing start */
.wellbeing-container {
  text-align: center;
  padding: 10px;
  background: white;

}

.wellbeing-text {
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  font-size: 2rem;
  margin-top: 20px;
  margin-bottom: 20px;
}

@media only screen and (max-width: 706px) {
  .wellbeing-text {
    font-size: 1rem;
  }
}

@media only screen and (max-width: 356px) {
  .wellbeing-text {
    font-size: 0.8rem;
  }
}
/* wellbeing ends */



/* we love starts */
.container-affinomsll {
  display: flex;
  width: 100%;
}

.card-affinomsll {
  width: 50%;
}

.card-affinomsll img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 500px) {
  .card1-affinomsll {
    display: none;
  }

  .card2-affinomsll {
    width: 100%;
  }
}
/* we love ends */

/* we invent starts home */
.body-affindl7 {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 40px 0;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  background-image: url('../images/mcc.jpg'); 
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow-x: auto; /* Allows horizontal scrolling if needed */
}

/* Overlay */
.body-affindl7::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.651);
  z-index: 0;
}

.container-affindl7 {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 1400px; /* Increased max-width */
  padding: 0 20px;
  position: relative;
  z-index: 1;
  flex-wrap: nowrap; /* Prevent wrapping to new line */
}

.card-affindl7 {
  position: relative;
  min-width: 300px; 
  width: 30%;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
  border-radius: 5px;
  flex-shrink: 0; /* Prevent cards from shrinking */
}

.card-affindl7:hover {
  transform: translateY(-10px);
}

.img-affindl7 {
  width: 100%;
  height: 300px; /* Reduced height for better mobile display */
  object-fit: cover;
  display: block;
}

.caption-affindl7 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 15px 0;
  text-align: center;
  font-size: 20px; /* Reduced font size */
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Responsive adjustments - now only scaling */
@media (max-width: 1024px) {
  .card-affindl7 {
    min-width: 250px;
  }
  .img-affindl7 {
    height: 250px;
  }
  .caption-affindl7 {
    font-size: 18px;
    padding: 12px 0;
  }
}

@media (max-width: 768px) {
  .container-affindl7{
    display: block;
    
  }
  .card-affindl7 {
    width: 100%;
    margin: 5px;
  }
  .img-affindl7 {
    height: auto;
  }
  .caption-affindl7 {
    font-size: 16px;
    padding: 10px 0;
  }
}
/* we invent ends home */


/* dream builders starts */
.dream-builder-section {
  position: relative;
  width: 100%;
  height: 60vh; /* Adjust height as needed */
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../images/newbanners2/nbc9.jpg'); /* Replace with your image path */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 0 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.dream-builder-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.719); /* Black overlay with 60% opacity */
  z-index: 1;
}

.dream-builder-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  text-align: center;
  color: white;
}

.dream-builder-content p {
  font-size: 25px;
  margin: 0;
}



@media (max-width: 768px) {
  .dream-builder-section {
    height: 50vh;
  }
  .dream-builder-content h2 {
    font-size: 1.5rem;
    letter-spacing: 1px;
  }
}

@media (max-width: 480px) {
  .dream-builder-content h2 {
    font-size: 1.2rem;
  }
}
/* dream builders ends */



/* simple statement starts */
    
    .simple-statement {
      width: 100%;
      padding: 20px;
      background-color: white;
      text-align: center;
      box-sizing: border-box;
    }

    .simple-statement h2 {
      font-size: 3rem;
      color: #222;
      letter-spacing: -0.5px;
      margin: 0;
      line-height: 1.2;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .simple-statement h2 {
        font-size: 1.8rem;
      }
    }

    @media (max-width: 480px) {
      .simple-statement {
        padding: 50px 15px;
      }
      .simple-statement h2 {
        font-size: 1.5rem;
      }
    }
/* simple statement ends */


/* 120 starts */
.affin120{
  width: 100%;
  min-height: 50vh;
  display: flex;
}

.affin1202{
  width: 50%;
  min-height: 50vh;
  padding-bottom: 20px;
  padding-bottom: 20px;
  object-fit: contain;
}

.affin1202 img{
  width: 100%;
  object-fit: contain;
}

.affin1202b{
  background-image: url("../images/mccoverlay.jpg");
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.affin1202b article{ 
  background-color: red;
  width: 100%;
  padding: 40px;
  border-bottom-left-radius: 80px;
  color: white;
  font-size: 1.5rem;
  margin-top: 50px;
  margin-bottom: 50px;
}


@media only screen and (max-width: 700px) {
  .affin120 {
    display: block;
   }

   .affin1202{
    width: 100%;
    min-height: unset;
    padding-bottom: 20px;
    padding-bottom: 20px;
    object-fit: contain;
  }
}
/* 120 ends */


.ddggc{
  margin-top: 10px;
  margin-bottom: 10px;
}

/* since inception starts*/
.affinsince-container {
  display: flex;
  width: 100vw;
  flex-direction: row;
}

.affinsince-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 10px rgba(1, 33, 54, 0.575);
  justify-content: center;
  align-items: center;
  text-align: left;
  min-height: 200px;
}

.affinsince-card p{
  font-size: 18px;
  padding: 15px;
}

.bxspan{
  font-size: 2rem;
  padding: 15px;
  border: 2px solid red;
  font-weight: bolder;
}


.affinsince-card img {
  width: 100%;
  height: 100%;
  /* object-fit: contain; */
  display: block;
  object-position: left;
}

.affinsince-middle-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.affinsince-middle-top {
  background-color: red;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  min-height: 50%;
  padding: 30px;
}

.affinsince-middle-bottom {
  flex: 1;
  min-height: 50%;
}

.affinsince-middle-bottom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .affinsince-container {
    flex-direction: column;
  }

  .affinsince-card,
  .affinsince-middle-card {
    width: 100%;
    height: auto;
  }

  .affinsince-middle-card {
    height: auto;
  }

  .affinsince-middle-top,
  .affinsince-middle-bottom {
    height: 50vw;
  }
}
/* since inception ends */

/* we believe starts */
.affin2card456-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
  margin-bottom: 30px;
}

.affin2card456-bg{
  background-image: url("../images/newbanners2/gg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.affin2cardp{
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  height: 100%;
  /* text-align: left; */
  font-size: 18px;
}

.affin2card456-card {
  flex: 1 1 50%;
  max-width: 50%;
}

.affin2card456-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.affin2card456-card.affin2card456-gray {
  background-color: #707070;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-height: 200px;
}

.affin2card456-card.affin2card456-gray p {
  color: #ffffff;
  font-size: 18px;
  text-align: center;
}

@media (max-width: 768px) {
  .affin2card456-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}
/* we believe ends */



.pducandcircle{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: -1px 0px 5px 7px rgba(143,143,143,0.63);
-webkit-box-shadow: -1px 0px 5px 7px rgba(143,143,143,0.63);
-moz-box-shadow: -1px 0px 5px 7px rgba(143,143,143,0.63);
}


.pducandcircle div{
  width: 50%;
}

.pducandcircle div img{
  width: 100%;
  padding: 10px;
}


@media only screen and (max-width: 550px) {
  .pducandcircle{
    display: block;
  }

  .pducandcircle div{
  width: 100%;
}
}



.bgrd{
  background-color: red !important;
}


/* 3 cards 2 starts */
.card-container-affin33cd {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Left card - 40% */
.card-left-affin33cd {
  flex: 0 0 40%;
  max-width: 40%;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-left-affin33cd img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Right card - 60% */
.card-right-affin33cd {
  flex: 0 0 60%;
  max-width: 58%;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.card-right-affin33cd p {
  padding: 20px;
  font-size: 18px;
  width: 100%;
  height: 100%;
  background: linear-gradient(6deg, rgba(155, 42, 42, 1) 0%, rgba(255, 0, 0, 1) 100%);
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .card-left-affin33cd,
  .card-right-affin33cd {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


.sectionwtext{
  padding: 15px;
  width: 100%;
  background-color: rgb(255, 0, 0);
  margin-top: 30px;
  margin-bottom: 30px;
  color: white;
  padding-bottom: 50px;
}

.sectionwtext h3{
  padding-top: 30px;
  margin-top: 10px;
  font-size: 40px;
  color: white;
  font-family: 'Barlow Condensed', sans-serif;
}

.sectionwtext p{
  font-size: 30px;
  max-width: 800px;
  color: white;
  padding-top: 20px;
  font-family: 'Barlow Condensed', sans-serif;
}

.sectionwtext p span{
  font-size: 30px;
  font-family: 'Barlow Condensed', sans-serif;
  color: white;
}


.sectionwimg, .sectionwtext img{
  width: 100%;
}

.sectionwimg img{
  width: 60%;
  margin-top: -80px;
}

@media only screen and (max-width: 500px) {
  .sectionwimg img{
    width: 100%;
    margin-top: -70px;
  }  
}


.sectionwtext2{
  padding: 15px;
  width: 100%;
  background-color: rgb(221, 221, 221);
  margin-bottom: 30px;
  padding-bottom: 50px;
}

.sectionwtext2 h3{
  padding-top: 50px;
  margin-top: 20px;
}

.sectionwtext2 p{
  font-size: 25px;
  max-width: 800px;
  padding-top: 20px;
}
/* 3 cards 2 ends */



/* new layout style starts */
  .layoutx1{
      width: 100%;
      min-height: 50px;
      /* padding: 10px; */
  }

  .layoutx1 img{
      width: 100%;
      height: auto;
  }

  .layoutx1 p{
      padding: 25px;
      margin-top: 15px;
      padding-left: 5vw;
      padding-right: 5vw;
      color: rgb(0, 0, 0);
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .layoutx1 p span{
      font-size: 30px;
      max-width: 1200px;
      font-family: 'Barlow Condensed', sans-serif;
  }

  
  @media only screen and (max-width: 800px) {
    .layoutx1 p{
      padding-left: unset;
      padding-right: unset;
      padding: 10px;
      margin-top: 5px;
    }

    .layoutx1 p span{
      font-size: 20px;
      max-width: 1200px;
      font-family: 'Barlow Condensed', sans-serif;
    }
  }


/* new layout style ends */


.withbg{
  background-color: rgb(221, 221, 221) !important;
}

.withbg2{
  background-color: rgb(255, 118, 118) !important;
}

.cimagecc{
  padding: 0;
  margin: 0;
}

.cimagecc img{
  width: 100%;
}


/* new form style starts */
/* Container wrapper */
.ctmpns {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f9f9f9;
}

/* Card-like inner container */
.ctmp1ns {
  background: white;
  padding: 40px 30px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 350px;
}

/* Form section */
.contactns h1 {
  font-size: 26px;
  font-weight: 700;
  color: #222;
  margin-bottom: 20px;
}

.contactns form {
  display: flex;
  flex-direction: column;
}

/* Input wrappers */
.columnns fieldset {
  border: none;
  margin-bottom: 15px;
  padding: 0;
}

.columnns input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
}

/* Submit button */
#buttonns {
  background-color: #b30000;
  color: white;
  border: none;
  padding: 12px;
  width: 100%;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#buttonns:disabled {
  background-color: #888;
  cursor: not-allowed;
}

#buttonns:hover:enabled {
  background-color: #990000;
}

/* Links */
.adminmsg9ns,
.adminmsg9bns {
  font-size: 14px;
  color: #333;
  margin: 10px;
}

.adminmsg9ns:hover,
.adminmsg9bns:hover {
  text-decoration: underline;
  color: #000;
}

/* Message paragraph */
.adminmsg92ns {
  color: red;
  font-weight: bold;
  font-size: 14px;
  margin-top: -10px;
  margin-bottom: 15px;
}

/* new form style ends */


.himccontrol{
  width: 200px;
}

.blackbg8{
  background-color: rgb(255, 0, 0);
}

.blackbg8 span{
  color: white;
}



/* circle logo home starts */
.sectorcircle { 
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;

  background: 
    linear-gradient(rgba(0, 0, 0, 0.685), rgba(0, 0, 0, 0.623)),
    url('../images/finaladded/worldsort4/dsc_2109.webp');

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


.sectorcircle img { 
  width: 50%;
}


@media only screen and (max-width: 700px) {
  .sectorcircle { 
    padding: 30px;
  }

  .sectorcircle img { 
    width: 80%;
  }
}

@media only screen and (max-width: 421px) {
  .sectorcircle { 
    padding: 20px;
  }

  .sectorcircle img { 
    width: 100%;
  }
}
/* circle logo home ends */



/* single page message modal starts */
.message2 {
    position: fixed;
    top: 20px;
    right: -350px; /* start off-screen */
    background-color: #f56565; /* light red */
    color: #fff;
    padding: 15px 25px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    font-size: 1rem;
    z-index: 9999;
    min-width: 250px;
    max-width: 300px;
    opacity: 0;
    transition: all 0.5s ease;
}

/* Slide-in effect */
.message2.show {
    right: 20px;
    opacity: 1;
}

/* Close button */
.message2 i {
    cursor: pointer;
    float: right;
    font-style: normal;
    font-weight: bold;
    margin-left: 10px;
}
/* single page message modal ends */


.test2col{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.test2col img{
  width: 50%;
}


/* sneake card starts */
.card-container-gc {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      width: 100vw;
      padding: 10px;
    }

    @media (max-width: 768px) {
      .card-container-gc {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .card-gc {
      position: relative;
      height: 300px;
      background-size: cover;
      background-position: center;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      text-transform: uppercase;
      font-size: 1.5rem;
      font-weight: bold;
    }

    .card-gc::before {
      content: "";
      position: absolute;
      top: 6px;
      left: 6px;
      right: 6px;
      bottom: 6px;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }

    .card-gc h3 {
      position: relative;
      z-index: 2;
    }

    /* Bright orange border animation */
    .card-gc span {
      position: absolute;
      display: block;
      background: #ff6600; /* bright orange */
    }

    .card-gc span:nth-child(1) {
      height: 6px;
      width: 0;
      top: 0;
      left: 0;
      transition: width 0.25s linear;
    }

    .card-gc span:nth-child(2) {
      height: 0;
      width: 6px;
      top: 0;
      right: 0;
      transition: height 0.25s linear 0.25s;
    }

    .card-gc span:nth-child(3) {
      height: 6px;
      width: 0;
      bottom: 0;
      right: 0;
      transition: width 0.25s linear 0.5s;
    }

    .card-gc span:nth-child(4) {
      height: 0;
      width: 6px;
      bottom: 0;
      left: 0;
      transition: height 0.25s linear 0.75s;
    }

    .card-gc:hover span:nth-child(1) {
      width: 100%;
    }

    .card-gc:hover span:nth-child(2) {
      height: 100%;
    }

    .card-gc:hover span:nth-child(3) {
      width: 100%;
    }

    .card-gc:hover span:nth-child(4) {
      height: 100%;
    }


  @media only screen and (max-width: 408px) {
    .pppcontrol h3{
      font-size: 22px;
    }
  }

    
/* sneake card ends */





/* video display start */
section.video-section {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 40px 20px;

      /* 🔥 Gradient overlay + transparent background image */
      background: 
        linear-gradient(135deg, rgba(255, 77, 77, 0.432), rgba(179, 0, 0, 0.623)),
        url("../images/exphoto/4.webp");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      margin-top: -20px;
    }

    .video-container {
      position: relative;
      width: 80%;
      max-width: 900px;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
      background: #000;
    }

    .video-container video {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Optional: border glow */
    .video-container::after {
      content: "";
      position: absolute;
      inset: 0;
      border: 3px solid rgba(255, 255, 255, 0.2);
      border-radius: 15px;
      pointer-events: none;
    }

    /* Mobile responsive */
    @media (max-width: 600px) {
      section.video-section {
        padding: 20px 10px;
      }
      .video-container {
        width: 100%;
        border-radius: 10px;
      }
    }
    
    
    
      /* youtube iframe */
    .video-container iframe {
      width: 100%;
      height: 500px; /* ✅ fixed height for desktop */
      display: block;
    }
    
    @media (max-width: 600px) {
      .video-container iframe {
        height: 250px; /* ✅ smaller height for mobile */
      }
    }

/* video display ends */





/* mission vision starts */
section.vs {
  padding: 80px 20px;
  max-width: 1300px;
  margin: auto;
}

section.vs h2 {
  text-align: center;
  font-size: 3.5rem;
  margin-bottom: 50px;
  color: #ff0000;
  position: relative;
  /* font-family: 'Segoe UI', sans-serif; */
}

section.vs h2::after {
  content: "";
  width: 80px;
  height: 4px;
  background: rgb(141, 0, 0);
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
}

.gridvs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.cardvs {
  background: #fff;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.479);
  text-align: center;
  transition: 0.4s;
}

.cardvs:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.082);
}

.cardvs i {
  font-size: 40px;
  color: #ff0909;
  margin-bottom: 15px;
}

.cardvs h3 {
  font-size: 20px;
  color: #000000e3;
  margin-bottom: 10px;
  font-family: 'Segoe UI', sans-serif;
}

.cardvs p {
  font-size: 16px;
  line-height: 1.6;
  font-family: 'Segoe UI', sans-serif;
  color: #292929;
}

@media (max-width: 768px) {
  section.vs {
    padding: 50px 15px;
  }

  section.vs h2 {
    font-size: 30px;
  }

  .cardvs p {
  font-size: 18px;
  line-height: 1.6;
}
}

.vsbg {
  background-color: rgb(37, 37, 37);
}

.vsbg p {
  max-width: 800px;
  color: rgb(255, 220, 220);
  font-size: 30px;
}

@media only screen and (max-width: 500px) {
  .vsbg p {
    font-size: 25px;
}

}

/* mission vision ends */




/* happy customers starts */
.card-sectiongcup {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 30px;
      padding: 50px 20px;
      background: #c9c9c9;
      justify-items: center;
      font-family: Arial, sans-serif;
      margin-top: -30px;
    }

    .cardgcup {
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background-color: #fff;
      box-shadow: 0 20px 20px rgba(0, 0, 0, 0.336); /* deeper red shadow */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: background 0.4s, color 0.4s;
      font-family: Arial, sans-serif;
    }

    .cardgcup h1 {
      margin: 0;
      font-size: 2.2rem;
      position: relative;
      color: #000;
      transition: color 0.4s;
    }

    .cardgcup h1::after {
      content: "";
      display: block;
      width: 50%;
      height: 4px;
      background: red;
      margin: 8px auto 0;
      transition: background 0.4s;
    }

    .cardgcup h2 {
      margin: 0;
      font-size: 2.2rem;
      position: relative;
      color: #000;
      transition: color 0.4s;
    }

    .cardgcup h2::after {
      content: "";
      display: block;
      width: 50%;
      height: 4px;
      background: red;
      margin: 8px auto 0;
      transition: background 0.4s;
    }

    .cardgcup p {
      margin: 10px 0 0;
      font-size: 1.3rem;
      color: #555;
      line-height: 1.4;
      transition: color 0.4s;
    }

    /* Hover effect */
    .cardgcup::before {
      content: "";
      position: absolute;
      top: var(--y, 0);
      left: var(--x, 0);
      width: 0;
      height: 0;
      border-radius: 50%;
      background: red;
      transform: translate(-50%, -50%);
      transition: width 0.6s ease, height 0.6s ease;
      z-index: 0;
    }

    .cardgcup:hover::before {
      width: 300%;
      height: 300%;
    }

    .cardgcup:hover h1,
    .cardgcup:hover p {
      color: #fff;
    }

    .cardgcup:hover h1::after {
      background: #fff;
    }

    .cardgcup * {
      position: relative;
      z-index: 1;
    }

    /* Mobile: 2 per row */
    @media (max-width: 768px) {
      .card-sectiongcup {
        grid-template-columns: repeat(2, 0.5fr);
        gap: 20px;
        padding: 50px 10px;
      }

      /* center the last card if it’s alone */
      .card-sectiongcup > .cardgcup:last-child:nth-child(odd) {
        grid-column: span 2;
        justify-self: center;
      }
    }

    /* Small mobile: make cards smaller */
    @media (max-width: 480px) {
      .cardgcup {
        width: 180px;
        height: 180px;
      }
    }

/* happy customers ends */


/* new contact us form starts */
/* wrapper */
.contactwrapvc {
  padding: 50px 20px;
  background: #f9f9f9;
  font-family: Arial, sans-serif;
}

/* grid layout */
.contactgridvc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1100px;
  margin: auto;
  align-items: center;
}

/* form side */
.contactformcolvc {
  background: #fff;
  padding: 25px 30px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.contacttitlevc {
  font-size: 1.6rem;
  margin-bottom: 20px;
  color: #222;
  text-align: center;
}

.contactformvc .formrowvc {
  margin-bottom: 15px;
}

.contactformvc input,
.contactformvc textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.contactformvc input:focus,
.contactformvc textarea:focus {
  border-color: #ff4d4d;
  outline: none;
  box-shadow: 0 0 6px rgba(255,77,77,0.25);
}

.contactbtnvc {
  width: 100%;
  padding: 12px;
  background: #ff4d4d;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.contactbtnvc:hover {
  background: #e33b3b;
}

/* image side */
.contactimgcolvc img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* responsive */
@media (max-width: 768px) {
  .contactgridvc {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
/* new contact us form ends */





/* other social media links starts */
 .social-grid-ssaffin {
      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      align-items: stretch;
      max-width: 1200px;
      margin: 0 auto;
    }

    .social-card-ssaffin {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      padding: 1rem;
      border: 1px solid #ccc;
      border-radius: 6px;
      background: #fff;
      color: inherit;
      transition: transform 0.12s ease;
      min-height: 110px;
    }

    .social-card-ssaffin:hover {
      transform: translateY(-4px);
      background: #dad7d7;
      border-radius: none;
    }

    .social-icon-ssaffin {
      font-size: 1.6rem;
      line-height: 1;
      margin-bottom: 0.5rem;
    }

    .social-name-ssaffin {
      margin: 0;
      font-size: 0.8rem;
      text-align: center;
      /* font-weight: 600; */
      color: rgb(104, 104, 104);
    }

    @media (max-width: 1280px) {
      .social-grid-ssaffin { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    }

    @media (max-width: 1100px) {
      .social-grid-ssaffin { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    @media (max-width: 860px) {
      .social-grid-ssaffin { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (max-width: 600px) {
      .social-grid-ssaffin {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
      }
      .social-card-ssaffin { padding: 0.75rem; min-height: 96px; }
      .social-icon-ssaffin { font-size: 1.4rem; }
      .social-name-ssaffin { font-size: 0.9rem; }
    }

    .social-card-ssaffin:focus {
      outline: 3px solid rgba(21,156,228,0.18);
      outline-offset: 2px;
    }
/* other social media links ends */