@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

:root {
  /* 
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;

    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
*/
  /* Override Variables */
  --sans-serif: 'Poppins', sans-serif;
  --gray-dark: #1A2E35;
  --green: #18A678;

  /* Page Variables */
  --gray-light: #485A60;
  --white: #ffffff;
  --color-text: var(--gray-dark);
}

.family-sans {
  font-family: var(--sans-serif);
}

.icon {
  display: inline-block;
  font-size: inherit;
  overflow: visible;
  vertical-align: -0.125;
  text-rendering: auto;
  fill: gray !important;
  width: 50px;
  height: 50px;
}

.animated {
  visibility: visible !important;
}



/* override */

.carousel-indicators .active {background-color: var(--green);}
.carousel-indicators li {background-color: var(--gray-light);}
.carousel-indicators{margin-right: 0;}
.width-40{width: 40%;}
.div-size-80{width: 80%;}
.div-size-60{width: 60%;}
.div-size-40{width: 40%;}
.slider-img-width{width: 100%;}
.navbar-nav .nav-link:hover{var(--gray-dark)!important; text-decoration: underline;}
.menu-icon-width{width: 50px;}

.home-layout {padding: 60px 0;}
.all-layout {padding:50px 0 30px 0;}

.fa-times{color: red;}
.fa-check{color: var(--green);}
.dropdown-menu{padding: 0;}
.dropdown-item{padding: .85rem 1.6rem; font-weight: 300; color: var(--gray-dark); font-size: 0.875em;}
.table{margin-bottom: 0;}

.navbar-dark .navbar-toggler{color: var(--green); border-color: var(--green);}
.green-text{color:var(--green) !important; font-weight:600;}
.bold{font-weight: 600;}


body {
  font-family: var(--sans-serif);
  color: var(--color-text);
  font-weight: 200;
}

.fix-desktop{ 
  position: absolute;
  margin: 0px;
  overflow: hidden;
  top: 0px;
  bottom: 0px;
  width: 100%;

}

.site-header {background-color: var(--white); background-position: center bottom; background-repeat: no-repeat; background-size: cover;}
.site-header .animated {animation-delay: 1s; animation-duration: 1s;}

.layout-text {font-size: 1.1em;}
.site-nav.inbody {background: var(--secondary);}

@media screen and (max-width: 768px) {
  .site-header .navbar-collapse {
    padding: 10px;
  }
}


.home-layout .slider-title {font-size: 2.575em; font-family: var(--sans-serif); font-weight: 600; margin-bottom: 40px;}
.home-layout .slider-title span{color: var(--green);}
.home-layout .slider-text {font-size: 1.625em; font-family: var(--sans-serif); font-weight: 400; text-align: right; width: 60%; float: right; margin-bottom: 100px;}
.site-header .nav-link {position: relative; padding-bottom: 0; margin-bottom: 2px; font-size: 0.875em; color: var(--gray-dark); margin-right: 20px;}
.site-header .green-link{color: var(--green) !important; font-weight: 600;}
.site-header .nav-padding{padding: 30px;}
.footer-links{list-style: none; display: inline-flex;}
.footer-links li{margin-right: 20px;}
.footer-links li a{font-size: 0.875em; color: var(--gray-dark) !important; margin-right: 20px; text-decoration: none;}
.copyright-text{bottom: 120px; right: -70px; z-index: 15; font-size: 0.875em; color: var(--gray-dark) !important; transform: rotate(90deg); width: fit-content; position: fixed;}
.page-title{font-size: 3.5em; color: var(--gray-dark); font-weight: 600; margin-bottom: 20px;}
.list-unstyled a{text-decoration: none;}
.megamenu-link{font-size: 0.885em; font-weight: 300; color: var(--gray-dark);}
.megamenu-link:hover{color: var(--green);}
.media-body h5{font-size: 1em; font-weight: 600; color: var(--gray-dark); margin-bottom: 0;}
.media-body p{font-size: 0.885em; font-weight: 300; color: var(--gray-dark);}


.arrow-section{position: relative; z-index: 1040;}
.arrow-up{position: fixed; top: 30px; left: 50%;}
.arrow-down{position: fixed; bottom: 30px; left: 50%;}
.arrow-left{position: fixed; top: 50%; left: 30px;}
.arrow-right{position: fixed; top: 50%; right: 30px;}

.hide {display: none;}
.arrowImage{animation: displayArrow .5s ease-in-out forwards;}
.arrowImage:hover + .hide {display: block;}

.arrow-up-text{position: absolute; left: -50px; font-size: 14px; top: 3px; width: 120px; background: #ffffff; text-align: center; color: var(--gray-dark); text-decoration: none;}
.arrow-right-text{position: absolute; left: -50px; font-size: 14px; top: 0; width: 120px; background: #ffffff; text-align: center; color: var(--gray-dark); text-decoration: none; transform: rotate(90deg);}
.arrow-left-text{position: absolute; left: -43px; font-size: 14px; top: 0; width: 120px; background: #ffffff; text-align: center; color: var(--gray-dark); text-decoration: none; transform: rotate(-90deg);}
@keyframes displayArrow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



/* PRICING PAGE */
.pricing-bg{background-image: url(../images/pricing-image.svg); background-size: contain; height: 600px; background-position: right; background-repeat: no-repeat; no-repeat; animation: slideIn 1s ease-in-out forwards;}
.pricing-box{background-color: var(--white); padding: 35px 25px 20px 25px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);}
.pricing-offer-name{color: var(--gray-dark); font-size: 1.5em; font-weight: 600;}
.pricing-offer-detail{color: var(--gray-dark); font-size: 0.875em; font-weight: 300;}
.pricing-money{color: var(--green); font-size: 2.75em; font-weight: 600;}
.pricing-money sub{font-size: 0.4em !important; font-weight: 300; bottom: 0px;}
.pricing-order-btn{background-color: var(--green); color: var(--white); border: none; border-radius: 4px; font-size: 1em; font-weight: 600; padding: 10px 30px; cursor: pointer;}
.pricing-features-title{color: var(--gray-dark); font-size: 0.875em; font-weight: 300;}
.pricing-features-list{list-style-image: url(../images/list-icon.svg); margin-left: -28px;}
.pricing-features-list li{color: var(--gray-dark); font-size: 0.875em; font-weight: 300; margin-bottom: 10px;}
.pricing-more-features-link{color: var(--gray-dark); font-size: 0.875em; font-weight: 300; text-decoration: underline;}
.pricing-more-features-link:hover{color: var(--green);}


/* FEATURES PAGE */
.features-comparision-bg{background-image: url(../images/features-comparison.svg); background-size: contain; height:fit-content; background-position: right; background-repeat: no-repeat; no-repeat; animation: slideIn 1s ease-in-out forwards;}
.feature-text{font-size: 0.875em;}

/* SOLUTIONS PAGE */
.core-backup-bg{background-image: url(../images/about-bg.svg); background-size: contain; height: fit-content; background-position: right; background-repeat: no-repeat; animation: slideIn 1s ease-in-out forwards;}
.solutions-heading{font-size: 1.875em; color: var(--gray-dark); font-weight: 600; margin-bottom: 10px;}
.solutions-text{font-size: 0.875em; color: var(--gray-dark); font-weight: 300; margin-bottom: 35px;}
.solutions-subheading{font-size: 1.5em; color: var(--gray-dark); font-weight: 600; margin-bottom: 5px;}
.solutions-subtext{font-size: 0.875em; color: var(--gray-dark); font-weight: 300; margin-bottom: 20px;}
.solutions-features-heading{font-size: 1em; color: var(--gray-dark); font-weight: 600; margin-bottom: 5px;}
.solutions-features-text{font-size: 0.875em; color: var(--gray-dark); font-weight: 300;}


/* SIGN IN PAGE */
.form-input {background-color: rgba(176,188,193,0.02); border: 1px solid rgba(176,188,193,0.5); margin-bottom: 20px;}
.form-input label {margin-bottom: -1rem; margin-top: .8rem; margin-left: .8rem; font-size: .80em;}
.form-input input {background-color: var(--color-base); font-size: .9em; border: none; border-radius: 0; -webkit-box-sizing: border-box; box-sizing: border-box; padding: .5rem .7rem; width: 100%;}
.form-input textarea {background-color: var(--color-base); font-size: .9em; border: none; border-radius: 0; -webkit-box-sizing: border-box; box-sizing: border-box; padding: .8rem; width: 100%;}
.signin-form .start-backup-btn{background-color: var(--green); border: none; color: var(--white); font-weight: 600; text-align: center; padding: 10px 50px; width: 100%; cursor: pointer; margin-bottom: 20px;}
.signin-form .already-login-text{font-size: .885em; color: var(--gray-dark);}
.already-login-text .already-login-link{font-weight: 600; color: var(--green);}




/* All page same CSS */
.read-more-btn{font-weight: 600; color: var(--green); cursor: pointer;}
.more-content-heading{font-size: 24px; font-weight: 600; color: var(--gray-dark); margin-bottom: 20px;}
.more-content-icon{width: 40px; margin-bottom: 10px;}
.solutions-icons{margin-bottom: 15px; width: 70px;}
.more-content-text{font-size: 0.875em; color: var(--gray-dark); font-weight: 300; margin-bottom: 15px;}
.more-content-list{margin-left: -20px;}
.more-content-list li{margin-bottom: 5px; font-size: 14px; color: var(--gray-dark); font-weight: 400;}
.find-a-solution-btn{display: block; font-size: 16px; font-weight: 600; color: var(--green); border: 1px solid; border-color: var(--green); background: transparent; border-radius: 4px; padding: 10px; text-align: center;}
.find-a-solution-btn:hover{text-decoration: none; color: var(--white); background-color: var(--green);}
.further-details-link{font-size: 16px; color: var(--green); font-weight: 600;}
.further-details-link:hover{color: var(--green);}


@keyframes slideIn {
  0% {
    transform: translateX(500px) scale(.2);
  }
  100% {
    transform: translateX(0px) scale(1);
  }
}

@media screen and (min-width: 768px) {
  
}


/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
    .site-header .slider-title {
      font-size: 1.9em;
    }
    .site-header .slider-text {
      font-size: 1em;
    }
    .page-title{font-size: 2.2em;}
    .solutions-heading{font-size: 1.3em;}
    .solutions-subheading{font-size: 1em;}
    .solutions-text{font-size: .75em;}
    .solutions-subtext{font-size: .75em;}
    .solutions-features-heading{font-size: .9em;}
    .solutions-features-text{font-size: .75em;}

    /* Pricing page */
    .pricing-offer-name{font-size: 1.25em;}
    .pricing-offer-detail{font-size: 0.775em;}
    .pricing-money{font-size: 2em;}
    .pricing-money sub{font-size: 0.4em !important;}
    .pricing-order-btn{font-size: .875em;}
    .pricing-features-title{font-size: 0.775em;}
    .pricing-features-list li{font-size: .775em; margin-bottom: 5px;}
    .pricing-more-features-link{font-size: 0.775em;}

}

/* iPad Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* iPad Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}


/* Galaxy Tab Portrait */
@media 
  (max-device-width: 800px) 
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Galaxy Tab Landscape */
@media 
  (max-device-width: 1280px) 
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
    .home-layout .slider-title {font-size: 2em !important; text-align: center;}
    .slider-img-width{width: 60%; margin-bottom: 30px;}
    .home-layout .slider-text{font-size: 1em; text-align: center; width: 100%; float: none; margin-bottom: 60px;}
    .footer-section{ display: none;}
    .copyright-text {position: fixed; bottom: 80px; right: -60px; font-size: 0.65em;}
    .footer-section .footer-links {margin-left: -30px;}
    .arrow-section{display: none;}
    .page-title{font-size: 3em;}
    .all-layout {padding: 50px 0 0 0;}
    .div-size-80{width: 100%;}
    .div-size-60{width: 100%;}
    .div-size-40{width: 100%;}

}




@media all and (min-width: 992px) {
  .navbar{ padding-top: 0; padding-bottom: 0; }
  .navbar .has-megamenu{position:static!important;}
  .navbar .megamenu{left:auto; right:0; width:100%; padding:20px;  }
  .navbar .nav-link{ padding-top:1rem; padding-bottom:1rem;  }
}