/* .food-munch-logo {
    width: 100px;
    height: 60px;
    background-color: transparent;
    margin-top: -50px;
} */
/* .logo-text{
    font-size: 5px;
    font-family: 'Roboto',sans-serif;
    font-weight: bold;
    padding-left: 80px;
} */

.logo-text{
width: 88px;
height: 40.275px;
flex-shrink: 0;
}
.switch {
    background: none;
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
 
  input:checked + .slider {
    background-color: #18191a;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }
  

.navbar {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, box-shadow 0.3s;
    height: 80px;
}

.navbar:hover {
    box-shadow: 0 10px 16px rgba(0, 0, 0, 0.2);
}

/* Base style for individual nav items */
#navItem1,
#navItem2,
#navItem3,
#
 {
    color: #151617; /* Default text color */
    font-family: "Roboto", sans-serif; /* Font family */
    font-weight: normal; /* Bold text */
    transition: color 0.3s ease; /* Smooth transition for color change */
    font-size: 18px;
    /* align-content: center; */
    justify-content:space-evenly;
}

/* Hover effect */
#navItem1:hover,
#navItem2:hover,
#navItem3:hover,
#navItem4:hover{
    color: #EC0707;
}
.menu-active {
    color: #EC0707 !important;
  border-bottom: 4px solid;
  border-radius: 10px;
  padding-bottom: 5px !important;}

/* Active effect for all nav items */
#navItem1.active,
#navItem2.active,
#navItem3.active,
#navItem4.active {
    color: #EC0707; /* Red text color when active */
    border-bottom: 2px solid #EC0707; /* Red underline when active */
}

/* Dropdown item hover effect */
.dropdown-item:hover {
    background-color: rgb(115, 95, 98);
    color: white; /* Optional: Change text color to white for better contrast */
}





/* Keyframes for various unique animations */
.ban-img{
    background-color: transparent;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes scaleUp {
    from {
        transform: scale(0.9);
    }
    to {
        transform: scale(1);
    }
}

@keyframes rotateText {
    from {
        transform: rotate(-10deg);
        opacity: 0;
    }
    to {
        transform: rotate(0);
        opacity: 1;
    }
}

@keyframes bounceIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    60% {
        opacity: 1;
        transform: scale(1.2);
    }
    80% {
        transform: scale(0.9);
    }
    to {
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
    75% { transform: translateX(-10px); }
    100% { transform: translateX(0); }
}
/***Banner form pop up****/
.banner-form, .banner-title{ float: left;}
.popup-form{}


/* Banner section background container */
.banner-section-bg-container {
    /* background: radial-gradient(circle, #ece6e6 2%, #000000 80%); */
    background-image: url("https://s3-alpha-sig.figma.com/img/47b9/c01a/d4045ab1e89c10ab658fe85e1a2657ec?Expires=1727654400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=h1J2sYNetJoyMMxIQs~0mnTsePnbXVF0QcFSK0YU~~wGSC3rnr0aijO3MAohiyxeoH3~yUJ1GVIFifuy1oh4hauVVpArlTDGAR7ZAr50yTi8MBcBNb5QLYXxOG8CtAIB6NODglIReInvhfng3n~j4LeligQEjUSsYO8ZasXSM1ma-dMhkDzfRQTD8KbBh1qTjY0DBJUMleU-t~PZh-1ifizo~WyaIRqnWjgpIC3Bxl4XQE4~DRrtk7sfKds8EwGeRNZyV9UDq89WW9xLvuHqPYBP~KmyLYMGv9h12r1NiCKcOEJk6xcziipc~eR9KoS~qeBEvQyQaMFoy2MAa0DLLw__");
    background-color: #000;
    height: 95vh;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center; /* Center content vertically */
    animation: fadeIn 2s ease-in-out;
    /* opacity: 0.9; */
}
.bg-nav{
    background: transparent !important;
}
/* Main heading style */
.main-head {
    font-weight:600;
    color: #272626f2;
    font-family: "Roboto", sans-serif;
    font-size: 45px;
    animation: fadeIn 1.5s ease-in-out, slideUp 1.5s ease-in-out;
}

/* Heading span animation */
.head-span {
    color: #ff000a;
    font-family: "Roboto", sans-serif;
    display: inline-block;
    font-size: 80px;
    animation: rotateText 2s ease-in-out, scaleUp 1.5s ease-in-out 0.5s, bounceIn 2s ease-in-out 0.7s; /* Delay for staggered effect */
}

/* Paragraph span animation */
.para-span {
    color: #ff000a;
    font-size: 50px;
    font-weight: bold;
    font-family: "Roboto", sans-serif;
    display: flex;
    justify-content: flex-start;
    /* animation: rotateText 2s ease-in-out, scaleUp 1.5s ease-in-out 0.7s, bounceIn 2s ease-in-out 0.9s; */
     /* Delay for staggered effect */
}

/* Text span style */
.text-spam {
    font-family: 'Roboto', sans-serif;
    text-align: left;
    font-size: 18px; /* Adjust based on the size in your image */
    color: #232222;
    display: flex;
    justify-content: flex-start; /* This color should be adjusted to match the exact shade of gray */
    /* animation: fadeIn 2s ease-in-out 1s, slideUp 2s ease-in-out 1s, pulse 2s ease-in-out 2s;  */
    /* Delay for staggered effect */

}

.after-ban{
    display: flex;
    justify-content: space-around;
    padding-top: 20px;
    color: #cbcbcb;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    margin-bottom: 20px;
    margin-left: 110px;
    margin-right: 110px;
    margin-top: -100px;

}
.intro-bann{
    text-align: center;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    padding-top: 70px;
    margin-bottom: 3rem;
}
.intro-span{
    background: linear-gradient(90deg, #FF0000, #e4dcdc); /* Adjusting gradient colors */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 30px;
            font-weight: bold;
            font-family: "Roboto", sans-serif;
            display: inline-block;
}
.intro-head{
    font-size: 30px;
    font-weight: bold;
}
.into-para{
    font-size: 20px;
    font-weight: normal;
}
.review-ban{
    background: linear-gradient(90deg, #f4eded,#FF0000); /* Adjusting gradient colors */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 30px;
            font-weight: bold;
            font-family: "Roboto", sans-serif;
            display: inline-block;
            text-align: center;
}
.full-div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s, box-shadow 0.3s;

}
.full-div:hover {
    transform: translateY(-10px);
    /*box-shadow: 0 10px 16px rgba(0, 0, 0, 0.2);*/
}
.program1{
    margin-bottom: 6rem;
    width: 1300px;
    height: 320px;
    /* background: radial-gradient(circle, #721414 2%, #000000 80%); */
    

}
.daimond-border{
    height: 90vh;
    top: 5px !important;
    float: left;
    background: #eedbdb;
    width: 66%;
    position: absolute;
    transform: rotate(-11deg);
    
    opacity: 0.4;
    backdrop-filter: blur(10px) ;
  /* border-radius: 102% 35% 104% 41%; */

  top: 92px;
  opacity: 0.4;
}
.container-head-course{
    font-size: 24px;
    font-family: "Roboto", sans-serif;
}
.course-ban{
    border: 1px solid #B1B1B1;
    /* width: 866px; */
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
    /* background: radial-gradient(circle, #500303 0.1%, #000000 80%); */
    
}
.image{
    width: 318px;
height: 318px;
flex-shrink: 0;
}
.container_par_img{
    display: flex;
    /* justify-content:space-evenly !important; */
}

.anchor-head{
    color: #1e1c1c;
    /* width: 1160px; */
    font-size: 32px;
    font-weight: bold;
}
.course-section-para{
    color: #919191;
}
/* .anchor-head:hover{
    columns: #CB0909 !important;
} */
.custom-line {
    border: 0;
    height: 4px; /* Adjust the thickness as needed */
    background-color: #ebd9da; /* Color of the line */
    width: calc(100% - 150px); /* Adjust width to account for the left and right margins */
    margin: 8px 75px; /* Adjust spacing around the line, 75px on both sides to balance */
    margin-top: -25px;
}

.div-bann{
    display: flex;
    
}
.sk-btn-1{
    color: #111010;
    background-color:#D2E3E8;
    font-size: x-small;

    width: 200px;
    height: 130px;
    padding: 3px;
    border-radius: 5px;
    border-width: 0px;
    margin-left: 9px;
    /* border: 1px solid #CB0909; */
}
.sk-btn-2{
    color: #111010;
    background-color: #D2E3E8;
    font-size: x-small;

    width: 200px;
    height: 130px;
    padding: 3px;
    border-radius: 5px;
    border-width: 0px;
    margin-left: 9px;
    /* border: 1px solid #CB0909; */
}
.sk-btn-3{
    color: #111010;
    background-color: #D2E3E8;
    font-size: x-small;

    width: 200px;
    height: 130px;
    padding: 3px;
    border-radius: 5px;
    border-width: 0px;
    margin-left: 9px;
}
.sk-btn-4{
    color: #111010;
    background-color:#D2E3E8;
    font-size: x-small;

    width: 200px;
    height: 130px;
    padding: 3px;
    border-radius: 5px;
    border-width: 0px;
    margin-left: 9px;
}
.sk-btn-5{
    color: #111010;
    background-color: #D2E3E8;
    font-size: x-small;
    width: 200px;
    height: 130px;
    padding: 3px;
    border-radius: 5px;
    border-width: 0px;
    margin-left: 9px;
}
.sk-btn-6{
    color: #111010;
    background-color: #D2E3E8;   
    font-size: x-small;
    width: 200px;
    height: 130px;
    padding: 3px;
    border-radius: 5px;
    border-width: 0px;
    margin-left: 9px;
}

.sk-btn-7{
    color: #111010;
    background-color: #D2E3E8;
    font-size: x-small;
    width: 200px;
    height: 130px;
    padding: 3px;
    border-radius: 5px;
    border-width: 0px;
    margin-left: 9px;
}

.sk-btn-8{
    color: #111010;
    background-color: #D2E3E8;
    font-size: x-small;
    width: 200px;
    height: 130px;
    padding: 3px;
    border-radius: 5px;
    border-width: 0px;
    margin-left: 9px;
}

.sk-btn-9{
    color: #111010;
    background-color: #D2E3E8;
    font-size: x-small;
    width: 200px;
    height: 130px;
    padding: 3px;
    border-radius: 5px;
    border-width: 0px;
    margin-left: 9px;
}
.enroll-btn{
    /* width: 
    160px;
    height: 40px;
    color: #171313;
    background: linear-gradient(180deg);
    border-radius: 5px;
    border-width: 0px;
    font-family: "Roboto", sans-serif;

    transition: background-color 0.3s, transform 0.3s; */
    border-radius: 6px;
border: 0px solid #F4F6FA;
background: #F4F6FA;
box-shadow: 0px 0px 4px 1px #848484;

}
.learn-btn{
    width: 
    160px;
    height: 40px;
    color: #CB0909;
    background-color: #ffffff;
    border-radius: 5px;
    border-width: 0px;
    font-family: "Roboto", sans-serif;
    border: 2px solid #CB0909;
    
    transition: background-color 0.3s, transform 0.3s;


}

.enroll-btn:hover, .learn-btn:hover {
    transform: translateY(-2px);
}
.call-div{
    margin-bottom: 6rem;
    margin-top: 6rem;
}

.call-btn{
    width: 216px;
    height: 33px;
    color: #A00707;
    background: #ffffff;
    font-family: "Roboto", sans-serif;
    border-radius: 5px;
    border: 2px solid #A00707;
    font-weight: bold;
}

.mt-4{
    text-align: center;
}

.photo{
    width: 600px;
    height: 300px;

}
.m-right{
    margin-bottom: 10px;
}
.coat{
    font-size: large;
}

/* body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
} */
.testimonial-container {
    width: 60%;
    padding: 20px;
    background-color: white;
    border: 1px dashed #d2d2d2;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    text-align: center;
}
.testimonial-container:before {
    content: '“';
    font-size: 40px;
    color: #b3b3b3;
    position: absolute;
    top: -15px;
    left: 20px;
}
.testimonial-container:after {
    content: '”';
    font-size: 40px;
    color: #b3b3b3;
    position: absolute;
    bottom: -15px;
    right: 20px;
}
.testimonial-text {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}
.testimonial-author {
    margin-top: 15px;
    font-size: 16px;
    color: #666;
    font-style: italic;
}

.footer {
    background-color: #fff;
    padding: 30px 20px;
    box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.05);
}
.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
    /* border-top: 1px solid #ccc; */
    padding: 50px 0;
}
.footer-logo {
    width: 200px;
}
.footer-logo img {
    max-width: 100%;
    margin-bottom: 3em ;
}
.footer-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.contact-info {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
}
.contact-info i {
    margin-right: 5px;
}
.social-media {
    display: flex;
    gap: 10px;
}
.social-media a {
    font-size: 16px;
    color: #333;
    text-decoration: none;
    padding: 10px;
    border-radius: 50%;
    background-color: #f0f0f0;
    transition: background-color 0.3s;
}
.social-media a:hover {
    background-color: #ddd;
}
/* .footer{
border-radius: 1391px;
background-color: rgb(248, 238, 238);
background: linear-gradient(180deg, rgba(182, 47, 52, 0.09) 0.14%, rgba(36, 138, 75, 0.09) 45.78%, rgba(86, 50, 161, 0.09) 91.42%);
filter: blur(40px);
} */
.footer-links {
    display: flex;
    
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
    font-size: 14px;
    text-transform: uppercase;
}
.footer-links a {
    color: #333;
    text-decoration: none;
}
.footer-links a:hover {
    text-decoration: underline;
}
.footer-copyright {
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    color: #888;
}


.listen{
    /* margin-bottom: 3rem; */
}
.listen-v{
    background: linear-gradient(91.67deg, #000000 -67.09%, #141313 93.21%);
    -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 30px;
            font-weight: bold;
            font-family: "Roboto", sans-serif;
            
}
.video{
    margin-bottom: 6rem;
}
.Lms-head{
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    font-size: 20px;
}
.lms-para{
    color: 
    #000000;
    font-family: "Roboto", sans-serif;
}
.lms-img{
    width: 
    300px;
    height: 
    300px;

}
.corousal-div {
    width: 1000px;
    height: 350.24px;
    padding: 20px;
    border: 1px solid #000000;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); /* Shadow effect */
    margin: auto;
}
.benifit-head{
    font-weight: bold;
    text-align: center;
    margin-top: 50px;
    font-size: 30px;
    margin-bottom: 50px;
    font-family: "Roboto", sans-serif;
}
.corousal-gap{
    margin-bottom: 6rem;
}


.timer-description h4 {
    font-weight: bold;
    color: #333;
}

.countdown {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #001f5b; /* Dark blue color */
}

.time-block {
    text-align: center;
    margin: 0 10px;
}

.time {
    font-size: 48px;
    font-family: "inter";
}

.label {
    font-size: 12px;
    text-transform: uppercase;
}

.separator {
    font-size: 48px;
    line-height: 48px;
    padding: 0 5px;
    color: #001f5b;
}

.join-btn-container {
    margin-left: 20px;
}

.join-btn {
    background: linear-gradient(180deg, #CB0909 -59.7%, #efe0e0 165.3%);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}

.join-btn:hover {
    background: linear-gradient(90deg, #8b0000, #ff0000);
}
.webinor-div{
    margin-bottom: 5rem;
    padding: 20px;
}

.form-container {
    max-width: 400px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto; /* Center horizontally */
    padding: 20px; /* Optional padding */
}

/* Add this to ensure vertical centering */
body, html {
    height: 100%;
    margin: 0;
}

/* Hover effects */
.form-container:hover {
    box-shadow: 2px 8px 20px rgba(0, 0, 0, 0.2); /* Increase box-shadow on hover */
    transform: scale(1.02); /* Slightly scale up the form container */
}

.form-heading {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.form-group input,
.form-group select {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
    width: 300px;
}

.form-group select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23999" d="M2 0L0 2h4L2 0zM0 3l2 2 2-2H0z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-size: 10px 10px;
}

.btn-submit {
    background: linear-gradient(180deg, #8b0000, #ff0000);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 0;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.btn-submit:hover {
    background: linear-gradient(180deg, #D32020, #FF5C5C);
}


/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none; /* Initially hidden */
    
}

.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border-radius: 5px;
    width: 80%;
    max-width: 500px;
    position: relative;
    display: flex;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: rgb(208, 8, 8);
    text-decoration: none;
    cursor: pointer;

}

.modal h2 {
    margin-top: 0;
}

.form-group {
    margin-bottom: 10px;
}

.form-control {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
    width: 100%;
    height: 45px;
}

.btn-submit {
    background: linear-gradient(180deg, #FF5C5C, #D32020);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 0;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    width: 100px;
}

.btn-submit:hover {
    background: linear-gradient(180deg, #D32020, #FF5C5C);
}


.footer {
    /*background-color: #341210;  Dark maroon background color */
    /* border-radius: 1391px; */
background: linear-gradient(180deg, rgba(182, 47, 52, 0.09) 0.14%, rgba(36, 138, 75, 0.09) 45.78%, rgba(86, 50, 161, 0.09) 91.42%);

/* filter: blur(40px); */
    padding: 20px 0;
    color: #F3E8E8; /* Light text color */
    font-family: Arial, sans-serif;
    margin-top: 40px;
    margin-bottom: 0 !important;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-column {
    flex: 1;
    margin: 0 15px;
}

.footer h4 {
    font-weight: bold;
    margin-bottom: 15px;
}

.footer ul {
    list-style: none;
    padding: 0;
}

.footer ul li {
    margin-bottom: 10px;
}

.footer ul li i {
    margin-right: 10px;
}

/* Font Awesome Icons (for social media) */
.footer ul li i.fas,
.footer ul li i.fab {
    color: #F3E8E8;
    font-size: 18px;
}

.footer ul li:last-child i {
    margin-right: 20px;
    cursor: pointer;
}

.footer ul li:last-child i:hover {
    color: #b0b0b0; /* Slight hover effect on icons */
}



/* styles.css */

.popup-overlay1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden; /* Hidden by default */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup-overlay1.show {
    visibility: visible;
    opacity: 1;
}

.form-container1 {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    text-align: center;
    width: 90%;
    max-width: 500px;
}

.popup-head1 {
    background: linear-gradient(91.67deg, #000000 -67.09%, #EC0707 93.21%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 20px;
}

.form-group1 {
    margin-bottom: 15px;
}

.form-control1 {
    width: 300px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.btn-close-1 {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #000;
    cursor: pointer;
    transition: color 0.3s ease;
}

.btn-close-1:hover {
    color: #f00; /* Change color on hover */
}

.btn-submit-1{
    background: linear-gradient(180deg, #CB0909 -59.7%, #650404 165.3%);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    width: 100px;
}

  
/* styles.css */

/* Hide the default arrow */
.form-group1 select.form-control1 {
    appearance: none; /* Remove default arrow in modern browsers */
    -webkit-appearance: none; /* Remove default arrow in Safari */
    -moz-appearance: none; /* Remove default arrow in Firefox */
    background: transparent; /* Remove default background */
    padding-right: 30px; /* Space for custom arrow */
    border: 1px solid #ccc; /* Border style */
    border-radius: 4px; /* Rounded corners */
    font-size: 1rem; /* Font size */
    background-color: #fff; /* Background color */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M7 10l5 5 5-5H7z" fill="%23333"/></svg>'); /* Custom arrow */
    background-repeat: no-repeat;
    background-position: right 10px center; /* Positioning of the arrow */
    background-size: 35px 35px; /* Size of the arrow */
  }
  
  /* Container styling */
  .form-group1 {
    position: relative; /* Position relative to the parent */
  }

  /* Course Page Style */
  .mainfullstackcontainer{
    display: none;
  }
  .custom-container {
    background: radial-gradient(circle, #721414 2%, #000000 80%);

    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 100vh;
    padding: 70px;
    margin: 20px;
}

.custom-form-container {
    background-color: #f8f9fa;
    padding: 40px;
    width: 40%;
    box-shadow: 10px 0 20px rgba(0, 0, 0, 0.1);
    border-radius: 13px;
    height: auto;
}

.custom-form-container h1 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 700;
}

.custom-form-container span {
    color: #B83E3E;
}

.custom-form-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.custom-form-container input[type="text"],
.custom-form-container input[type="email"],
.custom-form-container input[type="tel"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

.custom-radio-group {
    margin-bottom: 20px;
}

.custom-radio-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
}

.custom-submit-btn {
    background:linear-gradient(180deg, #CB0909 -59.7%, #650404 165.3%);
    color: #fff;
    padding: 15px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
}
.btn-danger{background:linear-gradient(180deg, #CB0909 -59.7%, #650404 165.3%);}

.custom-submit-btn:hover {
    background-color: #b60606;
}

.custom-content-container {
    
    padding: 30px;
    color: #fff;
    width: 55%;
    text-align: left;
    border-radius: 10px;
}

.custom-content-container h2 {
    font-size: 32px;
    margin-bottom: 10px;
    font-weight: 700;
}

.custom-content-container p {
    margin-bottom: 30px;
    font-size: 16px;
}

.custom-stats {
    margin-top: 50px;
    display: flex;
    justify-content: space-around;
    /* gap: 20px; */
    text-align: center;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}
.custom-stats:hover{
    transform: translateY(-10px);
}
.custom-stat-item {
   
    padding-left: 30px;
   
} 

.custom-stat-item h3 {
    font-size: 24px;
    margin-bottom: 5px;
}

.custom-stat-item p {
    font-size: 14px;
    margin: 0 !important;
}


<!--After Course Page-->

.custom-container-1{
    min-height: 100vh;
    padding: 40px;
    background-color: #f7f7f9;
    font-family: Arial, sans-serif;
}

h1 span.text-danger {
    color: #EC0707;
}
.vertical_dotted_line{
    border-left: 2px dotted black;
    height: 50px;
    margin-left: 40px;
}
.vertical_solid_line{
    border-left: 2px solid white;
    /*height: 80px;*/
    margin-left: 40px;

}
.roadmap {
    
    padding-left: 20px;
    margin-top: 20px;
}

.roadmap-item {
    /* margin-bottom: 30px; */
    border: 1px solid black;
    padding: 10px;
    border-radius: 8px;
}

.roadmap-item h5 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.roadmap-item p {
    font-size: 14px;
    color: #666;
}
.jobperks{
    margin-top: 7%;
}

.jobperkssection{
    display: flex;
    justify-content: space-around;
}
.jobperkssection p{ color: #7F7F7F;}


.profilehighlighted{
    width: 25%;
    margin-left:5%;
}
.projectandtasklearning{
    width: 25%;
    margin-left:5%;
    
}
.jobopenings{
    width: 25%;
    margin-left:5%;
}
.placementcoach{
    width: 25%;
    margin-left:5%;
}
.placementteam{
    width: 25%;
    margin-left:5%;
}
.openingeveryday{
    width: 25%;
    margin-left:5%;
}
.benfits-container{
    margin-top: 7%;

}
.benfits-container1{
    display: flex;
    justify-content: space-around;
}
.profile-head{
    font-size: 20px;
}
.card-container {
    /* width: 30%;
    height: 30vh; */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    display: block;
    text-align: center;
    margin: 10px; /* Center horizontally */
    padding: 20px; /* Optional padding */
    
}
.card-container img{
    height: 60%;
    width: 50%;
}
.card-container h6{
    font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
    margin-top: 10%;
    text-align: center;
}
.card-container:hover {
    box-shadow: 2px 8px 20px rgba(0, 0, 0, 0.2); /* Increase box-shadow on hover */
    transform: scale(1.02); /* Slightly scale up the form container */
}


.claas-img{
    width: 400px;
    height: 300px;
    margin-bottom: 6rem;
}

/* .card {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
}

.card-header {
  background-color: #f0f0f0;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.card-body {
  padding: 20px;
} */