:root {
  --main-gradient-color: linear-gradient(to right top, #224088, #269a00);
  --blue-gradient-color: linear-gradient(to right top, #00388f, #0088cc);
  --green-gradient-color: linear-gradient(to right top, #21752a, #488f03);

}

.jobs-list th, .jobs-list td {	
border:0px;
}

.jobs-list thead tr{
background-image: var(--green-gradient-color);
}


.jobs-list .btn{
	
	background: #fff !important;
	border:solid 2px #488f03 !important;
	color:#488f03;
	border-radius: 10px;
	margin: 0px;
}

.jobs-list h5{
color:#fff;
font-size: clamp(1.5rem, 1.5vw, 3rem);
}



.salesforce-icons{
	font-size: clamp(6.25rem, 6.25vw, 7rem);
	font-weight: 600;
	padding: 0 0 10px 0px;
	
} 


.jobs-list b{
	
	background:  var(--main-gradient-color);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
	
}


.jobs-list strong{
	
	background:  var(--blue-gradient-color);
	-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}



.jobs-list ul{
	padding-left: clamp(1.688rem, 1.688vw, 2rem);
}

.jobs-list .modal-header{
height: clamp(4rem, 4vw, 5rem) !important;
background:  var(--main-gradient-color);
}

.jobs-list .card-body{
	
	min-height: 200px;
	height: 100%;
	overflow-y: auto;
}


.career_form input[type="checkbox"]{
	
	margin: 0px !important;
	width: clamp(1.25rem, 1.25vw, 3rem) !important;
	top:0px;
	
}



 th, td{
border-left: 0px;
border-right: 0px;

}

 .feature-box table thead tr{
	
	 background-image: var(--main-gradient-color) !important;
}


section {
padding: clamp(3.75rem, 3.75vw, 4rem) 0px;

}

.page-title-small{
padding: 10px 0px !important;
}

section.big-section {
padding: 30px 0;
}

.feature-box-left-icon .feature-box-icon{
margin-right: inherit !important;
}


h1, h2, h3, h4, h5, h6{
margin: 0 0 10px 0px;
}





/*--end----*/

/* global gradient--- */

.bg-gradient-light-purple-light-orange, .bg-gradient-fast-blue-purple, .bg-fast-blue, .border-gradient-light-brownish-orange-black {
    background-image: var(--main-gradient-color);
}


.bg-gradient-shamrock-green-light-orange{background-image: var(--main-gradient-color);}

.bg-transparent-gradient-fast-blue-purple{ background-image: var(--main-gradient-color); opacity: 0.9; }
.bg-blue-gradient{background-image: var(--blue-gradient-color);}
.bg-green-gradient{background-image: var(--green-gradient-color);}

.btn-dark-gray{

    background: var(--blue-gradient-color) !important;
    border-color: #0088cc !important;
}

.btn.btn-dark-gray:hover{
    color: #fff !important;
}

.border-color-fast-blue {
    border-color: #0088cc !important;
}


.text-tussock{

     background:  var(--main-gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.text-shamrock-green{color: #21752a;}


.text-gradient-sky-blue-pink, .text-salmon-rose {
    background:  var(--main-gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.text-blue{ 
background:  var(--blue-gradient-color);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;


 }

.text-green{ 
background:  var(--green-gradient-color);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}




.footer-blue{
    background-image: var(--blue-gradient-color);
    color: #fff;
}

.footer-blue li > a, 
.footer-blue  a, 
.footer-blue i, 
.footer-blue p 
 { color: #fff; }



.bootbox.modal {z-index: 9999 !important;}

.footer-cpr{ background-image: var(--green-gradient-color)!important; color: #fff;}


.btn.btn-transparent-dark-gray {
    background: transparent;
    border-color: #232323;
    color: #232323;
}


.btn.btn-transparent-dark-gray:hover {
    background-image: var(--green-gradient-color)!important; color: #fff;
    border-color: #232323;
 
}

.border-gradient-fast-blue-purple { border-image: linear-gradient(to right top, #21752a, #488f03)!important; border-image-slice: 1; }


.navbar.navbar-light .navbar-nav > .dropdown.active > a{

    color:#10cc24 !important;
    font-weight: 700;

}

.padding-140px-top{
    padding-top: 140px !important;
}


.padding-100px-top{
    padding-top: 100px !important;
}

footer .border-end {
    border-right: 1px solid #4176a4!important;
}


.interactive-banners-style-09 .interactive-banners-action-content {
 
    -webkit-line-clamp: 5;
  }





@media (max-width: 991px){
[data-mobile-nav-style=modern] 
.navbar-show-modern-bg {
 background-image: var(--main-gradient-color);
}
}


/* ----Blog styles--- */


.blog_details h4, .blog_details h5, .blog_details h6{
font-weight: 600!important;
font-size: 2rem !important;
line-height: 2.5rem;
color: #232323;
}


.blog_details b{
font-weight: 500!important;
font-size: 1.5rem !important;
line-height: 2.5rem;
color: #828282;
}


.blog_details p{
font-size: 15px !important;
line-height: 30px;
font-weight: 400;
color: #828282;

}

.blog_details ul{
margin-left: 30px;
}


.blog_details li {
position:relative;
list-style-type: none;
}

.blog_details li:before {
  content: "\e911"; /* FontAwesome Unicode */
  font-family: feather!important;
  display: inline-block;
 position:absolute;
 left: -43px;
 color: #45b80a;
}

.blog_details .card{

background: #dee6dd;
    margin: 10px 0px;

}

.blog_details .card h2, .blog_details .card h4 {

    font-size: 27px;
    line-height: 4.2rem;
    font-weight: 700;
    background: var(--main-gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;


}


.blog_details .card .btn{

        background: var(--blue-gradient-color) !important;
    border-color: #0088cc !important;

        display: inline-block;
    border: 2px solid transparent;
    border-radius: 0;
    text-transform: uppercase;
    width: auto;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    color: #fff;
}



/*---edit 260525--*/


/*
.border-top-5px{
	
	border-top: 5px solid transparent;
    border-image:  var(--main-gradient-color);
    border-image-slice: 1;
}
*/


/*
 .feature-box{
padding: 40px;

}
*/

.feature-box{
	
/*	border-bottom: solid 10px #e3e3e3;*/
	
position: relative;
  border-radius: 20px;                 /* rounded shape */
  border: 3px solid transparent;       /* border width sets thickness */

  /* first bg paints the interior; second paints the border box */
  background:
    linear-gradient(#fff 0 0) padding-box,              /* card fill  */
    linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%)   /* border     */
      border-box;
	
	
	 backdrop-filter: blur(10px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 30px;

 
}


.btn.btn-transparent-gradient-sky-blue-pink{
	
	background: transparent;
    color: #232323;
    border-image-slice: 1;
    border-image-source: var(--main-gradient-color) !important;

}



.inner-hero-banner-style{

/*
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
*/
    /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
/*    clip-path: polygon(0 0, 100% 0%, 100% 90%, 0% 100%);*/
	
	clip-path: ellipse(100% 55% at 48% 44%);
}


.inner-hero-banner-style h4 span{
	
	text-decoration: underline;
	font-style: italic;
	
}


/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
font-size: clamp(1.75rem, 1.75vw, 4rem);

  font-weight: bold;
  color: #fff;
}
.ribbon {
  --r: .8em; /* control the cutout */
  
  border-block: .5em solid #0000;
  padding-inline: .5em calc(var(--r) + .25em);
  line-height: 1.8;
  clip-path: polygon(100% 0,0 0,0 100%,100% 100%,100% calc(100% - .25em),calc(100% - var(--r)) 50%,100% .25em);
  background:
   radial-gradient(.2em 50% at left,#000a,#0000) border-box,
    var(--blue-gradient-color) padding-box; /* the color  */
  width: fit-content;
}


/* HTML: <div class="ribbon">Your text content</div> */
.ribbon3 {
font-size: clamp(1.4rem, 1.4vw, 2rem);

  font-weight: bold;
  color: #fff;
}
.ribbon3 {
  --r: .8em; /* control the cutout */
  border-block: .5em solid #0000;
  padding-inline: .5em calc(var(--r) + .25em);
  line-height: 1.8;
  clip-path: polygon(100% 0,0 0,0 100%,100% 100%,100% calc(100% - .25em),calc(100% - var(--r)) 50%,100% .25em);
  background:
   radial-gradient(.2em 50% at left,#000a,#0000) border-box,
    var(--blue-gradient-color) padding-box; /* the color  */
  width: fit-content;
}


/*---end----*/


.footer-top ul{
	
	line-height: clamp(2rem, 2vw, 4rem);
}



.navbar.navbar-boxed{
padding-left: 15px;
padding-right: 15px;
}


.top-bar .btn.btn-medium{
	padding: 10px;
}

.navbar{
	
	 backdrop-filter: blur(10px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 30px;
    background: rgba(255, 255, 255, 0.45) !important;
	
}

/*---flip card------*/

.flip-card {
  perspective: 1000px;
  width: 100%;
	height: 100% !important;
  /* optional: give it a min‑width or let the Bootstrap column handle it */
}

/* 2. turn the inner wrapper into a single‑cell grid */
.flip-card-inner {
  display: grid;                     /* ← replaces position:relative */
  transition: transform .6s ease;
  transform-style: preserve-3d;
	border-radius: 20px;
	height: 100% !important;
}

/* 3. overlay both faces in the same grid cell */
.flip-card-front,
.flip-card-back {
  grid-area: 1 / 1;                  /* same row / same column = overlap */
  backface-visibility: hidden;
  border-radius: inherit;
}

/* back face still rotated */
.flip-card-back {
  transform: rotateY(180deg);
	background: var(--main-gradient-color);
	color:#fff;
}

/* 4. trigger the flip */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}


.accordion-style-04 .panel .accordion-toggle{
    display: inline-block;
    width: calc(100% - 453px);
}



/*----------jobs modal----*/


/*
  The modal overlay, hidden by default.
  It is ALSO a flex container to center its child.
*/
.custom-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);

    /* Flexbox properties for centering */
    justify-content: center;
    align-items: center;
}

/*
  This class is ADDED BY JAVASCRIPT to show the modal.
  It overrides 'display: none' with 'display: flex'.
*/
.custom-modal.modal-show {
    display: flex;
}


/* The modal content box - NO CHANGES HERE */
.custom-modal .modal-content {
    background-color: #fefefe;
    width: 100%;
    max-width: clamp(56.25rem, 56.25vw, 60rem);
    max-height: 90vh;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    animation: fadeIn 0.3s;
    display: flex;
    flex-direction: column;
    padding: 0px;
}


.custom-modal .modal-body {
	
	  padding: clamp(1.25rem, 1.25vw, 2rem);
}

/* Optional Fade-in Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Other modal styles */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 15px;
}
.modal-body {
    overflow-y: auto;
    padding: 15px 0;
}
.modal-close-btn {
    color: #aaa;
    background: none;
    border: none;
    font-size: clamp(1.75rem, 1.75vw, 2rem);
    font-weight: bold;
    cursor: pointer;
}
.modal-close-btn:hover,
.modal-close-btn:focus {
    color: black;
    text-decoration: none;
}
.modal-close-btn{
	display: flex;
    justify-content: flex-end;
	padding: 0px;
	margin:0px;
		flex:1;
	color: #fff;
	}


.modal-close-btn:hover{
	
	background: inherit;
	border: 0px;

	
	
}
/*
  Responsive Table to Card View
*/
@media (max-width: 768px) {
  /* Hide table headers (but not display: none;, for accessibility) */
  .jobs-list thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  .jobs-list tr {
    border: 1px solid #ddd;
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  .jobs-list td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  .jobs-list td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  .jobs-list td:last-child {
    border-bottom: 0;
  }
	
	.jobs-list h5{
	font-size: 18px !important;
    font-weight: 600;
		width: 100%;
	}
	
	
	
	
	
	
}








@media (max-width: 991px) {
	
	
	
	
}