.header {
    height: 171px;

}

.logo img {
    width: 200px;
   
}

.find-a-job-button {
    width: 212px;
    height: 53px;
    border: none;
    border-radius: 15px;
    background-color: #DCB05C;
    font-size: 21px;
    color: #FFFFFF;
    font-weight: bold;
}
.btntext{
    text-align: left;
font: normal normal bold 21px/21px Greycliff CF;
letter-spacing: 0px;
color: #FFFFFF;
}
.find-a-job-button img {
    width: 42px;
    height: 42px;
}

.Post-a-job-button {
    width: 212px;
    height: 53px;
    border: none;
    border-radius: 15px;
    background-color: #5199C9;
    font-size: 21px;
    color: #FFFFFF;
    font-weight: bold;
}

.Post-a-job-button img {
    width: 34px;
    height: 28px;
}

.login-profile {
    width: 60px;
    height: 60px;
    background-color: #DCB05C;
    border-radius: 50%;
}

.login-logo {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: #FFFFFF;
}

.login h2 {
    color: #545A79;
    font-weight: bold;

}

.employee-button {
    height: 62px;
    background-color: #5199C9;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    font-size: 19px;
    font-weight: bold;
    color: #ffffff;

}

/* .hero-section {
    height: 60vh;
    background-color: #3B436AE0;
}

.left-side h1 {
    font-size: 55px;
    color: #FFFFFF;
    font-weight: 900;
}

.left-side p {
    font-size: 30px;
    color: #EBEBEB;
    font-weight: normal;
    text-align: left;
}

.get-start-button {
    width: 290px;
    height: 79px;
    background-color: #DCB05C;
    border-radius: 15px;
    font-size: 30px;
    color: #FFFFFF;
    font-weight: bold;
    border: none;
} */


.hero-section {
    position: relative;
    background-color: #5b627e;
    min-height: 70vh;
    display: flex;
    align-items: center;
    
}

.hero-title {
    text-align: left;
font: normal normal 900 55px/65px Greycliff CF;
letter-spacing: 0px;
color: #FFFFFF;
margin-top: 100px;
}

.hero-subtitle {
    text-align: left;
font: normal normal normal 30px/30px Greycliff CF;
letter-spacing: 0px;
color: #EBEBEB;
opacity: 1;
margin-top: 20px;
}

.hero-btn {
    width: 290px;
    height: 79px;
    margin-top: 25px;
    background-color: #e0b45a;
    color: #fff;
    padding: 12px 28px;
    font-size: 30px;
    font-weight: bold;
    border-radius: 15px;
    border: none;
}

.hero-btn:hover {
    background-color: #d1a347;
}

.hero-img {
    max-width: 90%;
}
/* .fixed-bottom-img{
    position: relative;
} */
.fixed-bottom-img{
    
    background: linear-gradient(180deg, #7CB1D5, #6C9EBF, #294D65);
    position: relative;
    right: 0;
    width: 627px;
    height: 530px;
    border-radius: 180px 180px 0px 0px;
    /* background-image: url(./image/Group 1347@2x.png); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
}
.fixed-bottom-img img{
    width: 668px;
    height: 586px;
}
.leading-brand-card{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 213px;
    height: 110px;
    border-radius: 20px;
     box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
     gap: 16px;
}
.leading-brand-card img{
    width: 176px;
    height: 58px;
}




.top-picks-section {
    background-color: #F4F4F4;
    padding-top: 83px;
    padding-bottom: 83px;
}
.toppicks{
    text-align: left;
font: normal normal 900 45px/48px Greycliff CF;
letter-spacing: 0px;
color: #2F556E;
opacity: 1;
}
.toppickspara{
    text-align: left;
font: normal normal normal 25px/27px Greycliff CF;
letter-spacing: 0px;
color: #000000;
opacity: 1;
}

/* Logo card */
.logo-grid {
    display: grid;
    grid-template-columns: repeat(3, 216px);
    gap: 20px;
    justify-content: center; /* center grid if space left */
}

.logo-card {
    width: 216px;
    height: 110px;
    background: #fff;
    border-radius: 20px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

/* .logo-card img {
    max-width: 100%;
    max-height: 58px;
} */

/* Arrow buttons */
.arrow-controls {
    background: #fff;
    border-radius: 14px;
    padding: 10px 6px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.arrow-btn {
    border: none;
    background: #e6b35a;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

/* View all button */
.view-all-btn {
    width: 235px;
    height: 63x;
    border: 5px solid #e6b35a;
    color: #e6b35a;
    padding: 10px 28px;
    border-radius: 15px;
    background: transparent;
    font-size: 24px;
    font-weight: bold;
}

.view-all-btn:hover {
    background: #e6b35a;
    color: #fff;
}
.right-text h3{
    font-size: 45px;
    color: #2F556E;
    font-weight: 900;
}
.right-text p{
    font-size: 25px;
    color: #000000;
    margin-top: 20px;
}
.Jobbri-benefits h1{
    font-size: 45px;
    font-weight: 900;
    color: #31576F;
}
.info-card{
    gap: 18px;
    margin-bottom: 37px;
}
.info-card img{
    height: 124px;
    width: 124px;
}
.textextra{
    text-align: end; 
font: normal normal bold 20px/27px Greycliff CF;
letter-spacing: 0px;
color: #000000;
opacity: 1;
margin-top: 30px;
}

.extra-benefits{
    background-color: #FFFFFF;
    padding: 44px 45px 39px 47px;
    height: 524px;
    border-radius: 40px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.why-choose{
    background: #e3e7fabb 0% 0% no-repeat padding-box;
border-radius: 50px;
}
.get-heading{
    text-align: left;
font: normal normal 900 45px/90px Greycliff CF;
letter-spacing: 0px;
color: #31576F;
opacity: 1;
}
.point-heading{
    text-align: left;
font: normal normal bold 30px/15px Greycliff CF;
letter-spacing: 0px;
color: #C38F50;
}
.point-paragraph{
    text-align: left;
font: normal normal normal 18px/22px Greycliff CF;
letter-spacing: 0px;
color: #000000;
}


.benefits-list{
    font-size: 18px;
    color: #31576F;
    line-height: 22px;
}

.Sign-upbutton{
    background-color: #E7B260;
    width: 100%;
    height: 93px;
    border-radius: 30px;
    font-size: 35px;
    color: #FFFFFF;
    font-weight: bold;
    border: none;
}
.extra-benefits-heading {
   text-align: left;
font: normal normal bold 37px/42px Greycliff CF;
letter-spacing: 0px;
color: #31576F;
}
.extra-benefits li{
    margin-bottom: 20px;
    text-align: left;
font: normal normal normal 18px/22px Greycliff CF;
letter-spacing: 0px;
color: #31576F;
}




.employment-section {
  background-color: #ffffff;
}

/* Custom 5-column layout for large screens */
@media (min-width: 992px) {
  .col-lg-2-4 {
    flex: 0 0 auto;
    width: 20%;
  }
}

.field-card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  height: 397px;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
}

.field-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.field-label {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: #3f476f;
  color: #fff;
  padding: 14px 18px;
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 18px;
}

.field-label .plus {
  background-color: #ffffff;
  color: #e3b05c;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
}

/* Explore Button */
.explore-btn {
  border: 2px solid #e3b05c;
  color: #e3b05c;
  padding: 10px 18px;
  border-radius: 50px;
  background: transparent;
  font-weight: 600;
}

.explore-btn:hover {
  background-color: #e3b05c;
  color: #fff;
}

.icon-circle {
  width: 34px;
  height: 34px;
  background-color: #e3b05c;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card .card-image{
    height: 258px;
}

.footer-logo {
    display: flex;
    align-items: center;
}

.footer-logo-img {
    width: 140px;       /* 🔒 fixed width */
    max-width: 100%;    /* responsive safety */
    height: auto;       /* keep aspect ratio */
    object-fit: contain;
    display: block;
}

.footer-logo p{
    color: #656567;

}
.insta-icon{
    width: 40px;
    height: 40px;
    background-color: #DC9F5A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.insta-icon img{
    width: 30px;
}
.fb-icon{
    width: 40px;
    height: 40px;
    border: 0.5px solid #9FA0B2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.linkedin-icon{
    width: 40px;
    height: 40px;
    border: 0.5px solid #9FA0B2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.twiter-icon{
    width: 40px;
    height: 40px;
    border: 0.5px solid #9FA0B2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer {
            background: #f7f9fc;
            padding: 60px 0 30px;
        }
        .footer-logo {
            font-size: 26px;
            font-weight: 700;
            color: #3b82f6;
        }
        .footer-links a {
            display: block;
            color: #656567;
            text-decoration: none;
            margin-bottom: 8px;
            font-size: 14px;
        }
        .footer-links a:hover {
            color: #3b82f6;
        }
        .newsletter input {
            height: 53px;
            border: 1px solid #8388B9;
            background-color: #E3E7FA;
            border-radius: 20px;
            padding-right: 50px;
        }
        .newsletter button {
            position: absolute;
            right: 5px;
            top: 5px;
            border-radius: 50%;
        }
        .cookie-box {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: #fff;
            padding: 12px 16px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            font-size: 13px;
        }
        .support-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: #4aa3df;
            color: #fff;
            padding: 12px 16px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .footer-links h6, a{
            color: #656567;
            font-size: 18px;
        }
        .blog-section {
    padding: 100px 0;
    background: #F4F4F4;
}
.blog-card {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}
.blog-card img {
    height: 220px;
    object-fit: cover;
}
.blog-content {
    padding: 20px;
}
.blog-category {
    text-align: left;
font: normal normal normal 20px/28px Greycliff CF;
letter-spacing: 0px;
color: #31576F;
}
.blog-title {
    text-align: left;
font: normal normal bold 25px/28px Greycliff CF;
letter-spacing: 0px;
color: #31576F;
}
.blog-link {
    text-align: left;
font: normal normal bold 20px/27px Greycliff CF;
letter-spacing: 0px;
color: #000000;
text-decoration: none;

}
.blog-link i {
    margin-left: 5px;
}
.blog-h{
    text-align: left;
font: normal normal 900 45px/90px Greycliff CF;
letter-spacing: 0px;
color: #31576F;
}
.blog-p{
    text-align: left;
font: normal normal normal 30px/32px Greycliff CF;
letter-spacing: 0px;
color: #000000;
margin-bottom: 30px;
}
.jump-btn {
    border: 5px solid #e0b35b;
    color: #e0b35b;
    border-radius: 15px;
    padding: 12px 26px;
    font-weight: bold;
}
.slider-controls span {
    width: 30px;
    height: 6px;
    background: #e5e7eb;
    border-radius: 4px;
    display: inline-block;
}
.slider-controls span.active {
    background: #e0b35b;
}
.arrow-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #e0b35b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.blog-text h2{
  color: #31576F;
    font-size: 45px;  
}
.blog-text p{
    color: #000000;
    font-size: 30px;
}
/* new code avinhs */
/* SECTION */
.employment-section {
    width: 100%;
    padding: 80px 0;
    background: #ffffff;
}

/* CONTAINER */
.employment-container {
    max-width: 1200px; /* 🔥 keeps everything inside screen */
    margin: 0 auto;
    padding: 0 20px;
}

/* HEADER */
.employment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.employment-title {
    text-align: left;
font: normal normal 900 45px/50px Greycliff CF;
letter-spacing: 0px;
color: #31576F;
}

.employment-subtitle {
   text-align: left;
font: normal normal normal 25px/27px Greycliff CF;
letter-spacing: 0px;
color: #000000;
}

/* EXPLORE BUTTON */
.employment-explore-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 2px solid #f2b562;
    border-radius: 12px;
    color: #f2b562;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.employment-explore-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f2b562;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* GRID (THIS FIXES OVERFLOW) */
.employment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 274px); /* 🔥 FIXED CARD WIDTH */
    gap: 20px;
    justify-content: center;
    width: 100%;
}

/* CARD */
.employment-card {
    width: 274px;
    height: 400px;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    background: #eee;
}

/* IMAGE */
.employment-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* LABEL */
.employment-card-label {
    position: absolute;
    left: 1px;
    right: 14px;
    bottom: 60px;
    background: rgba(40, 53, 92, 0.9);
    color: #ffffff;
    padding: 12px 14px;
    border-radius: 14px;
    display: flex;
    font: normal normal 900 30px/10px Greycliff CF;
    justify-content: space-between;
    align-items: center;
   
}

.employment-card-label span {
    width: 26px;
    height: 26px;
    background: #f2b562;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.cta-heading{
    text-align: left;
font: normal normal 900 48px/50px Greycliff CF;
letter-spacing: 0px;
color: #31576F;
}
.cta-para{
    text-align: left;
font: normal normal normal 35px/50px Greycliff CF;
letter-spacing: 0px;
color: #000000;
}
.cta {
    padding-top: 136px;
    background: #fff;
}
.footerbg{
    background: #bdcafa4a 0% 0% no-repeat padding-box;

}

.cta-img-wrap {
    text-align: right;
}

.cta-img {
    width: 210px;        /* 🔒 fixed width */
    max-width: 100%;     /* prevents overflow */
    height: auto;        /* keeps aspect ratio */
    object-fit: contain;
}
.footer-option{
    text-align: left;
font: normal normal bold 18px/22px Greycliff CF;
letter-spacing: 0px;
color: #656567;
}
.list-footer{
    text-align: left;
font: normal normal normal 18px/22px Greycliff CF;
letter-spacing: 0px;
color: #656567;
}
.footer-subs{
    text-align: left;
font: normal normal bold 25px/22px Greycliff CF;
letter-spacing: 0px;
color: #656567;
}
.footer-subs-pra{
    text-align: left;
font: normal normal normal 18px/22px Greycliff CF;
letter-spacing: 0px;
color: #656567;
}