@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    /* font-family: 'Poppins'; */
    font-family: "Outfit", sans-serif !important;
    font-style: normal;
    scroll-behavior: smooth;
  }

.para_info{
    font-size: 25px;
    line-height: 1.4;
}

.registration_btn{
    color: #fff !important;
    text-decoration: none;
}

/*.navbar{*/
/*    box-shadow: 0 4px 2px -2px rgba(0,0,0,.2);*/
/*}*/
/*.navbar-nav .nav-item .nav-link{*/
/*    color: #000;*/
/*    display: block;*/
/*    font-family: "Outfit", sans-serif;*/
/*    font-size: 14px;*/
/*    font-weight: 800;*/
/*    line-height: 30px;*/
/*    opacity: 1;*/
    /* padding: 10px 30px 30px 0; */
/*    position: relative;*/
/*    text-align: center;*/
/*    text-transform: uppercase;*/
/*    transition: all .5s ease;*/
/*    z-index: 1;*/
    /* new */
/*    margin-right: 30px;*/
/*}*/

/*.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {*/
/*    color: #DD2D2F !important;*/
/*}*/
/*.navbar-nav .nav-item .nav-link:hover{*/
/*    color: #DD2D2F !important;*/
/*}*/





.slider_onreq{
    background-color: #a07497;
}

.why_onreq{
    background-color: #efe7ed;
}

.join_cmmunity{
    background-color: #efe7ed;
}

/*  */
.timeline {
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.path {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.circle {
    background-color: #3f93bf;
    border-radius: 30px;
    padding: 20px;
    color: white;
    font-size: 22px;
    text-align: center;
    width: 200px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.learning-path-square {
    background-color: #4a8cbf;
    padding: 20px;
    color: white;
    font-size: 22px;
    text-align: center;
    width: 150px;
    margin-bottom: 20px;
    border-radius: 10px;
    margin-right: 95%;
}

.arrows {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-grow: 1;
}

.arrow {
    padding: 15px;
    margin: 5px;
    background-color: #e74c3c;
    color: white;
    text-align: center;
    clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%);
    font-size: 16px;
    flex: 1;
    min-width: 120px;
    max-width: 180px;
}

/* Arrow colors */
.managing {
    background-color: #3498db;
}

.automating {
    background-color: #f39c12;
}

.troubleshooting {
    background-color: #2ecc71;
}

.storage {
    background-color: #9b59b6;
}

.coming-soon {
    background-color: #f39c12;
    position: relative;
}

.coming-soon::after {
    content: "COMING SOON";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #e74c3c;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

/* View Course Catalogue Button */
.view-catalogue {
    display: block;
    background-color: #3f93bf;
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    color: white;
    font-size: 18px;
    text-decoration: none;
    margin-top: 20px;
    width: 250px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .path {
        flex-direction: column;
        align-items: center;
    }

    .circle {
        margin-bottom: 20px;
        width: 100%;
        text-align: center;
    }

    .arrows {
        justify-content: center;
    }

    .arrow {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    /* Adjusting the margin for smaller screens */
    .learning-path-square {
        margin-right: 0;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .learning-path-square {
        margin-right: 0;
        width: 100%;
    }
}

.free_reso{
    padding: 15px;
    border: 1px solid #8c5882;
    border-radius: 11px;
}

.timeline_bg{
    background-color: #a67d9ed6;
}

.technologies{
    background-color: #80467521;
}

/*  */
.card_shadow{
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
}


/*  */
.onreq_cards{
    /* box-shadow: 5px 15px 20px rgb(74 179 200 / 72%); */
    border-radius: 15px !important;
}
.onreq_card_bg{
    background-color: #5c175421 !important;
}

/* new testi */

.testim {
    width: 100%;
    /* position: absolute;
    top: 50%; */
    /* margin-top: 3%; */
    /* -webkit-transform: translatey(-50%);
    -moz-transform: translatey(-50%);
    -ms-transform: translatey(-50%);
    -o-transform: translatey(-50%);
    transform: translatey(-50%); */
    background-color: #8c5882b5;
    color: #fff;
}

.testim .wrap {
position: relative;
width: 100%;
/* max-width: 1020px; */
padding: 40px 20px;
margin: auto;
}

.testim .testimonial_arrow {
display: block;
position: absolute;
/* color: #333; */
color: #fff;
cursor: pointer;
font-size: 2em;
top: 50%;
-webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
-webkit-transition: all .3s ease-in-out;    
-ms-transition: all .3s ease-in-out;    
-moz-transition: all .3s ease-in-out;    
-o-transition: all .3s ease-in-out;    
transition: all .3s ease-in-out;
padding: 5px;
z-index: 22222222;
}

.testim .testimonial_arrow:before {
    cursor: pointer;
}

.testim .testimonial_arrow:hover {
/* color: green; */
color: #ffd307;
}


.testim .testimonial_arrow.left {
left: 70px;
}

.testim .testimonial_arrow.right {
right: 70px;
}

.testim .dots {
text-align: center;
position: absolute;
width: 100%;
bottom: 60px;
left: 0;
display: block;
z-index: 3333;
    height: 12px;
}

.testim .dots .dot {
list-style-type: none;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
/* border: 1px solid green; */
border: 1px solid #ffd307;
margin: 0 10px;
cursor: pointer;
-webkit-transition: all .5s ease-in-out;    
-ms-transition: all .5s ease-in-out;    
-moz-transition: all .5s ease-in-out;    
-o-transition: all .5s ease-in-out;    
transition: all .5s ease-in-out;
    position: relative;
}

.testim .dots .dot.active,
.testim .dots .dot:hover {
/* background: green;
border-color: green; */
background: #ffd307;
border-color: #ffd307;
}

.testim .dots .dot.active {
-webkit-animation: testim-scale .5s ease-in-out forwards;   
-moz-animation: testim-scale .5s ease-in-out forwards;   
-ms-animation: testim-scale .5s ease-in-out forwards;   
-o-animation: testim-scale .5s ease-in-out forwards;   
animation: testim-scale .5s ease-in-out forwards;   
}

.testim .cont {
position: relative;
    overflow: hidden;
}

.testim .cont > div {
text-align: center;
position: absolute;
top: 0;
left: 0;
padding: 0 0 70px 0;
opacity: 0;
}

.testim .cont > div.inactive {
opacity: 1;
}


.testim .cont > div.active {
position: relative;
opacity: 1;
}


.testim .cont div .img img {
display: block;
width: 100px;
height: 100px;
margin: auto;
border-radius: 50%;
}

.testim .cont div h2 {
/* color: green; */
color: #ffd307;
font-size: 1em;
margin: 15px 0;
}

.testim .cont div p {
font-size: 1.15em;
/* color: #333; */
color: #fff;
width: 70%;
margin: auto;
}

.testim .cont div.active .img img {
-webkit-animation: testim-show .5s ease-in-out forwards;            
-moz-animation: testim-show .5s ease-in-out forwards;            
-ms-animation: testim-show .5s ease-in-out forwards;            
-o-animation: testim-show .5s ease-in-out forwards;            
animation: testim-show .5s ease-in-out forwards;            
}

.testim .cont div.active h2 {
-webkit-animation: testim-content-in .4s ease-in-out forwards;    
-moz-animation: testim-content-in .4s ease-in-out forwards;    
-ms-animation: testim-content-in .4s ease-in-out forwards;    
-o-animation: testim-content-in .4s ease-in-out forwards;    
animation: testim-content-in .4s ease-in-out forwards;    
}

.testim .cont div.active p {
-webkit-animation: testim-content-in .5s ease-in-out forwards;    
-moz-animation: testim-content-in .5s ease-in-out forwards;    
-ms-animation: testim-content-in .5s ease-in-out forwards;    
-o-animation: testim-content-in .5s ease-in-out forwards;    
animation: testim-content-in .5s ease-in-out forwards;    
}

.testim .cont div.inactive .img img {
-webkit-animation: testim-hide .5s ease-in-out forwards;            
-moz-animation: testim-hide .5s ease-in-out forwards;            
-ms-animation: testim-hide .5s ease-in-out forwards;            
-o-animation: testim-hide .5s ease-in-out forwards;            
animation: testim-hide .5s ease-in-out forwards;            
}

.testim .cont div.inactive h2 {
-webkit-animation: testim-content-out .4s ease-in-out forwards;        
-moz-animation: testim-content-out .4s ease-in-out forwards;        
-ms-animation: testim-content-out .4s ease-in-out forwards;        
-o-animation: testim-content-out .4s ease-in-out forwards;        
animation: testim-content-out .4s ease-in-out forwards;        
}

.testim .cont div.inactive p {
-webkit-animation: testim-content-out .5s ease-in-out forwards;    
-moz-animation: testim-content-out .5s ease-in-out forwards;    
-ms-animation: testim-content-out .5s ease-in-out forwards;    
-o-animation: testim-content-out .5s ease-in-out forwards;    
animation: testim-content-out .5s ease-in-out forwards;    
}

@-webkit-keyframes testim-scale {
0% {
    -webkit-box-shadow: 0px 0px 0px 0px #eee;
    box-shadow: 0px 0px 0px 0px #eee;
}

35% {
    -webkit-box-shadow: 0px 0px 10px 5px #eee;        
    box-shadow: 0px 0px 10px 5px #eee;        
}

70% {
    -webkit-box-shadow: 0px 0px 10px 5px #ea830e;        
    box-shadow: 0px 0px 10px 5px #ea830e;        
}

100% {
    -webkit-box-shadow: 0px 0px 0px 0px #ea830e;        
    box-shadow: 0px 0px 0px 0px #ea830e;        
}
}

@-moz-keyframes testim-scale {
0% {
    -moz-box-shadow: 0px 0px 0px 0px #eee;
    box-shadow: 0px 0px 0px 0px #eee;
}

35% {
    -moz-box-shadow: 0px 0px 10px 5px #eee;        
    box-shadow: 0px 0px 10px 5px #eee;        
}

70% {
    -moz-box-shadow: 0px 0px 10px 5px #ea830e;        
    box-shadow: 0px 0px 10px 5px #ea830e;        
}

100% {
    -moz-box-shadow: 0px 0px 0px 0px #ea830e;        
    box-shadow: 0px 0px 0px 0px #ea830e;        
}
}

@-ms-keyframes testim-scale {
0% {
    -ms-box-shadow: 0px 0px 0px 0px #eee;
    box-shadow: 0px 0px 0px 0px #eee;
}

35% {
    -ms-box-shadow: 0px 0px 10px 5px #eee;        
    box-shadow: 0px 0px 10px 5px #eee;        
}

70% {
    -ms-box-shadow: 0px 0px 10px 5px #ea830e;        
    box-shadow: 0px 0px 10px 5px #ea830e;        
}

100% {
    -ms-box-shadow: 0px 0px 0px 0px #ea830e;        
    box-shadow: 0px 0px 0px 0px #ea830e;        
}
}

@-o-keyframes testim-scale {
0% {
    -o-box-shadow: 0px 0px 0px 0px #eee;
    box-shadow: 0px 0px 0px 0px #eee;
}

35% {
    -o-box-shadow: 0px 0px 10px 5px #eee;        
    box-shadow: 0px 0px 10px 5px #eee;        
}

70% {
    -o-box-shadow: 0px 0px 10px 5px #ea830e;        
    box-shadow: 0px 0px 10px 5px #ea830e;        
}

100% {
    -o-box-shadow: 0px 0px 0px 0px #ea830e;        
    box-shadow: 0px 0px 0px 0px #ea830e;        
}
}

@keyframes testim-scale {
0% {
    box-shadow: 0px 0px 0px 0px #eee;
}

35% {
    box-shadow: 0px 0px 10px 5px #eee;        
}

70% {
    box-shadow: 0px 0px 10px 5px #ea830e;        
}

100% {
    box-shadow: 0px 0px 0px 0px #ea830e;        
}
}

@-webkit-keyframes testim-content-in {
from {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

to {
    opacity: 1;
    -webkit-transform: translateY(0);        
    transform: translateY(0);        
}
}

@-moz-keyframes testim-content-in {
from {
    opacity: 0;
    -moz-transform: translateY(100%);
    transform: translateY(100%);
}

to {
    opacity: 1;
    -moz-transform: translateY(0);        
    transform: translateY(0);        
}
}

@-ms-keyframes testim-content-in {
from {
    opacity: 0;
    -ms-transform: translateY(100%);
    transform: translateY(100%);
}

to {
    opacity: 1;
    -ms-transform: translateY(0);        
    transform: translateY(0);        
}
}

@-o-keyframes testim-content-in {
from {
    opacity: 0;
    -o-transform: translateY(100%);
    transform: translateY(100%);
}

to {
    opacity: 1;
    -o-transform: translateY(0);        
    transform: translateY(0);        
}
}

@keyframes testim-content-in {
from {
    opacity: 0;
    transform: translateY(100%);
}

to {
    opacity: 1;
    transform: translateY(0);        
}
}

@-webkit-keyframes testim-content-out {
from {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

to {
    opacity: 0;
    -webkit-transform: translateY(-100%);        
    transform: translateY(-100%);        
}
}

@-moz-keyframes testim-content-out {
from {
    opacity: 1;
    -moz-transform: translateY(0);
    transform: translateY(0);
}

to {
    opacity: 0;
    -moz-transform: translateY(-100%);        
    transform: translateY(-100%);        
}
}

@-ms-keyframes testim-content-out {
from {
    opacity: 1;
    -ms-transform: translateY(0);
    transform: translateY(0);
}

to {
    opacity: 0;
    -ms-transform: translateY(-100%);        
    transform: translateY(-100%);        
}
}

@-o-keyframes testim-content-out {
from {
    opacity: 1;
    -o-transform: translateY(0);
    transform: translateY(0);
}

to {
    opacity: 0;
    transform: translateY(-100%);        
    transform: translateY(-100%);        
}
}

@keyframes testim-content-out {
from {
    opacity: 1;
    transform: translateY(0);
}

to {
    opacity: 0;
    transform: translateY(-100%);        
}
}

@-webkit-keyframes testim-show {
from {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

to {
    opacity: 1;
    -webkit-transform: scale(1);       
    transform: scale(1);       
}
}

@-moz-keyframes testim-show {
from {
    opacity: 0;
    -moz-transform: scale(0);
    transform: scale(0);
}

to {
    opacity: 1;
    -moz-transform: scale(1);       
    transform: scale(1);       
}
}

@-ms-keyframes testim-show {
from {
    opacity: 0;
    -ms-transform: scale(0);
    transform: scale(0);
}

to {
    opacity: 1;
    -ms-transform: scale(1);       
    transform: scale(1);       
}
}

@-o-keyframes testim-show {
from {
    opacity: 0;
    -o-transform: scale(0);
    transform: scale(0);
}

to {
    opacity: 1;
    -o-transform: scale(1);       
    transform: scale(1);       
}
}

@keyframes testim-show {
from {
    opacity: 0;
    transform: scale(0);
}

to {
    opacity: 1;
    transform: scale(1);       
}
}

@-webkit-keyframes testim-hide {
from {
    opacity: 1;
    -webkit-transform: scale(1);       
    transform: scale(1);       
}

to {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
}

@-moz-keyframes testim-hide {
from {
    opacity: 1;
    -moz-transform: scale(1);       
    transform: scale(1);       
}

to {
    opacity: 0;
    -moz-transform: scale(0);
    transform: scale(0);
}
}

@-ms-keyframes testim-hide {
from {
    opacity: 1;
    -ms-transform: scale(1);       
    transform: scale(1);       
}

to {
    opacity: 0;
    -ms-transform: scale(0);
    transform: scale(0);
}
}

@-o-keyframes testim-hide {
from {
    opacity: 1;
    -o-transform: scale(1);       
    transform: scale(1);       
}

to {
    opacity: 0;
    -o-transform: scale(0);
    transform: scale(0);
}
}

@keyframes testim-hide {
from {
    opacity: 1;
    transform: scale(1);       
}

to {
    opacity: 0;
    transform: scale(0);
}
}

@media all and (max-width: 300px) {
body {
    font-size: 14px;
}
}

@media all and (max-width: 500px) {
.testim .testimonial_arrow {
    font-size: 1.5em;
}

.testim .cont div p {
    line-height: 25px;
}

}


/*  */
/* Make the carousel responsive */
.carousel-item img {
    width: 100%;
    height: 100%; /* Default height */
    object-fit: cover; /* Ensures image covers the area without stretching */
  }
  
  /* Adjust height for different screen sizes */
  @media (min-width: 768px) {
    .carousel-item img {
      height: 400px; /* For medium screens and up */
    }
  }
  
  @media (min-width: 992px) {
    .carousel-item img {
      height: 500px; /* For large screens */
    }
  }
  
  @media (min-width: 1200px) {
    .carousel-item img {
      height: 600px; /* For extra large screens */
    }
  }
.learning_exp{
    text-align: center;
    align-content: center;
}  
.demo_lab{
    color: #fff !important;
    background-color: #804675 !important;
    border-color: #804675 !important;
}
.search_btn{
    border-radius: 20px !important;
}

/*  */
.join_community_info{
    display: block;
}
.join_cmmunity_card{
    text-align: center;
}

/* Contact Us Page */

 /* Your custom styles here */
 .orange {
    color: #ff7a01;
}

.form-container-main {
    /* min-height: 100dvh; */
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0px;
    /* new */
    background-color: #80467580;
}
.form-container {
    width: 50%;
    /* background-color: #001925; */
    background-color: #d8c7d5;
    padding: 30px 30px 30px 0px;
    display: flex;
    border-left: 5px solid #ff7a01;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
@media (max-width: 1200px) {
    .form-container {
        width: 65%;
   }
}
@media (max-width: 1100px) {
    .form-container {
        width: 80%;
   }
}
@media (max-width: 800px) {
    .form-container {
        display: block;
        padding: 30px;
        width: 90%;
   }
    .form-container .form-image {
        height: 300px;
   }
}
.form-container .form-image {
    flex-basis: 50%;
}
.form-container .form-image h1 {
    margin-left: 30px;
    color: white;
    font-weight: 800;
}
@media (max-width: 800px) {
    .form-container .form-image h1 {
        margin-left: 0px;
   }
}
.form-container .form-image model-viewer {
    margin-top: -30px;
    height: 100%;
    width: 100%;
}
.form-container .form {
    flex-basis: 50%;
}
.form-container .form input,
.form-container .form textarea {
    width: 100%;
    padding: 10px;
    border: none;
    outline: none;
    font-weight: bold;
    margin-bottom: 20px;
    transition: all 0.2s ease-in-out;
}
.form-container .form input {
    /* background-color: #002733; */
    color: #87a4b6;
    border-left: 1px solid transparent;
}
.form-container .form input:focus {
    border-left: 5px solid #ff7a01;
}
.form-container .form textarea {
    /* background-color: #013747; */
    color: #ff7a01;
    resize: none;
    max-height: 150px;
    border-left: 1px solid transparent;
}
.form-container .form textarea:focus {
    border-left: 5px solid #ff7a01;
}
.form-container .form .button-container {
    display: flex;
    gap: 10px;
}
.form-container .form .button-container .send-button {
    flex-basis: 70%;
    background: #ff7a01;
    padding: 10px;
    color: #001925;
    text-align: center;
    font-weight: bold;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
}
.form-container .form .button-container .send-button:hover {
    background: transparent;
    border: 1px solid #ff7a01;
    color: #ff7a01;
}
.form-container .form .button-container .reset-button-container {
    filter: drop-shadow(1px 1px 0px #ff7a01);
    flex-basis: 30%;
}
.form-container .form .button-container .reset-button-container .reset-button {
    position: relative;
    text-align: center;
    padding: 10px;
    color: #ff7a01;
    font-weight: bold;
    background: #001925;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    transition: all 0.2s ease-in-out;
}
.form-container .form .button-container .reset-button-container .reset-button:hover {
    background: #ff7a01;
    color: #001925;
}

/* registraion */
.form_lable {
    font-weight: 600;
    color: #666;
}
.box8{
  box-shadow: 0px 0px 5px 1px #999;
  border-radius: 11px;
}
.mx-t3{
  margin-top: -3rem;
}
.registration_title{
    color: #5E1754;
}

.why_onreq_card{
    align-items: center;
    display: flex;
}

/* textimonial */
.testimonial_bg{
    background-color: #EFE7ED;
}
.testimonial_box{
    background-color: #A07497;
    border: 1px solid #A07497;
    border-radius: 50px;
}

.learning-info {
    background-color: #A07497 !important; /* Blue background color similar to the image */
    color: white;
    padding: 20px;
    width: 300px;
    text-align: center;
    border-radius: 10px;
    clip-path: polygon(15% 0%, 85% 0%, 100% 25%, 100% 75%, 85% 100%, 15% 100%, 0% 75%, 0% 25%);
}

.learning-info ul {
    list-style-type: none;
    padding: 0;
}

.learning-info ul li {
    margin: 10px 0;
    font-size: 18px;
}

/*  */

.resource-box {
    background-color: #68315e;
    color: white;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    max-width: 300px;
    position: relative;
    margin-top: 1.8rem;
}

.resource-box h2 {
    margin-bottom: 20px;
}

.couses_section{
    background-color: #8c5882b5;
}

.button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    background-color: #B492AE;
    color: white;
    border-radius: 10px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #ce7cbf;
    color: #fff;
}

.button span {
    font-size: 1.1em;
}

.button img {
    width: 16px;
    height: 16px;
}

.free-badge {
    position: absolute;
    top: -10px;
    left: -15px;
    background-color: #ff6600;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 5px;
    transform: rotate(-30deg);
}

@media screen and (max-width: 480px) {
    .resource-box {
        max-width: 90%;
    }

    .button img {
        width: 14px;
        height: 14px;
    }
}
.lang_img{
    width: 65% !important;
    height: 85%;
}
.main_title{
    color: #a11d88;
}
.web_title{
    color: #3b1d82;
}

/*  */
.get_startrdbtn {
    text-align: center;
    margin-top: 6rem;
}

.btn-get-started {
    display: inline-block;
    padding: 15px 30px;
    background-color: #FF3C24; /* Button background color */
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-get-started span {
    margin-left: 10px;
    font-size: 1.5rem;
    color: #fff;
}

.btn-get-started:hover {
    background-color: #E62F1E; 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.coming-soon-banner {
    /* background-color: #00FFC8;  */
    color: #3b1d82; 
    font-size: 1.5rem;
    font-weight: bold;
    /* text-align: center; */
    padding: 10px 20px;
    display: inline-block;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 2px solid transparent;
}

.coming_soon_circle {
    margin: 0 10px;
    font-size: 2rem; 
    color: #3b1d82; 
}

/*  */
.custom-button {
    background-color: #804675; 
    color: #fff;
    border: none;
    border-radius: 20px; 
    padding: 20px 30px; 
    font-size: 1.2rem; 
}

.offer-button {
    /* background-color: #804675;  */
    color: #fff;
    border: none;
    border-radius: 20px; 
    padding: 20px 30px; 
    font-size: 1.2rem; 
    width: 60%;
}

.offer-button1{
    background-color: #87567df0; 
}
.offer-button2{
    background-color: #997793; 
}
.offer-button3{
    background-color: #af9cac 
}


.custom-button:hover {
    background-color: #066d99; 
}

.coffer-button:hover {
    background-color: #066d99; 
}

@media (max-width: 768px) {
    .custom-button {
        padding: 8px 25px;
        font-size: 1rem;
    }
    .offer-button {
        padding: 8px 25px;
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .custom-button {
        padding: 6px 20px;
        font-size: 0.9rem;
    }
    .offer-button {
        padding: 6px 20px;
        font-size: 0.9rem;
    }
}

/*  */
/***Bounce in CSS***/
.bounce__css {
    animation: bounce__move_css linear 25s forwards infinite;
  }
  
  @keyframes bounce__move_css {
    0%,
    100% {
      -webkit-transform: translateX(70%);
    }
    50% {
      -webkit-transform: translateX(0%);
    }
  }

.bownload_info_btn{
    width: 14rem;
    background-color: #87567df0 !important;
    border-color: #87567df0 !important;
    color: #fff !important;
}
.downloadbtn_a{
    text-decoration: none;
}

.blogs-button{
    background-color: #cab2c6; 
    border: none;
    border-radius: 35px;
    padding: 15px 20px;
    font-size: 1.2rem;
    width: 35%;
}
.begin_learning_section{
    background-color: #cab2c6;
}
.red_hat_enterprise{
    background-color: #cab2c6;
}
.linux_resources{
    background-color: #80467521;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 170px; 
}

.diamond-image {
    width: 150px; 
    height: auto;
    /* transform: rotate(45deg);  */
    border: 2px solid #fff; 
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); 
    background-color: #fff;
}