:root{ --white:#FFFFFF; --black:#000000; /* Primary */ --primary-orange:#EB5F14; --common-bg:#F8FAFC; --primary-light:#FBDFD0; /* Gray */ --gray-0:#050506; --gray-20:#2F3237; --gray-30:#464B53; --gray-40:#5E646E; --gray-60:#9197A1; --gray-80:#C8CBD0; --gray-95:#F1F2F3; --gray-99:#FCFCFD; } * {margin: 0px; padding: 0px; box-sizing: border-box;transition: all ease-in-out 0.25s;} *:focus, *:active, *:visited, *:hover {text-decoration: none;outline: none;box-shadow: none;} html {scroll-behavior: smooth;} body {font-family:'DM Sans';font-size: 22px; line-height: 30px;} img {border: 0px; max-width: 100%;width: 100%;height: auto;transition: all ease-in-out 0.25s;} ul,ol {list-style: none;} a {text-decoration: none; outline: none;transition: all ease-in-out 0.25s;} /* ..................................... Typography ..................................... */ h1 {font-size: 62px; line-height: 86px;margin: 0;font-weight: 700} h2 {font-size: 48px; line-height: 68px;margin: 0;font-weight: 700} h3 {font-size: 44px; line-height: 62px;margin: 0;font-weight: 700} h4 {font-size: 28px; line-height: 40px;margin: 0;font-weight: 700} h5 {font-size: 24px; line-height: 34px;margin: 0;font-weight: 600} /* h6 {font-size: ; line-height: ;margin: 0;} */ p {font-size: 22px; line-height: 30px;margin: 0;font-weight: 400} p.lg {font-size: 20px;line-height: 28px;font-weight: 400} p.md {font-size: 18px;line-height: 26px;font-weight: 500} p.base {font-size: 16px;line-height: 24px;font-weight: 400} small {font-size: 14px;line-height: 20px;margin: 0;font-weight: 500} /* ..................................... Typography Ends ..................................... */ /*...................................... Common ....................................... */ /* Buttons */ .btn {padding: 12px 16px;border-radius: 12px;display: flex;align-items: center;justify-content: center;gap: 10px;border: 1px solid var(--primary-orange);background:var(--primary-orange);color: var(--gray-99);font-family: 'Roboto';font-size: 16px;line-height: 24px;transition: all ease-in-out 0.15s;text-transform: capitalize;} .btn:hover {color: var(--primary-orange);background: var(--white);border-color: var(--primary-orange);} .white-btn {background: var(--white);color: var(--gray-0);border-color: var(--gray-0);} .white-btn:hover {color: var(--gray-99);background: var(--gray-0);border-color: var(--gray-0);} .secondary-btn {background: var(--white);color: var(--primary-orange);border-color: var(--primary-orange);} .secondary-btn:hover {color: var(--gray-99);background: var(--primary-orange);} /* button:hover {} */ input, textarea {padding: 20px;border: 1px solid var(--gray-60);width: 100%;font-size: 16px;line-height: 22px;border-radius: 12px;transition: all ease-in-out 0.15s;color: var(--gray-20);letter-spacing: 2px;line-height: 1;} textarea {min-height: 150px;} .input-wrapper {line-height: 0;display: flex;flex-direction: column;gap: 8px;} .error-message {color: red;display: none;} input:focus, textarea:focus {border-color: var(--primary-orange);} /* input::-ms-input-placeholder, textarea::-ms-input-placeholder {} input::placeholder, textarea::placeholder {} */ textarea::-webkit-resizer {display: none;} .container {width: 100%;} .common-section-spacing {padding: 120px 0;} .font-sec {font-family: "Roboto";} /* */ /* back to top */ #back-to-top {display: inline-block;background-color: var(--primary-orange) ;width: 50px;height: 50px;text-align: center;border-radius: 8px;position: fixed;bottom: 30px;right: 30px;transition: background-color .3s, opacity .5s, visibility .5s;opacity: 0;visibility: hidden;z-index: 1000;font-size: 20px;border: 1px solid var(--primary-orange);} #back-to-top::after {content:"";line-height: 50px;color: white;} #back-to-top i {color: #F2F2F2;} #back-to-top:hover i {color: var(--primary-orange);} #back-to-top:hover {cursor: pointer;font-size: 20px;background: var(--white);} #back-to-top:active {background-color:transparent;} #back-to-top.show {opacity: 1;visibility: visible;} /*...................................... Common Ends ....................................... */ /*...................................... Header ....................................... */ .brand-logo {display: inline-block;flex-shrink: 0;} .brand-logo img {max-width: 198px;max-height: 56px;} .navbar {padding: 22px 32px;display: flex;align-items: center;justify-content: space-between;border: 1px solid var(--gray-95);max-width: 1630px;margin: 0 auto;top: 20px;box-shadow: 0px 4px 70px 0px #00000014;background: var(--white);border-radius: 36px;transition: all ease-in-out 0.15s;gap: 20px;} .navbar:hover {border-color: var(--primary-orange);} .btn img {width: 20px;aspect-ratio: 1;transition: all ease-in-out 0.15s;} .btn:hover img {filter: invert(1);} .header-button-container {display: flex;align-items: center;gap: 8px;} .header-button-container i {display: none;} .nav-links-container {display: flex;align-items: center;gap: 36px;justify-content: center;} .nav-link {color: var(--gray-0);transition: all ease-in-out 0.15s;font-size: 20px;line-height: 28px;position: relative;} .nav-link::after {content: '';position: absolute;left: 50%;bottom: -8px;width: 0%;height: 2px;background: var(--primary-orange);border-radius: 2px;transform: translateX(-50%);transition: all ease-in-out 0.15s;} .nav-link:hover {color: var(--primary-orange);} .nav-link:hover::after {width: 100%;} .dropdown-menu {background: var(--white);border: 1px solid var(--gray-95);padding: 12px 24px;width: fit-content;} .dropdown-menu a {font-size: 14px;line-height: 22px;color: var(--gray-0);transition: all ease-in-out 0.15s;} .dropdown-menu a:hover {color: var(--primary-orange);} .dropdown-menu.show {display: flex;flex-direction: column;text-align: center;align-items: center;justify-content: center;gap: 24px;} .navbar-right {display: flex;align-items: center;justify-content: space-between;gap: 20px;flex-grow: 1;} .nav-right-link-container {flex: 1;} .navbar-toggler {background: transparent;border: none;padding: 4px;} .navbar-toggler:focus {box-shadow: none;} /*...................................... Header Ends ....................................... */ /*...................................... Hero Section ....................................... */ .hero-section {padding: 240px 0 150px;position: relative;} .hero-section-content {display: flex;flex-direction: column;gap: 32px;max-width: 769px;} .hero-section-content p {color: var(--gray-30);} .hero-section-content h1 {color: var(--black);} .hero-section-content h1 span {color: var(--primary-orange);} .banner-image {position: absolute;right: 0;top: 134px;z-index: -1;max-width: 911px;} /*...................................... Hero Section Ends ....................................... */ /*...................................... About Section ....................................... */ .about-section {background: var(--common-bg);} .about-content {margin-top: 32px;display: flex;flex-direction: column;gap: 24px;} .about-content p {color: var(--gray-20);} .about-content h3 {color: var(--gray-0);} .about-left {max-width: 770px;} .about-right {max-width: 673px;overflow: hidden;border-radius: 20px;} .about-right img {width: 100%;aspect-ratio: 1.31 / 1;transition: all ease-in-out 0.15s;object-fit: cover;} .about-right:hover img {transform: scale(1.15);} .about-container {display:flex;align-items: center;justify-content: space-between;gap: 80px;} /*...................................... About Section Ends ....................................... */ /*...................................... Tab Section ....................................... */ /* */ .tab-container {display: flex;gap: 180px;align-items: end;} .tab-left {max-width: 770px;} .tab-right {max-width: 595px;flex-grow: 1;background: url(../images/home/achive-bg.png);padding: 50px 94px 0;background-position: bottom;border-radius: 24px;background-repeat: no-repeat;background-size: cover;} /* .tab-right img {width: 408px;aspect-ratio: 0.47 / 1;} */ .tab-left h3 {color: var(--gray-0);} .tab-left p.tab-desc {color: var(--gray-20);margin: 23px 0 52px;} .tab-navigation {} .tab-navigation h4 {margin-bottom: 32px;color: var(--gray-0);} .tab-navigation-container {display: flex;flex-direction: column;gap: 8px;} .tab-button {background: var(--white);padding-bottom: 8px;border: none;border-bottom: 1px solid var(--gray-80);text-align: left;} .tab-button:last-child {border: none;padding: 0;} .tab-button-content {padding: 28px;background: var(--white);display: flex;align-items: center;gap: 18px;transition: all ease-in-out 0.15s;border: 1px solid var(--white);} .tab-button-content:hover {background: var(--common-bg);border-color: var(--primary-orange);} .tab-button.active .tab-button-content {background: var(--common-bg);border-color: var(--common-bg);} .tab-button-image {border: 1px solid var(--white);} .tab-button-content:hover .tab-button-image {border-color: var(--primary-orange);} .tab-button-image img {width: 76px;aspect-ratio: 1;} .tab-button-right {display: flex;flex-direction: column;gap: 8px;} .tab-button-right h5 {color: var(--gray-20);font-weight: 600;text-transform: capitalize;} .tab-button-right p {color: var(--gray-40);font-weight: 500;} /*...................................... Tab Section Ends ....................................... */ /*...................................... Benefit Section ....................................... */ .benefit-section {background: var(--common-bg);} .benefit-container {} .benefit-container .benefit-section-header {color: var(--gray-0);max-width: 1302px;margin: 0 auto 63px;} .benefit-card-container {} .benefit-card-container .row {row-gap: 32px; } .benefit-card {padding: 28px;background: var(--white);border: 1px solid var(--gray-95);box-shadow: 0px 0px 16px 0px #6994BF1F;height: 100%;transition: all ease-in-out 0.15s;border-radius: 24px;} .benefit-card-img {width: 76px;aspect-ratio: 1;border: 1px solid var(--white);transition: all ease-in-out 0.15s;} .benefit-card:hover {border-color: var(--primary-orange);} .benefit-card:hover .benefit-card-img {border-color: var(--primary-orange);} .benefit-card-header {margin: 28px 0 10px;} .benefit-card-header h5 {color: var(--gray-20);font-weight: 600;} .benefit-card-data p {color: var(--gray-40);font-weight: 500;} /*...................................... Benefit Section Ends ....................................... */ /*...................................... Testimonial Section ....................................... */ .slider-section {overflow: hidden;} .slider-section-container {display: flex;align-items: center;gap: 28px;} .slider-container-left {max-width: 501px;flex-shrink: 0;} .slider-container-left h3 {color: var(--black);margin-bottom: 24px;} .slider-container-left h3 span {color: var(--primary-orange);} .slider-container-left p {color: var(--gray-20);} .slider-container .slick-slide {padding-right: 24px;} .slider-container .slick-list {overflow: visible;} .slider-container-right {width: calc(100% );} .slider-container {overflow: hidden;} .user-image {width: 64px;aspect-ratio: 1;} .slider-card {padding: 40px 28px;border: 1px solid var(--gray-60);border-radius: 24px;width: 400px;height: 424px;position: relative;transition: all ease-in-out 0.15s;overflow: hidden;} .slider-card:hover {border-color: var(--primary-orange);} .user-info {display: flex;align-items: center;gap: 12px;position: absolute;bottom: 40px;left: 28px;} .video-thumbnail {position: absolute;left: 0;top: 0;width: 100%;height: 100%;} .rating-star-container {display: flex;align-items: center;gap: 4px;} .rating-star-container img {width: 32px;aspect-ratio: 1;} .user-testimony {margin: 20px 0;color: var(--gray-40);} .user-data p {color: var(--gray-0);font-weight: 600;} .slider-video-card {padding: 0;} .video-div {width: 100%;z-index: -1;position: relative;height: 100%;} .slider-video-card video {width: 100%;height: 100%;object-fit: cover;} .slider-video-card.video-active .video-div {z-index: 1;} .slider-video-card .user-data p {color: var(--gray-99);} .user-data small {color: var(--primary-orange);font-weight: 500;} .play-icon {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);border: none;box-shadow: 0px 4px 14px 0px #0000001A;backdrop-filter: blur(4px);background: rgba(255, 255, 255, 0.1);padding: 12px;border-radius: 50%;} .slick-prev, .slick-next {z-index: 10;background: black;} .slider-button-container {display: flex;align-items: center;gap: 32px;margin-top: 56px;} .custom-slider-button {width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;background: var(--primary-orange);border-radius: 50%;border: none;transition: all ease-in-out 0.15s;} .custom-slider-button:focus, .custom-slider-button:active {background: var(--primary-orange);} .custom-slider-button img {width: 24px;aspect-ratio: 1;} /*...................................... Testimonial Section Ends ....................................... */ /*...................................... Blog Section ....................................... */ .blog-section {background: var(--common-bg);} h3 span {color: var(--primary-orange);} .blog-header-container {max-width: 1302px;margin: 0 auto;margin-bottom: 64px;display: flex;flex-direction: column;gap: 32px;} .blog-header-container p {color: var(--gray-20);} .blog-card-container .row {row-gap: 20px;} .blog-card {border-radius: 24px;overflow: hidden;height: 100%;display: flex;flex-direction: column;} .blog-image {border-radius: 24px 24px 0 0 ;overflow: hidden;width: 100%;} .blog-image img {width: 100%;aspect-ratio: 1.48 / 1;object-fit: cover;object-position: center;transition: all ease-in-out 0.15s;} .blog-body {padding: 24px;background: var(--white);flex-grow: 1;} .blog-card:hover .blog-image img {transform: scale(1.15);} .blog-date {color: var(--primary-orange);font-weight: 500;} .blog-header {color: var(--gray-0);margin: 4px 0 16px;} .blog-desc {color: var(--gray-20);font-weight: 400;} .blog-card-container button {margin: 32px auto 0;} /*...................................... Blog Section Ends ....................................... */ /*...................................... Contact Section ....................................... */ .contact-section {padding: 100px 0;} .contact-container {display: flex;align-items: center;justify-content: space-between;gap: 56px;} .contact-container > div {flex: 1;} .contact-section-left {max-width: 742px;overflow: hidden;border-radius: 24px;} .contact-section-left img {width: 100%;aspect-ratio: 1.27 / 1;transition: all ease-in-out 0.15s;object-fit: cover;object-position: center;} .contact-section-left:hover img {transform: scale(1.15);} .contact-section-right {max-width: 770px;} .contact-section-right h3 {color: var(--gray-0)} .contact-section-right p {color: var(--gray-20);margin: 8px 0 52px} .contact-form .row {row-gap: 20px;} .contact-form button {margin-top: 36px;} /*...................................... Contact Section Ends ....................................... */ /*...................................... Footer ....................................... */ footer {padding: 80px 0 40px;border-top: 1px solid var(--gray-40);} .footer-upper {display: flex;justify-content: space-between;} .footer-left {max-width: 504px;} .footer-left p {margin: 16px 0 60px;color: var(--gray-20);font-weight: 400;} .social-links-container {display: flex;gap: 12px;} .social-link {width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;border: 1px solid var(--gray-40);border-radius: 6px;transition: all ease-in-out 0.15s;} .social-link:hover {border-color: var(--primary-orange);} .social-link img {width: 20px;aspect-ratio: 1 ;} .footer-right {display: flex;flex-direction: column;align-items: end;} .footer-right h4 {color: var(--gray-0);max-width: 370px;} .download-links {margin: 20px 0 72px;display: flex;gap: 8px;justify-content: end;} .download-links a img {max-width: 204px;max-height: 50px;} .footer-lower {padding-top: 40px;margin-top: 56px;border-top: 1px solid var(--gray-40);display: flex;align-items: center;justify-content: space-between;gap: 20px;} .copyright {color: var(--gray-40);letter-spacing: 1px;} .legal-info-links {display: flex;align-items: center;gap: 44px;} .legal-info-links a small {color: var(--gray-40);letter-spacing: 1px;transition: all ease-in-out 0.15s} .legal-info-links a:hover small {color: var(--primary-orange);} /*...................................... Footer Ends ....................................... */ /*...................................... Legal Info Ends ....................................... */ .legal-info-container {padding: 192px 0 60px;} .small-container {max-width: 1036px;margin: 0 auto;} .breadcrumb-container {display: flex;align-items: center;gap: 8px;} .breadcrumb-container {display: flex;align-items: center;gap: 8px;margin-bottom: 24px;} .breadcrumb-container a {font-size: 16px;line-height: 24px;} .breadcrumb-arrow {width: 22px;height: 22px;} .breadcrumb-link-inactive {color: var(--gray-60);font-weight: 400;} .breadcrumb-link-active {color: var(--gray-0);font-weight: 400;} /* */ .legal-container {margin-top: 24px;} .legal-info-header {color: var(--primary-orange);} .legal-info-content {display: flex;flex-direction: column;gap: 40px;} .main-list {display: flex;flex-direction: column;gap: 40px;list-style: decimal;margin: 40px 0 0 ;} .sub-list {display: flex;flex-direction: column;gap: 24px;list-style: lower-alpha;margin-top: 24px;font-size: 16px;} .main-list h4 {color: var(--gray-0);} .main-list p {color: var(--gray-20);} .accordion-container {margin-top: 40px;} /* Accordion */ .accordion {display: flex;flex-direction: column;gap: 16px;} .accordion-button {padding: 24px 20px ;display: flex;align-items: center;background: transparent;gap: 24px;} .accordion-button img {width: 28px;aspect-ratio: 1;} .accordion-button h5 {color: var(--gray-0);} .accordion-arrow-non-active {display: block;transition: all ease-in-out 0.15s;} .accordion-arrow-active {display: none;transition: all ease-in-out 0.15s;} .accordion-button:not(.collapsed) .accordion-arrow-active {display: block;transform: rotate(180deg);} .accordion-button:not(.collapsed) .accordion-arrow-non-active {display: none;transform: rotate(180deg);} .accordion-button:after {content: none;} .accordion-item {border: 1px solid var(--gray-60);border-radius: 8px;overflow: hidden;transition: all ease-in-out 0.25s;} .accordion-button:not(.collapsed) {box-shadow: none;background: var(--common-bg);padding-bottom: 16px;} .accordion-button:focus {box-shadow: none;} .accordion-body {background: var(--common-bg);padding: 0 20px 24px 72px;} .accordion-body p {color: var(--gray-40);} .accordion-item:not(:first-of-type) {border-top: 1px solid var(--gray-60);} .faq-page .accordion-main-header {text-align: left;} .accordion-img-container {flex-shrink: 0;} /*------------------------------------- Blog Page-------------------------------- */ .blog-inner-container {} .blog-inner-date {margin: 8px 0 24px;display: flex;align-items: baseline;gap: 16px;} .blog-inner-date p {color: var(--primary-orange);} .blog-inner-image {border-radius: 16px;overflow: hidden;} .blog-inner-image img {width: 100%;aspect-ratio: 1.59 / 1;transition: all ease-in-out 0.15s;} .blog-inner-image:hover img {transform: scale(1.15);} .blog-inner-external-link {display: flex;align-items: center;justify-content: space-between;gap: 28px;background: var(--common-bg);padding: 28px;border-radius: 8px;margin: 40px 0;} .blog-external-link-content {display: flex;flex-direction: column;gap: 8px;flex-grow: 1;} .blog-external-link-content h5 {color: var(--gray-0);} .blog-external-link-content h5 span {color: var(--primary-orange);} .blog-external-link-content p {color: var(--gray-40);} .blog-inner-external-link .star-icon {padding: 14px;border: 1px solid var(--gray-95);border-radius: 4px;display: flex;align-items: center;justify-content: center;background: var(--white);} .blog-inner-external-link .star-icon img {width: 48px;aspect-ratio: 1;} .blog-inner-external-link .arrow-icon {background: var(--common-bg);} .blog-inner-list {display: flex;flex-direction: column;gap: 24px;margin: 40px 0 64px;list-style: disc;} .blog-inner-list p {color: var(--gray-20);} .blog-inner-content-container h4 {font-weight: 600;color: var(--gray-20);} .blog-inner-content {display: flex;flex-direction: column;gap: 40px;margin-bottom: 64px;} .blog-inner-content p {color: var(--gray-20);font-weight: 400;} .blog-model-img-container {display: flex;align-items: center;justify-content: space-around;margin: 40px 0 64px;} .blog-model-img-container img {max-width: 180px;max-height: 210px;} .blog-inner-development-section {margin-bottom: 64px;} .blog-inner-development-section .row {row-gap: 24px;margin-top: 40px;} .development-goal-card {display: flex;align-items: center;gap: 24px;} .development-goal-card img {width: 130px;height: 130px;} .development-goal-card p {color: var(--gray-20);} .text-italic {font-style: italic;} .blog-inner-container h4.text-italic {margin: 64px 0 40px;} .blog-inner-share-section {padding: 40px 0 60px;border-top: 1px solid var(--gray-80);} .blog-inner-share-section p {color: var(--gray-0);} .share-link-container {margin-top: 24px;display: flex;align-items: center;gap: 12px;} .share-link {padding: 10px;background: var(--gray-95);transition: all ease-in-out 0.15s;border-radius: 6px;display: flex;align-items: center;justify-content: center;} .share-link img {width: 20px;aspect-ratio: 1;transition: all ease-in-out 0.15s;} .share-link:hover {background: var(--black);} .share-link:hover img {filter: invert(1);} .second-catagory-blog-container {display: flex;flex-direction: column;gap: 10px;} .second-catagory-blog-container:first-of-type {margin-top: 20px;} .second-catagory-blog-container h4 {margin-bottom: 10px ;} .powered-container {display: flex;align-items: center;gap: 16px;color: var(--gray-40);} .powered-container a {display: flex;align-items: center;justify-content: center;} .powered-container img {max-width: 94px;max-height: 24px;object-fit: contain;} /* Responsive */ @media screen and (min-width:1550px) { .container {max-width: 1630px;} } @media screen and (max-width:1680px) { .navbar {max-width:1440px;} .container {max-width: 1440px;} } @media screen and (max-width:1550px) { .navbar {max-width:1340px;} .container {max-width: 1340px;} .banner-image {width: 50%;} .hero-section {padding: 180px 0 140px;} .hero-section-content {max-width: 600px;} /* */ .tab-left {max-width: 50%;} } @media screen and (max-width:1400px) { .container {max-width: 1140px;} /* ..................................... Typography ..................................... */ h1 {font-size: 58px; line-height: 80px;} h2 {font-size: 44px; line-height: 60px;} h3 {font-size: 40px; line-height: 58px;} h4 {font-size: 26px; line-height: 36px;} h5 {font-size: 22px; line-height: 30px;} /* h6 {font-size: ; line-height: ;} */ p {font-size: 20px; line-height: 26px;} p.lg {font-size: 19px;line-height: 26px;} p.md {font-size: 17px;line-height: 24px;} p.base {font-size: 16px;line-height: 24px;} small {font-size: 14px;line-height: 20px;} /* common */ .btn {padding: 10px 14px;} .common-section-spacing {padding: 100px 0;} /* */ .navbar {max-width:1140px;padding: 20px 28px;top: 12px;} .nav-link {font-size: 18px;line-height: 26px;} .nav-links-container {gap: 16px;} .brand-logo img {max-width: 180px;} /* */ .about-left {max-width: 50%;} /* */ .tab-container {gap: 120px;} /* */ .legal-info-container {padding-top: 150px;} .accordion-container {margin-top: 30px;} } @media screen and (max-width: 1199px) { .container {max-width: 940px;} .navbar {max-width: 940px;padding: 20px 28px;} .navbar-right {flex-direction: row-reverse;justify-content: end;gap: 8px;} .nav-right-link-container {flex: unset;} /* ..................................... Typography ..................................... */ h1 {font-size: 50px; line-height: 64px;} h2 {font-size: 40px; line-height: 56px;} h3 {font-size: 34px; line-height: 46px;} h4 {font-size: 24px; line-height: 32px;} h5 {font-size: 20px; line-height: 28px;} /* h6 {font-size: ; line-height: ;} */ p {font-size: 18px; line-height: 26px;} p.lg {font-size: 18px;line-height: 26px;} p.md {font-size: 16px;line-height: 24px;} p.base {font-size: 16px;line-height: 24px;} small {font-size: 14px;line-height: 20px;} /* */ /* */ .navbar .nav-links-container {flex-direction: column;align-items: start;padding-left: 20px;} /* .offcanvas-header .btn-close{background: var(--black);} */ /* */ .contact-section, .common-section-spacing {padding: 80px 0;} /* */ .hero-section-content {max-width: 50%;gap: 20px;} /* */ .about-content {margin-top: 24px;gap: 16px;} .about-container {gap: 50px;} /* */ .tab-container {gap: 80px;} .tab-left p.tab-desc {margin:16px 0 40px} .tab-navigation h4 {margin-bottom: 24px;} .tab-button-content {align-items: flex-start;} /* */ .benefit-card {padding: 20px;} /* */ .contact-container {gap: 40px;} .contact-section-right p {margin: 6px 0 30px;} .contact-form button {margin-top: 24px;} .contact-form .row {row-gap: 16px;} input, textarea {padding: 16px;} /* */ .footer-left {max-width: 300px;} /* */ .accordion-button {padding: 20px;} .accordion-container {margin-top: 24px;} /* */ .main-list {margin-top: 30px;} .sub-list {margin-top: 16px;gap: 18px;} /* */ .blog-inner-date {margin-bottom:20px ;} .blog-inner-external-link {margin: 30px 0;padding: 24px;} .blog-inner-external-link .star-icon {padding: 12px;} .blog-inner-external-link .star-icon img {width: 40px;} .blog-inner-list {margin: 30px 0 50px;gap: 16px;} .blog-inner-content {gap: 30px;margin-bottom: 40px;} .blog-model-img-container img {max-width: 160px;} .blog-inner-development-section .row {margin-top: 30px;row-gap: 20px;} .blog-inner-container h4.text-italic {margin: 40px 0 20px;} .blog-inner-share-section {padding: 30px 0 50px;} /* */ .slider-container-left {max-width: 400px;} .slider-button-container {margin-top: 40px;gap: 24px;} } @media screen and (max-width: 991px) { .container {max-width: 750px;} /* ..................................... Typography ..................................... */ h1 {font-size: 46px; line-height: 60px;} h2 {font-size: 36px; line-height: 50px;} h3 {font-size: 32px; line-height: 48px;} h4 {font-size: 22px; line-height: 28px;} h5 {font-size: 18px; line-height: 26px;} /* h6 {font-size: ; line-height: ;} */ p {font-size: 16px; line-height: 24px;} p.lg {font-size: 16px;line-height: 24px;} p.md {font-size: 15px;line-height: 22px;} p.base {font-size: 15px;line-height: 22px;} small {font-size: 13px;line-height: 18px;} /* */ .contact-section, .common-section-spacing {padding: 60px 0;} /* */ .navbar {max-width: 750px;border-radius: 16px;padding: 16px 20px;top: 8px;} /* */ .hero-section {padding: 140px 0 100px;} .banner-image {width: 55%;top: 58%;transform: translateY(-46%);} /* */ .about-container {gap: 30px;} .about-content {gap: 10px;margin-top: 16px;} /* */ .tab-container {gap: 20px;} .tab-button-content {padding: 12px;} .tab-left p.tab-desc {margin: 12px 0 24px;} .tab-button {padding-bottom: 4px;} .tab-right {padding: 40px 80px 0;} /* */ .benefit-card-container .row {row-gap: 24px;} .benefit-container .benefit-section-header {margin-bottom: 40px;} /* */ .blog-header-container {gap: 20px;margin-bottom: 40px;} .blog-image {border-radius: 12px 12px 0 0;} .blog-card {border-radius: 12px;} .blog-header {margin-bottom: 10px;} .blog-body {padding: 18px;} .contact-container {flex-direction: column-reverse;gap: 20px;} .contact-section-left img {aspect-ratio: 16 / 9;} .contact-section-left {border-radius: 16px;} /* */ .footer-upper {flex-direction: column;gap: 30px;} .footer-left {max-width: 100%;} .footer-left p {margin: 16px 0 30px;} .footer-right {align-items: center;text-align: center;} .download-links {margin: 16px 0 30px;} footer {padding: 60px 0 20px;} .footer-lower {margin-top: 30px;padding-top: 20px;} /* */ .legal-info-container {padding-top: 130px;} .breadcrumb-container {margin-bottom: 16px;} .accordion {gap: 12px;} .accordion-button {padding: 16px 20px;gap: 16px;} .accordion-body {padding:0 16px 20px 64px} /* */ .development-goal-card {gap: 16px;} .development-goal-card img {height: 100px;width: 100px;} .blog-inner-development-section {margin-bottom:40px ;} .blog-inner-container h4.text-italic {margin: 40px 0 30px;} .blog-inner-share-section {padding: 20px 0 30px;} .share-link-container {margin-top: 16px;} .blog-inner-external-link {margin: 20px 0;padding: 20px;} .blog-inner-external-link .star-icon img {width: 30px;} .blog-inner-external-link {gap: 16px;} .blog-external-link-content {gap: 4px;} .blog-inner-list {margin: 20px 0 30px;gap: 12px;} .blog-inner-content {gap: 20px;margin-bottom: 30px;} .blog-model-img-container img {max-width: 140px;} .development-goal-card img {width: 80px;height: 80px;} /* */ .slider-container-left {max-width: 250px;} .slider-card {width: 360px;height: 360px;padding: 30px 24px;} .rating-star-container img {width: 24px;} } @media screen and (max-width:767px) { .navbar {max-width: 540px;} .container {max-width: 540px ;} /* ..................................... Typography ..................................... */ h1 {font-size: 44px; line-height: 60px;} h2 {font-size: 32px; line-height: 48px;} h3 {font-size: 28px; line-height: 36px;} h4 {font-size: 20px; line-height: 26px;} h5 {font-size: 16px; line-height: 24px;} /* h6 {font-size: ; line-height: ;} */ p {font-size: 16px; line-height: 24px;} p.lg {font-size: 16px;line-height: 24px;} p.md {font-size: 14px;line-height: 20px;} p.base {font-size: 14px;line-height: 20px;} small {font-size: 12px;line-height: 16px;} /* */ .contact-section, .common-section-spacing {padding: 40px 0;} /* */ .brand-logo img {max-width: 150px;} .header-button-container i {display: block;} .header-button-container p, .header-button-container img {display: none;} .header-button-container .btn {border-radius: 50%;aspect-ratio: 1;} /* */ .banner-image {position: relative;top: unset;transform: unset;width: 100%;max-height: 480px;} .hero-section-content {max-width: 100%;gap: 12px;text-align: center;} .hero-section {padding: 120px 0 40px;} /* */ .about-container {flex-direction: column;gap: 20px;} .about-left {max-width: 100%;text-align: center;} .about-right img {aspect-ratio: 16 / 9;} .about-right {border-radius: 8px;} /* */ .tab-container {flex-direction: column;align-items: center;} .tab-right {max-width: 60%;} .tab-left {max-width: 100%;} /* .tab-pane img{width: 50%;margin: 0 auto;} */ .tab-button-image img {width: 50px;} .tab-button-right {gap: 4px;} /* */ .benefit-card-img {width: 60px;} .benefit-card-header {margin: 18px 0 6px;} .benefit-card {border-radius: 12px;} .benefit-card-container .col-lg-4 {padding-inline: 6px;} .benefit-card-container .row {row-gap: 12px;} input, textarea {padding: 12px 16px;} textarea {min-height: 80px;} .contact-form button {margin-top: 16px;} .contact-section-right p {margin-bottom: 20px;} /* */ .footer-lower {flex-direction: column;gap: 10px;} .legal-info-links {gap: 16px;} footer {padding-top: 40px;} .footer-left p {margin-bottom: 20px;} footer .nav-links-container {flex-direction: column;} /* */ .legal-info-container {padding-top: 110px;padding-bottom: 40px;} .breadcrumb-container {margin-bottom: 12px;gap: 4px;} .accordion-container {margin-top: 16px;} .accordion-button {padding: 12px 16px;gap: 12px;} .accordion-body {padding: 0 16px 12px 60px;} /* */ .main-list {margin-top: 20px;gap: 20px;} .sub-list {margin-top: 12px;gap: 14px;padding-left: 20px;} /* */ .blog-inner-date {margin-bottom: 12px;} .blog-inner-external-link {padding: 14px;margin: 12px 0;} .blog-inner-external-link .star-icon img {width: 24px;} .blog-inner-list {margin: 16px 0 24px;gap: 8px;} .blog-inner-content {gap: 14px;} .blog-inner-container h4.text-italic {margin: 26px 0 20px;} /* */ .slider-section-container {flex-direction: column;} .slider-container-left {max-width: 100%;} .slider-container-left h3 {margin-bottom: 12px;} .slider-button-container {margin-top: 30px;gap: 16px;justify-content: end;} } @media screen and (max-width: 575px) { .container {max-width: 100%;} /* ..................................... Typography ..................................... */ h1 {font-size: 34px; line-height: 42px;} h2 {font-size: 28px; line-height: 36px;} h3 {font-size: 24px; line-height: 30px;} h4 {font-size: 18px; line-height: 26px;} h5 {font-size: 16px; line-height: 24px;} /* h6 {font-size: ; line-height: ;} */ small {font-size: 10px;line-height: 14px;} /* */ .contact-section, .common-section-spacing {padding: 30px 0;} /* */ .navbar {max-width: 100%;top: 0;border-radius: 0;padding: 10px;} .btn {padding: 8px 12px;} .brand-logo img {max-width: 130px;} /* */ .hero-section {padding: 100px 0 10px;} /* */ .about-content {margin-top: 12px;} /* */ .tab-right {max-width: 100%;border-radius: 8px;} .tab-right img {max-width: 50%;margin: 0 auto;display: flex;} /* */ .benefit-container .benefit-section-header {margin-bottom: 30px;} .benefit-card-header {margin-top:12px ;} .blog-header-container {gap: 10px;margin-bottom: 20px;} .blog-card-container button {margin-top: 16px;} /* */ .contact-form .row {row-gap: 12px;} .contact-form button {margin-top: 12px;width: 100%;} input, textarea {padding: 10px 14px;border-radius: 6px;} .btn {border-radius: 6px;} /* */ .legal-info-container {padding-top: 90px;} .accordion-button img {width: 24px;} .accordion-button {align-items: start;padding: 10px 12px;gap: 8px;} .accordion-button:not(.collapsed) {padding-bottom: 12px;} .accordion-body {padding: 0px 12px 10px 44px;} /* */ .main-list {padding-left: 20px;gap: 12px;font-size: 18px;margin-top: 12px;} .sub-list {padding-left: 16px;margin-top: 8px;gap: 8px;} /* */ .blog-inner-image {border-radius: 8px;} .blog-model-img-container {flex-direction: column;gap: 20px;margin-bottom: 20px;} .blog-model-img-container img {max-width: 110px;} .blog-inner-list {margin: 12px 0 20px;} .blog-inner-content {gap: 10px;margin-bottom: 20px;} .development-goal-card img {width: 60px;height: 60px;} .blog-inner-development-section .row {margin-top: 20px;row-gap: 12px;} /* */ .slider-button-container {margin-top: 20px;gap: 13px;} } @media screen and (max-width: 420px) { .slider-card {width: 320px;} .slider-card:not(.slider-video-card) .user-info {position: relative;bottom: unset;left: unset;} }