html {scroll-behavior: smooth;}
body {font-family: 'Montserrat', sans-serif;padding: 0px;font-size: 18px;color: #333333;overflow-x: hidden;font-weight: 400;margin: 0;}
textarea, p, input, div, span, li, button {font-family: 'Montserrat', sans-serif;}
ul {margin: 0;padding: 0;}
li {list-style: none;}
p {line-height: 26px;font-size: 18px;font-weight: 400;color: #333333;margin-bottom: 15px;}
img { max-width: 100%;border: 0;}
.clear {clear: both;float: none;width: 100%;}
.clearfix::after {display: block;content: "";clear: both;}
a {text-decoration: none !important;transition: all 0.2s ease-in;color: #212121;}
a:hover {color: #000;}
a, span {display: inline-block;}
:focus { box-shadow: none !important;outline: none !important;}
.form-control { display: block;width: 100%;height: calc(1.5em + .75rem + 2px);padding: .375rem .75rem;font-size: 14px;font-weight: 400;line-height: 1.5;color: #495057;background-color: #fff;background-clip: padding-box;border: 1px solid #ced4da;border-radius: .0rem;transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;box-sizing: border-box;}



@media (min-width: 1270px){
.container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1300px;}

}

#header {background-color: #212331;padding: 20px;position: fixed;left: 0;top: 0;width: 100%;z-index: 10;}
.headre-h{ height: 100px;}
main.main1 {margin-top:118px;}







/*--------------------------------------------------------------
# Desktop Navigation
--------------------------------------------------------------*/
@media (min-width: 1280px) {
.navbar { padding: 0;}
.navbar ul { margin: 0;padding: 0;display: flex;list-style: none;align-items: center;}
.navbar li {position: relative;}
.navbar>ul>li {white-space: nowrap;padding: 10px 0 10px 28px;}
.navbar a,
.navbar a:focus { display: flex;align-items: center;justify-content: space-between; padding: 0 3px;
font-size: 15px;font-weight: 600; color:#fff;white-space: nowrap;transition: 0.3s;position: relative; text-transform: uppercase;}

 .navbar a i,
.navbar a:focus i {font-size: 12px;line-height: 0;margin-left: 5px;}
.navbar>ul>li>a:before {content: "";position: absolute;width: 100%;height: 2px;bottom: -6px;left: 0;background-color:#00bcd4;
visibility: hidden;width: 0px; transition: all 0.3s ease-in-out 0s;}
.navbar a:hover:before,.navbar li:hover>a:before,
.navbar .active:before {visibility: visible;width: 100%;}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {color: #00bcd4;}
.navbar .dropdown ul {display: block; position: absolute; left: 28px;top: calc(100% + 30px);margin: 0;padding: 10px 0;z-index: 99;opacity: 0;visibility: hidden; background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);transition: 0.3s;border-radius: 4px;}
.navbar .dropdown ul li {min-width: 200px;}
.navbar .dropdown ul a { padding: 10px 20px;font-size: 14px;text-transform: none;font-weight: 600;color: #111;}
.navbar .dropdown ul a i {font-size: 12px;}
.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {color:#00bcd4;}
.navbar .dropdown:hover>ul {opacity: 1;top: 100%;visibility: visible;}
.navbar .dropdown .dropdown ul {top: 0;left: calc(100% - 30px);visibility: hidden;}
.navbar .dropdown .dropdown:hover>ul {opacity: 1;top: 0;left: 100%;
    visibility: visible;
  }
}



@media (min-width: 1280px) and (max-width: 1366px) {
.navbar .dropdown .dropdown ul {left: -90%;}
 .navbar .dropdown .dropdown:hover>ul {left: -100%;}
}

@media (min-width: 1280px) {
  .mobile-nav-show,
  .mobile-nav-hide {
    display: none;
  }
}


/*--------------------------------------------------------------
# Mobile Navigation
--------------------------------------------------------------*/
@media (max-width: 1279px) {
.navbar {position: fixed;top: 0; right: -100%;width: 100%;max-width: 400px;bottom: 0;transition: 0.3s;z-index: 9997;}
.navbar ul {position: absolute; inset: 0;padding: 50px 0 10px 0;margin: 0; background: rgba(24, 24, 40, 0.9);
overflow-y: auto;transition: 0.3s;z-index: 9998;}
.navbar a,
.navbar a:focus {display: flex;align-items: center;justify-content: space-between;padding: 10px 20px;font-family: var(--font-primary);
font-size: 15px;font-weight: 600;color: rgba(255, 255, 255, 0.7);white-space: nowrap;transition: 0.3s;}
.navbar a i,
.navbar a:focus i {font-size: 12px;line-height: 0;margin-left: 5px;}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {color: #fff;}

.navbar .getstarted,
.navbar .getstarted:focus { background: var(--color-primary);padding: 8px 20px;border-radius: 4px; margin: 15px;color: #fff;}
.navbar .getstarted:hover,
.navbar .getstarted:focus:hover {color: #fff;background: rgba(0, 131, 116, 0.8);}
.navbar .dropdown ul,
.navbar .dropdown .dropdown ul {position: static;display: none;padding: 10px 0;margin: 10px 20px;transition: all 0.5s ease-in-out;background-color: #3d3d45;
border: 1px solid #3d3d45;}
.navbar .dropdown>.dropdown-active,
.navbar .dropdown .dropdown>.dropdown-active {display: block;}
.mobile-nav-show {color: rgba(255, 255, 255, 0.6);font-size: 28px;cursor: pointer;line-height: 0;transition: 0.5s;z-index: 9999;margin-right: 10px;}
.mobile-nav-hide {color: #fff;font-size: 32px;cursor: pointer;line-height: 0;transition: 0.5s;position: fixed;right: 20px;top: 20px;z-index: 9999;}
.mobile-nav-active {overflow: hidden;}
.mobile-nav-active .navbar {right: 0;}
.mobile-nav-active .navbar:before {content: "";position: fixed;inset: 0;background: rgba(24, 24, 40, 0.8);z-index: 9996;
  }
	
}
	
/*------------------common-css End-------------------*/
       
.nav-dots {position: fixed;top: 50%;right: 1%;transform: translateY(-50%);margin: 0; padding: 0;cursor: pointer;     z-index:50;}
.nav-dot {width: 9px;height: 9px;border: 2px solid #52616a; border-radius: 50%;
list-style: none;background: #c9d6de;transition: all 0.3s;}
.nav-dot:not(:last-of-type) {margin-bottom: 7px;}
.nav-dot:hover, .nav-dot.is-active {transform: scale(1.8);background: transparent;}
.section {height: 100vh; overflow: hidden;}
.section:nth-of-type(1) {}
.section:nth-of-type(2) { }
.section:nth-of-type(3) {}
.section:nth-of-type(4) { }
.section:nth-of-type(5) {}		
.section:nth-of-type(6) {}	
.section:nth-of-type(7) {}	
.section:nth-of-type(8) { }		
.section__heading {margin: 0;color: white;font-size: 32px;text-transform: capitalize;}

/************  text     ********************/
.dark-bg {color: #fff;background: #000; height: 100vh; position: relative}
.light-bg {height: 100vh; color: #fff;background: #f4f4f4; position: relative}
.cell {vertical-align: middle; position: relative}

.heading .num {font-size: 100px; color:#fff; padding-right: 10px }
.heading .s {text-transform: uppercase;font-size: 13px;font-weight: 300; color:#fff;}
.heading .h {font-size: 30px;font-weight: bold;margin: 0 0 2px; color:#fff;}
.heading .d { color:#fff;}

.heading .num-d {font-size: 100px; color:#111; padding-right: 10px }
.heading .s-d {text-transform: uppercase;font-size: 13px;font-weight: 300; color:#111;}
.heading .h-d {font-size: 30px;font-weight: bold;margin: 0 0 2px; color:#111;}
.heading .d-d { color:#111;}

.heading {padding: 30px 0 0 100px; position: relative; z-index: 3;display: flex;align-items: center;justify-content: flex-start;}
.dark-bla{ color:#111}

/**************  button    ****************/

.view-demo-b{ padding: 7px 20px; font-size: 16px; border: solid 1px #f7931d; font-weight: 500; border-radius: 4px; color:#f7931d; background-color: transparent;}
.view-demo-b:hover{   color:#fff; border: solid 1px #ef2f5c; background-color:#ef2f5c;}
.demo-bt{ padding: 20px 0; position: absolute;z-index: 6; bottom: 5px;width: 100%;}
.view-demo-l{ padding: 7px 20px; font-size: 16px; border: solid 1px #111; font-weight: 500; border-radius: 4px; color:#111; background-color: transparent;}
.view-demo-l:hover{   color:#fff; border: solid 1px #ef2f5c; background-color:#ef2f5c;}

/*.dark-bg img{ width: 95%;}.light-bg img{ width: 95%;}*/

/**************  animation    ****************/
.image-anima img {animation: up-down linear 7s infinite;}
.image-anima1 img {animation: up-down1 linear 7s infinite;}

@keyframes up-down1{
0% {transform:  translate(1px,-20px)  ;}
24% {transform:  translate(1px,-60px)  ;}
50% { transform:  translate(1px,-12px)  ;}
74% {transform:  translate(1px,-22px)  ;}
100% {transform:  translate(1px,-22px)  ;}
}



@keyframes up-down{
0% {transform:  translate(1px,20px)  ;}
24% { transform:  translate(1px,60px)  ;}
50% {transform:  translate(1px,12px)  ;}74% {transform:  translate(1px,22px)  ;}
100% { transform:  translate(1px,22px)  ;}
}

/**************  animation    ****************/

.clutch-logo{ margin-bottom: 40px;}
.footer-section {border-top: solid 0px #ddd;padding: 50px  0px  0 0; background-color:#212331;  }
.footer-section h6 {font-size: 19px;font-weight: 700;padding: 0px 0 0 0px;color: #000;margin: 0px 0 20px 0; position: relative; text-transform: uppercase;}

.social-icon-b{font-size: 22px;width: 24px;}
.footer-section p {font-size: 14px;font-weight:400;color: #000;}
.footer-section ul {color: #fff;margin: 0px;padding: 0px;width: 100%;}
.footer-logo-sec{ border-bottom: solid 1px #0947c9; padding-bottom: 40px; margin-bottom: 40px;}
.footer-section ul li {color: #90a9b5;padding: 8px 0; padding-left: 15px; border-bottom: 1px solid #393d50; font-size: 15px; position: relative}
.footer-section ul li::after {position: absolute; width: 6px; height: 6px; border-radius: 50%; content: ""; background-color:#00bcd4; top: 16px; left: 0; }
.footer-section ul li a{transition: all 0.5s ease-in;color: #90a9b5;}
.footer-section ul li a:hover {color: #00bcd2; padding-left: 10px;}
.address-f{color: #90a9b5; font-size: 15px;}
.address-f a{color: #00bcd2; }
.address-f a:hover{color: #90a9b5; }
.address-padd{ margin-bottom: 5px}
.address-icon{ margin-right: 5px}
.copy-right {border-top: solid 0px #0947c9;padding: 30px 0 10px 0;margin-top: 40px;color: #000; background-color:#fff;}
.copy-right a {color: #fff;   font-weight: 400;}
.copy-right .text-r {text-align: right;}
.text20{ font-size: 20px; font-weight: 400; color:#fff; margin: 15px 0 15px 0}
.top-social {margin: 0px 0;}
.top-social a {display: inline-block; margin: 0 4px 0 4px;text-align: center;color: #4e64b5;font-size: 20px!important;
line-height: 38px; border: 0px solid #fbb510;}
.lind{ color: #0288d1}
.twatt{ color: #00aced}
.ins{ color: #9a8f62}
.pint{ color: #ff5757}
.top-social a:hover {color: #fff; border: solid 0px #fff;}
.mb-1.images-set img {padding: 4px;width: 32%;}
.top-b-title{ position:absolute; width: 100%; left: 0; top: 25px;}

/**************  details page    ****************/
.details-main-box{ max-width: 1500px; margin: auto;text-align: center;}
.details-main-sec{ padding: 80px 0; position: relative; background-image: url("../images/bgbgb.png"); }
.details-main-sec::after{ background-color:#1ba08b; position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 65%; z-index: -1}
.details-main-title{ font-size: 55px; font-weight: 600; margin: 0 0 50px 0; color:#fff}
.product-img img{ box-shadow: 0 0 0px #ddd;}
.product-img-mar{ margin-top: 80px}
.project-name-det{font-size: 30px; font-weight: 600; margin: 0 0 20px 0; color:#fff; text-align: center}
.detail-box-w{ max-width:1275px; margin: auto; position: relative}
.details-pro-img {position: absolute;height: 550px; left: 16%;top: 53px;z-index: 5;width: 68%;}
.details-pro-scrool { height: 100%; overflow-y: scroll;}
.mobile-box-w{ max-width:600px; margin: 100px auto auto auto; position: relative}
.nav-dots {position: fixed;top: 50%;right: 1%;transform: translateY(-50%);margin: 0;cursor: pointer;z-index:6;padding: 20px 10px 20px 10px;background-color: rgba(0, 0, 0, 0.8);height: 80vh;overflow-y: scroll;border-radius: 30px;scrollbar-width: thin;}

.footer-payment-img{ margin-right: 20px; }
.footer-payment-img1{width:180px }
.top-social {margin: 0px 0;}
.top-social a {display: inline-block; margin: 10px 8px 10px 0;background-color:transparent;
border-radius: 50%; width: 40px; height: 40px;text-align: center;color: #524271;font-size: 22px!important;
 border: 1px solid #524271;}
.top-social a:hover {
    /* background-color: #ff8a00; */
    color: #ff8a00;
    /* border: 2px solid #5d9fab; */
    padding: 0 !important;
    border: 2px solid transparent;
}
.footer-logo-sec{ border-bottom: solid 1px #e9e6ee; border-top: solid 1px #e9e6ee; padding: 30px 0; margin-top: 50px; }
.top-social a img { width: 20px;}
.thank-digi-img-sm-box .social-foot ul {
    justify-content: center;
}
.social-foot ul {
    display: flex;
}

.social-foot ul li {
    margin-right: -12px;
}
.social-foot ul li:nth-child(1) a:before {
    background: #3b5999;
    z-index: -1;
}
.social-foot ul li a:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f00;
    transition: .5s;
    z-index: 2;
}

.footer-section ul li::after { display: none;

}
.social-foot ul li a {
    width: 45px;
    height: 45px;
    background-color: #fff;
    text-align: center;
    line-height: 42px;
    font-size: 22px;
    margin-right: 20px;
    display: block;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 2px outset #ff8a00;
    z-index: 1;
}
.footer-section ul li {border-bottom: 0px solid #393d50;}

.social-foot ul { display: flex;}
.social-foot ul li { margin-right: -12px;}
.social-foot ul li a { width: 45px; height: 45px; background-color: #fff; text-align: center; line-height: 42px; font-size: 22px; margin-right: 20px;  display: block; border-radius: 50%; position: relative; overflow: hidden; border: 2px outset #ff8a00; z-index: 1;}
.social-foot ul li a .icon { position: relative; color: #262626; transition: .5s; z-index: 3;}
.social-foot ul li a:hover .icon { color: #fff;  transform: rotateY(360deg);}
.social-foot ul li a:before { content: ""; position: absolute; top: 100%; left: 0; width: 100%;height: 100%; background: #f00; transition: .5s; z-index: 2;}
.owl-dots {display: none;}
.social-foot ul li a:hover:before {top: 0;}
.top-social ul li a:hover img { filter: invert(1);}
.social-foot ul li:nth-child(1) a:before{ background: #3b5999; z-index:-1;}
.social-foot ul li:nth-child(2) a:before{ background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); z-index:-1;}
.social-foot ul li:nth-child(3) a:before { background: #1DA1F2;  z-index:-1;}
.social-foot ul li:nth-child(4) a:before { background: #0077B5; z-index:-1;}
.social-foot ul li:nth-child(5) a:before { background: #FF0000;  z-index:-1;}
.social-foot ul li:nth-child(6) a:before { background: #ff5670;  z-index:-1;}
#cookie-notice .cn-button:not(.cn-button-custom) { color: #000 !important;}
.footer-section ul li {padding-left: 7px;}
.social-foot ul li a { margin-right: 15px;}
.footer-section ul li{padding: 0;}
.footer-section {background-color: #faf9fc;}

.footer-top-sec{ margin-bottom:30px; padding-bottom:50px; border-bottom:solid 1px #ccc; }

.footer-logo {
    font-size: 23px;
    color: #524271;
    margin: 0px 0 8px 0;
    position: relative;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
}


.logo-four {padding-right: 80px;}
.logo-four { display: flex;justify-content: start;padding-right: 40px;gap: 35px;}
.logo-four img {width: 80%;}
.logo-two {display: flex;}
.logo-two img {padding-right: 40px;width: 165px;}
.copy-right {text-align: center;}
.footer-section {padding: 90px 0px 0 0;}

.footer-logo-p{ padding:10px 0 30px 0 }

img.paypal-icon {width: 134px;}
.payment-icon img { margin-right: 20px;}
img.strip-icon { width: 94px;}
.footer-section .footer-box0x p {text-align: left;}





@media all and (max-width: 1440px) {
.demo-bt{ padding: 20px 0; position: absolute;z-index: 6; bottom:10px;width: 100%;}

}
		
@media all and (max-width: 1366px) {		
.heading {padding: 10px 0 0 20px;}
.heading .num {font-size: 70px;}	
.heading .h {font-size: 24px; line-height: 24px;}	
.heading .s {font-size: 12px;}	
.heading .d {font-size: 16px;}
.heading .num-d {font-size: 70px;}	
.heading .h-d {font-size: 24px; line-height: 24px;}	
.heading .d-d {font-size: 16px;}
.view-demo-b {font-size: 14px;}
.details-pro-scrool {height: 93%;}		
	
	
}




@media all and (max-width: 1152px) {	
.social-foot ul li a { width: 38px; height: 38px;line-height: 33px;}








}









@media all and (max-width: 1024px) {
.light-bg {height: 100%;}
.dark-bg {height: 100%;} 
.section { height: 100%;}	
.details-pro-scrool {height: 69%;}
.footer-section ul li {font-size: 14px;}	
.address-f{ font-size: 14px;}
	
	
	
}


@media all and (max-width: 991px) {
.container, .container-md, .container-sm {max-width: 95%;}
.col-mobile-re{ flex-direction: column-reverse}	
.footer-section h6 {margin: 42px 0 8px 0;}
.footer-section {padding: 26px 0px 0 0;}
.logo-two img {width: 130px;}

}




@media all and (max-width: 840px) {
.details-pro-scrool {height: 53%; }
.details-pro-img {top: 33px;z-index: 5;}	
.details-main-title {font-size: 38px;margin: 0 0 21px 0;}
.details-main-sec {padding: 30px 0;}	
#header {padding: 20px 0;}	
.footer-section h6 {margin: 56px 0 15px 0;}
.clutch-logo {margin-bottom: 0;}	
.col-mobile-re{ flex-direction: column-reverse}		
.heading {justify-content: center;}
.light-bg {padding-top: 30px;}	
.heading { padding: 43px 0 0 20px; text-align: center}	
	
	
}
	
	
@media all and (max-width: 767px) {

.heading .num {font-size: 60px;}
.heading .h {font-size: 20px;line-height: 23px;}
.heading .d {font-size: 15px;}	
.heading .num-d {font-size: 60px;}
.heading .h-d {font-size: 20px;line-height: 23px;}
.heading .d-d {font-size: 15px;}
.col-mobile-re{ flex-direction: column-reverse}	
.heading {padding: 20px 0 0 0px;text-align: center; justify-content: center;}
.dark-bg {padding: 0px 0 80px 0;}	
.demo-bt {padding: 20px 0 10px 0;bottom: 10px;}	
.nav-dot:not(:last-of-type) {margin-bottom: 13px;}
.light-bg{padding: 0px 0 80px 0;}
.image-anima1{ margin-top: 25px;}	
.partnaer-img img{ width:auto!important;}
.magento-img img{ width: 250px;}		
.magento-img img {width: 250px!important;}	
.partnaer-img img{width: 250px!important;}	
.footer-section p {text-align: center;}	
.expertise-img img{width: 150px!important;}	
.nav-dots {position: fixed;top: 50%; right: 1%;transform: translateY(-50%); margin: 0;
cursor: pointer;z-index: 50;padding: 20px 10px 20px 10px;background-color: rgba(0, 0, 0, 0.8);height: 500px;overflow: scroll; border-radius: 30px;}	
.nav-dot:hover, .nav-dot.is-active {transform: scale(1.8);background: transparent;     border: 2px solid #f6951b;}	
.dark-bg {padding: 0px 0 80px 0;display: flex;justify-content: center;align-items: center;     height: 100%;}	
.light-bg {padding: 0px 0 80px 0;  display: flex;justify-content: center;align-items: center;  height: 100%;}	
.heading .h {font-size: 18px;}	
.heading .h-d {font-size: 18px;line-height: 23px;}	
a.logo.d-flex.align-items-center img { width: 180px;}

main.main1 {margin-top:100px;}
main.main1 {margin-top: 118px;}

.logo-four {padding-right: 34px;gap: 9px;}
.footer-logo {padding: 34px 0 8px 0;}
.container, .container-md, .container-sm {max-width: 100%;}
.footer-section h6 {margin: 30px 0 8px 0;}
.footer-top-sec {margin-bottom: 20px;padding-bottom: 28px;}
.logo-four img {width: 100%;}
.logo-four {padding-right: 33px;gap: 7px;}
.footer-logo {padding: 30px 0 9px 0;}
.footer-top-sec { margin-bottom: 0;padding-bottom: 26px;border-bottom: solid 1px #ccc;}
 .footer-section p { text-align: left;}
.footer-section h6 {margin: 30px 0 15px 0;}
.logo-four img { width: 100%;}
.logo-four {padding-right:20px;gap: 20px;}

}