/*** font ***/
@font-face {
  font-family: 'Rubik-Regular';
  src: url("../fonts/Rubik/Rubik-Regular.ttf");
  font-style: normal;
  font-weight: 400; }

@font-face {
  font-family: 'Rubik-Italic';
  src: url("../fonts/Rubik/Rubik-Italic.ttf");
  font-style: italic;
  font-weight: 400; }

@font-face {
  font-family: 'Rubik-Medium';
  src: url("../fonts/Rubik/Rubik-Medium.ttf");
  font-style: normal;
  font-weight: 500; }

@font-face {
  font-family: 'Rubik-Bold';
  src: url("../fonts/Rubik/Rubik-Bold.ttf");
  font-style: normal;
  font-weight: 700; }

@font-face {
  font-family: 'SourceSansPro-Bold';
  src: url("../fonts/Source-Sans-Pro/SourceSansPro-Bold.ttf");
  font-style: normal;
  font-weight: 600; }

@font-face {
  font-family: 'SourceSansPro-Regular';
  src: url("../fonts/Source-Sans-Pro/SourceSansPro-Regular.ttf");
  font-style: normal;
  font-weight: 400; }

@font-face {
  font-family: 'SourceSansPro-Light';
  src: url("../fonts/Source-Sans-Pro/SourceSansPro-Light.ttf");
  font-style: normal;
  font-weight: 300; }

@font-face {
  font-family: 'SourceSansPro-italic';
  src: url("../fonts/Source-Sans-Pro/SourceSansPro-Italic.ttf");
  font-style: italic;
  font-weight: 400; }

/*** font ***/
/*** BANNER ***/
.front-end-web-dev-banner .banner-info-container {
  padding-top: 175px;
  padding-bottom: 154px; }

.front-end-web-dev-banner .banner-title {
  font-size: 52px; }

/*** BANNER ***/
/*** WHAT IS FRONT END DEVELOPMENT ***/
.what-is-front-end-development {
  padding-top: 130px;
  padding-bottom: 65px; }
  .what-is-front-end-development .section-title .shadow-title-section {
    white-space: nowrap;
    width: 100%;
    overflow: hidden; }
  .what-is-front-end-development .what-is-front-end-development-content-container {
    margin-top: 40px; }
    .what-is-front-end-development .what-is-front-end-development-content-container p {
      font-family: "SourceSansPro-Regular";
      font-style: normal;
      font-weight: normal;
      font-size: 18px;
      line-height: 160%;
      color: #515151;
      margin-bottom: 10px; }
      .what-is-front-end-development .what-is-front-end-development-content-container p b {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 25px; }
  .what-is-front-end-development .what-is-front-end-development-img-container {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start; }
    .what-is-front-end-development .what-is-front-end-development-img-container img {
      max-width: 255px;
      width: 100%; }

/*** WHAT IS FRONT END DEVELOPMENT ***/
/*** TOOLS WE USE ***/
.tools-we-use {
  padding-top: 137px;
  padding-bottom: 65px;
  background: #F6FCFE; }
  .tools-we-use .section-title .shadow-title-section {
    color: #ffffff;
    white-space: nowrap;
    width: 100%;
    overflow: hidden; }
  .tools-we-use .tools-subtitle {
    font-family: "SourceSansPro-Regular";
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 160%;
    text-align: center;
    color: #515151;
    margin-bottom: 60px; }
  .tools-we-use .tools-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center; }
    .tools-we-use .tools-card .tools-card-img-container {
      width: 58px;
      height: 65px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px; }
      .tools-we-use .tools-card .tools-card-img-container img {
        max-width: 58px;
        width: 100%; }
    .tools-we-use .tools-card .tools-card-content {
      font-family: "Rubik-Regular";
      font-style: normal;
      font-weight: normal;
      font-size: 18px;
      line-height: 137%;
      text-align: center;
      color: #515151; }

/*** TOOLS WE USE ***/
/*** MUST HAVE SKILLS ***/
.must-have-skills-section {
  padding-top: 130px;
  padding-bottom: 65px; }
  .must-have-skills-section .section-title .shadow-title-section {
    white-space: nowrap;
    width: 100%;
    overflow: hidden; }
  .must-have-skills-section .section-subtitle {
    text-align: left;
    margin-bottom: 40px; }

/*** MUST HAVE SKILLS ***/
/*** Front-End Development Company ***/
.front-end-development-company {
  padding-top: 127px;
  padding-bottom: 65px;
  background: #F6FCFE; }
  .front-end-development-company .section-title .shadow-title-section {
    color: #ffffff;
    white-space: nowrap;
    width: 100%;
    overflow: hidden; }
  .front-end-development-company .front-end-development-company-text-content h2, .front-end-development-company .front-end-development-company-text-content h3, .front-end-development-company .front-end-development-company-text-content h4, .front-end-development-company .front-end-development-company-text-content h5, .front-end-development-company .front-end-development-company-text-content h6 {
    font-family: "SourceSansPro-Regular";
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 160%;
    text-transform: uppercase;
    color: #515151;
    margin-bottom: 10px; }
  .front-end-development-company .front-end-development-company-text-content p {
    font-family: "SourceSansPro-Regular";
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 160%;
    color: #515151;
    margin-bottom: 20px; }
    .front-end-development-company .front-end-development-company-text-content p:last-child {
      margin-bottom: 0; }
    .front-end-development-company .front-end-development-company-text-content p b {
      font-size: 20px; }
  .front-end-development-company .front-end-development-company-img-content {
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 45px;
    padding-left: 20px; }
    .front-end-development-company .front-end-development-company-img-content img {
      max-width: 285px;
      width: 100%; }

/*** Front-End Development Company ***/
/*** Front-End Why Us Section ***/
.front-end-why-us-section {
  padding-top: 130px;
  padding-bottom: 65px; }
  .front-end-why-us-section .section-title .shadow-title-section {
    white-space: nowrap;
    width: 100%;
    overflow: hidden; }
  .front-end-why-us-section .front-end-why-us-img-content {
    display: flex;
    justify-content: center;
    align-items: center; }
    .front-end-why-us-section .front-end-why-us-img-content img {
      max-width: 350px;
      width: 100%; }
  .front-end-why-us-section .front-end-why-us-text-content {
    padding-top: 10px; }
    .front-end-why-us-section .front-end-why-us-text-content h2, .front-end-why-us-section .front-end-why-us-text-content h3, .front-end-why-us-section .front-end-why-us-text-content h4, .front-end-why-us-section .front-end-why-us-text-content h5, .front-end-why-us-section .front-end-why-us-text-content h6 {
      font-family: "SourceSansPro-Regular";
      font-style: normal;
      font-weight: 600;
      font-size: 20px;
      line-height: 160%;
      text-transform: uppercase;
      color: #515151;
      margin-bottom: 10px; }
    .front-end-why-us-section .front-end-why-us-text-content p {
      font-family: "SourceSansPro-Regular";
      font-style: normal;
      font-weight: normal;
      font-size: 18px;
      line-height: 160%;
      color: #515151;
      margin-bottom: 20px; }
      .front-end-why-us-section .front-end-why-us-text-content p:last-child {
        margin-bottom: 0; }
      .front-end-why-us-section .front-end-why-us-text-content p b {
        font-size: 20px; }

/*** Front-End Why Us Section ***/
/*** What Do We Provide Section ***/
.what-do-we-provide-section {
  padding-top: 130px;
  padding-bottom: 65px;
  background: #F6FCFE; }
  .what-do-we-provide-section .section-title .shadow-title-section {
    color: #ffffff;
    white-space: nowrap;
    width: 100%;
    overflow: hidden; }
  .what-do-we-provide-section .what-do-we-provide-text-content h2, .what-do-we-provide-section .what-do-we-provide-text-content h3, .what-do-we-provide-section .what-do-we-provide-text-content h4, .what-do-we-provide-section .what-do-we-provide-text-content h5, .what-do-we-provide-section .what-do-we-provide-text-content h6 {
    font-family: "SourceSansPro-Regular";
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 160%;
    text-transform: uppercase;
    color: #515151;
    margin-bottom: 25px; }
  .what-do-we-provide-section .what-do-we-provide-text-content p {
    font-family: "SourceSansPro-Regular";
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 160%;
    color: #515151;
    margin-bottom: 20px; }
    .what-do-we-provide-section .what-do-we-provide-text-content p:last-child {
      margin-bottom: 0; }
    .what-do-we-provide-section .what-do-we-provide-text-content p b {
      font-size: 20px; }
  .what-do-we-provide-section .what-do-we-provide-img-content {
    padding-top: 75px;
    display: flex;
    justify-content: flex-end;
    align-items: center; }
    .what-do-we-provide-section .what-do-we-provide-img-content img {
      max-width: 285px;
      width: 100%; }
  .what-do-we-provide-section .provide-card-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 35px; }
    .what-do-we-provide-section .provide-card-container .provide-card-icon-box {
      width: 50px;
      height: 50px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin-right: 25px; }
      .what-do-we-provide-section .provide-card-container .provide-card-icon-box img {
        width: 50px;
        height: 50px; }
    .what-do-we-provide-section .provide-card-container .provide-card-content p {
      font-family: "SourceSansPro-Regular";
      font-style: normal;
      font-weight: normal;
      font-size: 16px;
      line-height: 137%;
      color: #515151;
      margin-bottom: 0; }
  .what-do-we-provide-section .what-do-we-provide-infotitke {
    margin-bottom: 50px !important; }
  .what-do-we-provide-section .what-do-we-provide-info-text {
    margin-top: 25px;
    font-family: "SourceSansPro-Regular";
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 160%;
    color: #515151; }

/*** What Do We Provide Section ***/