/******************************** Common CSS for 2Vectr website ********************************/ /********* HERO SECTION BANNER *********** This is very useful utility class that gives you well designed section. This should be applied to
element, you should make section childs of
tag which is immediate child of tag. Every section element shuld have DIV as its only child with tp-container2 class. ******************************/ .tp-hero{ position:relative; isolation:isolate; height: 90vh; min-height:80vh; z-index: var(--k2-z-header); } .tp-hero--mini{ height: 70vh!important; min-height:50vh; } @media (min-width: 768px) { .tp-hero--mini{ height: 50vh!important; min-height:50vh; } } .tp-hero::before{ content:""; position:absolute; inset:0; z-index:-1; } .tp-hero::after{ content:""; position:absolute; inset:0; opacity:.3; z-index:-1; } /* .tp-hero-inner{ padding:6rem 1rem 4rem; } .tp-hero-eyebrow{ letter-spacing:.16em; text-transform:uppercase; font-weight:700; font-size:.8rem; opacity:.9; color:#d1d5db; } .tp-hero-title{ font-size: clamp(2rem, 4.5vw, 3.5rem); line-height:1.1; margin:.75rem auto; max-width1: 16ch; background: var(--k2-gradient-accent-linear); -webkit-background-clip: text; background-clip:text; color: transparent; } .tp-hero-desc{ max-width:70ch; margin:0 auto 1.75rem; color:var(--k2-color-gray-100); font-size: clamp(1rem, 2.3vw, 1.2rem); } .tp-hero-meta{color: var(--k2-color-gray-300)!important; font-size:14px; margin-bottom:35px} */ /********* SECTION *********** This is very useful utility class that gives you well designed section. This should be applied to
element, you should make section childs of
tag which is immediate child of tag. Every section element shuld have DIV as its only child with tp-container2 class.
How we think

Our Philosophy

Our mission is to help you achieve exactly that — by designing AI systems that are private, purposeful, and production-ready.

...
....
...
OR
How we think

Our Philosophy

Our mission is to help you achieve exactly that — by designing AI systems that are private, purposeful, and production-ready.

...
....
******************************/ .tp-section2{ padding: 64px 0; opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; } .tp-section2-band{ background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00)); border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); } .tp-section2.reveal{ opacity: 1; transform: translateY(0); } .tp-section2-head{ margin-bottom: 18px; } .tp-section2-eyebrow{ color: var(--k2-color-accent); margin-bottom: 6px; font-size: .95rem; text-align: center !important; } .tp-section2-head > i{ text-align: center; } /* .tp-section2-head > i{ color: var(--k2-color-muted); margin-bottom: 8px; font-size: .95rem; }*/ /* .tp-section2-sub{ color: var(--muted); margin-bottom: 8px; font-size: .95rem; }*/ /* delete this later*/ .tp-section2 h1, .tp-section2 h2, .tp-section2 h3{ letter-spacing: .3px; line-height:normal; margin: 0 0 18px; font-size1: 2.5rem!important; } /* keeping p and li, in case they are mentieoed without classes*/ /* .tp-section2 p{ font-size: 0.5rem!important; } .tp-section2 li{ font-size: 0.95rem!important; }*/ .tp-section2-title{ letter-spacing: .3px; line-height:normal; margin: 0 0 18px; text-align: center; } .tp-section2-desc{ font-size: 1.5rem!important; text-align: center; } /********* CONTAINERS ******** TO BE DELETED You should always use immediate child (DIV) of
tag to mark as container suing tp-container2. Note section tag should be immediate child of BODY element.
OR
Left part
Right part
******************************/ .tp-container2{ width: 92%; max-width: var(--k2-container-2xl); margin: 0 auto; } .tp-container2-split > div:nth-child(2){ margin-top: 1rem; } @media (min-width: 960px){ .tp-container2-split{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items:center; } } /*********** BADGE *********** This is used to highlight a text like a badge.
Part of the Innovistan Network
******************************/ .tp-badge{ display:inline-flex; align-items:center; gap:10px; /*background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);*/ background: var(--k2-muted-bg); color: var(--k2-muted-bg-text); border:1px solid var(--k2-color-muted); border-radius: 999px; padding: 8px 12px; margin-bottom: 12px; font-weight: 600; color1: #cfecea; } /************ CARDs *********** Card is basically a container where you can use p, h1...h3, img etc. This site uses two types of cards , tp-card-1 and tp-card-2 *******************************/ /*** card-1 option *** This is used to show a container with image, h1...h6 and p elements, one after another, centrally aligned.
AI Innovation

AI Innovation

We push boundaries with cutting-edge AI solutions tailored to your domain.

**********************/ .tp-card-1{ /*border: 1px solid black;*/ padding: 10px; /*background: var(--k2-color-gray-100, #f8f9fa);*/ min-height: 200px; border-radius: var(--k2-radius-lg); } .tp-card-1:hover{ transform: translateY(-5px); } .tp-card-1 img { width: 50px; margin: auto;} .tp-card-1 h3, .tp-card-1 p {text-align: center;} /*** card-2 option *** This is used to show a container with icon, followed by heading h1...h6 and p element beneath it, everything left aligned.

Private, purposeful, production-ready.

Control your models and data, and balance automation with human oversight from day one.

**********************/ .tp-card-2{ border: 1px solid var(--k2-color-gray-100); border-radius: var(--k2-radius-lg); padding: 18px 18px 18px 18px; backdrop-filter: blur(6px); /*box-shadow: var(--k2-shadow-sm);*/ position: relative; overflow: hidden; } .tp-card-2 .icon{ width: 22px; height: 22px; display:inline-flex; margin-right: 10px; } .tp-card-2 h3{ font-size: 1.1rem; margin: 0 0 6px; display:flex; align-items:center; } .tp-card-2 p{ margin: 0; } /* ================================ 🌟 Modern Testimonial Card ================================ */ .tp-card-testimonial { background: #fff; border-radius: 1rem; /* soft rounded corners */ box-shadow: 0 8px 20px rgba(0,0,0,0.08); /* modern shadow */ padding: 1.5rem; max-width: 350px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .tp-card-testimonial:hover { transform: translateY(-5px); box-shadow: 0 12px 25px rgba(0,0,0,0.12); } .tp-card-testimonial > div:nth-child(1) { display: flex; align-items: center; margin-bottom: 1rem; } .tp-card-testimonial > div:nth-child(1) > img { width: 60px; height: 60px; border-radius: 50%; /* perfect circle */ border: 3px solid #eee; object-fit: cover; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .tp-card-testimonial > div:nth-child(1) > div{ margin-left: 1rem; } .tp-card-testimonial > div:nth-child(1) > div > h4{ margin: 0; font-size: 1rem; font-weight: 600; color: #222; } .tp-card-testimonial > div:nth-child(1) > div > span{ font-size: 0.85rem; color: #777; } .tp-card-testimonial > p{ font-size: 1.15rem; font-style: italic; color: #555; line-height: 1.5; margin: 0; position: relative; padding-left: 1.5rem; } .tp-card-testimonial > p::before { content: "“"; position: absolute; left: -5px; top: -20px; font-size: 3rem; color: #ccc; } /* ================================ 🌟 Modern Article Card
AI
6 min read
The Future of AI in Enterprise

AI is transforming the way enterprises operate, from automating processes to enhancing decision-making capabilities...

Author By John Doe · 2 days ago
AI Cloud Automation
OR Blog without head image
Cloud
4 min read
Scaling Apps with Serverless

Serverless computing offers a flexible and cost-effective way to scale applications without managing infrastructure...

Author By Jane Smith · 5 days ago
Cloud Serverless
================================ */ .tp-card-article { background: var(--k2-bg-muted); border-radius: var(--k2-radius-md); box-shadow: var(--k2-shadow-md); overflow: hidden; display: flex; flex-direction: column; position: relative; } /* Top image section */ /* .tp-card-article-head { position: relative; aspect-ratio: 16/9; background-size: cover; background-position: center; }*/ .tp-card-article-head { position: relative; width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; border-radius: 12px 12px 0 0; display: block; /* make sure behaves like a block */ text-decoration: none; /* remove underline */ color: inherit; /* inherit text color */ } /* Badge container (for both image and no-image cases) */ .tp-card-article-badge { position: absolute; top: 0.50rem; right: 0.50rem; background: var(--k2-color-red); color: var(--k2-color-on-red); font-size: 0.75rem !important; padding: 0.25rem 0.5rem; border-radius: 999px; backdrop-filter: blur(4px); } .tp-card-article-body { flex: 1; padding: 1rem; display: flex; flex-direction: column; position: relative; } /* When no image, badge inside body */ .tp-card-article.no-image .tp-card-article-body .tp-card-article-badge { position: absolute; top: 0.75rem; right: 0.75rem; } .tp-card-article-meta { font-size: 0.8rem; color1: var(--k2-color-gray-200); margin-bottom: 0.5rem; } .tp-card-article-title { font-size: 1.25rem !important; font-weight:500; margin: 0 0 0.5rem; text-decoration: none; display: inline-block; } .tp-card-article-desc { font-size: 0.9rem !important; color: inherit; line-height: 1.4; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 17; -webkit-box-orient: vertical; overflow: hidden; } .tp-card-article-author { display: flex; align-items: center; font-size: 0.85rem !important; color: var(--tp-text-light); margin-bottom: 1rem; } .tp-card-article-author img { width: 28px; height: 28px; border-radius: 50%; margin-right: 0.5rem; } .tp-card-article-tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.4rem; } .tp-card-article-tags span { background: var(--k2-bg-muted-strong); font-size: 0.75rem !important; padding: 0.25rem 0.6rem; border-radius: 999px; color: var(--k2-color-gray-900); } /************ PANEL *********** Panel is basically a container where you can use p, ul-li tags freely for description and points This can be used to show description with some bullet points. Either one is optional. *******************************/ .tp-panel{ border: 0px solid var(--k2-color-gray-100); border-radius: var(--k2-radius-lg); /*box-shadow: var(--k2-shadow-sm);*/ padding: 18px; backdrop-filter: blur(6px); } .tp-panel p { margin: 10px 0 10px; font-size: 1.05rem; } .tp-panel > ul{ margin: 10px 0 10px; padding-left: 0; list-style: none; } .tp-panel > ul > li{ display:flex; border: 1px dashed var(--k2-color-gray-300); border-radius: var(--k2-radius-lg); gap:10px; padding: 10px 12px; /*background: rgba(255,255,255,0.03);*/ align-items: flex-start; font-size: 0.95rem; } .tp-panel li + li{ margin-top: 10px; } /* bullets icon */ .tp-panel > ul > li > span{ width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 20%, var(--k2-color-accent) 22% 100%); flex: 0 0 12px; } /************ CHIP BAR *********** Chip Bar is basically a container where menu buttons can be put This can be used to show categories and a group of related buttons *******************************/ .tp-chip-bar{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin:1rem 0 2rem; } .tp-chip{ padding:.55rem .85rem; border-radius:999px; border:1px solid var(--k2-border-width-sm); background:var(--k2-bg-muted); color:var(--k2-bg-muted-text); font-weight:600; font-size:.9rem; cursor:pointer; transition: all .2s ease; } .tp-chip.is-active, .tp-chip:hover{ background-color: var(--k2-bg-accent); color: var(--k2-bg-accent-text); /* use below for different style */ /*border-color: transparent;*/ /*background:linear-gradient(135deg, #faf5ff, var(--k2-color-accent), var(--k2-color-light)); background:radial-gradient(circle at top left, #faf5ff, var(--k2-color-accent), var(--k2-color-light));*/ } /*********** FORM *********** This is used when you want to show a form with heading, section wise input boxes etc followed by action buttons. Example:

Get The Document

intro goes here

Tell us about yourself

...
🔐 We respect your privacy. Your data will never be shared, and we’ll only contact you based on your request.
*******************************/ .tp-form { display: flex; flex-direction: column; gap1: 0.75rem; max-width: 100%; padding: 1rem; } .tp-form-title { font-size: 1.75rem; font-weight: 600; line-height: 1.3; } .tp-form-intro { font-size: 1rem; color: var(--k2-color-gray-600); line-height: 1.5; } .tp-form-section { display: flex; flex-direction: column; gap: 1.25rem; /*border: 1px solid yellow;*/ margin-bottom: 25px; padding:10px; background-color: var(--k2-muted-bg) !important; color: var(--k2-muted-bg-text) !important; border-radius: 10px; } .tp-form-section-title { font-size: 1.75rem; font-weight: 400; line-height: 1.2; } .tp-form-field { display: flex; flex-direction: column; gap: 0.5rem; } .tp-form-field > label { font-weight: 500; font-size: 0.95rem; } .tp-form-field > input, .tp-form-field > textarea, .tp-form-field > select { width: 100%; padding: 0.65rem 0.75rem; border-radius: var(--k2-radius-md); border: 1px solid var(--k2-color-gray-300); font-size: 1rem; transition: border-color 0.2s ease; } .tp-form-field > input:focus, .tp-form-field > textarea:focus, .tp-form-field > select:focus { border-color: var(--k2-bg-muted); outline: none; } .tp-form-field > .k2-radio-group, .tp-form-field > .k2-checkbox-group { display: flex; flex-direction: column; gap: 0.5rem; } .tp-form-actions { display: flex; gap: 1rem; justify-content: flex-start; margin-top: 1rem; flex-wrap: wrap; } .tp-form-footer { font-size: 0.875rem; margin-top: 1rem; line-height: 1.4; color1: var(--k2-muted-bg-text) !important; } /* Mobile tweaks */ @media (max-width: 768px) { .tp-form { padding: 1rem 0.5rem; } .tp-form-actions { flex-direction: column; align-items: stretch; } } /*********** CTA buttons *********** This is used when you want to show multiple CALL-TO-ACTION important buttons with one being primary. This can be used to show one button also. this should be used for CTA purpose which to be shown with modern look and feel. For other buttons, you can use k2-btn class.
Contact Us Explore Services
************************************/ .tp-cta { display: inline-flex; gap: 12px; margin-top: 12px; } .tp-cta-btn { display: inline-block; padding: var(--k2-space-3) var(--k2-space-5); border-radius: var(--k2-radius-full); font-size: var(--k2-font-md); font-weight: 600; margin: var(--k2-space-2); transition: all var(--k2-transition-default); text-decoration: none; } .tp-cta-btn > .svg{ display:inline-block; vertical-align: middle; } .tp-cta-btn.tp-cta-btn-primary { background: var(--k2-gradient-accent-linear); background-size: 300% 100%; color: var(--k2-color-gray-900); animation: gradientMove 5s ease infinite; box-shadow: var(--k2-shadow-md); } .tp-cta-btn.tp-cta-btn-primary:hover { background-position: right center; transform: scale(1.05); } .tp-cta-btn.tp-cta-btn-outline { border: 2px solid var(--k2-color-accent); color: var(--k2-color-accent); background: transparent; } .tp-cta-btn.tp-cta-btn-outline:hover { background: var(--k2-color-accent); color: #000; } @keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* .tp-cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top: 6px; } .tp-btn{ display:inline-flex; align-items:center; gap:10px; border-radius: 12px; padding: 12px 18px; font-weight: 700; border:1px solid var(--card-stroke); background: var(--card); color: var(--text); box-shadow: var(--shadow); transition: transform .12s ease, background .2s ease, border-color .2s ease; } .tp-btn:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.18); } .tp-btn-cta{ background: linear-gradient(180deg, var(--k2-accent-bg) 0%, var(--k2-accent-bg) 100%); color1: #02100d; border-color: transparent; } .tp-btn-primary:hover{ filter: brightness(1.02); } */ /*** Common utilities **********************/ /************* TO BE DELETED ******************/ /** OLD TO BE REMOVED */ .tp-section{ padding-top: 75px; padding-bottom: 75px; } .tp-section > div{ max-width: 80%; margin: auto; } .tp-section-title { font-size: 52px !important; font-weight: bold; margin-bottom: 8px; text-align: center; } .tp-section-subtitle { font-size: 22px; margin-bottom: 48px; text-align: center; } /* Values / Highlights */ /* .tp-row { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 2rem; } .tp-col { background: var(--k2-color-gray-100, #f8f9fa); padding: 2rem; text-align: center; border-radius: 10px; transition: transform 0.3s; } .tp-col:hover { transform: translateY(-5px); } .tp-col img { width: 50px; margin-bottom: 1rem; }*/ /* Mobile First → Desktop */ /* @media(min-width: 768px) { .tp-row { grid-template-columns: repeat(3, 1fr); } }*/ /* Letter*/ pre.tp-founder-letter{ white-space: pre-wrap; /* Wraps the text to fit within the parent */ word-wrap: break-word; /* Breaks long words to fit */ overflow-x: auto; /* Adds scrollbars if content exceeds boundaries */ max-width: 100%; /* Ensures it doesn't go beyond the parent */ text-align:justify; box-sizing: border-box; } /***** KEY Points / Bullet Points *****/ ul.tp-key-points { list-style-type: none; padding1: 0; margin1: 0; } ul.tp-key-points > li{ margin-bottom: 10px; text-align: left; } ul.tp-key-points > li > div{ display: table-cell; vertical-align: middle; padding: 0.5rem; } ul.tp-key-points > li > div:nth-child(1){ font-size: 2rem; } ul.tp-key-points > li > div:nth-child(2){ font-size: 1rem; } /**** Classroom Features Section *****/ .tp-classroom-features ul{ list-style-type: none; padding: 0; margin: 0; } .tp-classroom-features li{ margin-bottom: 10px; text-align: left; } .tp-classroom-features li div{ display: table-cell; border: 0px solid yellow; vertical-align: middle; } .tp-classroom-features li div:first-child{ width: 100px; } .tp-classroom-features li div:last-child{ width: 100%; } .tp-classroom-features li img{ width: 75px; } .tp-classroom-features .tp-student-info{ margin: auto; } .tp-classroom-features .tp-student-info div{ margin: auto; display: flex; padding: 0; border: 0px solid red; } .tp-classroom-features .tp-student-info div > div:first-child{ border: 0px solid yellow; width: 150px; margin: auto; } .tp-classroom-features .tp-student-info div > div:last-child{ border: 0px solid white; width: 400px; text-align: left; margin: auto; } /*** SPECIAL CLASSES ******/ .tp-text-gradient{ font-size: clamp(4rem, 4.5vw, 3.5rem); line-height:1.1; margin:.75rem auto; max-width1: 16ch; background: var(--k2-gradient-linear); /* linear-gradient(90deg, #ff6ec4, #7873f5, #4ae0e2, #ffd700);*/ /* clip gradient to text */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; /* Firefox support */ color: transparent; /* fallback */ margin-bottom: 1.5rem; } .tp-text-gradient-radial{ background: var(--k2-gradient-radial); } .tp-text-gradient-motion{ background-size: 300% 100%; /* make gradient wider so it can move */ background-position: 0% 50%; /* starting point */ animation: gradientMove 6s linear infinite; } /**** Common ******/ @keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Nt needed img.tp-svgfix { border: 0!important; background-clip: padding-box!important; color: transparent!important; }*/