.freelanceBanner { background-image: url('../../images/freelanceBannerBg.png'); }
.BtnNew { font-weight: 700; font-size: 19px; color: #FFFFFF; background-color: #03B080; border-radius: 10px; padding: 30px; border: 0; max-width: fit-content; }
.bannerLastHeading { font-weight: 700; font-size: 11px; color: #FFFFFF; }
.bannerLastSpan { font-weight: 400 !important; }
.calendarIcon { width: 15px; height: 14px; }
.locationIcon { width: 15px; height: 15px; }
.verifyTick { width: 14px; height: 14px; }
.freelanceSpan { position: relative; }
.freelanceSpan::after { content: ""; position: absolute; height: 13px; width: 13px; background: rgba(83, 73, 138, 0.5); border-radius: 50%; left: 2%; top: 24%; }
.freelanceProfileContainer { display: flex; align-items: flex-start; gap: 20px; padding: 32px; border: 1px solid #E0E0E0; box-shadow: 0px 2px 7px 0px #00000014; }
.freelanceProfile .getStartedBtn { font-size: 16px; padding: 12px 10px; }
.freelanceProfileContainer .freelanceProfile { flex: 0 0 152px; }
.freelanceProfileContainer .freelancerProfileImg { width: 100% !important; height: 100% !important; max-width: 100% !important; }
.freelanceAiContainer { display: grid; grid-template-columns: 1fr auto; gap: 61px; }
.freelanceAiLeftContainer { width: 100%; }
.freelanceAiRightContainer { width: 100%; max-width: 433px; }
.font12 { font-size: 12px; font-weight: 400; color: #AFAFAF; }
.verifiedProfileContainer { display: flex; align-items: center; gap: 5px; }
.color_lightGreen { color: #45C9A5 !important; }
.profileOptionsContainer { display: flex; align-items: flex-start; gap: 15px; }
.bulletContainer { height: 13px; width: 13px; background: rgba(9, 227, 16, 0.5); border-radius: 50%; }
.profileOption { display: flex; align-items: flex-start; gap: 8px; }
.profileOptionTxt { font-size: 10px; font-weight: 400; color: #000000; }
.freelancerSkill { font-weight: 400; font-size: 7px; color: #717171; padding: 5px 9px; border-radius: 30px; border: 0.5px solid #AFAFAF; }
.freelancerSkillsContainer { display: flex; gap: 5px; }
.freelanceAiHeading { font-weight: 700; font-size: 21px; color: #000000; border-bottom: 1px solid rgba(167, 167, 167, 0.2); }
.btnPrimary { font-weight: 700; font-size: 15px; background-color: #03B080; border-radius: 10px; padding: 10px 54px; color: #FFFFFF; border: none !important; }
.aiRightFirstContainer { padding: 26px; border: 1px solid #E0E0E0; box-shadow: 0px 2px 7px 0px #00000014; }
.showAnchor { font-size: 15px; font-weight: 700; color: #1F61E8; display: flex; align-items: center; justify-content: flex-start; }
.freelanceAiSection .slideOne { padding: 43px 38px; border: 0 !important; }
.freelanceAiSection .slideOne img { width: 43px !important; height: 34px !important; display: flex; align-items: center; justify-content: flex-start; }
.freelanceAiSection .fintechSliderLeftBtn { position: absolute; top: unset; bottom: -26%; left: 15px; }
.freelanceAiSection .fintechSliderRightBtn { position: absolute; top: unset; bottom: -26%; right: 15px; }
.freelanceAiSection .dot { display: inline-block; height: 9px; width: 9px; margin: 0 1px; background-color: #A4A4A4; border-radius: 50%; cursor: pointer; transition: background-color 0.3s ease; }
.freelanceAiSection .dot.active { background-color: #000000; }
.freelanceAiSection .dots { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; bottom: -15%; }
.aiEngineerContainer { padding: 90px 125px; background: #F3F4F6; border-radius: 29px; }
.fintechSliderLeftBtn, .fintechSliderRightBtn { height: 39px; width: 39px; display: flex; align-items: center; justify-content: center; background-color: #1F61E8 !important; border-radius: 50%; }
.fintechLeftArrow, .fintechRightArrow { height: 15px; width: 15px; }
.aiEngineerCount { height: 55px; width: 55px; border-radius: 50%; border: 1px solid #1D1068; display: flex; align-items: center; justify-content: center; }
.aiEngineerContainerOuter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; }
.aiEngineer { display: flex; flex-direction: column; align-items: center; position: relative; }
.aiEngLin1 { position: absolute; left: -20%; top: 14%; }
.aiEngLin2 { position: absolute; top: 13%; left: 57%; width: 100%; }
.aiEngLin3 { position: absolute; left: 57%; top: 14%; width: 100%; }
.aiEngLin4 { position: absolute; left: 57%; top: 15%; }
.secureEngContainer { display: grid; grid-template-columns: repeat(2, 1fr); gap: 90px; }
.secureEngSection .websiteAccordionBtns { display: flex; align-items: center; justify-content: space-between; margin-top: 30px; }
.pe-80 { padding-right: 80px; }
.secureEngSliderHeading { font-weight: 400; font-size: 11px; color: #8C8C8C; }
.secureEngSubHeading { font-weight: 700; font-size: 15px; color: #000000; }
.secureEngPara { font-size: 13px; font-weight: 400; color: #000000; }
.secureEngSection .webTestimonialContainer { display: grid; grid-template-columns: 1fr 1fr !important; gap: 120px; }
.secureEngSection .appDevBtns { width: 36px; height: 21px; }
.toptalContainer { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; align-items: flex-start; }
.toptalImgContainer { position: relative; width: 100%; }
.videoplay-btn { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: transparent; display: flex; align-items: center; justify-content: center; }
.videoplay-btn i { font-size: 100px; color: #fff; }
.font6 { font-weight: 400; font-size: 6px; color: #000000; }
.toptalBottomContainer { padding: 17px 23px; border-radius: 10px; background: #53498A1A; }
.borderR10 { border-radius: 10px !important; }
.uscImg { width: 56px; height: 18px; }
.quoteImg { width: 16px; height: 14px; }
.aiCapibilityHeader { display: flex; align-items: center; gap: 6px; }
.aiCapibilityContainer { display: grid; grid-template-columns: repeat(2, 1fr); }
.aiCapibilityLeft { padding: 40px 27px; border: 1px solid #A7A7A7; }
.aiCapibilityRight { padding: 40px 27px; border-right: 1px solid #A7A7A7; border-top: 1px solid #A7A7A7; border-bottom: 1px solid #A7A7A7; }
.aiCapabilityImg { height: 25px; width: 25px; }
.websiteTestimonialSection .slider { gap: 30px; }
.websiteTestimonialSection { position: relative !important; }
.websiteTestimonialSection.secureEngSection .slider-container { max-width: 100% !important; }
.websiteTestimonialSection .slider { gap: 30px !important; }
.websiteTestimonialSection.secureEngSection .wearableSlider_card { background-color: #FFFFFF !important; border-radius: 10px !important; padding: 24px 20px !important; }
.websiteTestimonialSection.secureEngSection .wearableSlider_card { min-width: 40% !important; min-height: unset !important; }
.fintechSlides, .fintechSlide { width: 100% !important; }
.pb-20 { padding-bottom: 20px !important; }
.ps-30 { padding-left: 30px !important; }
.freelanceBanner .BtnNew { font-size: 16px !important; padding: 18px !important; }
.secureEngSection .appDevBtns { background-color: transparent !important; }
.freelanceAiSection .getStartedBtn { width: 100%; min-width: 189px; padding: 14px 10px; }
.freelancerProfileImg { width: 100% !important; }
.btnPrimary { background-color: #03B080 !important; }
.aiEngLin1 { width: 254px; }
.aiEngLin4 { width: 248px; }
.freelanceAiSection .getStartedBtn { text-align: center; }
.secureEngSection .websiteAccordionBtns { margin-top: 0px !important; }
.appDevBtns:active { border-color: transparent important; }
.secureEngSection .appDevBtns { height: unset !important; width: unset !important; }
.appDevBtns:active, .appDevBtns:hover { border-color: transparent !important; }
.freelanceAiSection .fintechSliderLeftBtn { bottom: -18% !important; }
.freelanceAiSection .fintechSliderRightBtn { bottom: -18% !important; }
.fintechSliderLeftBtn, .fintechSliderRightBtn { height: 50px !important; width: 50px !important; padding: 0; }
.sliderBtn.fintechSliderLeftBtn:active, .sliderBtn.fintechSliderLeftBtn:hover, .sliderBtn.fintechSliderRightBtn:active, .sliderBtn.fintechSliderRightBtn:hover { border-color: transparent !important; }
.freelanceProfileContainer .freelanceProfile span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sticky-box { position: -webkit-sticky; position: sticky; top: 100px; }
.hire_popup_wrap { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 9999; }
.hire_popup_wrap .wrap { background: #fff; max-width: 700px; width: 100%; margin: 50px auto; border-radius: 8px; position: relative; }
.popup-row > .popup-content { padding: 30px; }
button.side_close { position: absolute; top: -20px; right: -20px; border-radius: 50%; width: 40px; height: 40px; padding: 0; background: #E21A27 !important; }
button.side_close:hover i { color: #fff; }
.testimonial-widget .slideOne .qoute_icon { text-align: left; }
.hirereviews { padding: 20px 26px; border-radius: 10px; background: #53498A1A; }
.video-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.popup-row > div { flex: 0 0 50%; }
.popup-img img { height: 100%; border-radius: 8px; object-fit: cover; }
.popup-content { position: relative; }
.popup-content iframe { width: 100%; height: 450px; border-radius: 8px; }
.close-popup, .close-popup:hover { position: absolute; top: -15px; right: -15px; background: #E21A27 !important; border: none; border-radius: 50%; padding: 5px 10px; cursor: pointer; width: 40px; height: 40px; color: #fff; }
.popup-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.review-slider .review-item { padding: 10px; text-align: center; }
.review-slider .review-img { max-width: 100px; max-height: 80px; object-fit: contain; margin: 0 auto; }
.hirereview-slider { display: flex; flex-wrap: wrap; gap: 30px; }
.freelanceAiRightContainer .subHeading16.black-txt { color: #000000 !important; }
.webTestimonialContent .font12.black-txt { color: #000000 !important; }
.profileOptionTxt p, .secureEngSubHeading p { color: #000000 !important; }
.slideOne h5.fw700, .slideOne .subHeading16.fw-400 { color: #000000 !important; }
.profileOptionsContainer .profileOptionTxt p { font-size: 15px !important; }
.freelanceAiRightContainer .slidernewOne.fintechslidernewOne { border-radius: 0px !important; border: 0.5px solid #E0E0E0 !important; }
@media(max-width:1600px) { .secureEngSection.ps-135.pe-80 { padding-right: 20px !important; } .aiEngLin1 { left: -11%; width: 53%; } .aiEngLin4 { width: 52%; } .secureEngSection.ps-135.pe-80 { padding-right: 20px !important; } .freelanceBanner .mainBannerHeadingContainer { margin-left: 0px !important; } }
@media(max-width:1440px) { .websiteTestimonialSection.ps-135 { padding-left: 35px; } .freelanceAiContainer { gap: 45px; } .aiEngineerContainerOuter { gap: 20px; } .aiEngLin1 { left: 0%; width: 42%; } .aiEngLin2 { width: 90%; } .aiEngLin3 { width: 90%; } .aiEngLin4 { width: 42%; } .secureEngSection .webTestimonialContainer { gap: 60px; } }
@media(max-width:1366px) { .freelanceAiContainer { gap: 25px; } .secureEngSection .webTestimonialContainer { grid-template-columns: 1fr 2fr !important; gap: 20px; } }
@media(max-width:1199px) { .freelanceAiSection .sliderArea { padding: 0px !important; } .freelanceSpan::after { top: 14%; } .freelanceAiSection .btnContainer { margin-top: 0px !important; } }
@media(max-width:1080px) { .freelanceAiSection .slideOne { padding: 30px 18px; } .aiEngLin3 { left: 59%; width: 87%; } .aiEngLin1 { left: -2%; } .aiEngLin2 { left: 60%; width: 87%; } .aiEngLin4 { left: 60%; } .secureEngSection .webTestimonialContainer { gap: 12px; } .secureEngSection .wearableSlider_card { min-width: 49% !important; min-height: unset !important; } .toptalContainer { gap: 17px; } .aiCapibilityLeft, .aiCapibilityRight { padding: 25px 22px; } .secureEngSection .wearableSlider_card { min-width: 49% !important; min-height: unset !important; } }
@media(max-width:991px) { .freelanceBanner .BtnNew { padding: 10px 14px !important; } .freelanceBanner .fontSize16.mb-50 { margin-bottom: 20px !important; } .freelanceProfileContent .profileOptionTxt.mb-30 { margin-bottom: 15px !important; } .toptalSection .paracommon.mb-50 { margin-bottom: 20px !important; } .toptalContainer { grid-template-columns: repeat(1, 1fr); } .freelanceAiRightContainer .slidernewOne.fintechslidernewOne { max-width: unset !important; } .freelanceAiSection .fintechSliderLeftBtn, .freelanceAiSection .fintechSliderRightBtn { bottom: -25% !important; } .freelanceProfileContainer { padding: 20px; } .aiEngineerContainer { padding: 55px 99px; } .secureEngSection .webTestimonialContainer { grid-template-columns: 1fr !important; } .secureEngSection .websiteAccordionBtns { margin-top: 0px !important; width: 93%; } .secureEngSection .websiteAccordionBtns { bottom: 8%; } .aiRightFirstContainer { padding: 14px; } .freelanceAiHeading { font-size: 17px; } .subHeading16 { font-size: 14px; } .freelanceAiContainer { gap: 20px; } .freelanceAiSection .dots { bottom: -17%; } .secureEngSection .paracommon.mb-30 { margin-bottom: 30px !important; } .aiCapibilitySection .heading24 { font-size: 19px; } .secureEngSection .websiteAccordionBtns { width: 99% !important; } .freelanceAiContainer { display: flex; flex-direction: column; } .freelanceAiRightContainer { max-width: 100%; } .freelancerSkillsContainer { flex-wrap: wrap; } .freelanceAiRightContainer .toptal-widget .heading16.mb-30 { margin-bottom: 20px !important; } }
@media(max-width:876px) { .aiEngineerContainerOuter { grid-template-columns: repeat(1, 1fr); } .aiEngLin1, .aiEngLin2, .aiEngLin3, .aiEngLin4 { display: none; } }
@media(max-width:767px) { .secureEngSubHeading br { display: block !important; } .secureEngSection .websiteAccordionBtns { bottom: 5%; } .toptalContainer { display: flex; flex-direction: column; grid-template-columns: repeat(1, 1fr); } .aiCapibilityLeft, .aiCapibilityRight { padding: 20px 15px; } .profileOptionsContainer { gap: 8px; } .aiEngineerSection .fontSize38 { font-size: 26px !important; } .bulletContainer { height: 9px; width: 12px; } .websiteTestimonialSection.secureEngSection .wearableSlider_card { min-width: 62% !important; min-height: unset !important; } }
@media(max-width:575px) { .webTestimonialContent .font12.mb-15 { margin-bottom: 10px !important; } .aiCapibilityContainer { grid-template-columns: repeat(1, 1fr); } .aiCapibilityRight { border-left: 1px solid #A7A7A7; border-top: unset !important; } .aiCapibilitySection .paracommon.mb-50 { margin-bottom: 20px !important; } .secureEngSection .wearableSlider_card { min-width: 100% !important; } .toptalSection .fontSize38 { font-size: 24px !important; } .freelanceProfileContainer { flex-wrap: wrap; } .freelanceAiSection .slideOne { padding: 30px 8px; } .aiEngineerContainer { padding: 40px; } .aiCapibilitySection .heading24 { font-size: 17px; } .secureEngSection .wearableSlider_card { min-width: 100% !important; } .websiteTestimonialSection.secureEngSection .wearableSlider_card { min-width: 98% !important; } .freelanceAiSection .btnContainer { justify-content: flex-start; } .freelanceAiSection .slidernewOne { max-width: unset !important; } .freelanceAiSection .aiEngineerContainer .btnContainer { justify-content: center; } .aiCapibilityContainer .aiCapabilityPoint.mb-60 { margin-bottom: 30px !important; } .freelanceAiSection .fintechSliderLeftBtn, .freelanceAiSection .fintechSliderRightBtn { bottom: -20% !important; } .freelanceAiSection .getStartedBtn { padding: 9px 6px !important; } .freelanceProfileContainer .freelanceProfile { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; } .profileOptionsContainer { display: block; } .profileOptionsContainer.mb-15 { margin-bottom: 10px !important; } .profileOptionsContainer .profileOption { margin-bottom: 6px; } .videoplay-btn i { font-size: 65px; } }