@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Montserrat', sans-serif;

 }

 .container {
     display: flex;
     background: linear-gradient(250.15deg, #AFC4F9 1.6%, #FFFFFF 51.18%, #AAC0F9 92.57%);
     align-items: center;
     justify-content: center;
     flex-direction: column;
     padding: 30px 0px 30px 0px;
     width: 100%;
 }

 .heading-one {
     font-weight: 500;
     font-size: 36px;
     line-height: 1.2;
     color: #000000;
 }

 .heading-two {
     font-weight: 900;
     font-size: 64px;
     line-height: 1.4;
     color: #2D64ED;
 }

 .team-images {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     margin-bottom: 30px;
 }

 .team-images img {
     width: 1161px;
     /* height: 436; */
     height: auto;
     object-fit: cover;
 }

 .sub-heading-wrapper {
     position: relative;
     margin-bottom: 30px;
 }

 .shadow-text {
     font-size: 64px;
     font-weight: 800;
     line-height: 48px;
     color: #eeeeee;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     white-space: nowrap;
     z-index: 1;
 }


 .sub-heading {
     position: relative;
     font-weight: 800;
     font-size: 36px;
     line-height: 48px;
     text-align: center;
     z-index: 2;

 }

 .highlight {
     color: #2D64ED;
 }

 .description {
     background-color: #2D64ED;
     color: white;
     padding: 25px;
     border-radius: 0px 0px 69px 69px;
     text-align: left;
     font-size: 16px;
     font-weight: 400;
     line-height: 1.7;
     margin: 0px 8% 0px 8%;
     text-align: justify;
 }

 .team-section {
     display: flex;
     /* flex-wrap: wrap; */
     justify-content: space-around;
     align-items: center;
     /* gap: 20px; */
     margin: 50px auto;
     /* background-color: #afacac; */
 }

 .left {
     flex: 1 1 45%;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     /* background-color: rebeccapurple; */
 }

 .right {
     flex: 1 1 45%;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
     align-items: center;
     gap: 20px;
     /* background-color: rosybrown; */
     margin-right: 40px;
 }


 /* ceo starts */
 .profile-card {
     position: relative;
     border-radius: 38px;
     overflow: hidden;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
     transition: transform 0.3s ease;
     background: #fff;
     width: 280px;
     height: 315px;
     border: 2px solid #CAC5C5;
     cursor: pointer;
 }

 .ceo {
     width: 500px;
     height: 640px;
 }

 .profile-card img {
     width: 100%;
     display: block;
     filter: grayscale(100%);
     transition: filter 0.4s ease;
 }

 /* Dark bottom bar - visible before hover */
 .title-bar {
     position: absolute;
     bottom: 0;
     width: 100%;
     background: #000000A8;
     color: #fff;
     padding: 14px 16px;
     font-size: 16px;
     line-height: 30px;
     font-weight: 600;
     text-align: center;
     z-index: 1;
     backdrop-filter: blur(4px);
     transition: opacity 0.3s ease;
 }

 /* .director {
     padding: 5px 16px;
     line-height: 26px;

 } */

 /* Blue overlay - hidden by default */
 .hover-overlay {
     position: absolute;
     top: 50%;
     left: 0;
     width: 100%;
     padding: 15px 20px;
     background: #2D64EDE0;
     backdrop-filter: blur(4px);
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 10px;
     opacity: 0;
     transform: translateY(10px);
     transition: opacity 0.4s ease, transform 0.3s ease;
     z-index: 2;
 }

 .hover-overlay .text-group h3 {
     margin: 0;
     font-weight: 800;
     font-size: 24px;
     line-height: 30px;
     color: #FFFFFF;
 }

 .hover-overlay .text-group p {
     margin: 2px 0 0;
     font-weight: 600;
     font-size: 14px;
     line-height: 20px;

 }

 .arrow {
     font-size: 30px;
     margin-left: 10px;
     color: white;
 }

 .profile-link {
     text-decoration: none;
     color: inherit;
     display: inline-block;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* HOVER EFFECTS */
 .profile-card:hover img {
     filter: grayscale(0%);
 }

 .profile-card:hover .hover-overlay {
     opacity: 1;
     transform: translateY(0);
 }

 .profile-card:hover .title-bar {
     opacity: 0;
 }

 .profile-card:hover {
     box-shadow: 0px 0px 47px -7px #2D64EDD1;
 }


 /* ceo ends */
 
   .nucsoft-end {
     font-weight: 900;
     font-size: 250px;
     line-height: 160px;
     color: #0000001A;
     text-align: center;
     bottom: 0;
     margin-top: -52px;

 }


 /* Responsive */

 @media (min-width: 1600px) {
     .heading-one {
         font-size: 50px;
     }
 }

 @media (min-width: 2000px) {
     .team-images img {
         width: 1350px;
     }

     .shadow-text {
         font-size: 70px;
         font-weight: 800;
     }

     .sub-heading {
         font-size: 40px;
     }

     .description {
         font-size: 22px;
         line-height: 2.1;
     }


     .profile-card {
         width: 350px;
         height: 350px;

     }

     .ceo {
         width: 600px;
         height: 738px;
     }

     .title-bar {
         font-size: 22px;

     }
 }

 @media (min-width: 2500px) {

     .team-images {
         margin-bottom: 50px;
     }

     .sub-heading-wrapper {
         margin-bottom: 50px;
     }

     .team-images img {
         width: 1650px;
     }

     .shadow-text {
         font-size: 80px;
     }

     .sub-heading {
         font-size: 50px;
     }

     .description {
         font-size: 27px;
         line-height: 2.5;
     }


     .profile-card {
         width: 400px;
         height: 450px;

     }

     .ceo {
         width: 750px;
         height: 900px;
     }

     .title-bar,
     .hover-overlay .text-group p {
         font-size: 25px;
         line-height: 50px;

     }

 }



 @media (max-width: 1024px) {
     
        .nucsoft-end {
     font-size: 180px;
     line-height: 90px;
     margin-top: 0px;

 }
 
     .heading-one {
         font-size: 28px;
     }

     .heading-two {
         font-size: 40px;
     }

     .sub-heading {
         font-size: 24px;
     }

     .shadow-text {
         font-size: 38px;
     }

     .team-images img {
         width: 90%;
         height: auto;
     }

     .description {
         font-size: 15px;
         margin: 0 5%;
     }

     /* from here : team */

     .ceo {
         width: 100%;
         /* height: auto; */
         height: 315px;

     }

     .profile-card {
         /* width: 90%; */
         max-width: 330px;
         /* height: auto; */
     }

     .team-section {
         flex-direction: column;
         align-items: center;
         gap: 20px;
         justify-content: center;
     }

     .left,
     .right {
         width: 100%;
         /* flex-direction: column; */
         margin: 0;
         gap: 20px;
     }

     .right {
         flex-wrap: wrap;
         justify-content: center;
     }

     .title-bar,
     .hover-overlay {
         font-size: 14px;
     }
 }


 @media (max-width: 768px) {
     
        .nucsoft-end {
     font-size: 140px;
     line-height: 60px;

 }
 
 }
 @media (max-width: 450px) {
     
             .nucsoft-end {
     font-size: 70px;
     line-height: 0px;

 }
     .heading-one {
         font-size: 24px;
     }

     .heading-two {
         font-size: 32px;
     }

     .sub-heading {
         font-size: 20px;
     }

     .team-images,
     .sub-heading-wrapper {
         margin-bottom: 0;
     }

     .shadow-text {
         display: none;
     }

     .description {
         padding: 20px;
         font-size: 14px;
         border-radius: 0px
     }

     .team-section {
         gap: 20px;
     }

     .team-images img {
         width: 100%;
     }

     .profile-card {
         /* width: 90%; */
         /* height: auto; */
     }

     .ceo {
         width: 90%;
         /* height: auto; */
     }

     .hover-overlay .text-group h3 {
         font-size: 18px;
     }

     .hover-overlay .text-group p {
         font-size: 11px;
     }

     .arrow {
         font-size: 24px;
     }
 }
 
  @media (max-width: 320px) {
     
    .nucsoft-end {
     font-size: 55px;

 }
 
  }