@import url("https://fonts.googleapis.com/css?family=Poppins:200,200i,300,300i,400,400i,500,500i,600,600i,700&display=swap");
@import "variables.css";

/* General Styling ------------------------------------------------------------ */
body,html {
  overflow-x:hidden; 
}

body {
  font-family: "Poppins", sans-serif;
  font-weight: normal;
  font-style: normal;
 
}
a,
button {
    color: #1F1F1F;
    outline: medium none;
}
h1, h2, h3, h4, h5, p {
  font-family: "Poppins", sans-serif;
  color: #1F1F1F;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
}

h1 {
    font-size: 40px;
    text-transform: capitalize;
    letter-spacing: 2px;
    font-weight: 400;
    color: #2C2C2C;
    line-height: 62px;
}

h3 {
    font-size: 33px;
    line-height: 50px;
    font-weight: 400;
    color: #2C2C2C;
    margin-bottom: 20px;
}

h4 {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 400;
    margin-top: 38px;
    margin-bottom: 20px;
}
h5 {
  font-size: 20px;
    line-height: 1.5;
    font-weight: 400;
    margin-top: 38px;
    margin-bottom: 20px;
    color: #2C2C2C;
}
ul {
    margin: 0;
    padding: 0;
}
.dot-separator {
  font-size:12px !important;
  width:15px !important;
  padding:1px !important;
  margin-top:-2px !important;
}
li {
    list-style: none;
}

ul li {
    font-size: 16px;
    line-height: 28px;
    color: #727272;
    position: relative;
    padding-left: 10px;
    margin-bottom: 5px;
    font-weight: 400;
    z-index: 1;
}

p {
    font-size: 17px;
    font-weight: 300;
    line-height: 28px;
    color: #4D4D4D;
    /* user-select: none; */
    margin-bottom: 13px;
    font-family: "Poppins", sans-serif;
}
/* Actives  ------------------------------------------------------------ */

.in-active {
  background:rgba(104, 140, 187, 0.829) !important;
}
.blue-inactive {
  background:rgba(104, 140, 187, 0.829)
}
.active-nav-link {
  border-bottom: var(--accent) 3px solid; 
}
.active-nav-link-hidden {
  border-bottom: transparent 3px solid; 
}
.blue-active {
  background:var(--shade1) !important;
}
li.active  {
  background:var(--shade1) !important;
}

/* Header/Footer ------------------------------------------------------------ */
.header-area {
  left: 0;
  right: 0;
  width: 100%;
  top: 0;
  z-index: 9;
  position: absolute;
  background: white;
}

.header-area .main-header-area.sticky {
  box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
  position: fixed;
  width: 100%;
  top: -70px;
  left: 0;
  right: 0;
  z-index: 990;
  transform: translateY(70px);
  transition: transform 500ms ease, background 500ms ease;
  -webkit-transition: transform 500ms ease, background 500ms ease;
  background: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
}

.header-area .navbar-nav li {
  display: inline-block;
  position: relative;
}
.navbar-nav {
   margin-top:22px;
}
.header-area .navbar-nav li a {
  font-size: 16px;
  font-weight: 500;
  display: inline-block;
  font-family: "Poppins", sans-serif;
  position: relative;
  text-transform: capitalize;
}
.footer-nav .nav-link{
  font-weight:500;
  text-transform: capitalize;
}

/* Buttons ------------------------------------------------------------ */
.boxed-btn {
  transition: padding .2s ease;
  position:relative;
  display: inline-block;
  padding: 10px 30px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  border: 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-align: center;
  color:white;
  text-transform: capitalize;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  cursor: pointer;
  letter-spacing: 2px;
}
.boxed-btn-icon:hover {
  color:white !important;
  background:var(--shade2) !important;
  position:relative !important;
  padding-left: 65px !important;
  transition: padding .1s ease;
}
.mini-icon {
  visibility: hidden ;
  padding:unset;
  margin:unset;
  display:inline;
  color: white;
  position:absolute;
  left:10%;
  top:35%;
}
.boxed-btn-icon:hover .mini-icon{
  visibility: visible !important;
  transform: translate(20px,0px) !important;
  color: white!important;
  transition:.1s ease 0.1s;
}

/* Layouts ------------------------------------------------------------ */
.section {
  padding-top:40px !important;
  padding-bottom:40px !important;
}
.title-underbox-offset {
  margin-top:80px !important;
}
.product-images {
  width:80px;
  height:auto;
  margin:0 auto;
}
.card {
  padding:10px !important;
  min-width:320px !important;
}
.product-cards .card {
  margin-right:10px !important;
}
.product-cards-main .card:hover {
  background-color:#f8fcff  !important;
  cursor:pointer;
  box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15) !important;
}
.product-cards .card {
  z-index:2;
  margin-bottom:-50px !important;
}
.top-section {
  margin-top:-10px !important;
  padding:unset !important;
  z-index:0;
}
.second-section-privacy {
  margin-top:140px !important;
  padding:unset !important;
  z-index:0;
}
.privacy-policy-list li {
  list-style: circle !important;
}
.second-section-background {
  /* width:80% !important; */
}
.third-section {
  padding-bottom:unset !important;
  position: relative !important;
  background-color: #D9E2F3;
  background-attachment: fixed !important;
  background-position: center !important;
  background-size:cover !important;
  background: url('./images/product-3-boxes-copy1.jpg') no-repeat;
}
.third-section-background h3, .third-section-background p {
  z-index:2;
}
.third-section::after {
  content: ""; 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:var(--shade1);
  opacity:0.5;
}
.seventh-section-background .cards {
  width:100% !important;
  height:auto !important;
}

/* List Layout */ 

.list-item{
  padding:20px;

  display:flex;
  flex-direction: column;
}
.list-item-header{

  width:100%;
  display:inline-flex;
  flex-wrap:nowrap;
}
.list-item-header-icon {
  padding:4px;
  margin-right:10px;
}
.feature-rows .list-item{
  margin:unset !important;
  padding:10px !important;
}
.left-feature-row {
  border-right:2px solid var(--shade1);
}

/* Linkedin Feed Container ------------------------------------------------------------ */

.linkedin-feed-container {
  width:70%;
  height:auto;
  display:flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  flex-direction: column;
  .plugin-wrapper, .feed-wrapper, .feed-header {
    border-radius: 0.25rem;
  }
}


/* Modals ------------------------------------------------------------ */

/* Windows Scroll Padding Fix */ 
.modal-open .modal {
  padding:unset !important;
}
.modal-open {
  padding-right:unset !important;
}
.modal {
  padding-right:unset !important;
}

/* Laptop Modal */ 
.modal-content {
  /* height:100% !important; */
  background-color: transparent!important;
  border:transparent !important;
}
.laptop-large{
  width: 70% !important;
  top:0px;
  position:fixed;
  left:0px;
  transform: translate(20%,30%);
  height:auto!important;
}
.modal-content-laptop {
  width:100% !important;
  position: absolute;
  top:25vh;
  justify-content: center;
}
/* General Modal Layouts */ 
.card-modal {
 background-color: rgb(255, 255, 255) !important;
 height:auto !important;
 width:1400px !important;
 padding:20px !important;
 margin: 10vh auto !important;
}
.card-modal .readmore-paragraph-small  {
  font-size:14px !important;
}
.modal-box-titles{
  margin-top:unset !important;
  margin-bottom:5px !important;
}
.card-modal2 {
  background-color: rgb(255, 255, 255) !important;
  height:auto !important;
  width:450px !important;
  margin:30vh auto;
  background: #F5FBFF !important;
  border:2px solid #011164 !important;
}
.card-modal3 {
  background-color: rgb(255, 255, 255) !important;
  height:600px !important;
  width:600px !important;
  margin:30vh auto;
  background: #F5FBFF !important;
  border:2px solid #011164 !important;
}

/* Solution Diagram ------------------------------------------------------------ */
.top-icon-container {
  min-height:85.5px !important;
  max-height:85.5px !important;
  display: flex;
  align-items: center;
  justify-content: start;
  padding:10px !important;
}
.solutions-popup-icon {
  width: 80px !important;
}
.square-bullet-list li{
  list-style: square !important;
  color:#3362AD;
}
.sol-diagram:hover {
  filter: drop-shadow( 0px 2px 2px rgba(0,0,0,.5) );
}
.solution-button {
  border: 2px solid #3362AD;
  background-color: #F6FBFF;
  color:#787F85;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  width:200px;
  height:50px;
  margin-bottom:25px;
}
.solution-button p {
  font-size:18px !important;
  margin: unset !important;
}
.sol-diagram{
  cursor:pointer;
  width:300px;
  height:auto;
}
.solution-legend{
  width:120px !important;
}
.transfer-icon {
  width:210px;
  margin-top:-5px !important;
}
.alytic-icon {
  width:250px;
}
.gcp-icon {
  width:250px;
  margin-top:-10px!important;
}
/* Readmore Modal and buttons  ------------------------------------------------------------ */
.mountain-icon {
  width:95px !important;
}
/* style the tooltip box and arrow based on your class*/
.tooltip-inner {
  background-color: #3362AD !important;
  /*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
  color: #fff;
  border-color:#3362AD!important;
}

.bs-tooltip-top .arrow::before {
  border-top-color: #3362AD !important;
}
.tooltip-icon {
  width:18px;
  right:0px;
  cursor:pointer;
  top:2px;
}
.mountain-container {
  min-height:100px !important;
}
.advanced-column-spacing {
  margin-bottom:-7px!important;
}
.advanced-mountain-spacing {
  margin-bottom:14px !important;
}
.readmore-svg{
  width:40px;
  height:auto;
  cursor:pointer;
}
.readmore-svg:hover {
  border-radius:60%;
  filter: drop-shadow( 0px 2px 2px rgba(0,0,0,.5) );
}
.readmore-square{
  /* background: #3362AD; */
  /* border:1px solid #011164; */
  display: flex;
  height:55px;
  align-items: center;
  justify-content: center;
  width:100%;
  border-radius:0.25rem;
  color:#3362AD !important;
}
.readmore-paragraph-section-ad {
  min-height:52px !important;
}
.readmore-paragraph-section {
  min-height:80px !important;
}
.readmore-paragraph-section2 {
  min-height:80px ;
}
.readmore-para {
  padding:16px;
  min-width:100%!important;
  border-radius:0.25rem;
}
.custom-close-modal {
  outline:none !important;
  margin-left:auto !important;
}
.readmore-square p {
  margin:unset!important;
  color:#3362AD !important;
  font-size:16px !important;
}
.readmore-header {
  min-width:150px;
  text-align: center;
}
.modal-dialog {
  margin:unset !important;
  padding:unset !important;
  max-width:unset !important;
}
.modal-xl{
  margin:unset !important;
  padding: unset !important;
}
.border-custom-right {
  border-right:1px solid grey;
  /* padding-right:20px !important; */
}
.border-custom-left {
  border-left:1px solid grey;
  margin-left:40px !important;
}
.modal-inner-card {
  /* border-radius: 0.25rem; */
  min-width: 33% !important;
  max-width:33% !important;
  /* box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);  */
}
.modal-inner-card-section-larger {
  min-height:220px !important;
}
.modal-inner-card-section {
  min-height:180px !important;
}
.modal-inner-card-section2{
  min-height:80px !important;
}
.modal-inner-card-section3 {
  min-height:180px !important;
}
.small-travelytic-logo {
  width:70px;
}


/* Footer ------------------------------------------------------------ */
footer {
  padding-top:40px;
  border-top:1px solid rgba(65, 65, 65, 0.233);
}
.footer-nav a {
  padding: unset!important;
  padding-right:10px !important;
}
.footer-image {
 text-align: center;
}


/* Carousel ------------------------------------------------------------ */
.laptop {
  width:600px !important;
  height:auto !important;
}
.laptop:hover {
  cursor: pointer;
}
.carousel-container {
  display:flex;
  justify-content: center;
  align-items:flex-start;
  width:100%;
  height:auto;
}
.carousel-container2,.carousel-container3 {
  margin-top:25px;
  margin-right:unset !important;
  display:flex;
  justify-content: center;
  align-items:center;
}
.carousel-image {
  margin-left:auto;
}
.saga-logo img {
  height:40px;
  width:auto;
}
.carousel-image2 {
  margin-left:unset!important;
  flex-direction: column;
  align-items: center;
}
.carousel-writing {
  width:70%;
  margin-left:50px;
  display:flex;
  justify-content:flex-start;
  align-items: flex-end;
  flex-direction:column;
  height:350px !important;
}
.laptop-carousel-buttons{
  height:50px;
  width:240px;
  text-align:center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  line-height: 15px;

}
.laptop-carousel-buttons span {
  display: inline;
}
.carousel-control-prev-icon-main, .carousel-control-next-icon-main {
  margin-right:30px;
  margin-top:100px;
  background-image: url("images/arrow_back_ios_new-24px.svg") !important;
}
.carousel-control-next, .carousel-control-prev {
 top:100px !important;
}
.main-controls {
  margin-bottom:20% !important;
}
.carousel-control-prev-icon {
  margin-right:150px;
  background-image: url("images/arrow_back_ios_new-24px.svg") !important;
}
.carousel-control-next-icon {
  margin-left:150px;
  background-image: url("images/arrow_forward_ios-24px.svg") !important;
}
/* Email Toast */ 
.alert-success,.alert-warning,.alert-danger{
  position:fixed !important;
  top:80px !important;
  width:100%;
  margin:0 auto;
  margin:unset !important;
  padding:unset !important;
}
.g-recaptcha {
  width:20%;
  transform: scale(0.6);
  left:130px;
}
.hide {
  visibility: hidden;
  position:absolute;
}
.form-message-sent {
  min-height:340px;
}
.form-message-sent-icon {
  font-size:42px;
}
.message-box {
  min-height:340px;
}
.boxed-btn-anim:hover{
  color:white !important;
  background:var(--shade2) !important;
}