* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    ;
}

html,
body {
    overflow-x: hidden;
}

/* navbar start */

.nav-container {
    display: flex;
    /* background-color: rgb(249, 14, 14); */
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px;
}

.menu-container {
    display: flex;
    flex-direction: row;
    top: 1;
    z-index: 1;
    padding-left: 10px;
}

.menu-container ul {
    display: flex;
    gap: 20px;
    list-style: none;
}

.menu-container ul li a {
    color: rgb(253, 252, 252);
    text-decoration: none;
    font-size: 20px;
}


.hero-container {

    width: 100%;
    height: 80vh;
    background-image: url(assets/img/1.png);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-repeat: no-repeat;
    /* STOP REPEATING */
    background-size: cover;
    /* FILL the area */
    background-position: center;
    /* CENTER nicely */

}

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    /* FIX */
    gap: 15px;
    /* cleaner spacing */
}

.hero-details,
.hero-details-2 {
    color: white;
    max-width: 450px;
    /* flexible */
}


.hero-title {
    color: white;
    width: 100%;
    line-height: 35px;
}





.trap {
    width: 300px;
    /* top width */
    height: 250px;
    background-image: url("assets/img/2.png");
    background-size: cover;
    background-position: center;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;



    /* trapezoid shape */
    clip-path: polygon(0% 0%,
            /* top left */
            80% 0%,
            /* top right */
            80% 100%,
            /* bottom right */
            20% 100%
            /* bottom left (narrower) */
        );

    position: relative;
}

/* image inside the trapezoid */
.inside-img {
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 120px;
    transform: translateX(-50%);
}

.get-button {

    width: 200px;
    height: 50px;
    background-color: #fdb31e;
    border-radius: 15px;
    font-size: 15px;
    font-weight: bold;
    color: rgb(255, 255, 255);
}



/* service start css */



.service-section {
    width: 100%;
    background: #f3f3f3;
    padding: 60px 0;
    display: flex;
    flex-direction: column ;
}

/* FLEX ROW WITH GAP */
.service-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}


/* Heading Style */
.service-heading {
    text-align: center;       /* center the heading */
    font-size: 2.5rem;        /* adjust size */
    margin-bottom: 40px;      /* space between heading and cards */
    color: #333;              /* optional: color */
}

/* WHITE CARD */
.service-card {
    width: 260px;
    background: white;
    border-radius: 20px;
    padding: 20px;
    padding-bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;   /* smooth hover animation */
}

/* Hover Effect */
.service-card:hover {
    transform: translateY(-8px);   /* lift up slightly */
    box-shadow: 0 12px 25px rgba(0,0,0,0.2); /* stronger shadow */
}


.service-img {
    width: 100%;
    height: 200px;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    margin-bottom: 20px;
    overflow: hidden;
}

.service-img img {
    width: 100%;
    height: 100%;
    border-radius: 20px;     /* rounded corners */
    object-fit: cover;       /* makes image cover container */
}



/* TEXT */
.service-text {
    list-style: none;
    padding: 20px 10px;
    text-align: center;
    line-height: 1.6;
    margin: 0;
    color: #333;
    font-size: 15px;
}

/* BUTTON */
.service-btn {
    width: 200px;             /* same width */
    height: 45px;             /* same height */
    
    background-color: #e9b855;
    border: none;
    border-radius: 25px;
    cursor: pointer;

    font-weight: 600;
    font-size: 14px;
    color: white;

    display: flex;
    justify-content: center;  /* center text horizontally */
    align-items: center;       /* center text vertically */

    margin-top: auto;
}


.service-btn:hover {
    background-color: #d2a140;
}


/* service end */


.about-container {

    width: 100%;
    height: 100vh;
    display: flex;
    background-image: url("assets/img/7.png");
    background-repeat: no-repeat; 
    background-size: cover;
    gap: 30px;
    display: flex;
    /* flex-direction: row; */
    justify-content: space-around;
    align-items: center;

}

.content-about h1,
.content-about h2,
.content-about h3 {
    color: #ffffff;
}

.content-about h1 {
    font-weight: 800;  /* boldness */
    font-size: 80px;   /* size in pixels */
}

.about-img{
    width: 300px;
    height: 300px;
    
}
.cont-para {
    width: 300px;
    height: 200px; 
    line-height: 20px;
     margin-bottom: 20px;
     font-size: 15px;
     color: #ffffff;
}


.cont-para-2{
    width: 300px;
    height: 200px;
    margin-top: 20px;
    line-height: 20px;
    color: #ffffff;
}

.feedback-container {
    width: 300px;
    height:280px;
    background-color: rgb(253, 253, 253); 
    border-radius: 15px;
}

.overall-cont{
    display: flex;
    padding: 10px;
}


.overall-cont h1{
    font-size: 20px;
   
}

.overall-img{
    border-radius: 50px;
    background-color: aquamarine; 
    width: 50px;
    height: 50px;
}


.overall-list{
    list-style: none; 
    padding-left:15px ; 
    line-height: 30px;

}

.rating-container{
    display: flex; 
    gap: 20px;
}


.star-container{
    background-color: #695630; 
    width: 150px; 
    height: 150px; 
    border-radius: 15px;
}
/* about end */


/* feature start */

.Management-container {
    width: 100%;
    height: 80vh;
    display: flex;
    background-color: rgb(241, 236, 230);
    gap: 30px;
    display: flex;
    /* flex-direction: row; */
    justify-content: center;
    align-items: center;
}


.Management-contect{
    line-height: 35px;
}

.Management-contect h1{ 

   color: #f0a308;
}


.img-container {
    width: 200px;
    height: 200px;
    background-color: white;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-container-1{
    width: 150px;
    height: 150px;
    background-color: white;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-circle-1 {
    width: 150px;
    height: 150px;
    background-image: url("../assets/img/11.png"); /* adjust path as needed */
    background-size: cover;
    background-position: center;
    border-radius: 100%;
}

.img-circle-2{
    width: 250px;
    height: 250px;
    border-radius: 100%;

}

.img-circle-3{

     width: 100px;
    height: 100px;
    background-image: url("../assets/img/10.png"); /* adjust path as needed */
    background-size: cover;
    background-position: center;
    border-radius: 100%;
}

/* recruitment css start */

.Recruitment-container{
     width: 100%;
    height: 80vh;
    display: flex;
    background-color: rgb(219, 219, 218);
    gap: 30px;
    display: flex;
    /* flex-direction: row; */
    justify-content: center;
    align-items: center;

}

.Recruitment-contect{
    line-height: 35px;
}

.Recruitment-contect h1{ 

   color: #f0a308;
}

.Recruitment-container .img-container {
    width: 200px;
    height: 200px;
    background-color: white;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Recruitment-container .img-container-1{
    width: 150px;
    height: 150px;
    background-color: white;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Recruitment-container .img-circle-1 {
    width: 150px;
    height: 150px;
    background-image: url("../assets/img/13.png"); /* adjust path as needed */
    background-size: cover;
    background-position: center;
    border-radius: 100%;
}


.Recruitment-container .img-circle-2{
    width: 250px;
    height: 250px;
    border-radius: 100%;

}

.Recruitment-container .img-circle-3{

     width: 100px;
    height: 100px;
    background-image: url("../assets/img/12.png"); /* adjust path as needed */
    background-size: cover;
    background-position: center;
    border-radius: 100%;
}

/* 2 page start */

.Recruitment-container-2{
     width: 100%;
    height: 80vh;
    display: flex;
    background-color: rgb(223, 223, 140);
    gap: 30px;
    display: flex;
    /* flex-direction: row; */
    justify-content: center;
    align-items: center;

}

.Recruitment-contect-2{
    line-height: 35px;
}

.Recruitment-contect-2 h1{ 

   color: #f0a308;
}

.Recruitment-container-2 .img-container {
    width: 200px;
    height: 200px;
    background-color: white;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Recruitment-container-2 .img-container-1{
    width: 150px;
    height: 150px;
    background-color: white;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Recruitment-container-2 .img-circle-1 {
    width: 150px;
    height: 150px;
    background-image: url("../assets/img/14.png"); /* adjust path as needed */
    background-size: cover;
    background-position: center;
    border-radius: 100%;
}


.Recruitment-container-2 .img-circle-2{
    width: 250px;
    height: 250px;
    border-radius: 100%;

}

.Recruitment-container-2 .img-circle-3{

     width: 100px;
    height: 100px;
    background-image: url("../assets/img/16.png"); /* adjust path as needed */
    background-size: cover;
    background-position: center;
    border-radius: 100%;
}




/* Traing css start */


.Training-container{
     width: 100%;
    height: 80vh;
    display: flex;
    background-color: rgb(160, 160, 139);
    gap: 30px;
    display: flex;
    /* flex-direction: row; */
    justify-content: center;
    align-items: center;

}

.Training-contect{
    line-height: 35px;
}

.Training-contect h1{ 

   color: #f0a308;
}

.Training-container .img-container {
    width: 200px;
    height: 200px;
    background-color: white;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Training-container.img-container-1{
    width: 150px;
    height: 150px;
    background-color: white;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Training-container .img-circle-1 {
    width: 150px;
    height: 150px;
    background-image: url("../assets/img/14.png"); /* adjust path as needed */
    background-size: cover;
    background-position: center;
    border-radius: 100%;
}


.Training-container .img-circle-2{
    width: 250px;
    height: 250px;
    border-radius: 100%;

}

.Training-container .img-circle-3{

     width: 100px;
    height: 100px;
    background-image: url("../assets/img/16.png"); /* adjust path as needed */
    background-size: cover;
    background-position: center;
    border-radius: 100%;
}






/* end feature */

.credential-container {
    width: 100%;
    height: 80vh;
    display: flex;
    background-color: rgb(231, 163, 79);
    gap: 30px;
    display: flex;
    /* flex-direction: row; */
    justify-content: center;
    align-items: center;

}

.credential-1 {
    width: 50%;
    height: 50%;
    gap: 50px;
}


.cre-1 {
    width: 300px;
    height: 300px;
    border-radius: 15px;
    background-color: rgb(252, 253, 253);
    gap: 20px;

}


.cre-2 {
    width: 300px;
    height: 300px;
    border-radius: 15px;
    background-color: rgb(252, 253, 253);
    gap: 20px;

}