.max-width-100 { max-width: 100px !important; }
.max-width-200 { max-width: 200px !important; }
.max-width-250 { max-width: 250px !important; }
.max-width-300 { max-width: 300px !important; }
.max-width-400 { max-width: 400px !important; }
.max-width-500 { max-width: 500px !important; }
.max-width-550 { max-width: 550px !important; }
.max-width-600 { max-width: 600px !important; }
.max-width-700 { max-width: 700px !important; }

.max-width-800 {
    max-width: 800px !important;
}

.max-width-850 {
    max-width: 850px !important;
}

.max-width-900 {
    max-width: 900px !important;
}

.max-width-950 {
    max-width: 950px !important;
}

.max-width-1000 {
    max-width: 1000px !important;
}

.max-width-1050 {
    max-width: 1050px !important;
}

.max-width-1100 {
    max-width: 1100px !important;
}

.max-width-1150 {
    max-width: 1150px !important;
}

.max-width-1200 {
    max-width: 1200px !important;
}

.max-width-1250 {
    max-width: 1250px !important;
}

.max-width-1300 {
    max-width: 1300px !important;
}

.max-width-1350 {
    max-width: 1350px !important;
}

.max-width-1400 {
    max-width: 1400px !important;
}

.max-width-1450 {
    max-width: 1450px !important;
}

.max-width-1500 {
    max-width: 1500px !important;
}

.max-width-1550 {
    max-width: 1550px !important;
}

.max-width-1600 {
    max-width: 1600px !important;
}

.max-width-1650 {
    max-width: 1650px !important;
}

.max-width-1700 {
    max-width: 1700px !important;
}

.max-width-1750 {
    max-width: 1750px !important;
}

.max-width-1800 {
    max-width: 1800px !important;
}

.max-width-1850 {
    max-width: 1850px !important;
}

.max-width-1900 {
    max-width: 1900px !important;
}

.max-width-1950 {
    max-width: 1950px !important;
}

.max-width-2000 {
    max-width: 2000px !important;
}

.max-width-2050 {
    max-width: 2050px !important;
}

.max-width-2100 {
    max-width: 2100px !important;
}

.max-width-2150 {
    max-width: 2150px !important;
}

.max-width-2200 {
    max-width: 2200px !important;
}

.top-margin{
    /* height: 111.2px !important; */
    height: 71.2px !important;
    display: block;
}

.bottom-img{
    width: 32px !important;
    height: 32px !important;
}

.bottom-container{
    max-width:580px !important;
    border: 1px solid #EB5C0C !important;
    border-radius: 20px !important;
}

.fs-counter{
    font-size: 40px !important;
}

.counter-border{
    border: 1px solid #FF6600 !important;
    border-radius: 20px !important;
}

@media screen and (max-width:575px) {
    .counter-border{
        border:unset !important;
    }
}

.btnFindMore_carousel{
    position: absolute !important;

    left:7% !important;
    bottom: 8% !important;

    font-size: 1rem;   /* base size */
    padding: 0.5rem 1rem;

    background-color: #FF6600 !important;
    border-radius: 20px !important;
    border: unset;
    color: white !important;
}


/* {https://www.ivanti.com/}
                                        {/* https://www.quest.com/products/on-demand-migration/  */
.section-partnering-border{
    
    border: 1px solid #EB5C0C !important;
    border-radius: 20px !important;
}

.partner-step-img-background{
    width: 50px !important;
    height: 50px !important;
    border-radius: 10px !important;
    background-color: #545454 !important;
}

.section-partnering-border img{
    width: 30px !important;
    height: auto !important;
}

.threat-never-wait-img{
    max-width: 400px !important;
}

.access-protection-item-container{
    border: 1px solid #EB5C0C !important;
    border-radius: 20px !important;
}

.gradient-border-wrapper {
    display: inline-block;
    padding: 1.5px;
    /* Border thickness */
    background: linear-gradient(0deg, #FFFFFF, #FFb17C);
    /* Gradient */
    border-radius: 40px;
    width: fit-content !important;
}

.gradient-border-inner {
    font-weight: 700 !important;
    font-size: 18px !important;
    display: block;
    background-color: black !important;
    border-radius: 10px;
    padding: 16px 20px;
    color: white !important;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}





.videoContainerSection {
    position: relative !important;
}


.videoContainerSection video {
    object-fit: cover !important;
    width: 100% !important;
    max-height: 900px !important;

}

.video-overlay-content {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10 !important;
}

.img-title-background {
    min-height: 650px !important;
}

.title-font-size {
    font-size: 56px;
}

.text-title-color {
    font-weight: bold;
    background: linear-gradient(to bottom, #FFB17C, #ffffff);
    /* Gradient colors */
    -webkit-background-clip: text;
    /* Clip background to text */
    color: transparent;
    /* Make the text transparent so the gradient shows */
}

.orange-title-color{
    font-weight: bold;
    background: linear-gradient(to bottom, #FFA500 0%, #FF6600 54%,#9F4000 100%); /* Gradient colors */
    -webkit-background-clip: text; /* Clip background to text */
    color: transparent; /* Make the text transparent so the gradient shows */
}

.text-orange{
    color: #FF6600;
}

.bg-content {
    /* background: linear-gradient(to right,
            #1B1B1B 0%,
            #1D1C1B 12%,
            #231F1C 22%,
            #25221D 35%,
            #27231D 46%,
            #29261F 50%,
            #25221E 56%,
            #27231D 66%,
            #231F1C 75%,
            #1D1C1B 88%,
            #1B1B1B 100%) !important; */
            background-color: #1B1B1B !important;
}

.fs-18 {
    font-size: 18px !important;
}

.img-ivanti-solutions {
    max-width: 500px !important;
    height: auto !important;
}

.form-control {
    border: 1px solid #ffffff !important;
    border-radius: 0px !important;
    background-color: transparent !important;
}

.btn-submit {
    background: linear-gradient(to bottom, #5C5956, #26221D) !important;
    border-radius: 40px;
    color: #FFB17C !important;
    max-width: 100px !important;
    border-color: unset !important;
    border-width: 0px !important;
}

.contact-us-container {
    border: 1px solid #5C5956;
    border-radius: 40px;
}

.title-background {
    background-image: url('../title-background.png');
}

.circle-bullet {
    display: block !important;
    border-radius: 50% !important;
    min-width: 15px !important;
    max-width: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
    width: 15px !important;
    height: 15px !important;
    background-color: white !important;
}

.vertical-hr {
    width: 2px !important;
    height: 100% !important;
    background-color: white !important;

}

.max-width-500 {
    max-width: 500px !important;
}

.max-width-600 {
    max-width: 600px !important;
}

.max-width-800 {
    max-width: 800px !important;
}

.btn-contact-us {
    background-color: transparent !important;
}

.section-bg-img {
    background-image: url('../section-background.png');
    background-size: contain;
    /* or cover depending on your needs */
    background-position: center;
    /* Adjust as needed */
    background-repeat: no-repeat;
    /* Prevents repeating */
    height: 300px !important;
}

.button-hover{
    border-radius: 0px !important;
    transition: all 0.3s ease;
    transform: scale(1); /* ensure there's a base state */
}

.button-hover:hover{
    border-color: black !important;
    color: black !important;
    background-color: white !important;
    transform: scale(1.05) !important;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr)!important; /* 3 equal columns */
    gap: 10px;
}

.feature-partner-container{
    border: 1px solid #FFFFFF !important;
    border-radius: 40px !important;
}


.progress-container {
    position: relative;
    width: 150px;
    height: 150px;
}

svg {
    transform: rotate(-90deg);
}

.progress-circle {
    fill: none;
    stroke: #FFB17C;
    stroke-width: 10;
    stroke-dasharray: 251.2;
    stroke-dashoffset: 251.2;
    transition: stroke-dashoffset 0.22s ease-in-out;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: bold;
}

.custom-ul li{
    list-style: none !important;
    position: relative;
    margin-bottom: 5px;
    padding-left: 18px;
}

.custom-ul li:before {
    
    content: '';
    font-size: 18px;
    position: absolute;
    top: 10px;
    left: 0;
    width: 6px;
    height: 6px;
    -webkit-transform: rotate(50deg) skew(15deg);
    transform: rotate(50deg) skew(15deg);
    background-color: #ff6600 !important;
}

.custom-fs-5{
    font-size: 20px !important;
}

.bg-orange{
    background-color: #ff6600 !important;
}

.img-caption{
    border-left: 1px solid white !important;
    border-width: 3px !important;
}

.other-partners{
    min-width: 300px !important;
    max-width: 300px !important;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.custom-fs-30{
    font-size: 30px !important;
}

.fade-in{
    opacity: 0;
    transition:opacity 1s ease-in;
    will-change: opacity;
}

.fade-in.show{
    opacity: 1;
}

.tab-hover-underline:hover{
    text-decoration: underline !important;
}


.next-icon{
    width: 20px !important;
    height: auto !important;
}

.big-next-icon{
    width: 25px !important;
    height: auto !important;
    
}

.btnContactUs_hover{
    max-height: 60px !important;
}

.btnContactUs_hover:hover{
    /* background-color: #ff6600 !important; */
    background: linear-gradient(to bottom, #ff6a00 0%, #ff3c00 54%,#9F4000 100%); /* Gradient colors */
    /* opacity: 0.7 !important; */
}

.cybersecurity-matters{
    background-color: #333334 !important;
    border-radius: 12px !important;
    color: white !important;
}


.partner-container {

  border: 1px solid #FF6600 !important;
  border-radius: 10px;
  padding: 20px;
}

.btnSecureYourPass{
    background-color: #ff6600 !important;
    color: white !important;
}

.bg-CTA{
    padding-left: 10% !important;
    padding-right: 10% !important;
    background: linear-gradient(-45deg, #FF6600, #1b1b1b, #FF6600, #1b1b1b, #493f43);
    -webkit-animation: Gradient 15s 
ease infinite;
    animation: Gradient 15s 
ease infinite;
    background-size: 400% 400% !important;
}


.card-item-active {
    border-radius: 20px !important;
    background-color: #2b2a2a !important;
}

.img-author {
    width: 32px !important;
    height: auto !important;
}

#attribute li::marker {
  color: white; /* bullet color */
}


@media screen and (max-width:991px) {
    .bg-CTA{
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
}

@keyframes Gradient {
  0%, 100% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}



@media screen and (min-width:992px) {

    
    /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 100% !important;
  height: 230px !important;
  /* border: 1px solid #f1f1f1; */
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
    /* Do an horizontal flip when you move the mouse over the flip box container */
    .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
    }
}




 .flip-card-front,
  .flip-card-back {
    position: absolute;
    width: 100%;
    min-height: 100%; /* allow expansion based on content */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* vertical center */
    backface-visibility: hidden;
  }

@media screen and (max-width:991px) {
    .flip-card-front, .flip-card-back {
        width: unset !important;
    }
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: unset !important;
  /* color: black; */
}

/* Style the back side */
.flip-card-back {
  background-color: unset !important;
  color: white;
  transform: rotateY(180deg);
}

@media screen and (min-width:992px) {
    .max-width-lg-600{
        max-width: 600px !important;
    }
}

@media screen and (max-width:991px) {

    /* set font size here */
    .title-font-size {
        font-size: 30px;
    }

    .grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr)!important; /* 3 equal columns */
        gap: 10px;
    }
}

@media screen and (max-width:767px) {
    .custom-fs-5{
        font-size: 18px !important;
    }
}

@media screen and (max-width:576px) {
    .grid-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr)!important; /* 3 equal columns */
        gap: 10px;
    }
}

@media screen and (max-width:480px) {
    .title-font-size {
        font-size: 22px;
    }

    

    .custom-fs-5{
        font-size: 16px !important;
    }
}