*,::after,::before{box-sizing:border-box;}

body {
	margin: 0;
 
	width: 100%;
	min-height: 100vh;
	background: #EAF0D4;
background: linear-gradient(90deg, rgb(245, 250, 226) 0%, rgba(255, 255, 255, 1) 50%, rgba(196, 237, 255, 1) 100%);

	font-family: 'Inter Regular', Arial, sans-serif;

}
 

.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(var(--bs-gutter-y) * -1);margin-right:calc(var(--bs-gutter-x) * -.5);margin-left:calc(var(--bs-gutter-x) * -.5);}

@font-face {
	font-family: 'Inter Regular';
	font-style: normal;
	font-weight: normal;
	/* src: local('Inter Regular'), url('Inter-Regular.woff') format('woff'); */
	src: local('Inter Regular'), url('../fonts/Inter-Regular.woff') format('woff');
}


@font-face {
	font-family: 'Inter Bold';
	font-style: normal;
	font-weight: normal;
	/* src: local('Inter Regular'), url('Inter-Regular.woff') format('woff'); */
	src: local('Inter Regular'), url('../fonts/Inter-Bold.woff') format('woff');
}


main {
	height: auto;
}

header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 36px 60px 0 60px;
    /* position: sticky;
    top: 0;
    width: auto; */
}

.logo {
	font-size: 2rem;
	font-weight: bold;
	color: #222;
	display: flex;
	align-items: center;
}
.logo img {width: 190px;}

.logo-icon {
	width: 40px;
	margin-right: 10px;
}

nav.desktop-nav {
	display: flex;
	/* gap: 15px; */
	align-items: center;
	flex-wrap: wrap;
}

nav a {
	position: relative;
	color: #222;
	text-decoration: none;
	font-size: 1rem;
	font-weight: 500;
	margin-right: 50px;
	transition: color 0.23s cubic-bezier(0.45, 0.03, 0.51, 0.96);
}

nav a::after {
	content: "|";
	position: relative;
	left: 25px;
}

nav a:last-child::after {
	content: "";
	padding-left: 0;
}

nav a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -12px;
	width: 100%;
	height: 4px;
	background: #3C7DBF;
	border-radius: 2px;
	transform: scaleX(0);
	transition: transform 0.36s cubic-bezier(.43, 0, .51, 1.01);
	opacity: 0.85;
}

nav a:hover,
nav a.active {
	color: #3C7DBF;
}

nav a:hover::before,
nav a.active::before {
	transform: scaleX(1);
}

.sign-in-btn {
	padding: 8px 23px;
	border: 2px solid #222;
	border-radius: 20px;
	background: transparent;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.25s, color 0.25s;
}

.sign-in-btn:hover {
	background: #3C7DBF;
	color: #fff;
	border: 2px solid #3C7DBF;
}

.main-content {
	padding: 60px 60px 0 60px;
}

.innner_cont {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	height: auto;
}

.left {
	max-width: 560px;
}

.left h1 {
	font-size: 3rem;
	margin: 0 0 24px 0;
	font-weight: normal;
	line-height: 1.5;
}

.left h1 strong {
	font-weight: 900;
	color: #222;
	font-family: "Inter Bold";
}

.left .slide-text {
	font-size: 18px;
	color: #535353;
	margin-bottom: 32px;
	min-height: 40px;
	transition: opacity 0.25s;
	width: 80%;
}

.slider-dots {
	margin-bottom: 28px;
}

.slider-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 3px;
	border-radius: 50%;
	background: #d3d3d3;
	cursor: pointer;
	transition: background 0.25s;
}

.slider-dot.active {
	background: #22a5f7;
}

.input-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.input-row input[type="email"] {
	padding: 13px 22px;
	border: 1px solid #d3d3d3;
	border-radius: 25px;
	width: 230px;
	font-size: 1rem;
	outline: none;
	background: #fff;
}

.input-row button {
	background: #22a5f7;
	color: white;
	border: none;
	border-radius: 25px;
	padding: 13px 32px;
	font-size: 1rem;
	cursor: pointer;
	font-weight: 300;
	transition: background .2s;
}

.input-row button:hover {
	background: #1c8ed6;
}

.right {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 200px;
}

.whatsapp-graphic {
	position: relative;
	max-width: 96vw;
}

.whatsapp-graphic img {
	width: auto;
	height: auto;
	max-width: 100%;
}


/*complaince*/

.compliance-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 90vh;
	width: 100%;
}

.compliance-title {
	font-size: 4rem;
	font-weight: 800;
	margin-top: 68px;
	margin-bottom: 18px;
	text-align: center;
}

.compliance-subtitle {
	font-size: 1.28rem;
	color: #222;
	margin-bottom: 80px;
	text-align: center;
}

.compliance-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(260px, 420px));
	gap: 32px 40px;
	justify-content: center;
	width: 100%;
	max-width: 920px;
	margin-bottom: 48px;
}

.compliance-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-decoration: none;
	background: #fff;
	box-shadow: 0 6px 30px rgba(108, 102, 168, 0.07);
	border-radius: 10px;
	padding: 30px 32px;
	font-size: 1.18rem;
	color: #3C7DBF;
	font-weight: 400;
	transition: box-shadow 0.2s;
	margin: 0;
}

.compliance-card:hover {
	box-shadow: 0 10px 38px rgba(60, 125, 191, 0.23);
	color: #1463be;
	background: #f8fbff;
}

.compliance-icon {
	display: flex;
	align-items: center;
	margin-left: 20px;
}

/* iPad portrait and similar tablets */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

     .left h1 {font-size: 2rem;}
     header {display: block;}
     .input-row button {width: 100%;}
     .input-row {
   
    flex-direction: column;
    width: max-content;
}

nav.desktop-nav {padding-top: 20px;}
.login-left, .login-right { justify-content: center !important;}
.login-left-title {width: min-content;}
#lottie-animation {
    display: none;
    
}

.login-left-title {width: 100% !important; max-width: 80% !important;}
.login-left {flex: 2  !important;}

.compliance-section {    width: 90%;
    margin: 0 auto;}

    .sub-heading,.happier-conversations p {font-size: 18px; line-height: normal;}
    .sub-heading span {font-size: 100%;}
    .channels {    width: 90%;}
    .channels-container {gap: 12px;}
 
 
}

 
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {

     .left h1 {font-size: 2rem;}
     .right {width: auto !important;}
      .input-row button {width: 100%;}
      .input-row {
 
    flex-direction: column;
    width: max-content;
}
 
}


@media (max-width: 900px) {
	.compliance-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

    
	.compliance-title {
		font-size: 2.2rem;
	}


 
}

@media (max-width: 500px) {
	.compliance-title {
		font-size: 1.4rem;
	}

	.compliance-subtitle,
	.compliance-card {
		font-size: 1rem;
	}

	.compliance-card {
		padding: 16px 14px;
	}
}

 

.login-wrapper {
	display: flex;
	min-height: 100vh;
}

.login-left {
	background: #4780AD;
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	padding-left: 80px;
	color: #fff;
	position: relative;
	min-width: 340px;
	animation: leftFadeIn 0.85s cubic-bezier(.43, 0, .51, 1.01);
	min-height: 100vh;
}

@keyframes leftFadeIn {
	from {
		transform: translateX(-40px);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.login-left-title img {
	display: block;
	padding-bottom: 40px;
}

.login-left-title {
	font-size: 2.1rem;
	margin-bottom: 14px;
	line-height: 1.3;
	font-weight: normal;
	max-width: 380px;
	padding-top: 80px;
	opacity: 0;
	animation: textSlideIn 1.1s 0.3s forwards;
}

.login-left-title strong {
	font-family: "Inter Bold";
}






@keyframes textSlideIn {
	from {
		transform: translateY(28px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.login-left-illustration {
	margin-top: 56px;
	width: 69%;
	max-width: 88vw;
	opacity: 0;
	animation: illusBounce 1.1s 0.6s forwards;
	position: absolute;
	right: -110px;
	bottom: 0;
	min-width: 200px;
	min-height: 180px;
}

@keyframes illusBounce {
	0% {
		transform: scale(0.94) translateY(40px);
		opacity: 0;
	}

	80% {
		transform: scale(1.06) translateY(-10px);
		opacity: 1;
	}

	100% {
		transform: scale(1) translateY(0);
		opacity: 1;
	}
}

.login-right {
	flex: 1 1 50%;
	background: linear-gradient(64deg, rgba(234, 240, 212, 1) 0%, rgba(255, 255, 255, 1) 40%, rgba(196, 237, 255, 1) 100%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-width: 340px;
	min-height: 100vh;
}

.login-box {
	width: 420px;
	max-width: 94vw;
	background: transparent;
	border-radius: 12px;
	padding: 20px 0 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	opacity: 0;
	animation: formFadeIn 1.2s 0.38s forwards;
}

@keyframes formFadeIn {
	from {
		transform: translateY(40px) scale(0.97);
		opacity: 0;
	}

	to {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

.login-right-logo {
	width: 250px;
	margin-bottom: 8px;
	margin-top: 22px;
	opacity: 0;
	animation: logoFadeIn 1.1s 0.5s forwards;
}

@keyframes logoFadeIn {
	from {
		transform: scale(0.7);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

.login-box-title {
	font-size: 1.55rem;
	font-weight: 500;
	margin-bottom: 50px;
	color: #222;
	opacity: 0;
	animation: textSlideIn 1.1s 0.7s forwards;
}

.form-group {
	position: relative;
	width: 100%;
	margin-bottom: 40px;
}

.login-label {
	position: absolute;
	left: 13px;
	top: 17px;
	font-size: 1rem;
	color: #666;
	pointer-events: none;
	transition:
		top 0.2s cubic-bezier(.43, 0, .51, 1.01),
		left 0.2s cubic-bezier(.43, 0, .51, 1.01),
		font-size 0.23s cubic-bezier(.43, 0, .51, 1.01),
		color 0.21s;
	font-weight: 500;
	opacity: 0.86;
	z-index: 2;
	background: transparent;
}

.login-input {
	padding: 18px 13px 18px 13px;
	font-size: 1.08rem;
	border: 1px solid #ccc;
	border-radius: 6px;
	outline: none;
	width: 100%;
	box-sizing: border-box;
	background: #fbfcfe;
	transition: border 0.18s;
	margin-bottom: 1px;
}

.login-input:focus {
	border-color: #3C7DBF;
	background: #f4f7ff;
}

.login-input:focus+.login-label,
.login-input:not(:placeholder-shown):not([value=""])+.login-label {
	top: -14px;
	left: 7px;
	font-size: 0.84rem;
	color: #1980d6;
	background: #fff;
	padding: 0 3px;
	opacity: 1;
}

.login-checkbox-row {
	display: flex;
	align-items: center;
	margin-bottom: 25px;
	gap: 8px;
}

.login-checkbox {
	accent-color: #3C7DBF;
	width: 18px;
	height: 18px;
	margin-right: 5px;
	transition: transform 0.24s cubic-bezier(.43, 0, .51, 1.01);
}

.login-checkbox:checked {
	transform: scale(1.15) rotate(0deg);
}

.login-terms {
	font-size: 0.97rem;
	color: #333;
}

.login-terms a {
	color: #3C7DBF;
	text-decoration: underline;
	transition: color 0.22s;
}

.login-terms a:hover {
	color: #115b8b;
	text-shadow: 0 2px 14px #c0e4ff99;
}

.login-btn {
	background: #137BCD;
	color: #fff;
	font-size: 14px;
	border: none;
	border-radius: 8px;
	width: 100%;
	padding: 18px 0;
	margin-top: 12px;
	cursor: pointer;
	box-shadow: 0 8px 30px -16px #1980d699;
	transition: background 0.23s, box-shadow 0.23s, transform 0.21s cubic-bezier(.43, 0, .51, 1.01);
	will-change: transform;
}

.login-btn:hover {
	background: #1261a2;
	box-shadow: 0 16px 40px -10px #1980d629;
	transform: translateY(-2px) scale(1.03);
}

.login-form {
	width: 90%;
}


#lottie-animation {
clip-path: polygon(0 0, 100% 0, 100% 86%, 0% 112%);
    position: absolute;
    bottom: -13%;
    left: 74%;
    transform: translate(-41%, -7%);
    z-index: 11;
    width: 65%;
    height: auto !important;

}

@media (max-width: 1050px) {
	 

	.login-left,
	.login-right {
		width: 100%;
		min-width: 0;
		padding-left: 0;
		padding-top: 50px;
		align-items: center;
		min-height: 0;
	}

	.login-left-title {
		padding-top: 40px;
		max-width: 96vw;
		font-size: 1.45rem;
	}

	.login-left-illustration {
		position: static;
		width: 80vw;
		margin-top: 36px;
		min-width: 150px;
		min-height: 100px;
		max-width: 420px;
	}

	.login-right {
		padding-top: 36px;
		padding-bottom: 32px;
		min-height: 0;
	}

	.login-box {
		margin-bottom: 36px;
	}
}

@media (max-width: 700px) {
	.login-left-title {
		font-size: 1.15rem;
		padding-top: 24px;
	}

	.login-left-illustration {
		width: 95vw;
		max-width: 96vw;
		margin-top: 12vw;
	}

	.login-box {
		width: 99vw;
		padding: 13px 0 0 0;
		min-width: 0;
	}

	.login-right-logo {
		width: 50vw;
	}

	.login-form {
		width: 98vw;
		min-width: 100px;
	}

	.form-group {
		margin-bottom: 26px;
	}

	.login-box-title {
		margin-bottom: 32px;
	}
}

@media (max-width: 480px) {

	.login-box,
	.login-box-title,
	.login-right-logo {
		width: 98vw !important;
		min-width: 0;
	}

	.login-form {
		width: 95vw !important;
	}

	.login-left-title {
		font-size: 0.92rem;
	}

	.form-group {
		margin-bottom: 18px;
	}

	.login-btn {
		font-size: 13px;
	}
}


/* Responsive Styles */
@media (max-width: 1100px) {
	header {
		padding: 26px 22px 0 22px;
	}

	.main-content {
		flex-direction: column;
		align-items: flex-start;
		padding: 36px;
		gap: 28px;
	}

	.right {
		width: 100%;
		justify-content: flex-start;
		margin-left: 0;
	}
}

@media (max-width: 700px) {
	header {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 18px 7vw 0 7vw;
	}

	nav.desktop-nav {
		flex-direction: column;
		align-items: flex-end;
		gap: 8px;
	}

	.main-content {
		flex-direction: column;
		padding: 12px;
		gap: 20px;
	}

	.innner_cont {
		flex-direction: column;
		height: auto;
	}

	.left {
		width: 100%;
		max-width: 100vw;
	}

	.right {
		width: 100%;
		margin-left: 0;
		padding-top: 38px;
	}

	main {
		height: auto;
	}

	.left h1 {
		font-size: 2rem;
	}

	.slide-text {
		font-size: 16px;
	}

	.input-row {
		flex-direction: column;
		align-items: stretch;
	}

	.input-row input[type="email"],
	.input-row button {
		width: 100%;
		box-sizing: border-box;
	}
}

@media (max-width: 500px) {
	.main-content {
		padding: 4px;
	}

	.left h1 {
		font-size: 1.5rem;
	}
}