* {
  margin: 0;
  padding: 0;
  --primary-font: "Switzer", sans-serif;
  --secondary-font: "Raleway", sans-serif;
}
body {
  font-family: var(--primary-font);
  font-size: 16px;
  color: #000;
}
.container {
  max-width: 1400px;
}
.mobile-show {
  display: none;
}
.mobile-hide {
  display: block;
}
/*Header Section*/
.sagarContainer {
  background-image: url(../images/bac.png);
}
header .navbar-nav .nav-item {
  padding: 1rem;
}
header .navbar-nav .nav-link {
  text-transform: uppercase;
  color: #6b7280;
  font-weight: 700;
  font-family: var(--secondary-font);
}
/*header .navbar .btn-main,*/
.btn-main {
  background: #015aff;
  box-shadow: 0px 1px 2px 0px #0000000d;
  border: none;
  padding: 9px 17px;
  border-radius: 6px;
  color: #fff;
  font-family: var(--secondary-font);
  font-weight: 500;
}
.btn.btn-main:hover,
.btn.btn-main:active {
  background: #014ad2;
  color: #fff;
}
/*Banner Section*/
.bannerSection .title {
  font-family: var(--primary-font);
  font-weight: 500;
  font-size: 96px;
  line-height: 104px;
  text-transform: uppercase;
}
.t-style {
  font-style: italic;
  font-weight: 600;
}
.bannerSection .tagline {
  font-family: var(--primary-font);
  font-weight: 500;
  font-size: 18px;
  line-height: 23px;
}
.bannerSection .about {
  font-size: 18px;
}
.bannerSection .feedbackBox {
  background: #fff;
  border-radius: 6px;
  padding: 1rem;
  max-width: 200px;
  border: 1px solid #f0f1f2;
  position: relative;
  left: 10px;
  top: -15px;
}
.bannerSection .feedbackWrap {
  display: flex;
  justify-content: right;
}
.feedbackBox .clientTag {
  margin: 1rem 0;
  font-family: var(--secondary-font);
  font-weight: 400;
  font-size: 14px;
}
.feedbackBox .satRate {
  font-family: var(--secondary-font);
  font-weight: 300;
  font-size: 10px;
  background: #f7f7f7;
  padding: 0.8rem 0.3rem 0.8rem 1.2rem;
  border-radius: 18px;
}
.statusBoxWrap {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 2rem;
}
.statusBox h3 {
  font-family: var(--primary-font);
  font-weight: 500;
  font-size: 64px;
  line-height: 57px;
}
.statusBox p {
  font-family: var(--primary-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 27px;
}
.sagarInfoWrap {
  position: absolute;
  bottom: 0;
  margin-left: -25px;
  display: flex;
}
.sagarInfoWrap .sagarDesc {
  margin-top: 23%;
  margin-left: -3rem;
}
/*About Section*/
.aboutSection,
.workSection,
.serviceSection,
.activitySection,
.reviewSection {
  margin-top: 12rem;
}
.aboutSection .title,
.workSection .title,
.serviceSection .title {
  font-family: var(--primary-font);
  font-weight: 600;
  font-size: 23px;
  line-height: 27px;
  margin-bottom: 2rem;
  text-transform: uppercase;
}
.aboutSection .aboutInfo {
  font-family: var(--primary-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}
.aboutSection .aboutInfo h3 {
  font-size: 20px;
  margin: 2rem 0 1.5rem;
}
.aboutDesc h3 {
  font-family: var(--primary-font);
  font-weight: 550;
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 1.5rem;
}
.workExperience h3 {
  font-weight: 500;
}
.aboutDesc .aboutBtns {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.aboutBtns .btn-sec {
  border: none;
}
.aboutDesc .line {
  margin: 1.5rem 0;
  border-top: 0.5px solid #888a8c;
}
.workExperience .experienceBox {
  border: 0.5px solid #d2d3d4;
  border-radius: 6px;
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0;
}
.experienceBox .companyInfo {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.experienceBox .companyInfo h3 {
  font-family: var(--secondary-font);
  font-weight: 550;
  font-size: 20px;
  line-height: 24px;
  margin-bottom: 2px;
}
.experienceBox .companyInfo p {
  font-size: 14px;
}
/* Work Section*/
.workSection .desc,
.serviceSection .desc {
  font-size: 20px;
}
.workSection .workBox {
  border: 1px solid #eaeaea;
  border-radius: 6px;
  padding: 1.5rem;
  background: #f7f7f7;
  margin: 1rem 0 2rem;
}
.workBox .workImg {
  border: 1px solid #eaeaea;
  border-radius: 8px;
}
.workBox .w-title {
  font-family: var(--primary-font);
  font-weight: 500;
  font-size: 16px;
  margin: 1.5rem 0 0.5rem;
}
.workBox .w-tag {
  font-family: var(--primary-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 27px;
}
.workBox .workTagWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.workBox .btn-more {
  background: #fff;
  padding: 1rem;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.workBox .btn-more i {
  rotate: -45deg;
}
.workBox .w-info {
  font-family: var(--primary-font);
  font-weight: 300;
  font-size: 12px;
  line-height: 19px;
}
.workSection .viewMore .btn-more {
  font-family: var(--secondary-font);
  font-size: 16px;
  padding: 0.5rem 1.5rem;
  border: 1px solid #eaeaea;
  box-shadow: 0px 1px 2px 0px #0000000d;
  background: #f7f7f7;
}

/*Service Section*/
.serviceSection .serviceBox .serviceInfoWrap {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
}
.serviceSection .serviceBox {
  border-bottom: 0.5px solid #888a8c;
  margin-bottom: 1rem;
  padding: 1.5rem 0;
}
.serviceSection .serviceBox:last-child {
  border-bottom: none;
}
.serviceSection .serviceBox .serviceInfo {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
.serviceSection .serviceBox .serviceInfo h3 {
  font-family: var(--secondary-font);
  font-weight: 400;
  font-size: 24px;
  line-height: 31px;
}
.serviceContent p,
.serviceContent ul li {
  font-family: var(--secondary-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 27px;
}
.serviceContent ul {
  padding-left: 1rem;
  margin: 0;
}
/*Activities Section*/
.activitySection .activityInfo .title {
  font-family: var(--primary-font);
  font-weight: 500;
  font-size: 20px;
  line-height: 31px;
}
.activitySection .activityInfo .content {
  font-family: var(--primary-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 31px;
}
.activitySection .statusBoxWrap {
  margin-top: 2.5rem;
}
.companyContributed {
  display: flex;
  gap: 15px;
  margin: 2.5rem 0;
  flex-wrap: wrap;
}
/* Review Section*/
.reviewSection {
  background: #f7f7f7;
  padding: 7rem 0;
}
.reviewSection .title {
  font-family: var(--primary-font);
  font-weight: 600;
  font-size: 23px;
  line-height: 27px;
  text-transform: uppercase;
}
.reviewSection .btn-main {
  margin-top: 10px;
}
.reviewSection .reviewList {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.reviewSection .reviewBox {
  background: #fff;
  box-shadow: 0px 4px 22px 0px #00000005;
  border-radius: 20px;
  max-width: 380px;
}
.reviewSection .reviewBox .boxWrap {
  padding: 2rem;
}
.reviewSection .reviewBox h3 {
  font-family: var(--primary-font);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  margin: 2rem 0 5rem;
}
.reviewBox .p-box {
  display: flex;
  gap: 15px;
  background-color: #f7f7f7;
  padding: 1rem 2rem 1rem 0;
  width: fit-content;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 0px 20px 0px 0px;
}
.reviewBox .p-box .p-name {
  font-family: var(--primary-font);
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
}
.reviewBox .p-box .p-des {
  font-family: var(--primary-font);
  font-weight: 500;
  font-size: 12px;
  line-height: 24px;
  color: #6b7280;
}
/*Footer*/
.footer {
  background-color: #000;
  padding: 4rem 0;
  border-radius: 3rem 3rem 0rem 0;
  color: #fff;
}
.footer .footerLogo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
.footer .footerLogo .p-name {
  font-family: var(--primary-font);
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  text-transform: uppercase;
  color: #fff;
}
.footer .footerLogo .p-designation {
  font-family: var(--primary-font);
  font-weight: 300;
  font-size: 16px;
  line-height: 27px;
  text-transform: capitalize;
}
.footerInfo h3 {
  font-family: var(--primary-font);
  font-weight: 300;
  font-size: 64px;
  line-height: 50px;
  margin-bottom: 20px;
}
.footerInfo p {
  font-family: var(--primary-font);
  font-weight: 300;
  font-size: 16px;
  line-height: 27px;
}
.footer .p-info h3 {
  font-family: var(--primary-font);
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  text-transform: uppercase;
}
.footer .p-wrap {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}
.footer .p-info p {
  font-family: var(--primary-font);
  font-weight: 300;
  font-size: 16px;
  line-height: 27px;
}
.socialIcons {
  display: flex;
  gap: 15px;
}
.socialIcons .socialList {
  border: 1px solid #eaeaea;
  background: #fff;
  border-radius: 50%;
  padding: 10px 15px;
  width: fit-content;
}
/*About Page*/
.pageSection {
  margin: 3rem 0 7rem;
}
.aboutPage .aboutImg {
  margin: 0 2rem  ;
}
.aboutPage .title {
  font-family: var(--primary-font);
  font-weight: 600;
  font-size: 36px;
  line-height: 27px;
  margin-bottom: 3rem;
}
.aboutPage .info {
  font-family: var(--primary-font);
  font-weight: 500;
  font-size: 24px;
  line-height: 38px;
}
.award .title {
  font-family: var(--primary-font);
  font-weight: 600;
  font-size: 23px;
  line-height: 27px;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 0.5px solid #888a8c;
}
.award ul {
  list-style: none;
  padding-left: 0;
}
.award ul li {
  font-family: var(--primary-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 32px;
}
.aboutSidebar {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;
  padding: 3rem 0;
}
.page .taglist {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.taglist .tag {
  font-family: var(--secondary-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  border: 0.5px solid #888a8c;
  padding: 5px 12px;
  width: fit-content;
  border-radius: 6px;
}
.aboutPage .aboutWrap {
  padding: 3rem 0;
  background: #f8f9fa;
  margin: 5rem 0;
}
.aboutPage .shortIntro {
  margin-bottom: 4rem;
  font-family: var(--primary-font);
  font-weight: 400;
  font-size: 20px;
  line-height: 31px;
  letter-spacing: 0%;
}
.aboutPage .toolsUsed .title {
  font-family: var(--primary-font);
  font-weight: 400;
  font-size: 20px;
  line-height: 31px;
  margin-bottom: 1.5rem;
}
.toolsUsed .toolList {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.toolsUsed .toolList .tool {
  box-shadow: 0px 1px 4px 0px #00000005;
  background: #ffffff;
  border-radius: 8px;
  padding: 10px 15px;
}
.about .title {
  font-family: var(--primary-font);
  font-weight: 600;
  font-size: 23px;
  line-height: 27px;
}
.about .desc {
  font-family: var(--secondary-font);
  font-weight: 400;
  font-size: 20px;
  margin-bottom: 2rem;
}
.photography {
  margin: 7rem 0;
}
.photography img {
  object-fit: cover;
}

/*Work Page*/
.workPage {
  margin-bottom: 7rem;
}
.workPage .p-tag {
  margin-top: 1rem;
  font-family: var(--secondary-font);
  font-weight: 400;
  font-size: 20px;
}
.workPage .p-title {
  font-family: var(--primary-font);
  font-weight: 600;
  font-size: 36px;
  line-height: 31px;
  margin: 0.5rem 0 0;
}
.workPage .projectImg {
  padding: 0 1.5rem;
  background: #f7f7f7;
  border-radius: 8px;
  margin: 2rem 0 1rem;
}
.workPage .projectImg img {
  border: 1px solid #eaeaea;
  border-radius: 8px;
}
.workPage .tag {
  display: flex;
  align-items: center;
  justify-content: center;
}
.workPage .websiteInfo {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
}
.workPage .projectOverview {
  margin: 2rem 0;
}
.projectOverview .heading {
  font-family: var(--secondary-font);
  font-weight: 400;
  font-size: 32px;
  line-height: 24px;
  margin-bottom: 1.5rem;
}
.projectOverview p {
  font-family: var(--primary-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 168%;
}
.workPage .projectImages {
  padding: 0 2rem;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  background: #f7f7f7;
}
.workPage .projectImages img {
  border: 1px solid #eaeaea;
}
.workPage .projectOverview ul li {
  font-family: var(--primary-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 204%;
  letter-spacing: 0%;
}
/*Contact Page*/
.contactSection {
  margin-bottom: 7rem;
}
.contactSection .title {
  font-family: var(--primary-font);
  font-weight: 600;
  font-size: 36px;
  line-height: 27px;
  margin: 2rem 0;
}
.contactSection .info {
  font-family: var(--primary-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 29px;
  margin-bottom: 2rem;
}
.contactSection input,
.contactSection textarea {
  width: 100%;
  box-shadow: 0px 1px 2px 0px #0000000d;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 30px;
  outline: none;
}
.contactSection .form-group {
  margin-bottom: 1rem;
}
.contactSection .contactInfo {
  padding: 3rem;
  background: #f7f7f7;
}
.contactSection .contactForm {
  padding-right: 2rem;
}
.contactSection .contactInfo .desc {
  font-family: var(--primary-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 29px;
}
.contactDetails .title {
  font-family: var(--primary-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 29px;
  margin-bottom: 0.4rem;
}
.contactDetails .info {
  font-family: var(--primary-font);
  font-weight: 600;
  font-size: 28px;
  line-height: 29px;
  word-break: break-all;
}
.contactSection .input-icon {
  position: absolute;
  top: 20px;
  left: 12px;
  transform: translateY(-50%);
  color: #aaa;
  pointer-events: none;
  font-size: 14px;
}

.contactSection .form-control {
  padding-left: 30px;
}
.flexCenter {
  display: flex;
  align-items: center;
}