*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    overflow-x: hidden;
}


/* section 1 starts */
.sec-1-background{
    background-color: #00ABFF;
}


/* sec-1: parent container of the section, for styling purposes */
.sec-1 {
    color: #ffffff;
}

/* sec-1-row: container for the text and image content, responsible for layout and positioning */
.sec-1-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    width: 80%;
    padding: 50px 0;
}

/* sec-1-text: container for the text content, responsible for text alignment and positioning */
.sec-1-text {
    width: 50%;
    text-align: center;
}


.sec-1-text-p-1{
    font-size: 1.5em;
}

.sec-1-text-h1-1{
    font-size: 3.5em;
}

.sec-1-text-p-2{
    margin-top: 5%;
    font-size: 1.8em;
}

.sec-1-text-h1-2{
    font-size: 3em;
}



/* sec-1-image: container for the image content, responsible for image alignment and positioning */
.sec-1-image {
    width: 80%;
    text-align: right;
}

/* sec-1-image img: styles for the image */
.sec-1-image img {
    max-width: 80%;
    height: auto;
    border-radius: 25px;

}

.sec-1-tech-stack-row{
    text-align: center;
    margin-top: 10%;
    margin-bottom: 10%;
}


.sec-1-tech-stack-row{
    font-size: x-large;
}


.sec-1-img-width{
    width: 10%;
}

.sec-1-image-row{
    margin-top: 2.5%;
}


/* Circular Black Button Styles */

/* sec-1-button-container: container for positioning and alignment of the button */
.sec-1-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10%;
}

/* sec-1-button: styles for the circular black button */
.sec-1-button {
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* sec-1-button:hover: styles for the button when hovered */

a{
    text-decoration: none;
    color: #fff;
}

.sec-1-button:hover{
    transform: scale(1.1);
}


.sec-1-btn-text{
    font-size: 1.5em;
    padding: 10px 20px;

}


/* section 1 ends */


/* section 1 optimized  */

/* Media query for screen sizes 1280px and below */
@media (max-width: 1280px) {

    .sec-1-background{
        white-space: nowrap;
    }

    .sec-1-text {
        width: 80%;
    }

    .sec-1-image {
        width: 80%;
    }

    .sec-1-image img {
        max-width: 100%;
    }

    .sec-1-text-p-1 {
        font-size: 1.2em;
    }

    .sec-1-text-h1-1 {
        font-size: 2.5em;
    }

    .sec-1-text-p-2 {
        font-size: 1.4em;
    }

    .sec-1-text-h1-2 {
        font-size: 2em;
    }

    .sec-1-btn-text {
        font-size: 1.2em;
    }
    
    .sec-1-text{
        margin: 0%;
        padding: 0%;
    }

    .sec-1-image {
        width: 80%;
        display: flex;
        align-items: center;
        text-align: center;
        margin: 0%;
        margin-top: 5%;
        margin-left: 10%;
        padding: 0%;
    }

    .sec-1-image img {
        max-width: 80%;
    }
}

/* Media query for screen sizes 768px and below */
@media (max-width: 768px) {
    .sec-1-row {
        flex-direction: column;
    }

    .sec-1-text-p-1 {
        font-size: 1.2em;
    }

    .sec-1-text-h1-1 {
        font-size: 2.5em;
    }

    .sec-1-text-p-2 {
        font-size: 1.4em;
    }

    .sec-1-text-h1-2 {
        font-size: 2em;
    }

    .sec-1-btn-text {
        font-size: 1.2em;
    }
}

/* Media query for screen sizes 375px and below */
@media (max-width: 375px) {
    .sec-1-text-p-1 {
        font-size: 1em;
    }

    .sec-1-text-h1-1 {
        font-size: 2em;
    }

    .sec-1-text-p-2 {
        font-size: 1.2em;
    }

    .sec-1-text-h1-2 {
        font-size: 1.5em;
    }

    .sec-1-btn-text {
        font-size: 1em;
        padding: 8px 16px;
    }
}


/* section 1 optimized  */







/* Section 2 starts */

.sec-2{
    background-color: #E1EEEF;
}
/* Container for section 2 */
.sec-2-container-1 {
    display: flex;
    flex-direction: row;
    width: 100%;
    text-align: center;
    align-items: center;
}

/* Text style */
.sec-2-text {
    width: 100%;
    padding: 20px;
    margin-right: 2.5%;
    

}

.sec-2-text h1 {
font-size: 2.8em;


}

/* Circular Black Button Styles */


/* sec 2 header start*/

.sec-2-headerline-text{
    display: flex;
    align-items: center;
    text-align: center;
    margin-left: 2.5%;
}

.sec-2-headerline-text h1{
    font-size: 3em;
    margin-left: 1.5%;
}

.sec-2-img-width{
    width: 5%;
}

.sec-2-headerline-text img{
    display: inline;
}

/* sec 2 header ends*/



/* sec-2-button-container: container for positioning and alignment of the button */
.sec-2-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2.5%;
}

/* sec-1-button: styles for the circular black button */
.sec-2-button {
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.3s ease;
}


a{
    text-decoration: none;
}


.sec-2-btn-text{
    font-size: 1.5em;
    padding: 10px 20px;

}


/* Image container */
.sec-2-image-container-1 {
    width: 100%;
    margin-left: 2.5%;
    margin-top: 5%;
}

.sec-2-image-container-1 h1{
    font-size: 3em;
}

/* Image style */
.sec-2-image-1 {
    width: 80%;
    border-radius: 25px;
    object-fit: cover;
    transition: transform 0.3s;
    margin-bottom: 5%;
    
}

/* Image style */
.sec-2-image-4 {
    width: 40%;
    border-radius: 25px;
    object-fit: cover;
    transition: transform 0.3s;
    margin-bottom: 5%;
    
}




.sec-2-image-1:hover  {
    transform: scale(1.1);
    object-fit: cover;
    border-radius: 25px;
    transition: transform 0.3s;
    
}


/* Container for section 2 */
.sec-2-container-2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Image container */
.sec-2-image-container-2 {
    width: 30%;
    text-align: center;
    align-items: center;
    overflow: hidden;
    margin: 0 10px;
    margin-top: 5%;
}

/* Image style */
.sec-2-image-2 {
    width: 100%;
    object-fit: cover;
    border-radius: 25px;
    transition: transform 0.3s;
    margin-bottom: 5%;
}

/* Image hover effect */
.sec-2-image-2:hover {
    transform: scale(1.1);
}

.sec-2-button-container-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
    margin-bottom: 10%;
}


/* sec-2-button-container: container for positioning and alignment of the button */
.sec-2-button-container-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2.5%;
    margin-bottom: 10%;
}

/* sec-1-button: styles for the circular black button */
.sec-2-button-2 {
    background-color: black;;
    color: black;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.3s ease;
    padding: 14px 28px;
    margin-right: 5%;
}




/* sec-1-button:hover: styles for the button when hovered */


a{
    text-decoration: none;
}


.sec-2-btn-text-2{
    font-size: 1.5em;
    padding: 10px 20px;
    color: #000;
    border-color: #000;
    border-radius: 2px;

}

.sec-2-btn-text-3{
    color: black;
}

.sec-2-h1-btn{
    color: black;
}


.sec-2-header-h1{
    margin-left: 2.5%;
}
/* Section 2 ends */


/* section 2 mobile optimaztion */
/* Media Queries */
@media (max-width: 1920px) {
    /* Styles specific to screen sizes equal to or below 1920px */
  }
  
  @media (max-width: 1280px) {
    .sec-2{
        white-space: nowrap;
    }
    /* Styles specific to screen sizes equal to or below 1280px */
    .sec-2-text h1 {
      font-size: 2.2em;
    }
  
    .sec-2-image-container-1 h1 {
      font-size: 2.4em;
    }
    .BTN-space{
        margin-right: 5%;
    }
  }
  
  @media (max-width: 768px) {
    /* Styles specific to screen sizes equal to or below 768px */
    .sec-2-container-1 {
      flex-direction: column;
    }
  
    .sec-2-text {
      margin-top: 15%;
      margin-bottom: 15%;
    }

    .sec-2-image-container-1 h1{
        font-size: 3em;
    }
  
    .sec-2-text h1 {
      font-size: 2em;
    }
  
    .sec-2-image-container-1 {
      margin-left: 0;
    }
  
  
    .sec-2-container-2 {
      flex-direction: column;
    }
  
    .sec-2-image-container-2 {
      width: 80%;
      margin-left: 5%;
      margin-right: 5%;
    }

    .sec-2-image-container-2 h1{
        margin-bottom: 2.5%;
        margin-top: 2.5%;
  }
}
  
  @media (max-width: 375px) {
    /* Styles specific to screen sizes equal to or below 375px */
    .sec-2-text h1 {
      font-size: 1.4em;
    }
  
    .sec-2-image-container-1 h1 {
      font-size: 1.6em;
    }
  
    .sec-2-btn-text {
      font-size: 1.2em;
      padding: 5px 10px;
    }
  
    .sec-2-btn-text-2 {
      font-size: 1.2em;
      padding: 5px 10px;
    }
  }
  
/* section 2 mobile optimaztion */







/* section 3 starts */

.sec-3-background{
    background-color: #00ABFF;
}

/* Section 3 container */
.sec-3-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    width: 100%;
}

/* Left side text container */
.sec-3-left {
    width: 40%;
    text-align: left;
    padding: 10px;
    margin-top: 2.5%;
    margin-left: 2.5%;
    color: white;
}

.sec-3-left h1{
    font-size: 3.5em;
}

/* Right side container */
.sec-3-right {
    width: 60%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
    margin-right: 2.5%;
}

/* Square styling */
.sec-3-square {
    background-color: #f0f0f0;
    padding: 20px;
    width: 90%;
    text-align: left;
    border: 1px solid #ccc;
    border-radius: 25px;
    margin-top: 2.5%;
}

.sec-3-square h1{
    color: #00ABFF;
}


.sec-3-square p{
    font-size: 1.2em;
}


/* section 3 ends */

/* section 3 media queries */

/* Media Queries */
@media (max-width: 1920px) {
    /* Styles specific to screen sizes equal to or below 1920px */
  }
  
  @media (max-width: 1280px) {
    /* Styles specific to screen sizes equal to or below 1280px */
    .sec-3-left h1 {
      font-size: 2.8em;
    }
  
    .sec-3-square h1 {
      font-size: 1.6em;
    }
  
    .sec-3-square p {
      font-size: 1.1em;
    }
  }
  
  @media (max-width: 768px) {
    /* Styles specific to screen sizes equal to or below 768px */
    .sec-3-container {
      flex-direction: column;
    }
  
    .sec-3-left {
      width: 100%;
      margin-left: 0;
      text-align: center;
    }
  
    .sec-3-left h1 {
      font-size: 2.2em;
    }
  
    .sec-3-right {
      width: 100%;
      margin-right: 0;
      margin-bottom: 10%;
      word-break: break-all;

    }
  
    .sec-3-square {
      width: 80%;
    }
  
    .sec-3-square h1 {
      font-size: 1.4em;
    }
  
    .sec-3-square p {
      font-size: 1em;
    }
  }
  
  @media (max-width: 375px) {
    /* Styles specific to screen sizes equal to or below 375px */
    .sec-3-left h1 {
      font-size: 1.6em;
    }
  
    .sec-3-square {
      width: 100%;
    }
  
    .sec-3-square h1 {
      font-size: 1.2em;
    }
  
    .sec-3-square p {
      font-size: 0.9em;
    }
  }

  /* section 3 media queries */








/* section 4 starts */

.sec-4-background{
    background-color: #E1EEEF;
}

.sec-4{
    margin-bottom: -2%;
}



/* Section 3 container */
.sec-4-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

/* Left side text container */
.sec-4-left {
    width: 40%;
    text-align: left;
    padding: 10px;
    margin-top: 2.5%;
    margin-left: 2.5%;
    color:  black;
}

.sec-4-left h1{
    font-size: 3.5em;
}

/* Circular Black Button Styles */

/* sec-2-button-container: container for positioning and alignment of the button */
.sec-4-button-container {
    margin-top: 2.5%;
}

/* sec-1-button: styles for the circular black button */
.sec-4-button {
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.sec-4-button-bio {
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.3s ease;
}


a{
    text-decoration: none;
}


.sec-4-btn-text{
    font-size: 1.5em;
    padding: 10px 20px;

}

/* Right side container */
.sec-4-right {
    width: 60%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
    margin-right: 2.5%;
}

/* Square styling */
.sec-4-square {
    background-color: #f0f0f0;
    padding: 20px;
    width: 90%;
    text-align: left;
    border: 1px solid #ccc;
    border-radius: 25px;
    margin-top: 2.5%;

}

.sec-4-square h1{
    color: #00ABFF;
}


.sec-4-square p{
    font-size: 1.2em;
}


/* section 4 ends */


/* section 4 optimization */

/* Media Query for 1920px screen size */
@media screen and (max-width: 1920px) {
    /* Add styles specific to 1920px screen size here */
}

/* Media Query for 1280px screen size */
@media screen and (max-width: 1280px) {
    /* Add styles specific to 1280px screen size here */
}

/* Media Query for 768px screen size */
@media screen and (max-width: 768px) {
    /* Add styles specific to 768px screen size here */

    .sec-4-left{
        margin-bottom: 10%;
    }

    .sec-4-right{
        margin-bottom: 10%;
    }
    .sec-4-container {
        flex-direction: column;
    }
    
    .sec-4-left{
        width: 100%;
    }

    .sec-4-right{
        width: 100%;
    }
}

/* Media Query for 375px screen size */
@media screen and (max-width: 375px) {
    /* Add styles specific to 375px screen size here */
    .sec-4-left h1,
    .sec-3-left h1 {
        font-size: 2.5em;
    }

    .sec-4-square,
    .sec-3-square {
        width: 100%;
    }

    .sec-4-square h1,
    .sec-3-square h1 {
        font-size: 1.5em;
    }

    .sec-4-square p,
    .sec-3-square p {
        font-size: 1em;
    }

    .sec-4-btn-text,
    .sec-1-btn-text {
        font-size: 1.2em;
        padding: 5px 10px;
    }
}




/* section 5 starts */

/* Container for section 5 content */
.sec-5{
    background-color: #00ABFF;
}
.sec-5-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px;
}

/* Left side text container */
.sec-5-left {
    width: 45%;
    text-align: left;
    font-size: 1.8em;
    color: white;
}

/* Right side text container */
.sec-5-right {
    width: 45%;
    text-align: left;
    color: white;
}

.sec-5-right h2{
  font-size: 1.5em;
}

.sec-5-right p{
    font-size: 1.5em;
}

  

/* section 5 ends */


/* section 5 moblie optimization */

/* Media Query for 1920px screen size */
@media screen and (max-width: 1920px) {
    /* Add styles specific to 1920px screen size here */
}

/* Media Query for 1280px screen size */
@media screen and (max-width: 1280px) {
    /* Add styles specific to 1280px screen size here */
}

/* Media Query for 768px screen size */
@media screen and (max-width: 768px) {
    /* Add styles specific to 768px screen size here */
    .sec-5-container {
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;

    }

    .sec-5-right {
        width: 100%;
    }

    .sec-5-left{
        width: 100%;
        margin-bottom: 10%;
    }
}


/* Media Query for 375px screen size */
@media screen and (max-width: 375px) {
    /* Add styles specific to 375px screen size here */
    .sec-5-left {
        font-size: 1.4em;
    }

    .sec-5-right h2,
    .sec-5-right p {
        font-size: 1.2em;
    }
}


/* section 5 moblie optimization */





.sec-2-button:hover {
    transform: scale(1.1);
}

.sec-2-button-2:hover{
    transform: scale(1.1);
}