/*==============================
Theme Colors
==============================*/

        :root {

            --primary: #0B2E5B;
            --secondary: #63B7B5;
            --light: #F7FAFC;
            --white: #ffffff;

        }

        body {

            font-family: Arial, sans-serif;
            background: #fff;

        }

        /* Top Bar */

        .topbar {

            background: var(--primary);
            color: #fff;

        }

        /* Navbar */

        .navbar {

            background: #fff;
            box-shadow: 0 5px 20px rgba(0, 0, 0, .08);

        }

        /* Theme Button */

        .theme-btn {

            background: var(--secondary);
            color: #fff;
            transition: .4s;

        }

        .theme-btn:hover {

            background: var(--primary);

        }

        /* Dropdown Animation */

        .dropdown {

            transition: .4s;

        }

/* ==========================
Desktop Menu Hover
========================== */

nav ul li a{

position:relative;

}

nav ul li a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:#63B7B5;

transition:.3s;

}

nav ul li a:hover::after{

width:100%;

}

/* CTA Button */

.quote-btn{

transition:.4s;

}

.quote-btn:hover{

transform:translateY(-2px);

}

/* Logo */

.logo img{

transition:.4s;

}

.logo img:hover{

transform:scale(1.05);

}

/*=====================================
Dropdown Menu
======================================*/

.dropdown-menu{

position:absolute;

top:100%;

left:0;

min-width:270px;

background:#fff;

border-radius:12px;

box-shadow:0 10px 35px rgba(0,0,0,.12);

opacity:0;

visibility:hidden;

transform:translateY(20px);

transition:.35s;

padding:12px 0;

z-index:999;

}

.group:hover>.dropdown-menu{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.dropdown-menu a{

display:block;

padding:11px 22px;

font-size:15px;

color:#0B2E5B;

transition:.3s;

font-weight:500;

}

.dropdown-menu a:hover{

background:#63B7B5;

color:#fff;

padding-left:30px;

}

.dropdown-menu hr{

margin:8px 0;

border-color:#f2f2f2;

}

/*=====================================
Mega Menu
======================================*/

.mega-menu{

position:absolute;

left:250%;

top:100%;

transform:translateX(-50%) translateY(20px);

width:1000px;

background:#fff;

border-radius:15px;

box-shadow:0 15px 45px rgba(0,0,0,.12);

padding:30px;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999;

}

.group:hover .mega-menu{

opacity:1;

visibility:visible;

transform:translateX(-50%) translateY(0);

}

.mega-title{

font-size:17px;

font-weight:700;

color:#0B2E5B;

margin-bottom:18px;

padding-bottom:10px;

border-bottom:2px solid #63B7B5;

}

.mega-menu a{

display:flex;

align-items:center;

gap:10px;

padding:9px 12px;

border-radius:8px;

color:#444;

font-size:15px;

transition:.3s;

}

.mega-menu a i{

color:#63B7B5;

width:20px;

text-align:center;

}

.mega-menu a:hover{

background:#63B7B5;

color:#fff;

padding-left:18px;

}

.mega-menu a:hover i{

color:#fff;

}

/* Responsive */

@media(max-width:1024px){

.mega-menu{

display:none;

}

}

/*==============================
Mobile Menu
==============================*/

.mobile-nav{

list-style:none;

padding:20px;

}

.mobile-nav li{

border-bottom:1px solid #eee;

}

.mobile-nav a{

display:block;

padding:14px;

color:#0B2E5B;

font-weight:600;

text-decoration:none;

}

.mobile-nav a:hover{

background:#63B7B5;

color:#fff;

}

.accordion,
.accordion2{

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

padding:15px;

background:#fff;

border:none;

cursor:pointer;

font-weight:600;

color:#0B2E5B;

}

.accordion:hover,
.accordion2:hover{

background:#63B7B5;

color:#fff;

}

.panel,
.panel2{

display:none;

background:#fafafa;

}

.panel a{

padding-left:35px;

}

.panel2 a{

padding-left:55px;

font-size:14px;

}

.panel a:hover,
.panel2 a:hover{

background:#0B2E5B;

color:#fff;

}

/*==============================
Sticky Navbar
==============================*/

.navbar{
    position:sticky;
    top:0;
    z-index:9999;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(10px);
    transition:.35s;
}

/* Navigation */

nav ul li{
    position:relative;
}

nav ul li>a{

    display:flex;
    align-items:center;
    gap:5px;

    color:#0B2E5B;

    padding:10px 0;

    font-size:13px;

    font-weight:600;

    transition:.3s;
}

nav ul li>a:hover{

    color:#63B7B5;

}

/* Underline */

/*nav ul li>a::after{*/

/*    content:"";*/

/*    position:absolute;*/

/*    left:0;*/

/*    bottom:18px;*/

/*    width:0;*/

/*    height:2px;*/

/*    background:#63B7B5;*/

/*    transition:.35s;*/

/*}*/

nav ul li:hover>a::after{

    width:100%;

}

/* Active Menu */

.active-menu{

    color:#63B7B5!important;

}

.active-menu::after{

    width:100%!important;

}

/*==============================
Smooth Accordion
==============================*/

.panel,
.panel2{

overflow:hidden;

animation:fadeIn .35s ease;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(-10px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*==============================
Mobile Menu
==============================*/

#mobileMenu{

max-height:calc(100vh - 80px);

overflow-y:auto;

}

/*==============================
Scrollbar
==============================*/

#mobileMenu::-webkit-scrollbar{

width:5px;

}

#mobileMenu::-webkit-scrollbar-thumb{

background:#63B7B5;

border-radius:10px;

}

/*=========================
TAB BUTTON
=========================*/

.tab-btn{

position:relative;

padding: 10px 20px;

border-radius:50px;

background:#fff;

font-weight:600;

font-size:17px;

color:#0B2E5B;

transition:.4s;

overflow:hidden;

box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.tab-btn:hover{

background:#63B7B5;
color:#fff;

}

.tab-btn.active{

background:#0B2E5B;
color:#fff;

}

.tab-btn::after{

content:'';
position:absolute;
left:50%;
bottom:8px;
width:0;
height:3px;
background:#63B7B5;
transform:translateX(-50%);
transition:.4s;

}

.tab-btn.active::after{

width:60%;

}

/*=========================
TAB CONTENT
=========================*/

.tab-content{

display:none;
animation:fade .5s ease;

}

.tab-content.active{

display:block;

}

@keyframes fade{

from{

opacity:0;
transform:translateY(20px);

}

to{

opacity:1;
transform:translateY(0);

}

}

/*=========================
PRODUCT CARD
=========================*/

.product-card{

position:relative;
overflow:hidden;
border-radius:25px;
background:#fff;
transition:.5s;
box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.product-card img{

width:100%;

height: 300px;

object-fit:cover;

transition:.7s;
}

.product-card:hover img{

transform:scale(1.1);

}

/* Animated Border */

.product-card::before{

content:'';

position:absolute;

inset:0;

padding:2px;

border-radius:25px;

background:linear-gradient(
45deg,
#63B7B5,
#0B2E5B,
#63B7B5,
#fff,
#63B7B5
);

background-size:300%;

animation:borderMove 6s linear infinite;

-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

opacity:0;

transition:.4s;

}

.product-card:hover::before{

opacity:1;

}

@keyframes borderMove{

0%{
background-position:0%;
}

100%{
background-position:300%;
}

}

/* Overlay */

.overlay{

position:absolute;

inset:0;

background:linear-gradient(to top,
rgba(11,46,91,.95),
transparent);

display:flex;

align-items:flex-end;

padding:25px;

opacity:0;

transition:.5s;

}

.product-card:hover .overlay{

opacity:1;

}

.overlay a{

background:#63B7B5;
padding:12px 24px;
border-radius:50px;
color:#fff;
font-weight:600;
transition:.4s;

}

.overlay a:hover{

background:#fff;
color:#0B2E5B;

}

.product-content{

padding: 15px;
}

.product-content h3{

font-size: 17px;

text-align: center;

font-weight:700;

color:#0B2E5B;
}

.product-content p{

margin-top:8px;
color:#777;

}


/* why choose us */

.choose-card{

position:relative;

background:#fff;

padding: 15px 15px;

border-radius:25px;

text-align:center;

overflow:hidden;

transition:.45s;

box-shadow:0 15px 35px rgba(0,0,0,.08);

z-index:1;
}

.choose-card:hover{

transform:translateY(-12px);

}

/* Animated Border */

.choose-card::before{

content:'';

position:absolute;

inset:0;

padding:2px;

border-radius:25px;

background:linear-gradient(
135deg,
#63B7B5,
#0B2E5B,
#63B7B5,
#ffffff,
#63B7B5
);

background-size:300%;

animation:borderAnimation 6s linear infinite;

-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

opacity:0;

transition:.4s;

}

.choose-card:hover::before{

opacity:1;

}

@keyframes borderAnimation{

0%{
background-position:0%;
}

100%{
background-position:300%;
}

}

/* Icon */

.choose-icon{

width: 60px;

height: 60px;

margin:auto;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#0B2E5B;

color:#fff;

font-size: 25px;

transition:.4s;
}

.choose-card:hover .choose-icon{

background:#63B7B5;
transform:rotateY(360deg);

}

.choose-card h3{

margin-top: 7px;

font-size: 18px;

font-weight:700;

color:#0B2E5B;
}

.choose-card p{

margin-top: 5px;

color: #0b2e5b;
}

/* Shine Effect */

.choose-card::after{

content:'';

position:absolute;

top:-120%;

left:-60%;

width:70px;

height:400px;

background:rgba(255,255,255,.5);

transform:rotate(25deg);

transition:1s;

}

.choose-card:hover::after{

left:150%;

}

/* featured slider  */

.swiper-slide{
padding:10px 0 25px;
}

.product-card:hover{
transform:translateY(-12px);
box-shadow:0 25px 60px rgba(11,46,91,.18);
}

.featuredSlider{
    position:relative;
    padding:10px 0 70px;
}

/* Navigation Buttons */

.featured-prev,
.featured-next{

    position:absolute;
    top:45%;
    transform:translateY(-50%);
    width:55px;
    height:55px;
    border-radius:50%;
    background:#fff;
    border:2px solid #63B7B5;
    color:#0B2E5B;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:20;
    transition:.35s ease;
    box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.featured-prev{

    left:0px;

}

.featured-next{

    right:0px;

}

.featured-prev:hover,
.featured-next:hover{

    background:#0B2E5B;
    border-color:#0B2E5B;
    color:#fff;
    transform:translateY(-50%) scale(1.08);

}

.featured-prev i,
.featured-next i{

    font-size:18px;

}

/* Mobile */

@media(max-width:768px){

.featured-prev{

    left:10px;

}

.featured-next{

    right:10px;

}

.featured-prev,
.featured-next{

    width:45px;
    height:45px;

}

}

/* industry */

/* =========================================
INDUSTRY CARD
========================================= */

.industry-card{
    position:relative;
    background:#ffffffcc;
    backdrop-filter:blur(10px);
    border-radius:24px;
    padding: 25px 20px;
    text-align:center;
    overflow:hidden;
    transition:all .45s ease;
    box-shadow:0 12px 30px rgba(0,0,0,.06);
}

.industry-card:hover{
    transform:translateY(-10px);
    box-shadow:0 22px 55px rgba(11,46,91,.16);
}

/* Animated Border */

.industry-card::before{
    content:'';
    position:absolute;
    inset:0;
    padding:2px;
    border-radius:24px;
    background:linear-gradient(
        135deg,
        #63B7B5,
        #0B2E5B,
        #63B7B5,
        #ffffff,
        #63B7B5
    );
    background-size:300% 300%;
    animation:industryBorder 6s linear infinite;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;

    opacity:0;
    transition:.35s;
}

.industry-card:hover::before{
    opacity:1;
}

@keyframes industryBorder{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

/* Icon */

.industry-icon{
    width: 65px;
    height: 65px;
    margin:0 auto 18px;
    border-radius:22px;
    background:linear-gradient(135deg,#0B2E5B,#63B7B5);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size: 30px;
    transition:all .5s ease;
    box-shadow:0 12px 25px rgba(99,183,181,.28);
}

.industry-card:hover .industry-icon{
    transform:rotateY(360deg) scale(1.08);
    box-shadow:0 18px 40px rgba(11,46,91,.28);
}

/* Title */

.industry-card h3{
    font-size:20px;
    font-weight:700;
    color:#0B2E5B;
    transition:.3s;
}

.industry-card:hover h3{
    color:#63B7B5;
}

/* Shine Effect */

.industry-card::after{
    content:'';
    position:absolute;
    top:-120%;
    left:-55%;
    width:70px;
    height:360px;
    background:rgba(255,255,255,.55);
    transform:rotate(25deg);
    transition:1s;
}

.industry-card:hover::after{
    left:150%;
}

/* country */
.slider{

overflow:hidden;

position:relative;

}

.slide-track{

display:flex;

width:max-content;

animation:scrollLeft 30s linear infinite;

}

.reverse .slide-track{

animation:scrollRight 35s linear infinite;

}

.slider:hover .slide-track{

animation-play-state:paused;

}

.country{

display:flex;

align-items:center;

gap:12px;

padding:14px 24px;

margin:0 12px;

background:#fff;

border-radius:60px;

border:1px solid rgba(99,183,181,.20);

box-shadow:0 10px 30px rgba(11,46,91,.08);

font-weight:600;

color:#0B2E5B;

white-space:nowrap;

transition:.35s;

cursor:pointer;

}

.country:hover{

background:#0B2E5B;

color:#fff;

transform:translateY(-6px);

box-shadow:0 20px 40px rgba(11,46,91,.20);

}

.country .fi{

font-size:24px;

border-radius:50%;

box-shadow:0 4px 10px rgba(0,0,0,.12);

}

@keyframes scrollLeft{

from{

transform:translateX(0);

}

to{

transform:translateX(-50%);

}

}

@keyframes scrollRight{

from{

transform:translateX(-50%);

}

to{

transform:translateX(0);

}

}

@media(max-width:768px){

.country{

padding:10px 18px;

font-size:14px;

}

.country .fi{

font-size:20px;

}

}

/* footer */

/*==================================
TULKEN PREMIUM FOOTER
PART 3A
==================================*/

footer{
    position:relative;
    background:#071C38;
    color:#fff;
}

/* Title */

.footer-title{
    position:relative;
    display:inline-block;
    font-size: 18px;
    font-weight:700;
    padding-bottom:14px;
    margin-bottom:20px;
    color:#fff;
}

.footer-title::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:55px;

    height:3px;

    border-radius:50px;

    background:#63B7B5;

}

/* Links */

.footer-links{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-links li{

    list-style:none;

}

.footer-links a{

    color:#cbd5e1;

    display:inline-flex;

    align-items:center;

    gap:10px;

    transition:.35s;

}

.footer-links a::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:#63B7B5;

    transform:scale(0);

    transition:.35s;

}

.footer-links a:hover{

    color:#63B7B5;

    transform:translateX(8px);

}

.footer-links a:hover::before{

    transform:scale(1);

}

/* Contact Cards */

.contact-card{

    display:flex;

    gap:18px;

    align-items:flex-start;

    padding:24px;

    border-radius:20px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

    transition:.35s;

    height:100%;

}

.contact-card:hover{

    transform:translateY(-8px);

    background:#0B2E5B;

    border-color:#63B7B5;

    box-shadow:

    0 18px 40px rgba(0,0,0,.25);

}

.contact-card .icon{

    width:60px;

    height:60px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#63B7B5;

    color:#fff;

    font-size:22px;

}

.contact-card small{

    display:block;

    color:#94a3b8;

    margin-bottom:8px;

}

.contact-card h4{

    font-size:17px;

    font-weight:600;

    margin-bottom:4px;

}

.contact-card a{

    color:#fff;

}

.contact-card p{

    color:#e2e8f0;

    line-height:1.8;

}

/* Country Slider */

.country-slider{

    overflow:hidden;

    position:relative;

}

.country-track{

    display:flex;

    width:max-content;

    animation:countryLeft 40s linear infinite;

}

.reverse .country-track{

    animation:countryRight 40s linear infinite;

}

.country-slider:hover .country-track{

    animation-play-state:paused;

}

/* Country Badge */

.country-pill{

    display:flex;

    align-items:center;

    gap:10px;

    margin:0 12px;

    padding:14px 24px;

    white-space:nowrap;

    border-radius:60px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

    cursor:pointer;

}

.country-pill:hover{

    background:#63B7B5;

    transform:translateY(-6px);

}

.country-pill .fi{

    font-size:22px;

    border-radius:50%;

    overflow:hidden;

}

/* Slider Animation */

@keyframes countryLeft{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

@keyframes countryRight{

    from{

        transform:translateX(-50%);

    }

    to{

        transform:translateX(0);

    }

}

/*==================================
FOOTER PART 3B
==================================*/

/* ==========================
Certificate
========================== */

.certificate{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 24px;

    border-radius:60px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

    color:#fff;

    font-weight:600;

    transition:.35s;

    cursor:pointer;

}

.certificate:hover{

    background:#63B7B5;

    transform:translateY(-6px);

    box-shadow:

    0 15px 35px rgba(99,183,181,.25);

}

/* ==========================
Social Icons
========================== */

.social-icon{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    transition:.35s;

    font-size:18px;

}

.social-icon:hover{

    background:#63B7B5;

    color:#fff;

    transform:

    translateY(-8px)

    rotate(360deg);

}

/* ==========================
World Map Effect
========================== */

footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at center,

    rgba(99,183,181,.08),

    transparent 70%);

    pointer-events:none;

}

footer::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:3px;

    background:

    linear-gradient(

    90deg,

    transparent,

    #63B7B5,

    #fff,

    #63B7B5,

    transparent);

}

/* ==========================
Bottom Text
========================== */

footer p{

    color:#94a3b8;

}

/* ==========================
Hover Glow
========================== */

.contact-card:hover .icon{

    transform:scale(1.1);

    transition:.35s;

}

.country-pill:hover .fi{

    transform:scale(1.15);

    transition:.35s;

}

.social-icon i{

    transition:.35s;

}

/* ==========================
Scrollbar Hide
========================== */

.country-slider{

    -ms-overflow-style:none;

    scrollbar-width:none;

}

.country-slider::-webkit-scrollbar{

    display:none;

}

/* ==========================
Responsive
========================== */

@media(max-width:1024px){

.contact-card{

padding:18px;

}

.contact-card .icon{

width:54px;

height:54px;

font-size:20px;

}

.footer-title{

font-size:20px;

}

}

@media(max-width:768px){

footer{

text-align:center;

}

.footer-title::after{

left:50%;

transform:translateX(-50%);

}

.footer-links{

align-items:center;

}

.contact-card{

flex-direction:column;

align-items:center;

text-align:center;

}

.contact-card .icon{

margin-bottom:10px;

}

.country-pill{

padding:10px 18px;

font-size:14px;

margin:0 8px;

}

.country-pill .fi{

font-size:18px;

}

.social-icon{

width:44px;

height:44px;

}

}

/* ==========================
Smooth Animation
========================== */

*{

scroll-behavior:smooth;

}

.contact-card,

.country-pill,

.certificate,

.social-icon{

transition:

all .35s ease;

}
/* ===== CONTENT AREA START ===== */
.content-area {
  font-size: 15px;
  line-height: 1.8;
  color: #444;
}

/* Paragraph */
.content-area p {
  margin-bottom: 12px;
}

/* Headings */
.content-area h1,
.content-area h2,
.content-area h3,
.content-area h4,
.content-area h5,
.content-area h6 {
  font-weight: 600;
  color: #0A2F6B;
  margin-top: 20px;
  margin-bottom: 10px;
  line-height: 1.4;
}

.content-area h1 { font-size: 28px; }
.content-area h2 { font-size: 24px; }
.content-area h3 { font-size: 20px; }
.content-area h4 { font-size: 18px; }

/* Lists */
.content-area ul {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 15px;
}

.content-area ol {
  list-style: decimal;
  padding-left: 22px;
  margin-bottom: 15px;
}

.content-area li {
  margin-bottom: 0px;
}

/* Links */
.content-area a {
  color: #1DA1F2;
  text-decoration: none;
}

.content-area a:hover {
  text-decoration: underline;
}

/* Images */
.content-area img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 15px 0;
}

/* Blockquote */
.content-area blockquote {
  border-left: 4px solid #1DA1F2;
  padding-left: 12px;
  color: #555;
  margin: 15px 0;
  font-style: italic;
}

/* Table */
.content-area table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}

.content-area table th,
.content-area table td {
  border: 1px solid #ddd;
  padding: 8px;
}

.content-area table th {
  background: #f5f5f5;
}

/* Strong / Bold */
.content-area strong {
  font-weight: 800;
}

/* Spacing Fix */
.content-area * {
  word-wrap: break-word;
}

/* ===== CONTENT AREA END ===== */

.custom-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,.55);
    color:#fff;
    cursor:pointer;
    z-index:99;
    display:flex !important;
    align-items:center;
    justify-content:center;
    transition:.3s;
}

.custom-arrow:hover{
    background:#facc15;
    color:#000;
}

.slick-prev{
    left:20px;
}

.slick-next{
    right:20px;
}

.custom-arrow i{
    font-size:18px;
}

/* Default slick icons hide */
.slick-prev:before,
.slick-next:before{
    display:none;
}

/* Responsive */
@media(max-width:768px){
    .custom-arrow{
        width:40px;
        height:40px;
    }

    .slick-prev{
        left:10px;
    }

    .slick-next{
        right:10px;
    }
}