1	/* ===================================
     2	   CSS Variables
     3	   =================================== */
     4	:root {
     5	    /* Colors */
     6	    --primary-color: #667eea;
     7	    --secondary-color: #764ba2;
     8	    --accent-color: #f093fb;
     9	    --success-color: #10b981;
    10	    --warning-color: #f59e0b;
    11	    --error-color: #ef4444;
    12	    --dark-color: #1e293b;
    13	    --light-color: #f8fafc;
    14	    --white: #ffffff;
    15	    --black: #000000;
    16	    
    17	    /* Gradients */
    18	    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    19	    --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    20	    --gradient-overlay: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
    21	    
    22	    /* Typography */
    23	    --font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    24	    --font-size-base: 16px;
    25	    --font-size-sm: 14px;
    26	    --font-size-lg: 18px;
    27	    --font-size-xl: 24px;
    28	    --font-size-2xl: 32px;
    29	    --font-size-3xl: 48px;
    30	    
    31	    /* Spacing */
    32	    --spacing-xs: 0.5rem;
    33	    --spacing-sm: 1rem;
    34	    --spacing-md: 1.5rem;
    35	    --spacing-lg: 2rem;
    36	    --spacing-xl: 3rem;
    37	    --spacing-2xl: 4rem;
    38	    
    39	    /* Shadows */
    40	    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    41	    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    42	    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    43	    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    44	    
    45	    /* Border Radius */
    46	    --radius-sm: 0.5rem;
    47	    --radius-md: 1rem;
    48	    --radius-lg: 1.5rem;
    49	    --radius-xl: 2rem;
    50	    --radius-full: 9999px;
    51	    
    52	    /* Transitions */
    53	    --transition-fast: 0.15s ease;
    54	    --transition-base: 0.3s ease;
    55	    --transition-slow: 0.5s ease;
    56	}
    57	
    58	/* ===================================
    59	   Reset & Base Styles
    60	   =================================== */
    61	* {
    62	    margin: 0;
    63	    padding: 0;
    64	    box-sizing: border-box;
    65	}
    66	
    67	html {
    68	    scroll-behavior: smooth;
    69	    font-size: var(--font-size-base);
    70	}
    71	
    72	body {
    73	    font-family: var(--font-family);
    74	    line-height: 1.6;
    75	    color: var(--dark-color);
    76	    background-color: var(--light-color);
    77	    overflow-x: hidden;
    78	}
    79	
    80	img {
    81	    max-width: 100%;
    82	    height: auto;
    83	    display: block;
    84	}
    85	
    86	a {
    87	    text-decoration: none;
    88	    color: inherit;
    89	    transition: var(--transition-base);
    90	}
    91	
    92	button {
    93	    font-family: inherit;
    94	    cursor: pointer;
    95	    border: none;
    96	    outline: none;
    97	    transition: var(--transition-base);
    98	}
    99	
   100	input, textarea, select {
   101	    font-family: inherit;
   102	    outline: none;
   103	    transition: var(--transition-base);
   104	}
   105	
   106	ul, ol {
   107	    list-style: none;
   108	}
   109	
   110	/* ===================================
   111	   Utility Classes
   112	   =================================== */
   113	.container {
   114	    max-width: 1200px;
   115	    margin: 0 auto;
   116	    padding: 0 var(--spacing-md);
   117	}
   118	
   119	.gradient-text {
   120	    background: var(--gradient-primary);
   121	    -webkit-background-clip: text;
   122	    -webkit-text-fill-color: transparent;
   123	    background-clip: text;
   124	}
   125	
   126	.section-header {
   127	    text-align: center;
   128	    margin-bottom: var(--spacing-2xl);
   129	}
   130	
   131	.section-title {
   132	    font-size: var(--font-size-3xl);
   133	    font-weight: 700;
   134	    color: var(--dark-color);
   135	    margin-bottom: var(--spacing-sm);
   136	}
   137	
   138	.section-subtitle {
   139	    font-size: var(--font-size-lg);
   140	    color: #64748b;
   141	}
   142	
   143	/* ===================================
   144	   Loading Screen
   145	   =================================== */
   146	.loading-screen {
   147	    position: fixed;
   148	    top: 0;
   149	    left: 0;
   150	    width: 100%;
   151	    height: 100%;
   152	    background: var(--gradient-primary);
   153	    display: flex;
   154	    flex-direction: column;
   155	    align-items: center;
   156	    justify-content: center;
   157	    z-index: 9999;
   158	    transition: opacity 0.5s ease;
   159	}
   160	
   161	.loading-screen.hidden {
   162	    opacity: 0;
   163	    pointer-events: none;
   164	}
   165	
   166	.loading-spinner {
   167	    width: 50px;
   168	    height: 50px;
   169	    border: 4px solid rgba(255, 255, 255, 0.3);
   170	    border-top-color: var(--white);
   171	    border-radius: 50%;
   172	    animation: spin 1s linear infinite;
   173	}
   174	
   175	.loading-screen p {
   176	    color: var(--white);
   177	    margin-top: var(--spacing-md);
   178	    font-size: var(--font-size-lg);
   179	}
   180	
   181	@keyframes spin {
   182	    to { transform: rotate(360deg); }
   183	}
   184	
   185	/* ===================================
   186	   Navigation
   187	   =================================== */
   188	.navbar {
   189	    position: fixed;
   190	    top: 0;
   191	    left: 0;
   192	    width: 100%;
   193	    background: rgba(255, 255, 255, 0.95);
   194	    backdrop-filter: blur(10px);
   195	    box-shadow: var(--shadow-sm);
   196	    z-index: 1000;
   197	    transition: var(--transition-base);
   198	}
   199	
   200	.navbar.scrolled {
   201	    box-shadow: var(--shadow-md);
   202	}
   203	
   204	.nav-wrapper {
   205	    display: flex;
   206	    align-items: center;
   207	    justify-content: space-between;
   208	    padding: var(--spacing-sm) 0;
   209	}
   210	
   211	.logo {
   212	    display: flex;
   213	    align-items: center;
   214	    gap: var(--spacing-sm);
   215	    font-size: var(--font-size-xl);
   216	    font-weight: 700;
   217	    color: var(--primary-color);
   218	}
   219	
   220	.logo-img {
   221	    width: 40px;
   222	    height: 40px;
   223	    object-fit: contain;
   224	}
   225	
   226	.nav-menu {
   227	    display: flex;
   228	    gap: var(--spacing-lg);
   229	    align-items: center;
   230	}
   231	
   232	.nav-link {
   233	    font-weight: 500;
   234	    padding: var(--spacing-xs) var(--spacing-md);
   235	    border-radius: var(--radius-full);
   236	    transition: var(--transition-base);
   237	}
   238	
   239	.nav-link:hover,
   240	.nav-link.active {
   241	    background: var(--gradient-primary);
   242	    color: var(--white);
   243	}
   244	
   245	.nav-auth {
   246	    display: flex;
   247	    align-items: center;
   248	    gap: var(--spacing-sm);
   249	}
   250	
   251	.btn-auth {
   252	    display: flex;
   253	    align-items: center;
   254	    gap: var(--spacing-xs);
   255	    background: var(--gradient-primary);
   256	    color: var(--white);
   257	    padding: var(--spacing-xs) var(--spacing-md);
   258	    border-radius: var(--radius-full);
   259	    font-weight: 600;
   260	}
   261	
   262	.btn-auth:hover {
   263	    transform: translateY(-2px);
   264	    box-shadow: var(--shadow-lg);
   265	}
   266	
   267	.user-menu {
   268	    position: relative;
   269	}
   270	
   271	.btn-user {
   272	    display: flex;
   273	    align-items: center;
   274	    gap: var(--spacing-xs);
   275	    background: var(--light-color);
   276	    color: var(--dark-color);
   277	    padding: var(--spacing-xs) var(--spacing-md);
   278	    border-radius: var(--radius-full);
   279	    font-weight: 600;
   280	}
   281	
   282	.user-dropdown {
   283	    position: absolute;
   284	    top: calc(100% + 10px);
   285	    right: 0;
   286	    background: var(--white);
   287	    border-radius: var(--radius-md);
   288	    box-shadow: var(--shadow-xl);
   289	    min-width: 200px;
   290	    padding: var(--spacing-sm);
   291	    display: none;
   292	}
   293	
   294	.user-menu:hover .user-dropdown {
   295	    display: block;
   296	}
   297	
   298	.user-dropdown a {
   299	    display: flex;
   300	    align-items: center;
   301	    gap: var(--spacing-sm);
   302	    padding: var(--spacing-sm);
   303	    border-radius: var(--radius-sm);
   304	    transition: var(--transition-base);
   305	}
   306	
   307	.user-dropdown a:hover {
   308	    background: var(--light-color);
   309	}
   310	
   311	.menu-toggle {
   312	    display: none;
   313	    flex-direction: column;
   314	    gap: 5px;
   315	    background: transparent;
   316	    padding: var(--spacing-xs);
   317	}
   318	
   319	.menu-toggle span {
   320	    width: 25px;
   321	    height: 3px;
   322	    background: var(--dark-color);
   323	    border-radius: var(--radius-full);
   324	    transition: var(--transition-base);
   325	}
   326	
   327	/* ===================================
   328	   Hero Section
   329	   =================================== */
   330	.hero {
   331	    position: relative;
   332	    min-height: 100vh;
   333	    display: flex;
   334	    align-items: center;
   335	    justify-content: center;
   336	    padding-top: 80px;
   337	    overflow: hidden;
   338	}
   339	
   340	.hero-background {
   341	    position: absolute;
   342	    top: 0;
   343	    left: 0;
   344	    width: 100%;
   345	    height: 100%;
   346	    background: url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=1920&h=1080&fit=crop') center/cover;
   347	    z-index: -2;
   348	}
   349	
   350	.hero-overlay {
   351	    position: absolute;
   352	    top: 0;
   353	    left: 0;
   354	    width: 100%;
   355	    height: 100%;
   356	    background: var(--gradient-overlay);
   357	    z-index: -1;
   358	}
   359	
   360	.hero-content {
   361	    text-align: center;
   362	    color: var(--white);
   363	    padding: var(--spacing-xl) 0;
   364	}
   365	
   366	.hero-title {
   367	    font-size: var(--font-size-3xl);
   368	    font-weight: 800;
   369	    line-height: 1.2;
   370	    margin-bottom: var(--spacing-md);
   371	}
   372	
   373	.hero-subtitle {
   374	    font-size: var(--font-size-xl);
   375	    margin-bottom: var(--spacing-xl);
   376	    opacity: 0.9;
   377	}
   378	
   379	.hero-buttons {
   380	    display: flex;
   381	    gap: var(--spacing-md);
   382	    justify-content: center;
   383	    flex-wrap: wrap;
   384	    margin-bottom: var(--spacing-2xl);
   385	}
   386	
   387	.btn {
   388	    display: inline-flex;
   389	    align-items: center;
   390	    gap: var(--spacing-sm);
   391	    padding: var(--spacing-md) var(--spacing-xl);
   392	    border-radius: var(--radius-full);
   393	    font-size: var(--font-size-lg);
   394	    font-weight: 600;
   395	    transition: var(--transition-base);
   396	}
   397	
   398	.btn-primary {
   399	    background: var(--white);
   400	    color: var(--primary-color);
   401	}
   402	
   403	.btn-primary:hover {
   404	    transform: translateY(-3px);
   405	    box-shadow: var(--shadow-xl);
   406	}
   407	
   408	.btn-outline {
   409	    background: transparent;
   410	    color: var(--white);
   411	    border: 2px solid var(--white);
   412	}
   413	
   414	.btn-outline:hover {
   415	    background: var(--white);
   416	    color: var(--primary-color);
   417	}
   418	
   419	.hero-stats {
   420	    display: flex;
   421	    gap: var(--spacing-xl);
   422	    justify-content: center;
   423	    flex-wrap: wrap;
   424	}
   425	
   426	.stat-item {
   427	    text-align: center;
   428	}
   429	
   430	.stat-number {
   431	    font-size: var(--font-size-2xl);
   432	    font-weight: 800;
   433	    margin-bottom: var(--spacing-xs);
   434	}
   435	
   436	.stat-label {
   437	    font-size: var(--font-size-base);
   438	    opacity: 0.9;
   439	}
   440	
   441	.scroll-indicator {
   442	    position: absolute;
   443	    bottom: var(--spacing-xl);
   444	    left: 50%;
   445	    transform: translateX(-50%);
   446	    text-align: center;
   447	    color: var(--white);
   448	    animation: bounce 2s infinite;
   449	}
   450	
   451	.scroll-icon {
   452	    width: 30px;
   453	    height: 50px;
   454	    border: 2px solid var(--white);
   455	    border-radius: var(--radius-full);
   456	    position: relative;
   457	    margin: 0 auto var(--spacing-sm);
   458	}
   459	
   460	.scroll-icon::before {
   461	    content: '';
   462	    position: absolute;
   463	    top: 10px;
   464	    left: 50%;
   465	    transform: translateX(-50%);
   466	    width: 6px;
   467	    height: 6px;
   468	    background: var(--white);
   469	    border-radius: 50%;
   470	    animation: scroll 2s infinite;
   471	}
   472	
   473	@keyframes bounce {
   474	    0%, 100% { transform: translateX(-50%) translateY(0); }
   475	    50% { transform: translateX(-50%) translateY(-10px); }
   476	}
   477	
   478	@keyframes scroll {
   479	    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
   480	    100% { opacity: 0; transform: translateX(-50%) translateY(20px); }
   481	}
   482	
   483	/* ===================================
   484	   Services Section
   485	   =================================== */
   486	.services {
   487	    padding: var(--spacing-2xl) 0;
   488	    background: var(--white);
   489	}
   490	
   491	.services-grid {
   492	    display: grid;
   493	    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   494	    gap: var(--spacing-xl);
   495	}
   496	
   497	.service-card {
   498	    background: var(--white);
   499	    padding: var(--spacing-xl);
   500	    border-radius: var(--radius-xl);
   501	    box-shadow: var(--shadow-md);
   502	    transition: var(--transition-base);
   503	    position: relative;
   504	    overflow: hidden;
   505	}
   506	
   507	.service-card::before {
   508	    content: '';
   509	    position: absolute;
   510	    top: 0;
   511	    left: 0;
   512	    width: 100%;
   513	    height: 5px;
   514	    background: var(--gradient-primary);
   515	    transform: scaleX(0);
   516	    transition: var(--transition-base);
   517	}
   518	
   519	.service-card:hover {
   520	    transform: translateY(-10px);
   521	    box-shadow: var(--shadow-xl);
   522	}
   523	
   524	.service-card:hover::before {
   525	    transform: scaleX(1);
   526	}
   527	
   528	.service-card.featured {
   529	    background: var(--gradient-primary);
   530	    color: var(--white);
   531	}
   532	
   533	.featured-badge {
   534	    position: absolute;
   535	    top: var(--spacing-md);
   536	    right: var(--spacing-md);
   537	    background: rgba(255, 255, 255, 0.2);
   538	    color: var(--white);
   539	    padding: var(--spacing-xs) var(--spacing-md);
   540	    border-radius: var(--radius-full);
   541	    font-size: var(--font-size-sm);
   542	    font-weight: 600;
   543	}
   544	
   545	.service-icon {
   546	    width: 80px;
   547	    height: 80px;
   548	    background: var(--gradient-primary);
   549	    border-radius: var(--radius-full);
   550	    display: flex;
   551	    align-items: center;
   552	    justify-content: center;
   553	    font-size: var(--font-size-2xl);
   554	    color: var(--white);
   555	    margin-bottom: var(--spacing-md);
   556	}
   557	
   558	.service-card.featured .service-icon {
   559	    background: rgba(255, 255, 255, 0.2);
   560	}
   561	
   562	.service-title {
   563	    font-size: var(--font-size-xl);
   564	    font-weight: 700;
   565	    margin-bottom: var(--spacing-md);
   566	}
   567	
   568	.service-description {
   569	    margin-bottom: var(--spacing-md);
   570	    line-height: 1.8;
   571	}
   572	
   573	.service-features {
   574	    margin-bottom: var(--spacing-lg);
   575	}
   576	
   577	.service-features li {
   578	    display: flex;
   579	    align-items: center;
   580	    gap: var(--spacing-sm);
   581	    margin-bottom: var(--spacing-sm);
   582	}
   583	
   584	.service-features i {
   585	    color: var(--success-color);
   586	}
   587	
   588	.service-card.featured .service-features i {
   589	    color: var(--white);
   590	}
   591	
   592	.service-btn {
   593	    display: inline-block;
   594	    width: 100%;
   595	    text-align: center;
   596	    padding: var(--spacing-md);
   597	    background: var(--gradient-primary);
   598	    color: var(--white);
   599	    border-radius: var(--radius-full);
   600	    font-weight: 600;
   601	    transition: var(--transition-base);
   602	}
   603	
   604	.service-card.featured .service-btn {
   605	    background: var(--white);
   606	    color: var(--primary-color);
   607	}
   608	
   609	.service-btn:hover {
   610	    transform: translateY(-2px);
   611	    box-shadow: var(--shadow-lg);
   612	}
   613	
   614	/* ===================================
   615	   Countries Section
   616	   =================================== */
   617	.countries {
   618	    padding: var(--spacing-2xl) 0;
   619	    background: var(--light-color);
   620	}
   621	
   622	.countries-grid {
   623	    display: grid;
   624	    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   625	    gap: var(--spacing-lg);
   626	}
   627	
   628	.country-card {
   629	    background: var(--white);
   630	    border-radius: var(--radius-lg);
   631	    overflow: hidden;
   632	    box-shadow: var(--shadow-md);
   633	    transition: var(--transition-base);
   634	}
   635	
   636	.country-card:hover {
   637	    transform: translateY(-10px);
   638	    box-shadow: var(--shadow-xl);
   639	}
   640	
   641	.country-image {
   642	    position: relative;
   643	    height: 200px;
   644	    overflow: hidden;
   645	}
   646	
   647	.country-image img {
   648	    width: 100%;
   649	    height: 100%;
   650	    object-fit: cover;
   651	    transition: var(--transition-slow);
   652	}
   653	
   654	.country-card:hover .country-image img {
   655	    transform: scale(1.1);
   656	}
   657	
   658	.country-overlay {
   659	    position: absolute;
   660	    top: 0;
   661	    left: 0;
   662	    width: 100%;
   663	    height: 100%;
   664	    background: var(--gradient-overlay);
   665	    display: flex;
   666	    align-items: center;
   667	    justify-content: center;
   668	    opacity: 0;
   669	    transition: var(--transition-base);
   670	}
   671	
   672	.country-card:hover .country-overlay {
   673	    opacity: 1;
   674	}
   675	
   676	.country-overlay i {
   677	    font-size: var(--font-size-3xl);
   678	    color: var(--white);
   679	}
   680	
   681	.country-info {
   682	    padding: var(--spacing-md);
   683	}
   684	
   685	.country-name {
   686	    font-size: var(--font-size-xl);
   687	    font-weight: 700;
   688	    margin-bottom: var(--spacing-xs);
   689	}
   690	
   691	.country-type {
   692	    color: #64748b;
   693	    margin-bottom: var(--spacing-md);
   694	}
   695	
   696	.country-stats {
   697	    display: flex;
   698	    gap: var(--spacing-md);
   699	    margin-bottom: var(--spacing-md);
   700	    font-size: var(--font-size-sm);
   701	    color: #64748b;
   702	}
   703	
   704	.country-stats span {
   705	    display: flex;
   706	    align-items: center;
   707	    gap: var(--spacing-xs);
   708	}
   709	
   710	.country-btn {
   711	    display: block;
   712	    width: 100%;
   713	    text-align: center;
   714	    padding: var(--spacing-sm);
   715	    background: var(--gradient-primary);
   716	    color: var(--white);
   717	    border-radius: var(--radius-md);
   718	    font-weight: 600;
   719	    transition: var(--transition-base);
   720	}
   721	
   722	.country-btn:hover {
   723	    transform: translateY(-2px);
   724	    box-shadow: var(--shadow-md);
   725	}
   726	
   727	/* ===================================
   728	   Process Section
   729	   =================================== */
   730	.process {
   731	    padding: var(--spacing-2xl) 0;
   732	    background: var(--white);
   733	}
   734	
   735	.process-steps {
   736	    display: grid;
   737	    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   738	    gap: var(--spacing-xl);
   739	}
   740	
   741	.process-step {
   742	    position: relative;
   743	    padding: var(--spacing-xl);
   744	    text-align: center;
   745	}
   746	
   747	.step-number {
   748	    position: absolute;
   749	    top: 0;
   750	    right: var(--spacing-md);
   751	    font-size: 4rem;
   752	    font-weight: 800;
   753	    color: rgba(102, 126, 234, 0.1);
   754	}
   755	
   756	.step-icon {
   757	    width: 100px;
   758	    height: 100px;
   759	    background: var(--gradient-primary);
   760	    border-radius: 50%;
   761	    display: flex;
   762	    align-items: center;
   763	    justify-content: center;
   764	    font-size: var(--font-size-2xl);
   765	    color: var(--white);
   766	    margin: 0 auto var(--spacing-md);
   767	    position: relative;
   768	    z-index: 1;
   769	}
   770	
   771	.step-title {
   772	    font-size: var(--font-size-xl);
   773	    font-weight: 700;
   774	    margin-bottom: var(--spacing-md);
   775	}
   776	
   777	.step-description {
   778	    line-height: 1.8;
   779	    color: #64748b;
   780	}
   781	
   782	/* ===================================
   783	   Testimonials Section
   784	   =================================== */
   785	.testimonials {
   786	    padding: var(--spacing-2xl) 0;
   787	    background: var(--light-color);
   788	}
   789	
   790	.testimonials-grid {
   791	    display: grid;
   792	    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   793	    gap: var(--spacing-xl);
   794	}
   795	
   796	.testimonial-card {
   797	    background: var(--white);
   798	    padding: var(--spacing-xl);
   799	    border-radius: var(--radius-xl);
   800	    box-shadow: var(--shadow-md);
   801	    transition: var(--transition-base);
   802	}
   803	
   804	.testimonial-card:hover {
   805	    transform: translateY(-5px);
   806	    box-shadow: var(--shadow-xl);
   807	}
   808	
   809	.testimonial-card.featured {
   810	    background: var(--gradient-primary);
   811	    color: var(--white);
   812	}
   813	
   814	.testimonial-stars {
   815	    display: flex;
   816	    gap: var(--spacing-xs);
   817	    margin-bottom: var(--spacing-md);
   818	    color: #fbbf24;
   819	}
   820	
   821	.testimonial-card.featured .testimonial-stars {
   822	    color: var(--white);
   823	}
   824	
   825	.testimonial-text {
   826	    line-height: 1.8;
   827	    margin-bottom: var(--spacing-lg);
   828	    font-style: italic;
   829	}
   830	
   831	.testimonial-author {
   832	    display: flex;
   833	    align-items: center;
   834	    gap: var(--spacing-md);
   835	}
   836	
   837	.author-avatar {
   838	    width: 50px;
   839	    height: 50px;
   840	    background: var(--gradient-primary);
   841	    border-radius: 50%;
   842	    display: flex;
   843	    align-items: center;
   844	    justify-content: center;
   845	    color: var(--white);
   846	    font-size: var(--font-size-xl);
   847	}
   848	
   849	.testimonial-card.featured .author-avatar {
   850	    background: rgba(255, 255, 255, 0.2);
   851	}
   852	
   853	.author-name {
   854	    font-weight: 700;
   855	    margin-bottom: var(--spacing-xs);
   856	}
   857	
   858	.author-country {
   859	    font-size: var(--font-size-sm);
   860	    color: #64748b;
   861	}
   862	
   863	.testimonial-card.featured .author-country {
   864	    color: rgba(255, 255, 255, 0.8);
   865	}
   866	
   867	/* ===================================
   868	   About Section
   869	   =================================== */
   870	.about {
   871	    padding: var(--spacing-2xl) 0;
   872	    background: var(--white);
   873	}
   874	
   875	.about-wrapper {
   876	    display: grid;
   877	    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
   878	    gap: var(--spacing-2xl);
   879	    align-items: center;
   880	}
   881	
   882	.about-image {
   883	    position: relative;
   884	    border-radius: var(--radius-xl);
   885	    overflow: hidden;
   886	    box-shadow: var(--shadow-xl);
   887	}
   888	
   889	.about-image img {
   890	    width: 100%;
   891	    height: auto;
   892	}
   893	
   894	.about-badge {
   895	    position: absolute;
   896	    bottom: var(--spacing-lg);
   897	    left: var(--spacing-lg);
   898	    background: var(--white);
   899	    padding: var(--spacing-md) var(--spacing-lg);
   900	    border-radius: var(--radius-md);
   901	    box-shadow: var(--shadow-lg);
   902	    display: flex;
   903	    align-items: center;
   904	    gap: var(--spacing-sm);
   905	}
   906	
   907	.about-badge i {
   908	    font-size: var(--font-size-xl);
   909	    color: var(--primary-color);
   910	}
   911	
   912	.about-text {
   913	    line-height: 1.8;
   914	    margin-bottom: var(--spacing-xl);
   915	    color: #64748b;
   916	}
   917	
   918	.about-features {
   919	    display: grid;
   920	    gap: var(--spacing-md);
   921	    margin-bottom: var(--spacing-xl);
   922	}
   923	
   924	.about-feature {
   925	    display: flex;
   926	    gap: var(--spacing-md);
   927	    align-items: start;
   928	}
   929	
   930	.feature-icon {
   931	    width: 50px;
   932	    height: 50px;
   933	    background: var(--gradient-primary);
   934	    border-radius: var(--radius-md);
   935	    display: flex;
   936	    align-items: center;
   937	    justify-content: center;
   938	    color: var(--white);
   939	    flex-shrink: 0;
   940	}
   941	
   942	.feature-content h4 {
   943	    font-weight: 700;
   944	    margin-bottom: var(--spacing-xs);
   945	}
   946	
   947	.feature-content p {
   948	    color: #64748b;
   949	}
   950	
   951	/* ===================================
   952	   CTA Section
   953	   =================================== */
   954	.cta {
   955	    position: relative;
   956	    padding: var(--spacing-2xl) 0;
   957	    overflow: hidden;
   958	}
   959	
   960	.cta-background {
   961	    position: absolute;
   962	    top: 0;
   963	    left: 0;
   964	    width: 100%;
   965	    height: 100%;
   966	    background: var(--gradient-primary);
   967	    z-index: -1;
   968	}
   969	
   970	.cta-content {
   971	    text-align: center;
   972	    color: var(--white);
   973	}
   974	
   975	.cta-title {
   976	    font-size: var(--font-size-3xl);
   977	    font-weight: 800;
   978	    margin-bottom: var(--spacing-md);
   979	}
   980	
   981	.cta-text {
   982	    font-size: var(--font-size-xl);
   983	    margin-bottom: var(--spacing-xl);
   984	    opacity: 0.9;
   985	}
   986	
   987	.cta-buttons {
   988	    display: flex;
   989	    gap: var(--spacing-md);
   990	    justify-content: center;
   991	    flex-wrap: wrap;
   992	}
   993	
   994	.btn-white {
   995	    background: var(--white);
   996	    color: var(--primary-color);
   997	}
   998	
   999	.btn-white:hover {
  1000	    transform: translateY(-3px);
  1001	    box-shadow: var(--shadow-xl);
  1002	}
  1003	
  1004	.btn-outline-white {
  1005	    background: transparent;
  1006	    color: var(--white);
  1007	    border: 2px solid var(--white);
  1008	}
  1009	
  1010	.btn-outline-white:hover {
  1011	    background: var(--white);
  1012	    color: var(--primary-color);
  1013	}
  1014	
  1015	/* ===================================
  1016	   Contact Section
  1017	   =================================== */
  1018	.contact {
  1019	    padding: var(--spacing-2xl) 0;
  1020	    background: var(--light-color);
  1021	}
  1022	
  1023	.contact-wrapper {
  1024	    display: grid;
  1025	    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  1026	    gap: var(--spacing-2xl);
  1027	}
  1028	
  1029	.contact-form-wrapper {
  1030	    background: var(--white);
  1031	    padding: var(--spacing-xl);
  1032	    border-radius: var(--radius-xl);
  1033	    box-shadow: var(--shadow-md);
  1034	}
  1035	
  1036	.contact-form {
  1037	    display: grid;
  1038	    gap: var(--spacing-md);
  1039	}
  1040	
  1041	.form-row {
  1042	    display: grid;
  1043	    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  1044	    gap: var(--spacing-md);
  1045	}
  1046	
  1047	.form-group {
  1048	    display: flex;
  1049	    flex-direction: column;
  1050	    gap: var(--spacing-xs);
  1051	}
  1052	
  1053	.form-group label {
  1054	    display: flex;
  1055	    align-items: center;
  1056	    gap: var(--spacing-xs);
  1057	    font-weight: 600;
  1058	    color: var(--dark-color);
  1059	}
  1060	
  1061	.form-group input,
  1062	.form-group textarea,
  1063	.form-group select {
  1064	    padding: var(--spacing-md);
  1065	    border: 2px solid #e2e8f0;
  1066	    border-radius: var(--radius-md);
  1067	    font-size: var(--font-size-base);
  1068	    transition: var(--transition-base);
  1069	}
  1070	
  1071	.form-group input:focus,
  1072	.form-group textarea:focus,
  1073	.form-group select:focus {
  1074	    border-color: var(--primary-color);
  1075	    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  1076	}
  1077	
  1078	.btn-block {
  1079	    width: 100%;
  1080	    justify-content: center;
  1081	}
  1082	
  1083	.contact-info {
  1084	    display: grid;
  1085	    gap: var(--spacing-md);
  1086	}
  1087	
  1088	.contact-info-item {
  1089	    display: flex;
  1090	    gap: var(--spacing-md);
  1091	    align-items: start;
  1092	    background: var(--white);
  1093	    padding: var(--spacing-md);
  1094	    border-radius: var(--radius-md);
  1095	    box-shadow: var(--shadow-sm);
  1096	}
  1097	
  1098	.info-icon {
  1099	    width: 50px;
  1100	    height: 50px;
  1101	    background: var(--gradient-primary);
  1102	    border-radius: var(--radius-md);
  1103	    display: flex;
  1104	    align-items: center;
  1105	    justify-content: center;
  1106	    color: var(--white);
  1107	    flex-shrink: 0;
  1108	}
  1109	
  1110	.info-content h4 {
  1111	    font-weight: 700;
  1112	    margin-bottom: var(--spacing-xs);
  1113	}
  1114	
  1115	.info-content p {
  1116	    color: #64748b;
  1117	}
  1118	
  1119	.contact-social {
  1120	    background: var(--white);
  1121	    padding: var(--spacing-md);
  1122	    border-radius: var(--radius-md);
  1123	    box-shadow: var(--shadow-sm);
  1124	}
  1125	
  1126	.contact-social h4 {
  1127	    font-weight: 700;
  1128	    margin-bottom: var(--spacing-md);
  1129	}
  1130	
  1131	.social-links {
  1132	    display: flex;
  1133	    gap: var(--spacing-sm);
  1134	}
  1135	
  1136	.social-link {
  1137	    width: 40px;
  1138	    height: 40px;
  1139	    background: var(--gradient-primary);
  1140	    border-radius: 50%;
  1141	    display: flex;
  1142	    align-items: center;
  1143	    justify-content: center;
  1144	    color: var(--white);
  1145	    transition: var(--transition-base);
  1146	}
  1147	
  1148	.social-link:hover {
  1149	    transform: translateY(-3px);
  1150	    box-shadow: var(--shadow-md);
  1151	}
  1152	
  1153	/* ===================================
  1154	   Footer
  1155	   =================================== */
  1156	.footer {
  1157	    background: var(--dark-color);
  1158	    color: var(--white);
  1159	    padding: var(--spacing-2xl) 0 var(--spacing-lg);
  1160	}
  1161	
  1162	.footer-content {
  1163	    display: grid;
  1164	    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  1165	    gap: var(--spacing-xl);
  1166	    margin-bottom: var(--spacing-xl);
  1167	}
  1168	
  1169	.footer-logo {
  1170	    display: flex;
  1171	    align-items: center;
  1172	    gap: var(--spacing-sm);
  1173	    font-size: var(--font-size-xl);
  1174	    font-weight: 700;
  1175	    margin-bottom: var(--spacing-md);
  1176	}
  1177	
  1178	.footer-logo img {
  1179	    width: 40px;
  1180	    height: 40px;
  1181	}
  1182	
  1183	.footer-about {
  1184	    line-height: 1.8;
  1185	    opacity: 0.8;
  1186	    margin-bottom: var(--spacing-md);
  1187	}
  1188	
  1189	.footer-social {
  1190	    display: flex;
  1191	    gap: var(--spacing-sm);
  1192	}
  1193	
  1194	.footer-social a {
  1195	    width: 40px;
  1196	    height: 40px;
  1197	    background: rgba(255, 255, 255, 0.1);
  1198	    border-radius: 50%;
  1199	    display: flex;
  1200	    align-items: center;
  1201	    justify-content: center;
  1202	    transition: var(--transition-base);
  1203	}
  1204	
  1205	.footer-social a:hover {
  1206	    background: var(--primary-color);
  1207	    transform: translateY(-3px);
  1208	}
  1209	
  1210	.footer-title {
  1211	    font-size: var(--font-size-lg);
  1212	    font-weight: 700;
  1213	    margin-bottom: var(--spacing-md);
  1214	}
  1215	
  1216	.footer-links {
  1217	    display: grid;
  1218	    gap: var(--spacing-sm);
  1219	}
  1220	
  1221	.footer-links a {
  1222	    display: flex;
  1223	    align-items: center;
  1224	    gap: var(--spacing-xs);
  1225	    opacity: 0.8;
  1226	    transition: var(--transition-base);
  1227	}
  1228	
  1229	.footer-links a:hover {
  1230	    opacity: 1;
  1231	    padding-right: var(--spacing-xs);
  1232	}
  1233	
  1234	.footer-contact {
  1235	    display: grid;
  1236	    gap: var(--spacing-md);
  1237	}
  1238	
  1239	.footer-contact li {
  1240	    display: flex;
  1241	    align-items: start;
  1242	    gap: var(--spacing-sm);
  1243	    opacity: 0.8;
  1244	}
  1245	
  1246	.footer-bottom {
  1247	    text-align: center;
  1248	    padding-top: var(--spacing-lg);
  1249	    border-top: 1px solid rgba(255, 255, 255, 0.1);
  1250	    opacity: 0.8;
  1251	}
  1252	
  1253	.footer-bottom p {
  1254	    margin-bottom: var(--spacing-xs);
  1255	}
  1256	
  1257	/* ===================================
  1258	   Modal
  1259	   =================================== */
  1260	.modal {
  1261	    position: fixed;
  1262	    top: 0;
  1263	    left: 0;
  1264	    width: 100%;
  1265	    height: 100%;
  1266	    z-index: 2000;
  1267	    display: none;
  1268	    align-items: center;
  1269	    justify-content: center;
  1270	    padding: var(--spacing-md);
  1271	}
  1272	
  1273	.modal.active {
  1274	    display: flex;
  1275	}
  1276	
  1277	.modal-overlay {
  1278	    position: absolute;
  1279	    top: 0;
  1280	    left: 0;
  1281	    width: 100%;
  1282	    height: 100%;
  1283	    background: rgba(0, 0, 0, 0.7);
  1284	    backdrop-filter: blur(5px);
  1285	}
  1286	
  1287	.modal-content {
  1288	    position: relative;
  1289	    background: var(--white);
  1290	    border-radius: var(--radius-xl);
  1291	    max-width: 500px;
  1292	    width: 100%;
  1293	    max-height: 90vh;
  1294	    overflow-y: auto;
  1295	    box-shadow: var(--shadow-xl);
  1296	    animation: modalSlideIn 0.3s ease;
  1297	}
  1298	
  1299	@keyframes modalSlideIn {
  1300	    from {
  1301	        opacity: 0;
  1302	        transform: translateY(-50px);
  1303	    }
  1304	    to {
  1305	        opacity: 1;
  1306	        transform: translateY(0);
  1307	    }
  1308	}
  1309	
  1310	.modal-close {
  1311	    position: absolute;
  1312	    top: var(--spacing-md);
  1313	    left: var(--spacing-md);
  1314	    width: 40px;
  1315	    height: 40px;
  1316	    background: var(--light-color);
  1317	    border-radius: 50%;
  1318	    display: flex;
  1319	    align-items: center;
  1320	    justify-content: center;
  1321	    z-index: 1;
  1322	    transition: var(--transition-base);
  1323	}
  1324	
  1325	.modal-close:hover {
  1326	    background: var(--error-color);
  1327	    color: var(--white);
  1328	}
  1329	
  1330	.auth-form {
  1331	    padding: var(--spacing-2xl);
  1332	}
  1333	
  1334	.auth-title {
  1335	    font-size: var(--font-size-2xl);
  1336	    font-weight: 800;
  1337	    text-align: center;
  1338	    margin-bottom: var(--spacing-sm);
  1339	}
  1340	
  1341	.auth-subtitle {
  1342	    text-align: center;
  1343	    color: #64748b;
  1344	    margin-bottom: var(--spacing-xl);
  1345	}
  1346	
  1347	.form-options {
  1348	    display: flex;
  1349	    justify-content: space-between;
  1350	    align-items: center;
  1351	    margin-bottom: var(--spacing-md);
  1352	}
  1353	
  1354	.checkbox {
  1355	    display: flex;
  1356	    align-items: center;
  1357	    gap: var(--spacing-xs);
  1358	    cursor: pointer;
  1359	}
  1360	
  1361	.forgot-password {
  1362	    color: var(--primary-color);
  1363	    font-size: var(--font-size-sm);
  1364	}
  1365	
  1366	.forgot-password:hover {
  1367	    text-decoration: underline;
  1368	}
  1369	
  1370	.auth-divider {
  1371	    text-align: center;
  1372	    position: relative;
  1373	    margin: var(--spacing-lg) 0;
  1374	}
  1375	
  1376	.auth-divider::before,
  1377	.auth-divider::after {
  1378	    content: '';
  1379	    position: absolute;
  1380	    top: 50%;
  1381	    width: 40%;
  1382	    height: 1px;
  1383	    background: #e2e8f0;
  1384	}
  1385	
  1386	.auth-divider::before {
  1387	    right: 0;
  1388	}
  1389	
  1390	.auth-divider::after {
  1391	    left: 0;
  1392	}
  1393	
  1394	.auth-divider span {
  1395	    background: var(--white);
  1396	    padding: 0 var(--spacing-md);
  1397	    color: #64748b;
  1398	}
  1399	
  1400	.auth-switch {
  1401	    text-align: center;
  1402	    color: #64748b;
  1403	}
  1404	
  1405	.auth-switch a {
  1406	    color: var(--primary-color);
  1407	    font-weight: 600;
  1408	}
  1409	
  1410	.auth-switch a:hover {
  1411	    text-decoration: underline;
  1412	}
  1413	
  1414	/* ===================================
  1415	   Chat Widget
  1416	   =================================== */
  1417	.chat-widget {
  1418	    position: fixed;
  1419	    bottom: var(--spacing-lg);
  1420	    left: var(--spacing-lg);
  1421	    z-index: 1500;
  1422	}
  1423	
  1424	.chat-toggle {
  1425	    width: 60px;
  1426	    height: 60px;
  1427	    background: var(--gradient-primary);
  1428	    border-radius: 50%;
  1429	    box-shadow: var(--shadow-xl);
  1430	    display: flex;
  1431	    align-items: center;
  1432	    justify-content: center;
  1433	    color: var(--white);
  1434	    font-size: var(--font-size-xl);
  1435	    position: relative;
  1436	    animation: pulse 2s infinite;
  1437	}
  1438	
  1439	@keyframes pulse {
  1440	    0%, 100% { transform: scale(1); }
  1441	    50% { transform: scale(1.05); }
  1442	}
  1443	
  1444	.chat-badge {
  1445	    position: absolute;
  1446	    top: -5px;
  1447	    right: -5px;
  1448	    width: 25px;
  1449	    height: 25px;
  1450	    background: var(--error-color);
  1451	    border-radius: 50%;
  1452	    display: flex;
  1453	    align-items: center;
  1454	    justify-content: center;
  1455	    font-size: var(--font-size-sm);
  1456	    font-weight: 700;
  1457	}
  1458	
  1459	.chat-window {
  1460	    position: absolute;
  1461	    bottom: 80px;
  1462	    left: 0;
  1463	    width: 350px;
  1464	    height: 500px;
  1465	    background: var(--white);
  1466	    border-radius: var(--radius-xl);
  1467	    box-shadow: var(--shadow-xl);
  1468	    display: flex;
  1469	    flex-direction: column;
  1470	    overflow: hidden;
  1471	}
  1472	
  1473	.chat-header {
  1474	    background: var(--gradient-primary);
  1475	    color: var(--white);
  1476	    padding: var(--spacing-md);
  1477	    display: flex;
  1478	    justify-content: space-between;
  1479	    align-items: center;
  1480	}
  1481	
  1482	.chat-header h4 {
  1483	    font-weight: 700;
  1484	    margin-bottom: var(--spacing-xs);
  1485	}
  1486	
  1487	.chat-status {
  1488	    display: flex;
  1489	    align-items: center;
  1490	    gap: var(--spacing-xs);
  1491	    font-size: var(--font-size-sm);
  1492	    opacity: 0.9;
  1493	}
  1494	
  1495	.status-dot {
  1496	    width: 8px;
  1497	    height: 8px;
  1498	    background: var(--success-color);
  1499	    border-radius: 50%;
  1500	    animation: blink 2s infinite;
  1501	}
  1502	
  1503	@keyframes blink {
  1504	    0%, 100% { opacity: 1; }
  1505	    50% { opacity: 0.3; }
  1506	}
  1507	
  1508	.chat-close {
  1509	    width: 30px;
  1510	    height: 30px;
  1511	    background: rgba(255, 255, 255, 0.2);
  1512	    border-radius: 50%;
  1513	    display: flex;
  1514	    align-items: center;
  1515	    justify-content: center;
  1516	    color: var(--white);
  1517	}
  1518	
  1519	.chat-messages {
  1520	    flex: 1;
  1521	    padding: var(--spacing-md);
  1522	    overflow-y: auto;
  1523	    background: var(--light-color);
  1524	}
  1525	
  1526	.chat-message {
  1527	    display: flex;
  1528	    gap: var(--spacing-sm);
  1529	    margin-bottom: var(--spacing-md);
  1530	}
  1531	
  1532	.message-avatar {
  1533	    width: 40px;
  1534	    height: 40px;
  1535	    background: var(--gradient-primary);
  1536	    border-radius: 50%;
  1537	    display: flex;
  1538	    align-items: center;
  1539	    justify-content: center;
  1540	    color: var(--white);
  1541	    flex-shrink: 0;
  1542	}
  1543	
  1544	.message-content {
  1545	    background: var(--white);
  1546	    padding: var(--spacing-sm) var(--spacing-md);
  1547	    border-radius: var(--radius-md);
  1548	    max-width: 70%;
  1549	}
  1550	
  1551	.message-time {
  1552	    font-size: var(--font-size-sm);
  1553	    color: #64748b;
  1554	    display: block;
  1555	    margin-top: var(--spacing-xs);
  1556	}
  1557	
  1558	.chat-message.user {
  1559	    flex-direction: row-reverse;
  1560	}
  1561	
  1562	.chat-message.user .message-content {
  1563	    background: var(--gradient-primary);
  1564	    color: var(--white);
  1565	}
  1566	
  1567	.chat-input {
  1568	    display: flex;
  1569	    gap: var(--spacing-sm);
  1570	    padding: var(--spacing-md);
  1571	    border-top: 1px solid #e2e8f0;
  1572	}
  1573	
  1574	.chat-input input {
  1575	    flex: 1;
  1576	    padding: var(--spacing-sm) var(--spacing-md);
  1577	    border: 1px solid #e2e8f0;
  1578	    border-radius: var(--radius-full);
  1579	}
  1580	
  1581	.chat-input button {
  1582	    width: 40px;
  1583	    height: 40px;
  1584	    background: var(--gradient-primary);
  1585	    border-radius: 50%;
  1586	    color: var(--white);
  1587	    display: flex;
  1588	    align-items: center;
  1589	    justify-content: center;
  1590	}
  1591	
  1592	/* ===================================
  1593	   Back to Top
  1594	   =================================== */
  1595	.back-to-top {
  1596	    position: fixed;
  1597	    bottom: var(--spacing-lg);
  1598	    right: var(--spacing-lg);
  1599	    width: 50px;
  1600	    height: 50px;
  1601	    background: var(--gradient-primary);
  1602	    border-radius: 50%;
  1603	    color: var(--white);
  1604	    display: none;
  1605	    align-items: center;
  1606	    justify-content: center;
  1607	    box-shadow: var(--shadow-lg);
  1608	    z-index: 1000;
  1609	    transition: var(--transition-base);
  1610	}
  1611	
  1612	.back-to-top.active {
  1613	    display: flex;
  1614	}
  1615	
  1616	.back-to-top:hover {
  1617	    transform: translateY(-5px);
  1618	    box-shadow: var(--shadow-xl);
  1619	}
  1620	
  1621	/* ===================================
  1622	   Responsive Design
  1623	   =================================== */
  1624	@media (max-width: 768px) {
  1625	    :root {
  1626	        --font-size-3xl: 32px;
  1627	        --font-size-2xl: 24px;
  1628	        --font-size-xl: 20px;
  1629	    }
  1630	    
  1631	    .menu-toggle {
  1632	        display: flex;
  1633	    }
  1634	    
  1635	    .nav-menu {
  1636	        position: fixed;
  1637	        top: 70px;
  1638	        right: -100%;
  1639	        width: 100%;
  1640	        height: calc(100vh - 70px);
  1641	        background: var(--white);
  1642	        flex-direction: column;
  1643	        padding: var(--spacing-xl);
  1644	        box-shadow: var(--shadow-xl);
  1645	        transition: var(--transition-base);
  1646	    }
  1647	    
  1648	    .nav-menu.active {
  1649	        right: 0;
  1650	    }
  1651	    
  1652	    .hero-title {
  1653	        font-size: var(--font-size-2xl);
  1654	    }
  1655	    
  1656	    .hero-subtitle {
  1657	        font-size: var(--font-size-lg);
  1658	    }
  1659	    
  1660	    .services-grid,
  1661	    .countries-grid,
  1662	    .process-steps,
  1663	    .testimonials-grid {
  1664	        grid-template-columns: 1fr;
  1665	    }
  1666	    
  1667	    .about-wrapper,
  1668	    .contact-wrapper {
  1669	        grid-template-columns: 1fr;
  1670	    }
  1671	    
  1672	    .form-row {
  1673	        grid-template-columns: 1fr;
  1674	    }
  1675	    
  1676	    .chat-window {
  1677	        width: calc(100vw - 40px);
  1678	        right: 20px;
  1679	        left: auto;
  1680	    }
  1681	    
  1682	    .footer-content {
  1683	        grid-template-columns: 1fr;
  1684	    }
  1685	}
  1686	
  1687	@media (max-width: 480px) {
  1688	    :root {
  1689	        --spacing-2xl: 3rem;
  1690	    }
  1691	    
  1692	    .container {
  1693	        padding: 0 var(--spacing-sm);
  1694	    }
  1695	    
  1696	    .btn {
  1697	        padding: var(--spacing-sm) var(--spacing-md);
  1698	        font-size: var(--font-size-base);
  1699	    }
  1700	    
  1701	    .hero-buttons {
  1702	        flex-direction: column;
  1703	        align-items: stretch;
  1704	    }
  1705	    
  1706	    .hero-stats {
  1707	        flex-direction: column;
  1708	        gap: var(--spacing-md);
  1709	    }
  1710	}
  1711	
  1712	/* ===================================
  1713	   Animations
  1714	   =================================== */
  1715	[data-aos] {
  1716	    opacity: 0;
  1717	    transition: opacity 0.6s ease, transform 0.6s ease;
  1718	}
  1719	
  1720	[data-aos].aos-animate {
  1721	    opacity: 1;
  1722	}
  1723	
  1724	[data-aos="fade-up"] {
  1725	    transform: translateY(30px);
  1726	}
  1727	
  1728	[data-aos="fade-up"].aos-animate {
  1729	    transform: translateY(0);
  1730	}
  1731	
  1732	[data-aos="fade-right"] {
  1733	    transform: translateX(-30px);
  1734	}
  1735	
  1736	[data-aos="fade-right"].aos-animate {
  1737	    transform: translateX(0);
  1738	}
  1739	
  1740	[data-aos="fade-left"] {
  1741	    transform: translateX(30px);
  1742	}
  1743	
  1744	[data-aos="fade-left"].aos-animate {
  1745	    transform: translateX(0);
  1746	}
  1747	
  1748	[data-aos="zoom-in"] {
  1749	    transform: scale(0.9);
  1750	}
  1751	
  1752	[data-aos="zoom-in"].aos-animate {
  1753	    transform: scale(1);
  1754	}