/*----------------------------------------

HOME_BANNER SECTION STARTS HERE

 -----------------------------------------  */

 .homeBanner {

     height: 85vh;

     background: linear-gradient(180deg, #111111 37.82%, #163766 100%);

     padding-top: 10vw;

 }



 .homeBanner .lTitle {

     font-size: 56px;

     font-weight: 700;

     line-height: 67px;

     text-align: left;

     font-family: "Space Grotesk";

     color: var(--white);

 }



 .homeBanner .lTitle span {

     color: #477EF3;

     background: -webkit-linear-gradient(#ACB5EC, #477EF3);

     background-clip: border-box;

     -webkit-background-clip: text;

     -webkit-text-fill-color: transparent;

     color: #477EF3;

     font-family: "Space Grotesk";



 }



 /*----------------------------------------

ABOUT_US SECTION STARTS HERE 

 -----------------------------------------  */



 .aboutUsHome .techList h6,

 .aboutUsHome .techList figure {

     margin: auto 0;

     font-size: var(--f18);

 }



 .aboutUsHome .innerDiv {

     line-height: 30px;

 }



 .aboutUsHome .techList .flexRow {

     padding: 12px;

     border: 1px solid #4d4d4d;

     border-radius: 4px;

 }



 .aboutUsHome .imgSide .innerDiv {

     background: url('../img/main/aboutHome.webp');

     background-position: center;

     background-size: cover;

     width: 80%;

     height: 100%;

     margin: auto;

 }







 /*----------------------------------------

ABOUT_US SECTION ENDS HERE 

 -----------------------------------------  */







 /*----------------------------------------

WHO_WE_ARE SECTION STARTS HERE 

 -----------------------------------------  */



 .whoWeAre {

     margin: 20px 0 160px 0;



 }





 .whoWeAre .content {

     margin: 20px 0;

     padding: 0 60px;

 }



 .whoWeAre .content .desc {

     text-align: left;

     line-height: 30px;

 }



 .whoWeAre .content .desc span {

     color: var(--blueSecondary);

 }



 .whoWeAre .blackGlassBg {

     padding: 40px 50px;

 }



 .whoWeAre .defaultBtn {

     float: right;

 }





 /*----------------------------------------

WHO_WE_ARE SECTION ENDS HERE 

 ---------------------- */





 /*----------------------------------------

 OUR SERVICE SECTION STARTS HERE 

 ---------------------- */

 .ourServices {

     background: var(--white);

     text-align: center;

     display: flex;

     align-items: center;

 }



 .ourServices .swiper .card {

     padding: 30px;

     text-align: left;

     height: 100%;

     display: grid;

 }



 .ourServices .swiper .CardNumber {

     background: #FFF;

     border-radius: 50%;

     width: 56px;

     height: 56px;

     display: flex;

     align-content: center;

     justify-content: center;

     padding: 9px;

     font-size: 32px;

     color: var(--blueBg);

     font-weight: 700;

 }



 .ourServices .swiper .card a:hover .CardNumber {

     position: absolute;

     right: 30px;

     top: 20px;

 }





 .ourServices .swiper-3d .swiper-slide-shadow {

     background: #ACB5EC;

 }



 .swiper-slide.swiper-slide-next {

     transform: translate3d(calc(14.25% - 1383px), 0px, -100px) rotateZ(6deg) scale(1);

 }



 .ourServices .content img {

     width: 40px;

     float: right;

 }



 .ourServices .swiper .serviceTitle {

     font-size: 36px;

     color: #FFF;

 }



 .ourServices .swiper .serviceDesc {

     font-size: 18px;

     color: #FFF;

     font-weight: 300;

 }



 .ourServices .swiper {

     width: 400px;

     height: 500px;

 }



 .ourServices .swiper-slide {

     display: flex;

     align-items: center;

     justify-content: center;

     border-radius: 18px;

     font-size: 22px;

     font-weight: bold;

     color: #fff;

     transition: transform 0.5s;

 }







 .ourServices .swiper .swiperBtn {

     left: auto;

     background: black;

     color: #FFF;

     width: 70px;

     height: 70px;

     border-radius: 50%;

 }



 .ourServices .swiper-button-next::after,

 .ourServices .swiper-button-prev::after {

     font-size: 23px !important;

 }



 .ourServices .swiper .swiper-button-next {

     position: absolute;

     right: -80%;

 }



 .ourServices .swiper .swiper-button-prev {

     position: absolute;

     left: -80%;

 }



 .ourServices .swiper-slide:nth-child(1n) {

     background-color: #477EF3;

 }



 /*----------------------------------------

 OUR SERVICE SECTION ENDS HERE 

 ---------------------- */









 /*----------------------------------------

 OUR SERVICE SECTION STARTS HERE 

 ---------------------- */





 .TechWeUse {

     margin: 50px 0;

 }



 .TechWeUse .swiper {

     padding: 40px 0 85px 0;

 }



 .TechWeUse .TechSwiperSlider img {

     width: 100px;

     height: 50px;

     object-fit: contain;

 }



 .TechSwiperSlider .chessbg1 {

     background: #171717;

     border: 1px dotted #FFFFFF57;



 }



 .TechSwiperSlider .chessbg2 {

     background: #111111;



 }



 .TechWeUse .techTitle {

     color: var(--white);

     font-size: 20px;

     margin: auto 0;

 }



 .TechWeUse figure {

     margin: 0;

 }



 .TechWeUse .techItems.blackGlassBg {

     display: grid;

     gap: 20px;

     padding: 40px;

     margin: 15px;

     grid-template-columns: 100px auto;

     margin: 5px 0;

 }





 .swiperBtn {

     width: 200px;

     float: right;

     position: relative;

     border: 1px;

     bottom: -30px;

 }



 .swiperBtn .arrowBtn {

     background: #212121;

     width: 55px;

     height: 55px;

     border-radius: 50%;

 }







 .TechWeUse .swiper-scrollbar.swiper-scrollbar-horizontal {

     position: absolute;

     left: var(--swiper-scrollbar-sides-offset, 1%);

     bottom: 0;

     z-index: 50;

     height: 20px;

 }



 .TechWeUse .swiper-scrollbar-drag {

     background: #191919 !important;

     width: 250px !important;

     height: 12px;

 }



 .TechWeUse .swiper-button-next::after,

 .TechWeUse .swiper-button-prev::after,

 .testimonial .swiper-button-next::after,

 .testimonial .swiper-button-prev::after,

 .ourServices .swiper-button-next::after,

 .ourServices .swiper-button-prev::after {

     font-size: 23px;

     color: #FFF;

     font-weight: 800;

 }



 @media only screen and (min-width: 769px) {

     .swiper-slide:first-child {

         transition: transform 100ms;

     }



     .swiper-slide:first-child img {

         transition: box-shadow 500ms;

     }







     .swiper-slide.swiper-slide-active:first-child img {

         box-shadow: 0px 32px 80px rgba(0, 0, 0, 0.35);

     }







     .swiper[dir="rtl"] .swiper-slide.swiper-slide-active:first-child {

         transform: translateX(-50%);

     }



     .swiper[dir="rtl"] .swiper-slide.swiper-slide-next:nth-child(2) {

         transform: translateX(-55%);

     }

 }



 /*----------------------------------------

 OUR SERVICE SECTION ENDS HERE 

 ---------------------- */











 /*----------------------------------------

  WHY_CHOOSE_US SECTION STARTS HERE 

 ---------------------- */

 .whyChooseUs {

     margin: 90px 0 100px 0;

 }



 .whyChooseUs .singleItems {

     padding: 2vw 1vw;

 }



 .whyChooseUs .card {

     position: relative;

     padding: 2vw;

     border-radius: 4px;

     overflow: hidden;

 }



 .whyChooseUs .imgSide .card::after,

 .whyChooseUs .ContentSide .card::after {

     content: "";

     position: absolute;

     top: 0;

     width: 250px;

     height: 100%;

     background: url('../img/main/sectionSquareBox.webp');

     background-position: center;

     background-size: cover;

     z-index: -1;

 }



 .whyChooseUs .imgSide .card::after {

     left: 0;

 }



 .whyChooseUs .ContentSide .card::after {



     right: 0;

 }



 .whyChooseUs .imgSide img {

     width: 65%;

     border-radius: 20px;

     height: 260px;

     object-fit: cover;



 }





 .whyChooseUs .imgSide {

     position: relative;

     z-index: 1;

 }





 .whyChooseUs .ContentSide .iconImg {

     width: 60px;

 }



 .whyChooseUs .ContentSide .card {

     width: 80%;

     display: flex;

     justify-content: center;

     height: 100%;

     gap: 30px;

 }







 .whyChooseUs .ContentSide .titleArea {

     display: flex;

     align-items: center;

     color: var(--white);

     font-size: 2.3vw;

     gap: 10px;

 }



 .whyChooseUs .ContentSide .titleArea .itemTitle {

     font-size: 24px;

 }



 .whyChooseUs .ContentSide .desc {

     color: var(--white);

     font-size: 17px;

     font-weight: 100;

     letter-spacing: 0.1px;



 }



 /*----------------------------------------

 WHY_CHOOSE_US SECTION ENDS HERE 

 ---------------------- */







 /*----------------------------------------

 OUR_PRODUCTS SECTION ENDS HERE 

 ---------------------- */

 .OurProducts {

     margin: 40px 0 100px 0;

 }



 .OurProducts .productsItems {

     padding: 20px 40px;

     border-radius: 0;

     height: 100%;

 }



 .OurProducts .productsItems .ProductTitle {

     color: var(--white);

     margin-bottom: 0;

 }



 .OurProducts .productsItems figure {

     margin-bottom: 0;

 }



 .OurProducts .productsItems img {

     width: 50px;

     margin-right: 7px;



 }



 .gradient-border {

     border: 1px solid transparent;

     border-image-source: linear-gradient(45deg, #0739A361, #73A0FF, #D7D8D5, #2a0324ed);

     border-image-source: linear-gradient(90.02deg, rgba(71, 126, 243, 0.5) 0.01%, rgba(172, 181, 236, 0.5) 50%);

     background: linear-gradient(180deg, rgba(62, 62, 62, 0.3) 0%, rgba(62, 62, 62, 0.15) 96.5%);



     border-image-slice: 1;

     padding: 25px;

     margin-bottom: 1rem;

     border-radius: 20px;

     animation: rotateGradient 1s linear forwards;

 }



 /* .productsGrid .gradient-border:nth-child(1) {

     border-image-source: linear-gradient(0deg, rgba(71, 126, 243, 0) 0%, rgba(172, 181, 236, 0.5) 49.79%);

 }



 .productsGrid .gradient-border:nth-child(2) {

     border-image-source: linear-gradient(90.02deg, rgba(71, 126, 243, 0.5) 0.01%, rgba(172, 181, 236, 0.5) 50%);



 }



 .productsGrid .gradient-border:nth-child(3) {

     border-image-source: linear-gradient(90.02deg, rgba(71, 126, 243, 0.5) 0.01%, rgba(172, 181, 236, 0.5) 50%);





 }



 .productsGrid .gradient-border:nth-child(4) {

     border-image-source: linear-gradient(90.02deg, rgba(71, 126, 243, 0.5) 0.01%, rgba(172, 181, 236, 0.5) 50%);



 }



 .productsGrid .gradient-border:nth-child(5) {

     border-image-source: linear-gradient(90.02deg, rgba(71, 126, 243, 0.5) 0.01%, rgba(172, 181, 236, 0.5) 50%);





 } */



 .OurProducts .productsGrid {

     display: grid;

     grid-template-columns: auto auto auto;

     gap: 30px;

 }



 .OurProducts .productsGrid .span2 img {

     width: 45px;

     height: 40px;

     object-fit: contain;

 }



 .OurProducts .content {

     padding: 40px;

     max-width: 1200px;

     margin: 0 auto;



 }



 .productsGrid .span1 {

     grid-row: span 2;

     line-height: 5;

 }



 .productsItems.blackGlassBg.span1 .ProductTitle {

     line-height: 2;

 }



 /*----------------------------------------

 OUR_PRODUCTS SECTION ENDS HERE 

 ---------------------- */









 /*----------------------------------------

 TESTIMONIALS SECTION STARTS HERE 

 ---------------------- */

 .testimonial {

     margin: 40px 0 100px 0;

     background: linear-gradient(180deg, rgba(0, 0, 6, 0.5) 66.5%, rgba(8, 33, 86, 0.5) 100%);



 }



 .testimonial .testimonialArea {

     display: grid;

     grid-template-columns: 30% auto;

     gap: 20px;

 }



 .testimonial .content .card {

     padding: 20px;

     color: var(--white);

     transition: 5s ease;

 }



 .testimonial .content .card:hover {

     background: linear-gradient(180deg, #ACB5EC 0%, #477EF3 100%);

     transform: scale(1.2);

 }



 .testimonial .content {

     margin: 50px 0;

 }



 .testimonial .content .quoteIcon img {

     width: 20px;

 }







 .testimonial .reviews {

     font-size: var(--f18);

     font-weight: 100;

 }



 .testimonial .clientName {

     font-size: var(--f16);

 }



 .testimonial .clientDetails .clientImg {

     width: 50px;

     height: 50px;

     margin-right: 20px;

     border-radius: 50%;

     object-fit: cover;

 }



 .testimonial .blackGlassBg {

     backdrop-filter: blur(67px) saturate(2%);

     -webkit-backdrop-filter: blur(16px) saturate(180%);

     background-color: rgba(29, 36, 50, 0.58);

     border-radius: 25px;

     border: 1px solid #3F3B3BAD;

 }



 .marquee-container {

     padding: 10px;

     height: 500px;

     width: 100%;

     overflow: hidden;

     background: linear-gradient(180deg, #020206 0%, rgba(2, 2, 6, 0) 100%);



 }



 .testimonialContainerOdd {

     width: 100%;

     display: flex;

     flex-direction: column;

     gap: 10px;

     animation: topToBottom 31s infinite;

 }





 .testimonialContainerEven {

     transform: translateY(-200px);

     width: 100%;

     display: flex;

     flex-direction: column;

     gap: 10px;

     animation: bottomToTop 39s infinite;

 }





 @keyframes topToBottom {

     0% {

         transform: translateY(0);

     }



     50% {

         transform: translateY(-200px);

     }



     100% {

         transform: translateY(0);

     }

 }



 @keyframes bottomToTop {

     0% {

         transform: translateY(-200px);

     }



     50% {

         transform: translateY(0px);

     }



     100% {

         transform: translateY(-200px);

     }

 }



 /*----------------------------------------

TESTIMONIALS SECTION ENDS HERE 

 ---------------------- */



 /*----------------------------------------

ABOUT_OUR_COMPANY SECTION ENDS HERE 

 ---------------------- */



 .aboutOurCompany .tab-content {

     padding: 2vw;

     background: #181818;

 }



 .aboutOurCompany .aboutImg1 img {

     width: 90%;

 }



 .aboutOurCompany .aboutImg2 img {

     width: 100%;

 }



 .aboutOurCompany .tabsAndPills .nav-link {

     color: var(--white);

     background: none !important;

     border: none;

 }



 .aboutOurCompany .tabsAndPills {

     margin-top: 30px;

 }



 .aboutOurCompany .tabsAndPills .nav-link.active {

     color: var(--blueSecondary);

     background: #181818 !important;



 }



 .aboutOurCompany .nav-tabs {

     border-bottom: 1px solid #FFFFFF3B;

 }



 .aboutOurCompany .tabsAndPills p,

 .aboutOurCompany .tabsAndPills li {

     font-size: var(--f14);

 }



 .aboutOurCompany .imgSide {

     padding: 2vw 5vw;

 }



 .aboutOurCompany .clientsUsers img {

     width: 50px;

     border: 2px solid #D9D9D9;

     height: 50px;

     border-radius: 50%;

 }



 .aboutOurCompany .imgSide .topSection {

     display: grid;

     grid-template-columns: 70% auto;

 }



 .aboutOurCompany .clientsUsers .allClients figure {

     margin: -20px;

 }



 /*----------------------------------------

ABOUT_OUR_COMPANY SECTION ENDS HERE 

 ---------------------- */





 /*----------------------------------------

WHY_CHOOSE_US SECTION STARTS HERE 

 ---------------------- */



 .whyChooseUs2 {

     padding: 5vh 4vh 15vh 4vw;

 }



 .whyChooseUs2 .whyUsHighlights .items {

     padding: 1vw 1vw;

     display: flex;

     flex-direction: column;

     gap: 15px;

     background: #111111;

     border-radius: 12px;

 }



 .whyChooseUs2 .items h4 {

     margin: auto 0;

     font-size: 20px;

     width: 50%;

 }



 .whyChooseUs2 .whyUsHighlights {

     gap: 40px;

     margin-top: 30px;

 }



 /*----------------------------------------

WHY_CHOOSE_US SECTION ENDS HERE 

 ---------------------- */







 /*----------------------------------------

ALL SERVICES SECTION STARTS HERE 

 ---------------------- */

 .allServiceHorizontalMarquee {

     margin-top: 40px;

 }



 .allServicesItems {

     width: 100%;

     display: flex;

     flex-direction: row;

     gap: 60px;

     animation: leftToRight 11s infinite;

 }



 .allServiceHorizontalMarquee .allServicesItems img {

     width: 40px;

 }



 .allServiceHorizontalMarquee h6 {

     white-space: nowrap;

     margin: auto;

 }



 @keyframes leftToRight {

     0% {

         transform: translateX(0);

     }



     50% {

         transform: translateX(-200px);

     }



     100% {

         transform: translateX(0);

     }

 }



 /*----------------------------------------

ALL SERVICES SECTION ENDS HERE 

 ---------------------- */









 /*----------------------------------------

CONTACT_US_SECTION  STARTS HERE 

 ------------------------------ */



 .ContactUsSection .contentSide a {

     color: var(--white);

     display: flex;

     flex-direction: row;

     gap: 10px;

     margin-bottom: 15px;

     width: 50%;

     font-size: var(--f14);

     transition: .3s ease;

 }



 .ContactUsSection .contentSide a:hover {

     color: var(--blueSecondary);

 }



 .ContactUsSection .contentSide .socialIcons {

     width: 40%;

 }



 .contactFormMain {

     background: #FFFFFF;

     padding: 2vw;

     border-radius: 20px;

     max-width: 30vw;

     margin: auto;

 }

 #contact_us_modal{

     max-width: none;

 }



 .contactFormMain .form-floating label {

     color: #777777;

     font-size: var(--f14);

     font-weight: 500;

     padding: 0;



 }



 .contactFormMain .form-floating .form-control {

     padding: 30px 10px 10px;

     min-height: auto;

     height: auto;

     border: none;

     border-bottom: 1px solid #CCC;

     border-radius: 0;

     font-size: var(--f14);

     font-weight: 500;

     

 }



 .contactFormMain .form-floating .form-text {



     font-size: 12px;

 }



 .contactFormMain .form-floating .form-control:focus {

     background-color: #5A89F2;

     border-color: #86b7fe;

     outline: 0;

     box-shadow: none;

     border-radius: 5px;

 }



 .contactFormMain .form-floating .form-control:focus {

     color: #FFF;

 }







 .contactFormMain .form-floating .form-control:focus+label {

     padding: 1rem .75rem;

 }



 .contactFormMain .blueBtn {

     background: var(--blueBg);

     width: 100%;

     color: var(--white);

     border-radius: 40px;

     margin-top: 20px;

     border: 2px solid var(--blueSecondary);

     display: flex;

     justify-content: center;

     align-items: center;

 }



 .contactFormMain .blueBtn:hover {

     background: #477EF3A3;

     border: 2px solid var(--blueBg);

     font-weight: 500;

 }



 .contactFormMain .blueBtn .arrowIcon {

     background: none;

     width: 20px;

     margin-left: 8px;

 }



 /*----------------------------------------

CONTACT_US_SECTION  ENDS HERE 

 ------------------------------ */









 /*----------------------------------------

PRODUCT SERVICE SECTION  STARTS HERE 

 ------------------------------ */

 .productService .defServiceBanner img {

     width: 100%;

     margin-bottom: 20px;

     height: 380px;

     object-fit: cover;

     border-radius: 12px;

 }







 .productService {

     color: var(--white);

     padding: 20px 10px;

 }



 .productService .productServiceContent {

     border-bottom: 1px solid #DDDDDD;

     padding: 2vw 5px;

 }



 .productService p {

     color: #DDDDDD;

     /* font-size: 15px; */
     font-size: 17px;


 }



 .lockerRoom .items {

     padding: 10px 0;

 }



 .paginationSec {

     display: flex;

     padding: 2vw 0;

     justify-content: space-between;

 }



 .paginationSec .button {

     font-size: 14px;

     color: var(--white);

 }



 .paginationSec .paginationHelpler {

     margin-top: 10px;

     text-transform: capitalize;

 }



 .productDesign2 .items {

     display: flex;

     align-items: center;

     gap: 20px;

     padding: 1vw;

 }





 /*----------------------------------------

PRODUCT SERVICE SECTION  ENDS HERE 

 ------------------------------ */









 /*----------------------------------------

OFFERING SERVICE SECTION  STARTS HERE 

 ------------------------------ */

 .offeringService .imgSide img {

     width: 65%;

 }



 .OfferingServiceDesign1 {

     padding: 4vw 2vw;

 }



 .offeringService .contentSide .borderDesign1 {

     border: 1px solid transparent;

     background: #161616;

     color: var(--white);

     padding: 30px;

     border-radius: 8px;

     overflow: hidden;

     border-image-source: linear-gradient(0deg, rgba(71, 126, 243, 0) 0%, rgba(172, 181, 236, 0.5) 49.79%);

     border-image-slice: 1;

     border-image-repeat: round;





 }



 .offeringService .figure::after {

     content: '';

     position: absolute;

     left: 0;

     top: 0;

     width: 100%;

     height: 100%;

 }



 .offeringService .highlights {

     padding: 4vw 0;

     gap: 2vw;

 }



 .offeringService .highlights img {

     width: 45px;

 }



 .offeringService .highlights .flexColumn {

     padding: 2vw;

     gap: 20px;

     background: rgba(34, 34, 34, 1);



 }



 /* hostingServices */

 .hostingServices .highlights {

     gap: 0;

     padding: 7vw 0 5vw 0;



 }



 .hostingServices .highlights .borderDesign1 {

     background: rgba(22, 22, 22, 1);

     border-radius: 0;

     border: 1px solid rgba(39, 39, 39, 1);



 }



 .hostingServices .highlights .borderDesign1 p {

     font-size: var(--f14);

 }



 .offeringService .highlights .borderDesign1 h4 {

     font-size: 20px;

 }



 .hostingServices .highlights img {

     width: 40px;

 }







 /* keysBenefits */

 .keysBenefits,

 .buildToMeet {

     color: var(--white);

     background: rgba(24, 24, 24, 1);

     margin-bottom: 5vw;

 }



 .keysBenefits .benefitsItems {

     display: flex;

     align-items: center;

     justify-content: space-between;

     background: rgba(33, 33, 33, 1);

     border-bottom: 1px solid rgba(70, 70, 70, 1);

     padding: 0;

     border-radius: 8px;

     overflow: hidden;

 }



 .keysBenefits .benefitsItems h1 {

     font-size: 50px;

     font-weight: 600;

     padding-left: 30px;

 }



 .keysBenefits .benefitsItems img {

     width: 200px;

     height: 100px;

     /* object-fit: cover; */
     object-fit: contain;

     border-radius: 4px;

     opacity: .6;

 }



 .keysBenefits .benefitsItems figure {

     position: relative;

 }



 .keysBenefits .benefitsItems .flexRow {

     display: grid;

     grid-template-columns: 140px auto;

     gap: 10px;

 }



 .keysBenefits .benefitsItems figure::after {

     content: '';

     position: absolute;

     left: 0;

     top: 0;

     width: 100%;

     height: 100%;

     background: linear-gradient(180deg, rgba(71, 126, 243, 0.3) 0%, rgba(0, 71, 171, 0.3) 100%);



 }



 /* buildToMeet */

 .buildToMeet .buildToMeetItems .flexRow {

     background: rgba(33, 33, 33, 1);

     border-bottom: 1px solid rgba(70, 70, 70, 1);

     padding: 2vw;

     border-radius: 4px;

     gap: 2vw;

 }



 .buildToMeet .OfferingServiceDesign2 {

     padding: 7vw 2vw;

 }



 .buildToMeet .buildToMeetItems h1 {

     background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);

     -webkit-background-clip: text;

     -webkit-text-fill-color: transparent;

 }



 .star-animation img {

     animation: starMove 3s ease-in-out infinite;

 }



 @keyframes starMove {

     0% {

         transform: translateX(800px) scale(1);

         opacity: 0;

     }



     25% {

         transform: translateX(0) scale(1.1);

         opacity: 1;

     }



     50% {

         opacity: 1;

         transform: translateX(0) scale(0.9);

     }



     75% {

         opacity: 1;

         transform: translateX(0) scale(1);

     }



     100% {

         transform: translateX(800px) scale(1);

         opacity: 0;

     }

 }











 /*----------------------------------------

OFFERING SERVICE SECTION  ENDS HERE 

 ------------------------------ */







 /*----------------------------------------

BLOGS   SECTION  STARTS HERE 

 ------------------------------ */

 .blogsHero {

     padding: 1vw;

 }



 .blogsList.scrolled {

     grid-template-columns: repeat(2, 1fr);

     width: 50%;

     gap: 20px !important;

 }



 .blogsHero .contentSide {

     display: flex;

     justify-content: center;

     height: 100%;

     padding: 2vw;

     margin: auto;

 }



 .blogsHero .imgSIde {



     padding: 2vw;

 }



 .allBlogs {

     color: var(--white);

     padding: 5vw;

 }



 .allBlogs .searchBox {

     background: rgba(34, 34, 34, 1);

     background: rgba(34, 34, 34, 1);

     padding: 10px 10px;

     border: none;

     color: #FFF;

     height: 40px;

     min-height: 40px;

     line-height: 0 !important;

 }



 .allBlogs .searchBtn {

     position: absolute;

     right: 15px;

     top: 6px;

 }



 .allBlogs .form-floating>label {

     padding: 8px;

     font-size: var(--f14);

 }



 .form-floating>.form-control:focus~label {

     transform: scale(.85) translateY(-1.8rem) translateX(.15rem);

     padding: 14px;

 }



 .allBlogs .blogsList img {

     width: 100%;

     height: 220px;

     object-fit: cover;

     border-radius: 12px;

 }



 .allBlogs .blogsList {

     gap: 2vw 4vw;

 }



 .allBlogs .blogsList .blogsItems {

     padding: 1vw;

 }



 .allBlogs .blogsList .blogsItems:hover .blogTitle {

     color: var(--blueSecondary);

 }



 .allBlogs .blogsList .blogDesc {

     font-size: var(--f14);

 }



 .allBlogs .blogsList .blogTitle {

     transition: .3s ease;

     font-size: 20px;

 }



 .blogsPagination {

     text-align: right;

     padding: 20px;

 }



 .blogsPagination .actionBtns {

     border: none;

     background: rgba(34, 34, 34, 1);

     min-width: 30px;

     text-align: center;

     color: var(--white);

     font-size: var(--f14);

     padding: 5px;

     min-height: 30px;

     border-radius: 8px;

 }



 .blogsPagination .activePage {

     background: rgba(71, 126, 243, 1);



 }



 .blogsPagination .prevBtn,

 .blogsPagination .nextBtn {

     background: none;

 }



 /*----------------------------------------

    BLOGS   SECTION  ENDS HERE 

 ------------------------------ */







 /*----------------------------------------

    BLOGS   DETAILS SECTION  STARTS HERE 

 ------------------------------ */

 .blogsDetails .defServiceBanner img {

     width: 100%;

     margin-bottom: 20px;

     height: 380px;

     object-fit: cover;

     border-radius: 12px;

 }



 .blogsDetails {

     color: var(--white);

 }



 .blogsDetails p {

     color: #DDDDDD;

     font-size: 15px;

 }



 .showTextLg {

     font-size: 120px;

     /* background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);

     background-clip: border-box;

     -webkit-background-clip: text;

     -webkit-text-fill-color: transparent; */

 }



 /*----------------------------------------

    BLOGS  DETAILS SECTION  ENDS HERE 

 ------------------------------ */





 /*----------------------------------------

    RELATED BLOGS SECTION  ENDS HERE 

 ------------------------------ */

 .relatedPost .blogsItems img {

     width: 100%;

 }



 .relatedPost {

     padding-bottom: 8vw;

     margin-bottom: 4vw;

 }



 .relatedPost h4 {

     color: var(--white);

     margin-bottom: 30px;

 }



 .relatedPost p {

     font-size: var(--f14);

 }



 .relatedPost .blogsItems {

     padding: 1vw;

     background: rgba(8, 8, 8, 1);

     border-radius: 8px;

 }



 .relatedPost .blogsItems img {

     width: 100%;

     height: 210px;

     object-fit: cover;

     border-radius: 12px;

 }



 .cardSlider .swiper-pagination-bullet {

     background: #181818;

     width: 20px;

     height: 20px;

     border: 2px solid white;

 }



 .cardSlider .swiper-pagination-bullet-active {

     background: #477EF3;

 }



 .relatedPost .swiper {

     overflow: visible;

 }





 .cardSlider .swiper-pagination {

     bottom: -50px !important;

 }



 .cardSlider .swiper .swiperBtn {

     left: auto;



     color: #FFF;

     width: 70px;

     height: 70px;

     border-radius: 50%;

 }



 .cardSlider .swiper-button-prev,

 .cardSlider .swiper-button-next {

     color: #000;

     background: rgba(33, 33, 33, 1);

     border-radius: 50%;

     width: 60px !important;

     height: 60px !important;

     display: flex;

     align-items: center;

     justify-content: center;

     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

     transition: background-color 0.3s, color 0.3s;

 }



 .cardSlider .swiper-button-prev:hover,

 .cardSlider .swiper-button-next:hover {

     background-color: rgba(0, 0, 0, 0.8);

     color: #fff;

 }



 .cardSlider .swiper-button-next::after,

 .cardSlider .swiper-button-prev::after {

     font-size: 23px !important;

     color: var(--white);

 }



 /*----------------------------------------

    RELATED BLOGS SECTION  ENDS HERE 

 ------------------------------ */







 /*----------------------------------------

   WORK SECTION  STARTS HERE 

 ------------------------------ */

 .ourWorkHero .innerDiv {

     display: grid;

     grid-template-columns: repeat(2, 1fr);
     /* grid-template-columns: max-content; */

     gap: 2vw;

     max-width: 70%;

     margin: 20px auto;

 }



 .ourWorkHero .workItems {

     background-position: center;

     background-size: cover;

     background-repeat: no-repeat;

     width: 100%;

     height: 100%;

     display: flex;

     align-items: center;

     justify-content: center;

     color: var(--white);

     height: 250px;

     padding: 5vw;

     text-align: center;

     position: relative;

     border: 1px solid rgba(79, 79, 79, 1);

     border-radius: 8px;

     overflow: hidden;

     flex-direction: column;



 }



 .ourWorkHero .workItems:hover {

     flex-direction: column-reverse;

 }



 .ourWorkHero .workItems::after {

     content: '';

     position: absolute;

     top: 0;

     left: 0;

     width: 100%;

     height: 100%;

     background: rgba(0, 0, 0, 0.41);



 }



 .ourWorkHero .workItems h5,

 .ourWorkHero .workLogo {

     position: relative;

     z-index: 1;

     font-size: 20px;

     font-weight: 600;

 }



 .work1 {

     background: url('../img/main/work1.webp');

 }



 .work2 {

     background: url('../img/main/work2.webp');

 }



 .work3 {

     background: url('../img/main/work3.png');

 }



 .work4 {

     background: url('../img/main/work4.jpg');

 }



 .work5 {

     background: url('../img/main/work5.png');

     grid-column: span 2;

 }



 .ourWorkHero .workLogo {

     width: 50px;

 }



 /*----------------------------------------

   WORK SECTION  ENDS HERE 

 ------------------------------ */



 .error_msg{

      font-size: 14px;

      text-transform: capitalize;

      font-weight: 500;

      color: red;

}