:root {
    --primary-blue: #11123B;
    --primary-green: #88D9B7;
    --primary-orange: #FECCA6;
    --transparent-green: #29BD7C89;
    --transparent-orange: rgba(254, 162, 91, 0.2);
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
    font-family: "Roboto", sans-serif;
}

hr{
    margin: 0 !important;
}

.bg-primary-green {
    background-color: var(--primary-green);
}

.bg-primary-orange {
    background-color: var(--primary-orange);
}


.bg-transparent-green {
    background-color: var(--transparent-green);
}

.bg-transparent-orange {
    background-color: var(--transparent-orange);
}


.navbar-nav li a {
    font-weight: 600;
    color: var(--primary-blue) !important;
    padding-right: 30px !important;
}

.green-circle {
    width: 242px;
    height: 242px;
    background-color: var(--transparent-green);
    border-radius: 50%;
    opacity: .2;
}

.orange-circle {
    width: 107px;
    height: 107px;
    background-color: var(--transparent-orange);
    border-radius: 50%;
    opacity: .2;
}

.gc-1-pos {
    position: absolute;
    left: 30%;
    z-index: -1;
}

.oc-1-pos {
    position: absolute;
    left: 20%;
    top: 247px;
    z-index: -1;
}

.gc-2-pos {
    position: absolute;
    right: 20%;
    z-index: -1;
}

.oc-2-pos {
    position: absolute;
    right: 50%;
    top: 100px;
    z-index: -1;
}

.primary-h1 {
    font-size: 3em;
    font-weight: 900;
    color: var(--primary-blue);
}

.green-text {
    color: var(--primary-green);
}

.primary-p {
    font-size: 1em;
}

.green-btn {
    background-color: var(--primary-green);
    padding: 10px 20px;
    text-decoration: none;
    color: var(--primary-blue);
    border-radius: 10px;
    font-weight: 700;
    font-size: 1em;
}

.primary-h1.visible {
    opacity: 1;
}

.orange-btn {
    background-color: var(--primary-orange);
    padding: 10px 20px;
    text-decoration: none;
    color: var(--primary-blue);
    border-radius: 10px;
    font-weight: 700;
    font-size: 1em;
}

.margin-left-button {
    margin-left: 250px;
}

h5 {
    font-weight: bold !important;
}

.card-body a,
.project a {
    text-decoration: underline;
    color: var(--primary-blue);
    text-decoration-style: dashed;
    text-underline-offset: 5px;
}

.card-body a:hover,
.project a:hover {
    text-decoration: underline;
    color: var(--primary-orange);
    text-decoration-style: dashed;
    text-underline-offset: 5px;
}

.project {
    background: var(--transparent-orange);
    /*min-height: 250px;*/
}

.get-form select,
.get-form-project select {
    border-radius: 10px;
    border: 1px dashed grey;
    margin-top: 5px !important;
    padding: 10px !important;
}

.get-form button {
    margin-top: 5px;
}


.get-btn-project {
    border: none;
    background-color: var(--bs-green);
    color: var(--bs-white);
    padding: 8px;
    border-radius: 5px;

}

.mentor-img {
    aspect-ratio: 1;
    object-fit: cover;
}

.navbar-nav {
    margin: auto;
}

.project-grid {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    min-height: 340px;
}

.min-height-320 {
    min-height: 370px;
}

.secondary-h1 {
    font-size: 2em;
    font-weight: 900;
    color: var(--primary-blue);
}

.social-icons {
    padding: 10px;
    font-size: 3em;
    color: var(--primary-green);
}
.text-justify{
    text-align: justify;
}
.mentor-img-personal{
    border-radius: 50%;
    aspect-ratio: 1;
    object-fit: cover;
    width: 500px;
    height: 500px;
}
.about-image{
    width: 400px;
    height: 300px;
    aspect-ratio: 1;
    object-fit: cover;
    gap: 5px;
    border-radius: 10px;
}

.right-padding {
    padding-right: 80px;  /* Adjust the padding value as needed */
    /* float: right;  */
}

@media (max-width: 767px) {
    #abc {
        margin-left: -100px;  /* Apply negative left margin on mobile devices */
    }
}