/*
Theme Name: Business Card
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Business Card.
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
	padding: 0;
	margin: 0;
}
    .fade-image {
      opacity: 0;
      transform: translateX(-50px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .fade-image.show {
      opacity: 1;
      transform: translateX(0);
    }
.animate {
	opacity: 0;
	transform: translateY(50px);
	transition: all 2s ease;
}
.animate2 {
	opacity: 0;
	transform: translateY(50px);
	transition: all 2s ease;
}
.animate3 {
	opacity: 0;
	transform: translateY(50px);
	transition: all 2s ease;
}
.animate4 {
	opacity: 0;
	transform: translateY(50px);
	transition: all 2s ease;
}

    /* Fade Animations */
    .fade-in        { transform: translateY(40px); }
    .fade-in.active { opacity: 1; transform: translateY(0); }

    .fade-out        { opacity: 1; }
    .fade-out.active { opacity: 0; }

    .fade-left        { transform: translateX(60px); }
    .fade-left.active { opacity: 1; transform: translateX(0); }

    .fade-right        { transform: translateX(-60px); }
    .fade-right.active { opacity: 1; transform: translateX(0); }

    /* Slide Animations */
    .slide-up        { transform: translateY(60px); }
    .slide-up.active { opacity: 1; transform: translateY(0); }

    .slide-down        { transform: translateY(-60px); }
    .slide-down.active { opacity: 1; transform: translateY(0); }

    .slide-left        { transform: translateX(100px); }
    .slide-left.active { opacity: 1; transform: translateX(0); }

    .slide-right        { transform: translateX(-100px); }
    .slide-right.active { opacity: 1; transform: translateX(0); }

    /* Zoom Animations */
    .zoom-in        { transform: scale(0.7); }
    .zoom-in.active { opacity: 1; transform: scale(1); }

    .zoom-out        { transform: scale(1.3); }
    .zoom-out.active { opacity: 1; transform: scale(1); }

    .zoom-left {
      transform: scale(0.7) translateX(-80px);
    }
    .zoom-left.active {
      opacity: 1;
      transform: scale(1) translateX(0);
    }

    .zoom-right {
      transform: scale(0.7) translateX(80px);
    }
    .zoom-right.active {
      opacity: 1;
      transform: scale(1) translateX(0);
    }

    /* Extra Animations */
    .rotate-in        { transform: rotate(-90deg); }
    .rotate-in.active { opacity: 1; transform: rotate(0); }

    .skew-in        { transform: skewY(15deg); }
    .skew-in.active { opacity: 1; transform: skewY(0); }

    .flip-in        { transform: rotateY(90deg); }
    .flip-in.active { opacity: 1; transform: rotateY(0); }
.Header {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	background: #FFF;
}

.wrapper {
	width: 100%;
	max-width: 1170px;
	margin: 0 auto;
}

.HeadWrap {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 30px 0;
	
}
.Navigation .menu-header-menu-container ul.nav-menu {
	display: flex;
	padding: 0;
	list-style-type: none;
	margin: 0;
	gap: 70px;
	align-items: center;
	justify-content: center;
}
.Navigation .menu-header-menu-container ul.nav-menu li a{
	font-family: "Poppins", sans-serif;
	font-size: 20px;
	color: #000000;
	font-weight: 20px;
}
.Navigation .menu-header-menu-container ul.nav-menu li.current-menu-item a,
.Navigation .menu-header-menu-container ul.nav-menu li a:hover {
	color: #3374FF;
}

.Navigation .menu-header-menu-container ul.nav-menu li.ContactUs a{
	height: 49px;
	background: #3374FF;
	padding: 0 38px;
	border-radius: 50px;
	font-size: 20px;
	font-weight: 400;
	display: block;
	line-height: 49px;
	color: #FFF;	
}
.Navigation .menu-header-menu-container ul.nav-menu li.ContactUs a:hover {
	background: #000;
}



.BannerArea{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

.BannerWrap {
		display: flex;
	min-height: 379px;
	align-items: center;
	justify-content: space-between;
	padding: 130px 0 100px 0;
	border-bottom: 1px solid #D9D9D9;

}

.BannerLeft {
	width: 100%;
	max-width: 568px;
}

.BannerLeft h1 {
	font-family: "Poppins", sans-serif;
	font-size: 41px;
	line-height: 49px;
	text-transform: uppercase;
	font-weight: 700;
	padding: 0;
	margin: 0;
}
.BannerLeft h1 strong {
	color: #F0A900;
	font-weight: 700;
}
.BannerLeft h1 span {
	color: #3374FF;
}

.BannerLeft p{
	font-size: 18px;
	line-height: 29px;
	color: #666666;
	font-family: "Poppins", sans-serif;
	padding: 30px 0 40px;
}

.BAnnerRight {
	width: 100%;
	max-width: 570px;
	position: relative;
	min-height: 379px;
	background: url(uploads/shadow.png) no-repeat left bottom;
}
.BAnnerRight img{
	height: 300px;
	object-fit: contain;
	position: absolute;
}
.BAnnerRight img.m1 {
	left: -90px;
	bottom: 30px;
}
.BAnnerRight img.m2 {
	left: 20px;
	bottom: 90px;
	z-index: 1;
}
.BAnnerRight img.m3 {
	left: 110px;
	bottom: 121px;
	z-index: 1;
}
.BAnnerRight img.m4 {
	left: 210px;
	bottom: 103px;
	z-index: 1;
}

.Common-btn {
	height: 49px;
	background: #3374FF;
	padding: 0 38px;
	border-radius: 50px;
	font-size: 20px;
	font-weight: 400;
	line-height: 49px;
	color: #FFF;
	display: inline-flex;
}
.Common-btn:hover {
	background: #000;
	color: #FFF;
}



    .Examples .item {
      padding:0;
      text-align: center;
      color: white;
      font-size: 30px;
      margin: 0;
      transition: all 0.3s ease;
      transform: scale(0.9);
		height: 438px;
		overflow: hidden;
		box-shadow: 0px 0px 24px 0px #00000040;
		border-radius: 30px;

    }
.Examples .item img{
	width: 100%;
	object-fit: cover;
	height: 100%;
	object-position: top;
	border-radius: 30px;
/*
	 transition: transform 1s ease-in-out;
	 overflow: hidden;
*/
}
.Examples .center .item {
	background: url(assets/images/frame.svg) no-repeat center top;
	transform: scale(1);
	opacity: 1;
	background-size: 100% 100%;
	padding: 6px 11px 7px 14px;
	border-radius: 30px;
	box-shadow: 0px 0px 0 0px #00000040;
}

.Business-card-exaples {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	background: url(uploads/shadow2.svg) no-repeat center bottom;

	padding:100px 0 40px;
}
.Business-card-exaples h2 {
	text-align: center;
	font-size: 40px;
	font-weight: 400;
	font-family: "Poppins", sans-serif;
	padding-bottom: 50px;
	margin: 0;
}

.owl-dots {

	width: 100%;
	/* background: #000; */
	text-align: center;
	display: flex;
	justify-content: center;
	gap: 16px;
}
.owl-dots button span {
	width: 14px;
	height: 14px;
	border-radius: 100%;
	background: #D8D8D8;
	display: block;
}
.owl-dots button.active span{
	background: #3374FF;
}



.Business-card-exaples .owl-dots {
	position: absolute;
	bottom: -80px;

}


.Digital_Card {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	padding: 160px 0;
}


.DcWrap {
	display: flex;
	justify-content: space-between;
}


.DcContent {
	width: 100%;
	max-width: 570px;
}
.DcContent h3 {
	font-family: "Poppins", sans-serif;
	font-size: 40px;
	line-height: 52px;
	color: #000000;
	padding: 0;
	margin: 0;
}
.DcContent h3 strong {
	display: block;
	font-weight: 700;
	color: #3374FF;
}

.DcContent p{
	padding:25px 0 0;
	margin: 0;
	font-size: 18px;
	line-height: 26px;
	color: #333333;
	font-family: "Poppins", sans-serif;
}

.DcImage {
	width: 100%;
	max-width: 500px;	
}

.Advantages {
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	background: #F4F7FF;
	padding: 100px 0;
}
.Advantages h3 {
	text-align: center;
	font-family: "Poppins", sans-serif;
	font-size: 40px;
	line-height: 52px;
	color: #000000;
}
.Advantages h3 strong {
	display: block;
	color: #3374FF;
	font-weight: 700;
}

.CardBoxCover {
	display: flex;
	flex-wrap: wrap;
	gap:30px;
	margin: 50px 0 0;
}
.Cb {
	background: #FFF;
	box-shadow: 0px 0px 30px 0px #00000033;
	padding: 30px;
	display: flex;
	gap:20px;
	min-height: 245px;
	width: 100%;
	max-width: 370px;
	justify-content: center;
	border-radius: 20px;
	flex-direction: column;
	text-align: center;
	transition: all 0.3s
}
.Cb span {
	display: flex;
	background: #3374FF;
	width: 105px;
	height: 105px;
	margin: 0 auto;
	border-radius: 100%;
	align-items: center;
	justify-content: center;
	transition: all 0.3s
}
.Cb p{
	transition: all 0.3s;
	font-size: 20px;
	line-height: 31px;
	color: #000000
}
.Cb span img{
	width: 50px;
	height: 50px;
	object-fit: contain;
}
.Cb:hover {
	background: #3374FF;
}
.Cb:hover span {
	background: #FFF;
}
.Cb:hover span img{
	filter: brightness(0%);
}
.Cb:hover p{
	color: #FFF
}



.Testimonials {
	padding: 100px 0
}
.Testimonials h4 {
	text-align: center;
	font-family: "Poppins", sans-serif;
	font-size: 40px;
	line-height: 52px;
	color: #000000;
}
.Testimonials h4 strong {
	color: #3374FF;
	font-weight: 700;
}
.Testimonials p.ShortDescriptionReview{
	font-size: 18px;
	color: #333333;
	line-height: 26px;
	font-family: "Poppins", sans-serif;
	text-align: center;
	margin-bottom: 65px;
}

.ReviewSlider .item{
	padding: 80px 0 0;
	
} 

.ReviewBox{
	border: 1px solid #E1EAFF;
	box-shadow: 0px 0px 25px 0px #91919114;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	padding: 30px 20px;
	border-radius: 15px;
	text-align: center;
}
.ReviewBox img{
	width: 105px!important;
	height: 105px;
	border-radius: 100%;
	border: 5px solid #FFF;
	margin: -80px auto 0;
	box-shadow: 0px 0px 20px 0px #9191915c;
	object-fit: cover;
}
.ReviewBox h5 {
	font-weight: 600;
	color: #08496E;
	font-family: "Poppins", sans-serif;
	margin: 30px 0 0;
	font-size: 20px;
}
.ReviewBox h6 {
	font-size: 14px;
	color: #333333;
	font-family: "Poppins", sans-serif;
	padding: 5px 0 0;
}
.ReviewBox p{
	font-size: 14px;
	line-height: 24px;
	padding: 20px 0 0;
	margin: 0;
}
.owl-next {
	position: absolute;
	right: -20px;
	top: 50%;
	border: 1px solid #DDE8FF !important;
	width: 40px;
	height: 40px;
	background: #FFF !important;
	border-radius: 100%;
}
.owl-prev {
	position: absolute;
	left: -20px;
	top: 50%;
	border: 1px solid #DDE8FF !important;
	width: 40px;
	height: 40px;
	background: #FFF !important;
	border-radius: 100%;
}
.owl-next span,
.owl-prev span {
	padding: 0;
	color: #3374FF;
	font-size: 25px;
	line-height: 0;
}
.owl-prev:hover,
.owl-next:hover{
	background: #F0F5FF!important;
}




/*
.Examples .item:hover img {
  transform: translateY(calc(-100% + 200px));
  transition: transform 5s ease-in-out;
}
*/


.siteFooter{
	background: #2F2F2F;
}
.siteFooter_top {
    padding: 50px 0px 89px;
}
.siteFooter_logo {
    text-align: center;
    margin: 0 0 60px;
}
.siteFooter_menu ul {
    display: flex;
    gap: 68px;
    flex-wrap: wrap;
    justify-content: center;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.siteFooter_menu ul li a{
	color: #fff;
	font-size: 20px;
	line-height: 100%;
	font-weight: 400;
}
.siteFooter_menu ul li a:hover{
	color: #3374FF;
}
.siteFooter_copyRight{
	background-color: #282828;
	padding: 20px 0;
}
.siteFooter_copyRight p{
	color: #838383;
	margin: 0;
	text-align: center;
	font-size: 14px;
	line-height: 100%;
	font-weight: 400;
}


/**contact us section**/
.contactSection {
    background-color: #F4F7FF;
    padding: 100px 0 65px;
    position: relative;
}
.contactSection .heading-header{
  margin: 0 0 50px;
  text-align: center;
}
.contactSection .heading-header .heading-title{
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 52px;
  margin: 0px;
  color: #000000;
}
.contactSection .heading-header .para{
  font-family: "Poppins", sans-serif;
  margin: 10px 0 0;
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  color: #333333;
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
}
.contact_grid {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}
.contact_imgBx{
	flex: 1;
}
.contact_form{
	flex: 1;
	position: relative;
}
[dir="rtl"] .contact_form form{
	direction: rtl;
}
.contact_imgBx img{
	width: 100%;
	height: auto;
}
.contact_form_area {
    box-shadow: 0px 0px 24px 0px #0000000D;
    background-color: #fff;
    padding: 30px;
    max-width: 500px;
    margin: auto;
    margin-right: 0;
    position: relative;
}
.contact_form_area label{
	margin: 0 0 15px;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	color: #000000;
}
.contact_form_area .form_row{
    margin-bottom: 30px;
}
.contact_form_area .form_row:last-child{
    margin-bottom: 0px;
}
.contact_form_bg_vector {
    position: absolute;
    width: 100%;
    bottom: -29px;
    left: 0;
    right: 0;
    margin: auto;
}
.formBtn {
    background: #3374FF;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border-radius: 130px;
    color: #fff;
    font-family: "Poppins", sans-serif;
		font-weight: 600;
		font-size: 16px;
		line-height: 26px;
		text-transform: uppercase;
    border: none;
    box-shadow: none;
    cursor: pointer;
}
.formBtn:hover{
	background-color: #000;
	color: #fff;
}
.inputGroup {
    position: relative;
}
.inputGroup > span, 
.contact_form .inputGroup p > span:first-child{
	position: absolute;
	left: 15px;
	top: 15px;
	z-index: 9;
}
[dir="rtl"] .inputGroup > span, 
[dir="rtl"] .contact_form .inputGroup p > span:first-child{
	right: 15px;
	left: unset;
}

.inputGroup > span img{
	width: 20px;
	height: 20px;
	object-fit: scale-down;
}
.inputGroup input, 
.inputGroup textarea{
	border: 1px solid #A7A7A7;
	padding: 15px;
	padding-left: 50px;
	background-color: inherit;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	color: #000;
	width: 100%;
	border-radius: 6px;
}
[dir="rtl"] .inputGroup input, 
[dir="rtl"] .inputGroup textarea{
   direction: rtl!important;
   padding-left: 15px;
   padding-right: 50px;
}
.inputGroup textarea{
	height: 108px;
}
.inputGroup input::placeholder, 
.inputGroup textarea::placeholder{
	color: #666666;
	opacity: 1;
}
.inputGroup input::focus, 
.inputGroup textarea::focus{
	outline: none;
}
.contact_form .form_row p{
	margin: 0;
	padding: 0;
}


/**digital_section88**/
.devider_line{
	width: 100%;
	display: block;
	height: 1px;
	background-color: #D9D9D9;
}

.digital_section{
	padding: 0 0 100px;
}
.digital_section .heading-header{
  margin: 0 0 50px;
  text-align: center;
}
.digital_section .heading-header .heading-title{
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 52px;
  margin: 0px;
  color: #000000;
}
.digital_section .heading-header .heading-title span{
	color: #3374FF;
}
.digital_section .heading-header .para{
  font-family: "Poppins", sans-serif;
  margin: 10px 0 0;
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  color: #333333;
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
}
.digital-slider{
	overflow: hidden;
}
.digital-slider-bx img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.digital-slider-bx {
    width: 100%;
    height: 100%;
    position: relative;
    top: 15px;
}
.digital-slider-bx img{
	width: 90%!important;
	height: auto;
	margin: auto;
}
.digital-bx-wrap{
	position: relative;
}
.digital-screen-flash {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 530px;
    text-align: center;
    z-index: 99;
    height: 303px;
}
.digital-slider .owl-stage{
	padding: 80px 0 100px;
	display: flex;
  align-items: center;
}
.digital-slider .owl-item.active:not(.center) .digital-slider-bx img {
	box-shadow: 0px 0px 30px 0px #00000026;
}
[dir="rtl"] .owl-nav button span {
    transform: rotate(180deg) !important;
    direction: rtl;
    display: flex;
    line-height: 0px;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 4px;
}

@media only screen and (max-width: 1200px){
.wrapper{
	padding: 0 20px;
}
.Navigation .menu-header-menu-container ul.nav-menu {
    gap: 20px;
}
.Navigation .menu-header-menu-container ul.nav-menu li.ContactUs a {
    padding: 0 20px;
}
.BrandLogo img.custom-logo {
    width: 125px;
}
.HeadWrap{
   align-items: center;
   padding: 20px 0;
}
.BannerWrap{
	padding: 50px 0 50px 0;
	    flex-wrap: wrap;
    gap: 100px;
}	
.BannerLeft{
	max-width: 100%;
	text-align: center;
	max-width: 500px;
        margin: auto;
}
.BAnnerRight{
	right: 0px!important;
	width: 100%!important;
	margin: auto!important;
	right: 0!important;
	max-width: 500px!important; 
	margin: auto!important;
	right: -30px !important;   
}
.BAnnerRight img {
    height: 297px;
    width: 275px;
}
.BannerLeft h1 {
    font-size: 35px;
    line-height: 44px;
}
.BannerLeft p {
    font-size: 18px;
    line-height: 29px;
    padding: 10px 0 10px;
}
.Business-card-exaples h2, 
.DcContent h3, 
.Advantages h3, 
.Testimonials h4, 
.digital_section .heading-header .heading-title, 
.faqs_section .heading-header .heading-title, 
.contactSection .heading-header .heading-title {
    font-size: 35px;
    padding-bottom: 20px;
}
.Testimonials h4{
	padding-bottom: 5px;
}
.Business-card-exaples h2{
	padding-bottom: 40px;
}
.contactSection .heading-header .para{
	margin-top: 0px;
	max-width: 100%;
}
.Examples .item{
  height: 560px;
}
.DcWrap {
  flex-wrap: wrap;
  gap: 30px;
}
.DcContent {
    max-width: 100%;
    flex: 1;
}
.siteFooter_top {
    padding: 30px 0px 40px;
}
.siteFooter_logo {
    margin: 0 0 40px;
}
.siteFooter_menu ul {
    gap:20px 30px;
}
.contact_form_area .form_row {
    margin-bottom: 15px;
}
.contact_form_area label {
    margin: 0 0 5px;
}
.digital-screen-flash {
    width: 450px;
    height: 303px;
}
.digital-screen-flash img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
    .digital-slider-bx {
        top: 11px;
    }
.CardBoxCover {
    justify-content: center;
}
.DcImage img {
    width: 100%;
    height: auto;
}
.digital_section .heading-header .para, 
.faqs_section .heading-header .para{
	max-width: 100%;
}
.Business-card-exaples{
	padding: 50px 0!important;
}
.Business-card-exaples .wrapper-2{
	padding: 0;
}
}
@media only screen and (max-width: 980px){
 .Digital_Card {
    padding: 100px 0 50px;
}
 .DcContent {
    text-align: center;
}
 .DcWrap {
    gap: 30px;
    flex-direction: column;
    align-items: center;
}
.DcContent h3 strong{
	display: inline-block;
}
.Advantages {
    padding: 50px 0;
}
.CardBoxCover {
    margin: 10px 0 0;
    justify-content: center;
}
.Cb span {
    width: 80px;
    height: 80px;
}
.Testimonials p.ShortDescriptionReview{
	margin-bottom: 20px;
}
.digital-slider .owl-stage {
    padding: 20px 0 115px;
}
.faqs_section, 
.contactSection{
	padding: 50px 0!important;
}
.Cb{
  max-width: 343px;
}
.digital-slider-bx{
	top: 43px;
}
.Navigation .nav-menu{
	display: none!important;
}
.hmblerMenu_icon{
	display: flex!important;
}
.hmblerMenu_icon svg {
    width: 40px;
    height: auto;
    cursor: pointer;
}
.Navigation.active .nav-menu {
    display: flex !important;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    box-shadow: 6px 2px 2px 0px #ccc;
    padding: 30px!important;
}
.Navigation.active .hmblerMenu_click{
	display: none!important;
}
.Navigation.active .hmblerMenu_close{
  display: flex!important;
}
.Header {
    background: #FFF;
    position: relative;
    top: 0;
    z-index: 9999;
}
}



@media only screen and (max-width: 1000px){
  .Examples .item{
	  height: 498px;
	} 
}
@media only screen and (max-width: 900px){
   .Examples .item {
        height: 498px;
    }
}
@media only screen and (max-width: 600px){
   .Examples .item {
        height: 543px;
    }
    .Cb {
        flex: 1 1 45%;
    }
    .contact_grid {
      flex-direction: column-reverse;
	}
}
@media only screen and (max-width: 500px){
   .Examples .item {
        height: 411px;
    }
    .Cb {
        flex: 1 1 100%;
    }
    .Testimonials .wrapper{
    	max-width: 90%;
    	margin: auto;
    }
    .digital-screen-flash {
        width: 300px;
        height: auto;
    }
    .Business-card-exaples, 
    .BannerArea{
    	overflow: hidden;
    }
    .Business-card-exaples h2, .DcContent h3, .Advantages h3, .Testimonials h4, .digital_section .heading-header .heading-title, .faqs_section .heading-header .heading-title, .contactSection .heading-header .heading-title {
        font-size: 30px !important;
        padding-bottom: 20px;
        line-height: 38px !important;
    }

    .digital-screen-flash img {
        width: 100%;
        height: 100%;
                height: 318px;
        object-fit: unset;
        margin: auto;
    }
    .digital-screen-flash {
        width: calc(100% + 80px);
        margin: auto;
        margin-left: -40px;
    }
    .digital_section{
    	overflow: hidden;
    	padding: 0 0 50px;
    }

}