body {
    font-family: Arial, Helvetica, sans-serif;

    h2 {
        font-size: 50px;
        font-weight: 800;
        text-align: center;
    }
   
}


/* for backgrounds */

.frontier {
    background-image: url(images/background/main_bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.main_1 {
    background-image: url(https://img.freepik.com/free-vector/hand-drawn-psychedelic-colorful-background_23-2149075812.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-size: 80px;
    font-weight: 800;
    padding-left: 100px;


}

.main_2 {
    font-size: 30px;
    font-weight: 500;
    padding-left: 100px;
    color: white;
    align-self: center;
}

.bgt1 {
    background-image: linear-gradient(rgba(239, 239, 239, 0.7), rgba(255, 255, 255, 0.7)), url(images/background/home_bg1.gif);
    background-position: center;
    background-size: cover;
}

.mybg-2 {
    background-image: url(images/background/bg-2.webp);
    background-position: center;
    background-size: cover;
    
}


.mybg-2-1 {
    color: #fd0022;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    box-shadow: 2px 2px 5px grey;
    transition: 0.2s;
}

.mybg-2-1:hover{
    color: #000000;
    transform: scale(1.1);
}

/* Skills section background Properties */

.skill-background {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(images/background/skill-img.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;

}

.skill-background p {
    font-size: 18px;
    padding-bottom: 20px;
}


/* Skills section background Properties */

.resume-background {
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(images/background/resume-bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-origin: border-box;


}

.resume-background .container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 20px;

}

.resume-background .container p,
.portfolio-background p,
.contact-backg p {
    font-size: 18px;
}

#contact-p1 {
    font-size: 20px;
    font-weight: bold;
    color: rgb(60, 60, 60);
}

#service-p1 {
    font-size: 20px;
    font-weight: bold;
    color: rgb(222, 222, 222);
    margin-bottom: 40px;
}

.resume-back-row {
    padding: 150px 100px;
}


.resume-background .container h3,
.portfolio-background h4 {
    font-weight: bold;
    text-decoration: underline;
}

.portfolio-background {
    background-color: #0e0f20;
    color: white;
}

.service-background {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(images/background/service-back.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
}

.service-element,
.contact-form-sect {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    transition: 0.2s;
}


.service-element:hover {
    transform: scale(1.05);
}

.contact-form-sect:hover {
    transform: scale(1.02);
    
}


.service-element h5 {
    font-size: 22px;
    color: #fdff7e;
}

.webs-frame {
    width: 100%;
    height: 400px;
}


.contact-backg {
    background-image: linear-gradient(rgba(255, 172, 152, 0.2), rgba(255, 172, 152, 0.2)), url(images/background/contactbackground.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.cont-class {
    font-size: 15px;
    text-decoration: none;
    color: black;
}

.cont-class-i {
    font-size: 15px;
    color: #149ddd;
}

.footer-backg {
    background-color: #000000;
    color: white;

}

.footer-backg a {
    color: white;
    text-decoration: none;
    color: rgb(122, 228, 122);

}

form label,
form input {
    color: rgb(56, 56, 56);
}


/* / WhatsApp Icon CSS / */
.whatsapp-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    color: white;
    border-radius: 50%;
    padding: 15px;
    font-size: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.whatsapp-icon:hover {
    background-color: #128c7e;
    text-decoration: none;
}

.WaIMG {
    width: 50px;
}


.navigate {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 99999;


}

.resumeNav_button {
    text-decoration: none;
}

.resumeNav_button:hover {
    color: white;
}

.logo {
    width: 50px;
}


ul li {
    list-style-type: none;
    margin-bottom: 10px;
}

.col-lg-6 ul li i,
p i {
    color: #149ddd;
}


.resumeDetails {
    margin-top: 24px;
}

.resumeDetails :first-child {
    margin-bottom: 3px;
}

.resumeDetails :nth-child(2) {
    margin-bottom: 5px;

}

.year {
    font-size: 11px;
    padding-left: 25px;
    font-style: oblique;
}

.padding25 {
    padding-left: 25px;
}

ul li a i {
    color: #149ddd;
    margin-right: 5px;
}

.social {
    color: #149ddd;
}