@font-face {
  font-family: Futura;
  src: url(../font/Futura.ttf);
}

@media (min-width: 1200px){
	.container { max-width: 95%; }
}
@media (min-width: 1170px) {
.container {
    max-width: 95%;
}
}

@media only screen and (max-width: 992px), only screen and (max-device-width: 992px) {
    p { font-size: 20px !important; }
	  .container { max-width: 800px !important; }
    .mob-hide, .mobile-hide { display: none !important; }
    .mob-show { display: block !important; }
    .man { max-width: 550px !important; }
    .header-bg .light a { font-size: 20px !important; }
    .header-bg .light a img { width: 32px !important; margin-right: 5px !important; }
    .form p { font-size: 32px !important; }
    .form input { font-size: 18px !important; margin-bottom: 30px !important; padding: 36px 10px !important; }
    .form button { font-size: 27px !important; padding: 18px 38px !important; }
    .font-14 { font-size: 20px !important; line-height: 26px !important; }
    .font-37 { font-size: 55px !important; line-height: 66px !important; }
    .font-20 { font-size: 40px !important; line-height: 50px !important; }
    .title { font-size: 30px !important; line-height: 38px !important; margin: 25px 0 20px !important; }
    .subtitle { font-size: 18px !important; line-height: 22px !important; }
    .section-heading { font-size: 24px !important; line-height: 30px !important; }
    .small { font-size: 30px !important; line-height: 40px !important; }
    form { margin-top: 0px !important; } 
    .ml-78 { margin-left: 0 !important; }
    .mob-right { text-align: right !important; }
    .mob-center { text-align: center !important; }
    .header-bg a { display:inline-block !important; padding-bottom: 10px !important; }
    .content-block, .we-block { min-height: auto !important; }
    .why-block .title { font-size: 26px !important; line-height: 30px !important; }
    .why-block .text { margin-bottom: 40px !important; }
    #why .mt-50 { margin-top: 0 !important; }
    .mt-50 { margin-top: 50px !important; }
    .nav-link { padding: 0 10px !important;}
    .testi-bg .heading { font-size: 65px !important; line-height: 80px !important; }
    .testi-bg p { font-size: 32px !important; line-height: 40px !important; }
    #observability .content-block { min-height: 392px !important;}
}

img { max-width: 100%; }
.mobile-hide { display: inline-block; }
.mob-hide { display: flex; margin: 0 auto; }
.mob-show { display: none; }
body { font-family: Futura; font-size: 16px; }
p { color: #6B6B6B; margin-bottom: 16px; font-size: 22px; }
.header-bg { background-image: url("../images/header-bg.webp"); background-size: cover; padding: 30px 0 120px; background-position: center; height: 100vh; }
.header-bg .light a { font-size: 14px; color: #3D4394 !important; font-weight: 500; letter-spacing: 1px; padding: 10px 15px !important; }
.nav-link { text-transform: uppercase; padding-right: 20px !important; padding-left: 20px !important; }
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover { color: #09A2CC; text-decoration: none; }
.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover { background-color: #3D4394; color: #fff !important; }
.navbar { margin-top: 18px; padding: 0; }
.navbar ul { align-items: center; padding-right: 50px; }
.nav-item a.active { color: #09A2CC !important; }
.dropdown a.link.active { color: #fff !important; }
.nav-item.btn { padding-right: 0 !important;}
.nav-item.btn a { font-size: 14px; border-radius: 4px; background: linear-gradient(254deg, #09A2CC -6.42%, #3D4394 95.41%); color: #fff !important; padding: 8px 20px !important; }
.navbar-nav .dropdown-menu { margin-top: 20px; padding: 12px; width: 240px; border-radius: 16px; background: #FFF; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25); }
.dropdown-item { padding: 10px; text-align: left; width: 216px; border-radius: 8px; margin-bottom: 6px; }
.navbar-toggler-icon { background-image: url("../images/hamburger-open.png") !important; width: 35px; height: 35px; border-radius: 10px;}
.navbar-toggler-icon.closed { background-image: url("../images/hamburger-close.png") !important; padding: 10px; }
.navbar-toggler.collapsed .navbar-toggler-icon.open { display: block; }
.navbar-toggler.collapsed .navbar-toggler-icon.closed, .open { display: none; }
.navbar-dark .navbar-nav .show>.nav-link, .navbar-dark .navbar-nav .nav-link { color: #3D4394; width: 100%; font-family: "Poppins", sans-serif; font-weight: 500; }
.dropdown-item { font-family: "Poppins", sans-serif; font-weight: 400; }

.header-block { background-color: #fff; height: 68px; margin: 0 auto; box-shadow: rgba(0, 0, 0, 0.07) 0px 0px 10px 0px; }
.banner-content { display: flex; align-items: center; height: 100vh; }
.banner-btn { border-radius: 8px; background: #A6F300; padding: 16px 24px; align-items: center; margin: 40px 0 0; display: inline-block; font-size: 24px; }
.logo { padding: 0 0 0 50px; }


/* CloudOps */
.CloudOps-bg img { height: 45vh; width: auto; margin: 0 auto; }
.CloudOps-bg { background-image: url("../images/CloudOps-bg.jpg"); background-size: cover; padding: 30px 0 120px; background-position: center; height: calc(100vh - 68px);}
.cost-block { background: rgba(81, 148, 61, 0.10); min-height: 160px; }
.cost-block p.text { color: #000; font-size: 20px; font-weight: 700; border-bottom: 1px solid #ddd; padding: 10px 15px; }
.cost-block img { position: relative; top: -3px; }
.cost-block p.data { color: #4A4A4A; font-size: 19px; padding: 0 15px 20px; line-height: 26px; }
.cost:nth-child(1) .cost-block { border-radius: 16px 0 0 16px; }
.cost:nth-child(2) .cost-block { border-radius: 0; background: rgba(61, 83, 148, 0.10); }
.cost:nth-child(3) .cost-block { border-radius: 0 16px 16px 0; background: rgba(148, 103, 61, 0.10); }
@media only screen and (max-width: 992px), only screen and (max-device-width: 992px) {
  .cost-block { border-radius: 16px !important; }
}

/** Form **/
.form { border-radius: 4px; padding: 25px 30px 30px; }
.form p { font-family: Futura; font-size: 22px; color: #202a5c; }
.form input { font-size: 13px; margin-bottom: 18px; padding: 18px 10px; }
.form button { background-color: #47b44b; color: #ffffff; outline: 0; border: 0; font-size: 17px; padding: 8px 28px; border-radius: 5px; }
.form button:hover { background-color: #38973c; }

.man { max-width: 480px; margin-top: -90px; width: 100%; }  
.title { color: #000000; font-family: Futura; font-size: 38px; font-weight: 700; line-height: 50px; margin: 40px 0 25px; }
.subtitle { color: #3D4394; font-family: Futura; font-size: 26px; font-weight: 500; line-height: 40px; margin-top: -10px; margin-bottom: 30px; max-width: 80%; margin-left: auto; margin-right: auto; }
.heading { color: #202a5c; font-family: Futura; font-size: 23px; line-height: 30px;}
.small { color: #202a5c; font-family: Futura; font-size: 13px; line-height: 25px;}
.smile { background: url(../images/icon-happy.png) no-repeat center center; height: 105px; display: flex; align-items: center; justify-content: center; margin: auto; }
.section-heading { font-size: 34px; font-weight: 700; color: #000000; }

/** Observability **/
#observability .content-block { text-align: center; min-height: 355px; }
#observability .content-block img { margin: 40px auto 25px; display: block; }
.content-block { background-color: #ffffff; border-radius: 16px; background: #FFF; box-shadow: -14px 10px 30px 0px rgba(0, 0, 0, 0.08); min-height: 300px; padding: 12px;
  margin-bottom: 60px;  line-height: 32px; }
.content-block .text { border-radius: 8px; background: #3E476D; color: #FFF; text-align: center; padding: 5px; font-size: 20px; }
.success-block { box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.12) !important; min-height: 340px; }
.success-block p { padding: 20px 25px 0; line-height: 30px; }
.success-block p span { color: #4200F9; font-weight: 600; }
.testi-block { border-radius: 30px; background: #3E476D; padding: 18px; margin-bottom: 20px; }
.testi-block p { font-size: 22px; color: #fff; padding: 25px 40px; margin: 0; }
.testi-block .arrow { text-align: right; display: block; }
.testi-block .arrow img { cursor: pointer; }
.we-block { box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.12) !important; padding: 20px 25px; min-height: 375px; }
.we-block .title { font-size: 26px; color: #000; margin: 12px 0; }
.why-block .title { font-size: 26px; margin: 0; line-height: 32px; }
.why-block .text { font-size: 20px; margin-bottom: 80px; }
@media only screen and (max-width: 992px), only screen and (max-device-width: 992px) {
  .content-block { margin-bottom: 30px; }
}

/**** Client ****/
.client .col-lg-3 { border-bottom: 1px solid #eee; border-left: 1px solid #eee; text-align: center; }
.client .col-lg-3:nth-child(2), .client .col-lg-3:nth-child(3), .client .col-lg-3:nth-child(4), .client .col-lg-3:nth-child(5) { border-top: 1px solid #eee; }
.client .col-lg-3:nth-child(5), .client .col-lg-3:nth-child(9), .client .col-lg-3:nth-child(13), .client .col-lg-3:nth-child(17), .client .col-lg-3:nth-child(21), .client .col-lg-3:nth-child(25) { border-right: 1px solid #eee; }
.client .col-lg-3 img { width: 100%; }

/**** Testimonial ****/
.testi-bg { background-image: url("../images/testi-bg.png"); background-size: cover; padding: 30px 0 120px; text-align: center; padding: 100px 30px; color: #ffffff !important; }
.testi-bg .heading { color: #ffffff; font-size: 30px; line-height: 36px; padding-bottom: 20px; }
.testi-bg p { font-size: 14px; line-height: 26px; }
.testi { text-align: center; }
.testi .content { color: #202a5c; font-family: PlayfairDisplay-Italic; padding: 10px 30px; font-size: 17px; line-height: 28px; min-height: 250px; }
.user { padding: 15px 15px 35px; }
.user p { color: #000000; font-size: 22px; font-weight: 700; padding-top: 20px; margin-bottom: 0; }
.user small { color: #000000; font-size: 18px; font-weight: 400; padding-top: 20px; margin-bottom: 20px; }

/**** footer-block ****/
.footer-block { background-color: #280476; padding: 90px 0 0; color: #676c8a; font-size: 15px; margin-top: 0px; padding-bottom: 20px; }
.footer-block .links p { margin: 0; color: #ffffff; font-size: 22px; line-height: 35px; height: 35px; margin-bottom: 15px; }
.footer-block .links a { width: 100%; color: #fff; font-size: 18px; display: block; line-height: 32px; padding: 10px 0 0; }
.footer-block .links a.blue { color: #0ABAFF !important; font-size: 28px;  }
.footer-block .links a:hover { color: #ffffff; }
.footer-block .contact-links p:first-child { margin: 0; color: #ffffff; font-size: 16px; line-height: 35px; height: 35px; }
.footer-block .contact-links a { width: 100%; color: #47b44b; font-size: 16px; display: block; line-height: 40px; margin: 5px 0 15px 0; }
.footer-block .contact-links img { width: 22px; margin-right: 15px; }
.footer-block .contact-links img { width: 30px; }
.footer-block .contact-links p:last-child { margin: 0; color: #ffffff; font-size: 16px; line-height: 40px; height: 40px; }
.footer-block .hr { border-top: 1px solid #1d212c; margin: 50px 0; }
.footer-block .dark { background-color: #010413; color: #3c4156; text-align: center; padding: 25px; margin-top: 40px; font-size: 12px; }
.footer-block p { color: #fff; font-size: 20px; }
.footer-block small { color: #CCC; font-size: 16px; }
.footer-block .tagline .tag { font-size: 20px; line-height: 27px;}

/*** Carousel ***/
.carousel-indicators.bottom { bottom: -40px; }
.carousel-indicators li { background-color: #3D4394; width: 15px; height: 15px; border-radius: 20px; border: 0; }

/* Modal */
.modal-lg { max-width: 85%; }
.modal-md { max-width: 60%; }
.modal-content.scroll { padding: 20px; max-height: 90vh; overflow-y: scroll; }
.modal .section-heading { font-size: 28px; margin-bottom: 5px; }
.modal .subtext { font-size: 24px; color: #434C75; }
.modal .color-bg .col-12 p { font-size: 16px; margin-bottom: 0; font-weight: 500; }
.modal .color-bg .col-12:nth-child(1) { color: #333B7E; background: #EEF0FF; border-radius: 8px 0px 0px 8px; padding: 10px; }
.modal .color-bg .col-12:nth-child(2) { color: #195A6C; background: #DFF8FF; border-radius: 0px 8px 8px 0px; padding: 10px; }
.modal-points .tab { background: #3D4394 ; color: #FFF; font-size: 16px; font-weight: 700; margin-bottom: 25px; padding: 10px 15px; border-radius: 6px; }
.modal-points .title { color: #434C75; font-size: 22px; margin: 14px 0 0; }
.modal-points ul { color: #5E5E5E; padding: 0 0 0 30px; }
.modal-points ul li { font-size: 18px; padding: 0 0 6px; }
.modal .subtitle { font-size: 18px; line-height: 22px; max-width: 100%; margin-top: 20px; }
.modal form .col-12 { margin-bottom: 10px; }
.modal .btn { text-transform: uppercase; padding-left: 15px; padding-right: 15px; margin-right: 15px; }
.modal .btn-primary { background-color: #034EA2; border-color : #034EA2; }
.modal .btn-default { background-color: transparent; border-color : #034EA2; color: #034EA2; }
.demo-form { padding: 0px 40px 25px; } 
.demo-form .section-heading { margin-top: 20px; }
.modal-img { background-image: url("../images/modal3.svg"); border-radius: 0 3px 3px 0; height: 370px; background-size: cover; }

/**** BG Color ****/
.bg-white { background-color: #ffffff; }
.bg-light { background-color: rgba(146, 157, 254, 0.10) !important; }

/**** Font Color ****/
.white{ color: #ffffff; }
.green{ color: #47b44b; }
.blue{ color: #202a5c; }

/**** Font Size ****/
.font-12 { font-size: 12px; line-height: 16px;}
.font-14 { font-size: 14px; line-height: 18px;}
.font-20 { font-size: 20px; line-height: 30px;}
.font-30 { font-size: 30px; line-height: 34px;}
.font-40 { font-size: 40px; line-height: 44px;}
.font-50 { font-size: 42px; line-height: 38px;}
.font-70 { font-size: 70px; line-height: 84px;}
.font-90 { font-size: 70px; line-height: 85px;}

@media only screen and (max-width: 992px), only screen and (max-device-width: 992px) {
  .header-bg { height: auto; background-repeat: no-repeat; padding: 30px 0 60px;  }
  .banner-content { height: auto; }
  .header-block { height: auto; }
  .navbar-nav .dropdown-menu { margin-top: -14px; border: 0; box-shadow: none; }
  .font-90 { font-size: 27px !important; line-height: 38px; margin-top: 80px; }
  .font-50 { font-size: 20px !important; line-height: 28px;}
  .banner-btn { padding: 8px 15px 0px 15px !important; font-size: 21px; margin: 30px 0; }
  .pb-50 { padding-bottom: 50px !important; }
  .CloudOps-bg { height: auto !important; padding: 30px 0 50px !important; background-color: #3a468b; }
  .CloudOps-bg img { height: auto; width: auto; margin: 0 auto; }
  .navbar-collapse { background-color: #fff; padding: 12px 0; }
  .navbar ul { align-items: baseline; }
  .logo { padding: 20px; width: 180px; }
  .footer-block .links p { margin-top: 40px; margin-bottom: 0; }
  .cost-block p.data { font-size: 24px !important; }
  .cost-block p.text { font-size: 26px !important; }
  .why-block { background-color: #fff; padding: 20px 25px; border-radius: 16px; margin-bottom: 50px; min-height: 340px; }

  .modal-lg, .modal-md  { max-width: fit-content; }
  .modal-points .col-12 { margin: 20px 0; }
  .modal .title { font-size: 22px !important; }
}

/**** Font Weight ****/
.bold { font-weight: 600; }
.extrabold { font-weight: 700; }

/**** Margin ****/
.m-0 { margin: 0; }
.p-0 { padding: 0; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-m50 { margin-top: -50px; }
.mt-80 { margin-top: 80px; }
.ml-78 { margin-left: 78px; }

.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }

.mr-10 { margin-right: 10px; }
.pb-50 { padding-bottom: 0px;}
.pb-50 { padding-bottom: 50px;}

.height-full { min-height: 100vh; }
hr.dashed { border-top: 2px dashed #5e699f; }
    
video { max-width: 100%; }
    


/* ipad */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .font-90 { font-size: 42px !important; line-height: 46px; }
  .font-50 { font-size: 25px; line-height: 30px; }
  .why-block .title { font-size: 22px; line-height: 26px;}
  #whyCloudOps .carousel-inner, #why .carousel-inner, .content-block { width: 60%; margin:  0 auto; }
  .success-block, .we-block { margin-bottom: 30px; }
  .testi-block { min-height: 470px; }
  .footer-block { padding: 90px 30px 0;}
}

@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  .font-90 { font-size: 46px; line-height: 54px; }
  .font-50 { font-size: 36px; line-height: 36px; }
  .title { font-size: 30px; line-height: 36px; }
  .subtitle { font-size: 19px; line-height: 30px; margin-bottom: 0px; }
  .section-heading { font-size: 28px; line-height: 34px; }
  p { font-size: 20px; }
  .cost-block { min-height: auto; }
  .cost-block p.text { font-size: 16px; line-height: 20px; min-height: 48px; }
  .cost-block p.data { font-size: 16px; line-height: 20px; }
  .we-block { min-height: 490px; }
  .we-block .title { font-size: 20px; line-height: 26px; }
  .we-block p { font-size: 16px; line-height: 26px; }
  .why-block .title { font-size: 21px; line-height: 26px; }
  .why-block .text { font-size: 19px; line-height: 24px; }
  .nav-link { padding-right: 10px !important; padding-left: 10px !important; }
  .success-block { min-height: 680px; }
  .testi-block p { font-size: 21px; }
  .user { min-height: auto; }
  .user p { font-size: 19px; }
  .user small { font-size: 16px; }
  .banner-btn { padding: 8px 24px; font-size: 20px; }
  .mobile-hide { display: inline-block !important; }
  .mob-hide { display: flex !important; }
  .mob-show { display: none !important; } 
} 


.hide { display: none !important; }

#home .carousel-indicators li { background-color: transparent; border: 1.5px solid #fff; }
#home .carousel-indicators li.active { background-color: #fff; }

.modal_custom { overflow-y: scroll !important; }

.dora { display: flex; }
.dora img { width: 80px; }
.dora p { color: #000; }
.dora small {color: #434C75; }
.why-block { min-height: 200px; }



/* Important part */
.custom .modal-dialog{
  overflow-y: initial !important
}
.custom .modal-body{
  height: 80vh;
  overflow-y: auto;
  padding: 2rem;
}

.no-mob-margin { 
  margin-top: 0 !important;
}