@charset "utf-8";

  @media (max-width: 767px) {
      .example-class {
        font-size: 14px;
      }
    }

    @media (min-width: 768px) and (max-width: 991px) {
      .example-class {
        font-size: 16px;
      }
    }

    @media (min-width: 992px) {
      .example-class {
        font-size: 18px;
      }
    }


    .flex-container {
      display: flex;
      flex-wrap: wrap;
    }

    .flex-item {
      flex: 1 1 100%;
    }

    @media (min-width: 768px) {
      .flex-item {
        flex: 1 1 50%;
      }
    }

    @media (min-width: 992px) {
      .flex-item {
        flex: 1 1 33.33%;
      }
    }

    .bg-primary-crd {

      background-color: #31557d !important;
    }

    .bg-secondary-crd {

      background-color: #495057 !important;
    }

    .bg-danger-crd {

      background-color: rgb(97 97 97) !important;
    }

    .text-primary-hed {
      --bs-text-opacity: 1;
      font-size: 75px;
      color: #31557d !important;
      margin: 0px;
    }



    .navbar .megamenu {
      padding: 1rem;
    }

    /* ============ desktop view ============ */
    @media all and (min-width: 992px) {

      .navbar .has-megamenu {
        position: static !important;
      }

      .navbar .megamenu {
        left: 0;
        right: 0;
        width: 100%;
        margin-top: 0;
      }

    }

    /* ============ desktop view .end// ============ */

    /* ============ mobile view ============ */
    @media(max-width: 991px) {

      .navbar.fixed-top .navbar-collapse,
      .navbar.sticky-top .navbar-collapse {
        overflow-y: auto;
        max-height: 90vh;
        margin-top: 7px;
      }
    }

    /* ============ mobile view .end// ============ */


    .navbar-nav .nav-item .nav-link:focus {

      background-color: #31557d;
      color: white;
      border-radius: 10px;
    }

    .fcolor {
      color: #31557d;
    }

    a {
      text-decoration: none !important;
    }

    /* .mhover:hover{
  color: #31557d;
  text-shadow: #495057;
  font-weight:bold;
  text-decoration: underline !important;
} */


    :root {
      --link-color: #31557d;
      --link-underline-padding: .3em;
    }

    .mhover {
      color: var(--link-color);
      display: inline-block;
      padding: 0 var(--link-underline-padding);
      text-decoration: none;
    }

    .mhover:after {
      background-color: var(--link-color);
      content: '';
      display: block;
      height: .1em;
      margin-left: calc(var(--link-underline-padding) * -1);
      margin-top: .2em;
      transition: width .5s;
      width: 0;
    }

    .mhover:hover:after {
      width: calc(100% + var(--link-underline-padding) * 2);
    }


    .uimgbox1 {
      background-image: url('../img/ui1.jpg');
      background-size: 100px;
      width: 100px;
      height: 100px;

    }

    .uimgbox2 {
      background-image: url('../img/ui2.jpg');
      background-size: 100px;
      width: 100px;
      height: 100px;

    }

    .uimgbox3 {
      background-image: url('../img/ui3.jpg');
      background-size: 100px;
      width: 100px;
      height: 100px;

    }

    .uimgbox4 {
      background-image: url('../img/ui4.jpg');
      background-size: 100px;
      width: 100px;
      height: 100px;

    }

    .uimgbox5 {
      background-image: url('../img/ui5.jpg');
      background-size: 100px;
      width: 100px;
      height: 100px;

    }

    .uimgbox6 {
      background-image: url('../img/ui6.jpg');
      background-size: 100px;
      width: 100px;
      height: 100px;

    }

    .uimgbox7 {
      background-image: url('../img/ui7.jpg');
      background-size: 100px;
      width: 100px;
      height: 100px;

    }

    .uimgbox8 {
      background-image: url('../img/ui8.jpg');
      background-size: 100px;
      width: 100px;
      height: 100px;

    }


    /* Style the v tab */



    /* Style the tab */
    .tab {
      float: left;
      border: 1px solid #ccc;
      border-right: none;
      background-color: #f1f1f1;
      width: 20%;
      height: 1080px;
    }

    /* Style the buttons inside the tab */
    .tab button {
      display: block;
      background-color: inherit;
      color: black;
      padding: 22px 16px;
      width: 100%;
      border: none;
      outline: none;
      text-align: left;

      cursor: pointer;
      transition: 0.3s;
      font-size: 17px;
    }

    /* Change background color of buttons on hover */
    .tab button:hover {
      background-color: rgb(74, 74, 75);
      color: rgb(255, 255, 255);
    }

    /* Create an active/current "tab button" class */
    .tab button.active {
      background-color: #31557d;
      color: rgb(255, 255, 255);
    }

    /* Style the tab content */
    .tabcontent {



      padding: 0px 12px;
      border: 1px solid #ccc;
      width: 80%;
      border-left: none;
      border-bottom: none;
      height: 1080px;
    }


    #myBtn {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 30px;
      z-index: 99;
      font-size: 18px;
      border: none;
      outline: none;
      background-color: red;
      color: white;
      cursor: pointer;
      padding: 15px;
      border-radius: 4px;
    }

    #myBtn:hover {
      background-color: #555;
    }

    /* testimonial */

    .testimonial-card {
      background: linear-gradient(45deg, #31557d 0%, #495057 100%);
      border-radius: 15px;
      overflow: hidden;
    }

    .testimonial-content {
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 10px;
      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
    }

    .testimonial-image {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #fff;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .quote-icon {
      font-size: 2rem;
      color: #31557d;
      opacity: 0.6;
    }

    .bg-gry-pry {
      background-image: linear-gradient(to right, #f3f8fd, rgb(225, 239, 255));
    }


    .intus-image {
      background-image: url("../img/intus-bg-abstract.png");
      background-color: rgb(255, 255, 255);

      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
    }

    svg:hover {
      width: 35px;
      height: 35px;
    }

canvas {
      max-width: 100%;
    }
	
	
/* The Modal (background) */
.modal-new {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content-new {
   background-color: #fefefe; 
  /* background-color: rgba(0,0,0,0.4);*/
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close-new {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-new:hover,
.close-new:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
*:disabled {
  background-color: dimgrey;
  color: linen;
  opacity: 1;
  
}
* :disabled:hover  {
  background-color: dimgrey;
  color: linen;
  opacity: 1;
  
}
#rcorners3 {
	border-radius: 10px;
	border: 2px solid #0080C0;
	padding: 20px;
}
#rcorners1 {
	border-radius: 10px;
	border: 2px solid #666666;
	padding: 5px;
}
#rcorners2 {
	border-radius: 5px;
	border: 2px solid #666666;
	padding: 3px;
}
 #rcorners4 {
	border-radius: 10px;
	border: 2px solid #666666;
	padding: 0px;
}
.box {
	width:100%;
	
	background:#FFF;
	margin: auto;
}
.effect1{
     box-shadow: 0 10px 6px -6px #777;
}

#rotate{
  vertical-align:top;
	transform:rotate(7deg);
  -ms-transform:rotate(90deg); /* IE 9 */
  -moz-transform:rotate(90deg); /* Firefox */
  -webkit-transform:rotate(90deg); /* Safari and Chrome */
  -o-transform:rotate(90deg); /* Opera */}
    
#vert{
	height: auto;
	min-width: auto;
}

.buttons{
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-self: center;
	
  cursor:pointer;
  height:50px;
	min-width: 100px;
  position:relative;
  
	border: 1px solid #333;
	border-radius: 5px;
  padding: 0 10px;	

	font-size: 20px;

}
.inputs{
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-self: center;
	
  cursor:pointer;
  height:50px;
	min-width: 100px;
  position:relative;
  
	border: 1px solid #333;
	border-radius: 5px;
  padding: 0 10px;	

	font-size: 20px;

}

input:hover{box-shadow:0px 0px 4px #fff;}
input:active{top:1px;}

 
.button-containers {
	display: grid;
	grid-gap: 40px;
	grid-template-columns: repeat(3,1fr);
	justify-items: center;
	width: 400px;	
	padding: 40px 0;
	margin: 0 auto;
}