@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700");
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@700&display=swap');

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


body {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #000000;
}


#fashion .display-1 {
    font-size: 2.5rem;
}

button.hamburger:before, button.hamburger span, button.hamburger:after {
    display: block;
    width: 100%;
    height: 3px;
    margin: 0 0 5px;
    transition: all 200ms ease-in-out;
    background: #ffffff;
}

p{
    color: #000000;
}

.dropdown-item-1 {
    font-weight: 500;
    letter-spacing: -0.01rem;
}


.dropdown-menu {
    border: 0;
}


.dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 20rem !important;
    padding: 1rem 0;
    margin: 0;
    font-size: 0.75rem;
    color: #343f52;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.4rem;
    box-shadow: 0rem 0rem 1.25rem rgb(30 34 40 / 4%);
}


.dropdown-item-1 {
    display: block;
    padding: 0.2rem 0.2rem;
    clear: both;
    font-weight: 500;
    color: #000000;
    text-align: inherit;
    /* white-space:; */
    background-color: transparent;
    border: 0;
}


@media (max-width: 767px){
    #fashion .display-1 {
        font-size: 2.1rem;
    }

    
}

@media (max-width: 991.98px){
.navbar .navbar-brand {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.offcanvas-header img {
    max-width: 65%;
    height: auto;
}

}





/* Desktop */

.navbar {
    background-color: #333333;
    width: 100%;
    z-index: 1020;
    padding-bottom: 10px;
    padding-top: 10px;
}

.navbar {
    width: 100%;
    z-index: 1020;
    background-color: #333333;
}

.nav-link {
    display: block;
    padding: 1.2rem 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff;
    /* transition: all 200ms ease-in-out; */
}

.banner--stick:not(.navbar-dark), .banner--stick.transparent {
    box-shadow: 0rem 0rem 1.25rem rgb(30 34 40 / 4%);
    background: #21262c;
}

.text-primary {
    --bs-text-opacity: 1;
    color: #1da4aa !important;
}

.t-b{
    font-weight: bold;
    font-size: 19px;
    color: #1da4aa;
}

.btn-primary {
    color: #fff;
    background-color: #1da4aa;
    border-color: #1da4aa;
}


.btn-sm:hover{
    color: rgb(0, 0, 0);
    background-color: #ffffff;
    border-color: #ffffff;
}

.btn-primary:hover {
    color: #fff;
    background-color: #333333;
    border-color: #333333;
  }


  .navbar {
    width: 100%;
    z-index: 1020;
    background-color: #21262c;
}


b, strong {
    font-weight: bolder;
    font-size: 19px;
    color: #1da4aa;
}

.tab-content h2{
    font-size: 19px;
}

.bg-new{
    background-color: #21262c; 
}

/* 
video {
    background-size: cover;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 80%;
    z-index: 1;
} */


.btn-purple {
    color: #fff;
    background-color: #1da4aa;
    border-color: #1da4aa;
}


.btn-purple:hover {
    color: #fff;
    background-color: #333333;
    border-color: #333333;
  }

  .link-dark {
    color: #1da4aa !important;
}

.link-dark:hover {
    color: #1da4aa;
}



h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: #333333;
  word-spacing: 0.1rem;
  letter-spacing: -0.01rem;
}

h4, .h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: #333333;
    word-spacing: 0.1rem;
    letter-spacing: -0.01rem;
}

.post-title{
    color: #1da4aa;
}

.icon-svg, .icon-svg.icon-svg-lg {
    width: 6rem;
    height: 6rem;
}


.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    line-height: 1;
    /* font-weight: 600; */
    font-family: 'Inter', sans-serif;
    /* letter-spacing: 1px; */
}


.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: #1da4aa;
}

.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav .nav-link.active {
  color: #1da4aa;
}

a {
    color: #1da4aa;
    text-decoration: none;
  }

a:hover {
    color: #1da4aa !important;
  }


  .navbar-nav .nav-link:hover {
    color: #1da4aa;
}

.navbar-nav .dropdown-menu .dropdown-item:hover {
    color: #1da4aa;
    background-color: #dcf2f38e;
    padding: 0.2rem 1.5rem;
    border-radius: 5px;
    padding-top: 20px;
}


.navbar-nav:not(.sm-collapsible) .nav-link .sub-arrow {
    display: inline-block;
    width: auto;
    height: auto;
    margin-left: 0.05rem;
    margin-right: -0.25rem;
    margin-bottom: -0.15rem;
    vertical-align: -2px;
    border: 0 !important;
    font-size: 0.75rem;
    color: #1da4aa;
}


  .link-dark:hover,
a.text-reset:hover,
.text-reset a:hover {
  color: #1da4aa !important;
}


:root {
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-blue: #1da4aa;
    --bs-purple: #1da4aa;
    --bs-violet: #a07cc5;
    --bs-pink: #d16b86;
    --bs-red: #e2626b;
    --bs-orange: #f78b77;
    --bs-yellow: #fab758;
    --bs-green: #6bbea3;
    --bs-leaf: #7cb798;
    --bs-aqua: #54a8c7;
    --bs-navy: #54a8c7;
    --bs-ash: #9499a3;
    --bs-white: #fff;
    --bs-light: #fefefe;
    --bs-gray: #f6f7f9;
    --bs-dark: #262b32;
    --bs-primary: #1da4aa;
    --bs-secondary: #aab0bc;
    --bs-success: #6bbea3;
    --bs-info: #54a8c7;
    --bs-warning: #fab758;
    --bs-danger: #e2626b;
    --bs-blue-rgb: 63, 120, 224;
    --bs-purple-rgb: 116, 126, 209;
    --bs-violet-rgb: 160, 124, 197;
    --bs-pink-rgb: 209, 107, 134;
    --bs-red-rgb: 226, 98, 107;
    --bs-orange-rgb: 247, 139, 119;
    --bs-yellow-rgb: 250, 183, 88;
    --bs-green-rgb: 107, 190, 163;
    --bs-leaf-rgb: 124, 183, 152;
    --bs-aqua-rgb: 84, 168, 199;
    --bs-navy-rgb: 52, 63, 82;
    --bs-ash-rgb: 148, 153, 163;
    --bs-white-rgb: 255, 255, 255;
    --bs-light-rgb: 254, 254, 254;
    --bs-gray-rgb: 246, 247, 249;
    --bs-dark-rgb: 38, 43, 50;
    --bs-primary-rgb: 63, 120, 224;
    --bs-secondary-rgb: 170, 176, 188;
    --bs-success-rgb: 107, 190, 163;
    --bs-info-rgb: 84, 168, 199;
    --bs-warning-rgb: 250, 183, 88;
    --bs-danger-rgb: 226, 98, 107;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 96, 105, 123;
    --bs-body-bg-rgb: 254, 254, 254;
    --bs-font-sans-serif: 'Inter', sans-serif;
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-root-font-size: 20px;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 17px;
    --bs-body-font-weight: 500;
    --bs-body-line-height: 1.7;
    --bs-body-color: #60697b;
    --bs-body-bg: #fefefe;
}



.bg-dot.primary {
    background-image: radial-gradient(#333333 2px, transparent 2.5px);
}

.display-4 {
    font-size: 2.1rem;
}


.icon-list.bullet-soft-yellow.bullet-bg i, .icon-list.bullet-bg i[class*=bullet-soft-yellow] {
    background-color: #1da4aa;
}

.icon-list.bullet-soft-yellow i, .icon-list.bullet-bg i[class*=bullet-soft-yellow] {
    color: #ffffff;
}

.nav-tabs.nav-tabs-bg .nav-link:hover, .nav-tabs.nav-tabs-bg .nav-link{
    color: #ffffff; 
    /* border: 2px solid #1da4aa; */
    box-shadow: 0 0 0 0.05rem rgb(8 60 130 / 6%), 0rem 0rem 1.25rem rgb(30 34 40 / 4%);
}

.nav-tabs.nav-tabs-bg .nav-link:hover, .nav-tabs.nav-tabs-bg .nav-link.active{
    color: #ffffff;
    background: #1da4aa;
    border: 5px solid #1da4aa;
    border-radius: 10px;
    box-shadow: 0 0 0 0.05rem rgb(8 60 130 / 6%), 0rem 0rem 1.25rem rgb(30 34 40 / 4%);
}

.nav-tabs.nav-tabs-bg .nav-link:hover, .nav-tabs.nav-tabs-bg .nav-link.active .card-body {
    color: #ffffff;
    background: #1da4aa;
    border: 5px solid #1da4aa;
    border-radius: 10px;
    box-shadow: 0 0 0 0.05rem rgb(8 60 130 / 6%), 0rem 0rem 1.25rem rgb(30 34 40 / 4%);
}


.nav-tabs.nav-tabs-bg .nav-link p {
    margin: 0;
    font-weight: 500;
    color: #ffffff;
}


  .nav-tabs.nav-tabs-bg h4 {
        font-size: 20px;
        border-color: transparent;
    }


    .text-justify{
        text-align: left;
    }




    .bg-soft-red {
        background-color: #ebebeb !important
    }
    .card {
        /* height: 100%; */
        box-shadow: 0 0 0 0.05rem rgb(8 60 130 / 6%), 0rem 0rem 1.25rem rgb(30 34 40 / 4%);
        border: 0;
    }

    .home .card {
        height: 100%;  
    }

    .about .card {
        height: 100%;  
    }

    .iot .card {
        height: 100%;    
    }

    .analytic .card {
        height: 100%; 
    }

    .machine-1  .card {
        height: 100%; 
    }
    .azure-service .card {
        height: 100%; 
    }
    .coal .card {
        height: 100%; 
    }

    .smart .card {
        height: 100%; 
    }
    .cost .card {
        height: 100%; 
    }
    .predt .card {
        height: 100%; 
    }


    .team .card{
        height: 100%;
    }

    .chain .card{
        height: 100%;
    }
   

   
   
    .overlay img {
        background: rgba(30, 34, 40, 0.6);
    }

    /* .card-img-overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 1rem;
        border-radius: 0.4rem;
        background-color: rgb(30 34 40 / 50%);
       
    } */

    #color-overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgb(30 34 40 / 20%);
        /* opacity: 0.6; */
        z-index: 2;
        border-radius: 10px;
        
     }

     .accordion-wrapper .card-header button.collapsed {
        color: #ffffff;
        font-size: 19px;
    }

    .accordion-wrapper .card-header button:hover {
        color: #ffffff;
    }

     .accordion-wrapper .card-header button {
        cursor: pointer;
        width: 100%;
        padding: 0 0 0 1.2rem;
        text-align: left;
        margin: 0;
        border: 0;
        font-size: 0.85rem;
        font-weight: 700;
        color: #ffffff;
        transition: all 150ms ease-in-out;
        background: none;
    }

    .service .card-title{
        font-size: 25px;
    }


    .accordion-wrapper .card-header {
        margin-bottom: 0;
        /* background: none !important; */
        border: 0;
        padding: 2rem 2rem;
        
    }

    .bg-pale-blue {
        background-color: #ebf2ff !important;
    }

    
   
    /* .accordion-wrapper .overlay {
    position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 0.4rem;
        background-color: rgb(30 34 40 / 50%);
        z-index: 3;
  } */


  /* .tech .card{
    height: 50vh !important;
} */

  @media only screen and (min-width: 1367px) and (min-height: 768px) {
      .tech .card{
          height: 58vh !important;
      }
      .data .card{
        height: 82vh !important;
    }
    .advance .card{
        height: 50vh !important;
    }
    .machine .card{
        height: 65vh !important;
    }
    .digital .card{
        height: 58vh !important;
    }
    /* .data-1 .card{
        height: 84vh !important;
    } */

    /* .dev .card{
        height: 74vh !important;
    } */
    .sap .card{
        height: 52vh !important;
    }
    .azure .card{
        height: 48vh !important;
    }
    .azure-1 .card{
        height: 50vh !important;
    }
    .data-2 .card .mb-lg-2{
        height: 84vh !important;
         
            /* margin-bottom: 4.25rem !important; */
        
    }

    .venkat p{
        font-size: 16px;
    }
    .chandra h4{
        font-size: 17px;
    }
  }

  @media only screen and (min-width: 2560px) and (min-height: 1440px) {
     

    .tech .card{
        height: auto !important;
    }
    .data .card{
        height: auto !important;
    }
    .advance .card{
        height: auto !important;
    }
    .machine .card{
        height: auto !important;
    }
    .digital .card{
        height: auto !important;
    }
    .data-1 .card{
        height: auto !important;
    }
    .sap .card{
        height: auto !important;
    }
    .azure .card{
        height: auto !important;
    }
    .azure-1 .card{
        height: auto !important;
    }
    .data-2 .card{
        height: auto !important;
    }
}



.accordion-wrapper .card-header button:before {
    font-family: "Custom";
    position: absolute;
    left: 1.3rem;
    content: "\e903";
    font-size: 1.5rem;
    font-weight: normal;
    width: 1rem;
    margin-top: -0.5rem;
    margin-left: -0.3rem;
    display: inline-block;
    color: #1da4aa;
}



.bg-dot.yellow {
    background-image: radial-gradient(#1da4aa 2px, #8d020200 2.5px);
}


.project-new .row{
   
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

/* .project-new .effect-milo .coal{
    border-radius: 10px 0 0 10px;
}
.project-new .condition{
    border-radius: 0 10px 10px 0px;
} */

@media (max-width: 767px){

    figure.effect-milo h2 {
        position: relative;
      top: 95%;
      float: inherit;
        right: 0;
        bottom: 0;
        /* padding: 1em 1.2em; */
      color: white;
      font-size: 1.1rem;
    }

    /* .project-new .coal{
        border-radius: 10px 10px 0 0px;
    }
    .project-new .condition{
        border-radius: 0 0px 10px 10px;
    } */
}

.solution .card {
    transition: transform 0.2s ease; 
  }

.solution .card:hover {
    transform: scale(1.1);
   
  }


  .progress-list .progressbar.primary svg path:last-child, .progress-wrap svg.progress-circle path {
    stroke: #1da4aa;
}

a,  .plyr--full-ui input[type=range], 
  .progress-wrap:after,  .external:hover {
    color: #1da4aa;
}



.about-new figure img {
    width: 100%;
    max-width: 100%;
    height: auto !important;
}










/*animation element*/
.animation-element {
    opacity: 0;
  }
  
  /*animation element sliding left*/
  .animation-element.slide-left {
    opacity: 0;
    transition: all 500ms linear;
    transform: translate3d(-100px, 0px, 0px);
  }
  
  .animation-element.slide-left.in-view {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
  }
  
  .animation-element.slide-right {
    opacity: 0;
    transition: all 400ms linear;
    transform: translate3d(100px, 0, 0);
  }
  
  .animation-element.slide-right.in-view {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
  }
  
  .animation-element.slide-up {
    opacity: 0;
    transition: all 400ms linear;
    transform: translate3d(0, 100px, 0);
  }
  
  .animation-element.slide-up.in-view {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
  }
  
  
  
  
  
.animation-element.slide-up {
    opacity: 0;
    transition: all 500ms linear;
    transform: translate3d(0, 100px, 0);
  }
  
  .animation-element.slide-up.in-view {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
  }
  
  
  
  
  /* Our story Section */

  
/* .grid {
	position: relative;
	margin: 0 auto;
	padding: 1em 0 4em;
  max-width: 1000px;
  width: 100%;
  height: auto;
	list-style: none;
	text-align: center;
} */

/* Common style */
.grid figure {
	position: relative;
	/* float: left; */
	overflow: hidden;
	/* margin: 10px 1%; */
	/* min-width: 320px;
	max-width: 480px;
	max-height: 360px;
	width: 48%; */
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}


.grid figure figcaption {
	padding: 2em;
	color: #fff;

	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 500;
}

.grid figure h2 span {
	font-weight: 400;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

figure.effect-milo {
	background: #000000;
}

figure.effect-milo img {
	max-width: none;
	width: -webkit-calc(100% + 10px);
	/* width: calc(100% + 50px); */
	opacity: 0.6;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-30px,0,0) scale(1.12);
	transform: translate3d(-30px,0,0) scale(1.12);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-milo:hover img {
	opacity: 0.3;
	-webkit-transform: translate3d(0,0,0) scale(1);
	transform: translate3d(0,0,0) scale(1);
}

figure.effect-milo h2 {
	position: relative;
  top: 95%;
  font-size: 1.1rem;
  font-weight: 700;
  float: inherit;
	right: 0;
	bottom: 0;
	/* padding: 1em 1.2em; */
  color: white;
  font-size: 1.1rem;
}

figure.effect-milo .smart h2 {
	position: relative;
  font-size: 1.1rem;
  font-weight: 700;
  top: 80%;
  width: 100%;
  text-align: left;
	right: 0;
	bottom: 0;
	/* padding: 1em 1.2em; */
  color: white;
}

figure.effect-milo .condition h2 {
	position: relative;
    font-size: 1.1rem;
    font-weight: 700;
  top: 91%;
  width: 100%;
  text-align: left;
  /* float: left; */
	right: 0;
	bottom: 0;
	/* padding: 1em 1.2em; */
  color: white;
}

@media (max-width: 767px){
figure.effect-milo h2 {
    position: relative;
    top: 80%;
    /* float: inherit !important; */
    text-align: left;
    right: 0;
    bottom: 0;
    /* padding: 1em 1.2em; */
    color: white;
    font-size: 1.1rem;
}

figure.effect-milo .smart h2 {
    text-align: left;
}
figure.effect-milo .condition h2{
    text-align: left;
}

}






figure.effect-milo .smart p {
	padding: 0 10px 0 0;
	width: 80%;
	/* border-right: 1px solid #fff; */
	text-align: center;
	opacity: 0;
  position: absolute;
  top: 30%;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-40px,0,0);
	transform: translate3d(-40px,0,0);
}

figure.effect-milo p {
	padding: 0 10px 0 0;
	width: 80%;
    color: #fff;
	/* border-right: 1px solid #fff; */
	text-align: center;
	opacity: 0;
  position: absolute;
  top: 50%;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-40px,0,0);
	transform: translate3d(-40px,0,0);
}

figure.effect-milo:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
  
  
  .text-black{
      color: rgb(0, 0, 0);
  }
  
  
  .fade-in-text {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 150px;
    color: black;
    animation: fadeIn linear 7s;
    -webkit-animation: fadeIn linear 7s;
    -moz-animation: fadeIn linear 7s;
    -o-animation: fadeIn linear 7s;
    -ms-animation: fadeIn linear 7s;
  }
  
  @keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
  }
  
  @-moz-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
  }
  
  @-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
  }
  
  @-o-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
  }
  
  @-ms-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
  }
  
  
  footer p{
      color: #fff;
  }

  .counter-wrapper p {
    color: #fff;
    margin-bottom: 0;
    font-size: 0.8rem;
    font-weight: 500;
}

.text-dark {
    --bs-text-opacity: 1;
    color: #000000 !important;
}

.nav-tabs .card{
min-width: 100%;
}

.nav-tabs .card:hover {
     background-color: #1da4aa;
}

.nav-tabs .btn-primary {
    color: #fff;
    background-color: #333333;
    border-color: #333333;
}

.nav-tabs.nav-tabs-bg .nav-link {
    padding: 2.5rem 2.2rem;
}



#tool{
   
    border-radius: 10px;
}

.grid #tool p {
	letter-spacing: 1px;
	font-size: 74.5%;
}


@media (max-width: 767px){
.offcanvas-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 100%;
    left: -15rem;
    width: 14rem;
    padding-right: 0;
    padding-left: 1.5rem;
    padding-bottom: 0.5rem;
    overflow-y: auto;
    visibility: hidden;
    background: #1e2228;
    transition-timing-function: ease-in-out;
    transition-duration: 0.3s;
    transition-property: left, visibility;
    transition: left 0.3s ease-in-out, visibility 0.3s ease-in-out;
    align-items: start;
    background-clip: padding-box;
    z-index: 1041;
}





.dropdown-item {
    display: block;
    width: 65%;
    padding: 0.2rem 1.5rem;
    clear: both;
}
.offcanvas-header img {
    max-width: 55%;
    height: auto;
}

.dropdown-item-1 {
    color: #fff;
}
.nav-tabs.flex-column.nav-tabs-bg .nav-item {
    margin-bottom: 5rem;
}

}


.tab-content>.tab-pane {
    border-radius: 15px;
    padding: 0 50px 50px 50px;
}



.tab-content .text {
    top:40px;
    animation: slideUp ease .4s forwards;
  }
  
  .tab-content .text, .slideDown, .slideUp {
    position: relative;
    opacity:0;
  }
  
  .tab-content .text {
    top:40px;
    animation: slideUp ease .2s forwards;
  }
  
  
  .slideUp {
    top:40px;
    left:10px;
    animation: slideUp ease .1s forwards 0.5s;
  }
  
  
  @keyframes slideUp {
    0% {transform: translateY(0);}
    100% {transform: translateY(-40px);opacity:1;}
  }

  


  .bg-sky{
    background-color: #4BA4AA;
  }


  .bg-dark{
    background-color: #21262c !important;
  }


  @media screen and (min-width: 2560px){  
    .nav .navbar-brand #new{
        width: 50% !important;
    }

}


.navbar ul li a.active{
    color: #4BA4AA !important;
}

.navbar .dropdown-item.active{
    color: #4BA4AA !important;
}

.navbar ul li .btn a.active-cont {
    color: #ffffff !important;
}

.btn-check:checked+.btn-primary, .btn-check:active+.btn-primary, .btn-primary:active, .btn-primary.active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #4BA4AA;
    border-color: #4BA4AA;
}





@media (max-width: 767px){
    .nav-tabs.nav-tabs-bg .nav-link {
        padding: 5px;
    }
    .post-title{
        font-size: 14px;
    }
    .data .card-body {
        flex: 1 1 auto;
        padding: 0.5rem 0.5rem;
    }
    .data .btn-lg, .btn-group-lg>.btn {
        padding: 10px;
        font-size: 0.85rem;
        border-radius: 0.4rem;
    }
    .data .card{
        bottom: -60px !important;
        height: 9em !important;
    }
    .data .tab-content>.tab-pane {
        border-radius: 15px;
        padding: 0 20px 20px 20px;
    }
}