/**
* Template Name: Arsha
* Template URL: https://bootstrapmade.com/arsha-free-bootstrap-html-template-corporate/
* Updated: Jun 02 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root { --default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --heading-font: "Jost", sans-serif; --nav-font: "Poppins", sans-serif;}

/* Global Colors */
:root { /* Background Color - This color is applied to the background of the entire website as well as individual sections. */
--background-color: #ffffff;

/* Default Color - This is the default color used for the majority of the text content. */
--default-color: #444444;

/* Heading Color - This color is used for titles, headings and secondary elements. */
--heading-color: #37517e;

/* Accent Color - This is the main accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out. */
--accent-color: #47b2e4;

/* Contrast Color - This is a color used for text when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors. */
--contrast-color: #ffffff;}

/* Nav Menu Colors */
:root { /* Nav Color - This is the default color of the main navmenu links. */
--nav-color: #ffffff;

/* Nav Hover Color - This color is applied to main navmenu links when they are hovered over. */
--nav-hover-color: #47b2e4;

/* Nav Dropdown Background Color - This color is used as the background for dropdown boxes that appear when hovering over primary navigation items. */
--nav-dropdown-background-color: #ffffff;

/* Nav Dropdown Color - This color is used for navigation links of the dropdown items in the navigation menu. */
--nav-dropdown-color: #444444;

/* Nav Dropdown Hover Color - Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
--nav-dropdown-hover-color: #47b2e4;}

/* Template Custom Colors */
:root { --hero-background-color: #37517e; --hero-color: #ffffff;}

/* Smooth scroll */
:root { scroll-behavior: smooth;}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body { color: #555; font-family: Arial, Helvetica, sans-serif; font-size:16px;}

a { color: #F26722; text-decoration: none; transition: 0.3s;}

a:hover { color:#015E98; text-decoration: none;}

h1, h2, h3, h4, h5, h6 { color: #015E98; }


/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {color: #FFF; background-color:rgba(1, 94, 152, 0.7); padding: 15px 0; transition: all 0.5s; z-index: 997;}

.header .logo { line-height: 1;}
.header .logo img { max-height: 100px; margin-right: 8px;}

.header .logo h1 { font-size: 30px; margin: 0; font-weight: 500; color: var(--heading-color); letter-spacing: 2px; text-transform: uppercase;}

.header .btn-getstarted, .header .btn-getstarted:focus { color: #FFF; background: #F26722; font-size: 14px; padding: 8px 25px; margin: 0 0 0 30px; border-radius: 50px; transition: 0.3s;}

.header .btn-getstarted:hover, .header .btn-getstarted:focus:hover { color: #FFF; background: #015E98;}

@media (max-width: 1200px) { .header .logo {   order: 1; }

.header .btn-getstarted {   order: 2;   margin: 0 15px 0 0;   padding: 6px 15px; }

.header .navmenu {   order: 3; }
}

/* Index Page Header
------------------------------*/
.index-page .header { --background-color: rgba(255, 255, 255, 0); --heading-color: #ffffff; --nav-color: #ffffff;}

/* Index Page Header on Scroll
------------------------------*/
.index-page.scrolled .header { --background-color: rgba(40, 58, 90, 0.9);}


.footer { color: #FFF; background-color:#015E98; font-size: 14px; padding-bottom:2rem; position: relative;}

@keyframes subscription-loading { 0% {   transform: rotate(0deg); }

100% {   transform: rotate(360deg); }
}

.footer .footer-top { padding-top: 50px;}

.footer .social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid color-mix(in srgb, #555, transparent 50%); font-size: 16px; color: #FFF; margin-right: 10px; transition: 0.3s;}

.footer .social-links a:hover { color: #F26722; border-color: #F26722;}

.footer h4 { font-size: 16px; font-weight: bold; position: relative; padding-bottom: 12px;}

.footer .footer-links { margin-bottom: 30px;}

.footer .footer-links ul { list-style: none; padding: 0; margin: 0;}

.footer .footer-links ul i { margin-right: 3px; font-size: 12px; line-height: 0; color: #F26722;}

.footer .footer-links ul li { padding: 10px 0; display: flex; align-items: center;}

.footer .footer-links ul li:first-child { padding-top: 0;}

.footer .footer-links ul a { display: inline-block; color: #FFF; line-height: 1;}
.footer .footer-links ul a:hover { color: #F26722;}

.footer p { margin-bottom: 0;}


/*--------------------------------------------------------------

#preloader { position: fixed; inset: 0; z-index: 999999; overflow: hidden; background: var(--background-color); transition: all 0.6s ease-out;}

#preloader:before { content: ""; position: fixed; top: calc(50% - 30px); left: calc(50% - 30px); border: 6px solid #ffffff; border-color: #F26722 transparent #F26722 transparent; border-radius: 50%; width: 60px; height: 60px; animation: animate-preloader 1.5s linear infinite;}

@keyframes animate-preloader { 0% {   transform: rotate(0deg); }

100% {   transform: rotate(360deg); }
}
# Preloader
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top { position: fixed; visibility: hidden; opacity: 0; right: 15px; bottom: -15px; z-index: 99999; background-color: #F26722; width: 44px; height: 44px; border-radius: 50px; transition: all 0.4s;}

.scroll-top i { font-size: 24px; color: var(--contrast-color); line-height: 0;}

.scroll-top:hover { background-color: color-mix(in srgb, #F26722, transparent 20%); color: var(--contrast-color);}

.scroll-top.active { visibility: hidden; opacity: 1; bottom: 15px;}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) { [data-aos-delay] {   transition-delay: 0 !important; }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title { --background-color: color-mix(in srgb, #555, transparent 96%); color: #555; background-color: var(--background-color); padding: 20px 0; position: relative;}

.page-title h1 { font-size: 28px; font-weight: 700; margin: 0;}

.page-title .breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0 0 10px 0; margin: 0; font-size: 14px;}

.page-title .breadcrumbs ol li+li { padding-left: 10px;}

.page-title .breadcrumbs ol li+li::before { content: "/"; display: inline-block; padding-right: 10px; color: color-mix(in srgb, #555, transparent 70%);}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section, .section {padding: 60px 0; scroll-margin-top:188px; overflow: clip;}

@media (max-width: 1199px) {section, .section {   scroll-margin-top: 166px; }}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title { text-align: center; padding-bottom: 60px; position: relative;}
.section-title h2 { font-size: 32px; font-weight: 700; margin-bottom: 20px; padding-bottom: 20px; text-transform: uppercase; position: relative;}

.section-title h2:before { content: ""; position: absolute; display: block; width: 160px; height: 1px; background: color-mix(in srgb, #555, transparent 60%); left: 0; right: 0; bottom: 1px; margin: auto;}

.section-title h2::after { content: ""; position: absolute; display: block; width: 60px; height: 3px; background: #F26722; left: 0; right: 0; bottom: 0; margin: auto;}

.section-title p { margin-bottom: 0;}


/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) { .navmenu {   padding: 0; }

.navmenu ul {   margin: 0;   padding: 0;   display: flex;   list-style: none;   align-items: center; text-transform:uppercase; }

.navmenu li {   position: relative; }

.navmenu a,   .navmenu a:focus {   color: var(--nav-color);   padding: 18px 15px;   font-size: 15px; ;   font-weight: 400;   display: flex;   align-items: center;   justify-content: space-between;   white-space: nowrap;   transition: 0.3s; font-weight:500; }

.navmenu a i,   .navmenu a:focus i {   font-size: 12px;   line-height: 0;   margin-left: 5px;   transition: 0.3s; }

.navmenu li:last-child a {   padding-right: 0; }

.navmenu li a#Active {color: #F26722; font-weight:700; }


.navmenu li:hover>a,   .navmenu .active,   .navmenu .active:focus {   color: #F26722; }

.navmenu .dropdown ul {   margin: 0;   padding: 10px 0;   background:#F26722;   display: block;   position: absolute;   visibility: hidden;   left: 14px;   top: 130%;   opacity: 0;   transition: 0.3s;   border-radius: 4px;   z-index: 99;   box-shadow: 0px 0px 30px color-mix(in srgb, #555, transparent 85%); }

.navmenu .dropdown ul li {   min-width: 200px; }

.navmenu .dropdown ul a {   padding: 10px 20px;   font-size: 15px;   text-transform: none;   color:#FFF; }

.navmenu .dropdown ul a i {   font-size: 12px; }

.navmenu .dropdown ul a:hover,   .navmenu .dropdown ul .active:hover,   .navmenu .dropdown ul li:hover>a {   color: #015E98 ; }

.navmenu .dropdown:hover>ul {   opacity: 1;   top: 100%;   visibility: visible; }

.navmenu .dropdown .dropdown ul {   top: 0;   left: -90%;   visibility: hidden; }

.navmenu .dropdown .dropdown:hover>ul {   opacity: 1;   top: 0;   left: -100%;   visibility: visible; }

.navmenu .megamenu {   position: static; }

.navmenu .megamenu ul {   margin: 0;   padding: 10px;   background: var(--nav-dropdown-background-color);   box-shadow: 0px 0px 20px color-mix(in srgb, #555, transparent 90%);   position: absolute;   top: 130%;   left: 0;   right: 0;   visibility: hidden;   opacity: 0;   display: flex;   transition: 0.3s;   border-radius: 4px;   z-index: 99; }

.navmenu .megamenu ul li {   flex: 1; }

.navmenu .megamenu ul li a,   .navmenu .megamenu ul li:hover>a {   padding: 10px 20px;   font-size: 15px;   color: var(--nav-dropdown-color); }

.navmenu .megamenu ul li a:hover,   .navmenu .megamenu ul li .active,   .navmenu .megamenu ul li .active:hover {   color: var(--nav-dropdown-hover-color); }

.navmenu .megamenu:hover>ul {   opacity: 1;   top: 100%;   visibility: visible; }

.navmenu .dd-box-shadow {   box-shadow: 0px 0px 30px color-mix(in srgb, #555, transparent 85%); }
}

/* Mobile Navigation */
@media (max-width: 1199px) { .mobile-nav-toggle {   color: var(--nav-color);   font-size: 28px;   line-height: 0;   margin-right: 10px;   cursor: pointer;   transition: color 0.3s; }

.navmenu {   padding: 0;   z-index: 9997; }

.navmenu ul {   display: none;   position: absolute;   inset: 60px 20px 20px 20px;   padding: 10px 0;   margin: 0;   border-radius: 6px;   background-color: #015E98 ;   overflow-y: auto;   transition: 0.3s;   z-index: 9998;   box-shadow: 0px 0px 30px color-mix(in srgb, #555, transparent 90%);  text-transform:uppercase;}

.navmenu a,   .navmenu a:focus {   color:#FFF;   padding: 10px 20px;  font-size: 17px;   font-weight: 500;   display: flex;   align-items: center;   justify-content: space-between;   white-space: nowrap;   transition: 0.3s; }

.navmenu a i,   .navmenu a:focus i {   font-size: 12px;   line-height: 0;   margin-left: 5px;   width: 30px;   height: 30px;   display: flex;   align-items: center;   justify-content: center;   border-radius: 50%;   transition: 0.3s;   background-color: color-mix(in srgb, #F26722, transparent 10%); }

.navmenu a i:hover,   .navmenu a:focus i:hover {   background-color: #F26722;   color: var(--contrast-color); }

.navmenu a:hover,   .navmenu .active,   .navmenu .active:focus {color: #F26722; }

.navmenu .active i,   .navmenu .active:focus i {   background-color: #F26722;   color: var(--contrast-color);   transform: rotate(180deg); }

.navmenu .dropdown ul {   position: static;   display: none;   z-index: 99;   padding: 10px 0;   margin: 10px 20px;   background-color: var(--nav-dropdown-background-color);   border: 1px solid color-mix(in srgb, #555, transparent 90%);   box-shadow: none;   transition: all 0.5s ease-in-out; }

.navmenu .dropdown ul ul {   background-color: rgba(33, 37, 41, 0.1); }

.navmenu .dropdown>.dropdown-active {   display: block;   background-color: rgba(33, 37, 41, 0.03); }

.mobile-nav-active {   overflow: hidden; }

.mobile-nav-active .mobile-nav-toggle {   color: #fff;   position: absolute;   font-size: 32px;   top: 15px;   right: 15px;   margin-right: 0;   z-index: 9999; }

.mobile-nav-active .navmenu {   position: fixed;   overflow: hidden;   inset: 0;   background: rgba(33, 37, 41, 0.8);   transition: 0.3s; }

.mobile-nav-active .navmenu>ul {   display: block; }
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {  width: 100%; min-height:80vh; position: relative; padding: 120px 0 60px 0; display: flex; align-items: center;  background-image: url("../../bcg/home.jpg");  background-color: #015E98;  background-position: center;  background-repeat: no-repeat;  background-size: cover;}
.hero .social-links i { margin-right: 3px; font-size:1.5rem; line-height: 0;color: #FFF; }
.hero .social-links a { display:block;  color: #F26722; margin-bottom: 20px; transition: 0.3s;}
.hero .social-links a:hover { color: #F26722; border-color: #F26722;}


.hero h1 { margin: 0; font-size:3rem; font-weight: 50; line-height:3rem; color:#FFF; margin-bottom:2rem; text-align: justify;}
.hero h1 span { font-weight: 700; color:#F26722	;text-align: justify;font-size:3.4rem;  line-height:4rem; }

.hero p { color: color-mix(in srgb, #555, transparent 30%); margin: 5px 0 30px 0; font-size: 22px; line-height: 1.3; font-weight: 600;}

.hero .btn-get-started { color: var(--contrast-color); background: #F26722; font-family: var(--heading-font); font-weight: 500; font-size: 15px; letter-spacing: 1px; display: inline-block; padding: 10px 28px 12px 28px; border-radius: 50px; transition: 0.5s;}

.hero .btn-get-started:hover { color: var(--contrast-color); background: color-mix(in srgb, #F26722, transparent 15%);}

/***SERVICES****/
.hero .btn-servs{ color:#FFF; background:none; font-weight: 500; font-size:15px; display: inline-block; padding:6px 10px;transition: 0.5s; margin:0.5rem 1rem;}

.hero .btn-servs:hover { color:#F26722; background:none; }


.hero .btn-watch-video { font-size: 16px; transition: 0.5s; margin-left: 25px; color: #555; font-weight: 600;}

.hero .btn-watch-video i { color: var(--contrast-color); font-size: 32px; transition: 0.3s; line-height: 0; margin-right: 8px;}

.hero .btn-watch-video:hover { color: #F26722;}

.hero .btn-watch-video:hover i { color: color-mix(in srgb, #F26722, transparent 15%);}

.hero .animated { animation: up-down 2s ease-in-out infinite alternate-reverse both;}

@media (max-width: 640px) { .hero h1 {   font-size: 28px;   line-height: 36px; }
.hero .social-links a { display: inline-block;}
.hero p {   font-size: 18px;   line-height: 24px;   margin-bottom: 30px; }

.hero .btn-get-started,   .hero .btn-watch-video {   font-size: 13px; }
}

@keyframes up-down { 0% {   transform: translateY(10px); }

100% {   transform: translateY(-10px); }
}

/*--------------------------------------------------------------
# intros Section
--------------------------------------------------------------*/
.intros { }

.intros .intro-item {padding: 0px 30px; transition: all ease-in-out 0.4s;height: 100%;}

.intros .intro-item .icon { margin-bottom: 20px; text-align: center;}
.intros .intro-item .icon i { color: #F26722; font-size: 4rem; transition: 0.3s; border-radius: 50%; border: 4px solid #F26722; padding: 1rem;}

.intros .intro-item h4 { font-weight: 700; margin-bottom: 15px; font-size: 1.2rem; text-transform: uppercase; text-align:center;}
.intros .intro-item h4 a { color: #015E98; transition: ease-in-out 0.3s;}

.intros .intro-item p { line-height: 24px; font-size: 14px; margin-bottom: 0;}

.intros .intro-item:hover { transform: translateY(-10px);}
.intros .intro-item:hover h4 a { color: #555;}



/***OTHER PAGES HERO 2***/
.hero2 {  width: 100%; min-height:20vh; position: relative; padding: 120px 0 60px 0; display: flex; align-items: center;  background-image: url("../../bcg/hero2.jpg");  background-color: #015E98;   background-position: center;  background-repeat: no-repeat;  background-size: cover;}
.hero2 .social-links i { margin-right: 3px; font-size: 2rem; line-height: 0;color: #FFF; }
.hero2 .social-links a { display:inline-block;  color: #F26722; margin-bottom: 20px; transition: 0.3s;}
.hero2 .social-links a:hover { color: #F26722; border-color: #F26722;}


.hero2 h1 { margin: 0; font-size:2rem; font-weight: 500; line-height: 56px; color:#FFF; margin-bottom:2rem;}
.hero2 h1 span { font-weight: 700; color:#F26722	;}

/*** BREADCRUMBS***/
#breadcrumbs { text-transform:uppercase; padding:1rem 2rem;line-height: 1;  background-color: #FFF; font-size:0.9rem;}
#breadcrumbs span {display: inline-block; color: #015E98;  font-weight:700;line-height: 1;}
#breadcrumbs a {display: inline-block;  color: #F26722; font-weight:500;}
#breadcrumbs a:hover { color: #015E98;}

/*--------------------------------------------------------------
# MAIN TEXT
--------------------------------------------------------------*/

#MainText {  background-image: url("../../bcg/pages.jpg");
  background-color: #FFF;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;}
  
#MainText img.Full{width:100%;}

#MainText .social-links i {display:inline-block; margin-right:10px; margin-bottom:10px;line-height: 0;color:#F26722; }

#MainText .social-links a i{font-size: 2rem;  color: #F26722; margin-bottom: 20px; transition: 0.3s;}
#MainText .social-links a i:hover { color: #015E98; border-color: #F26722;}

/*******/
#MainText .btn-Section{ color:#015E98; background:none; font-weight: 500; font-size:1.1rem; display: inline-block; padding:10px 20px;transition: 0.5s; border:2px solid #015E98; margin:1rem 2rem; text-transform:uppercase;}
#MainText .btn-Section:hover { color:#F26722; background:none; border:2px solid #F26722;}


#MainText .services-list { padding: 10px 30px; border: 1px solid color-mix(in srgb, #555, transparent 90%); margin-bottom: 20px;}

#MainText .services-list a { display: block; line-height: 1; padding: 8px 0 8px 15px; border-left: 3px solid color-mix(in srgb, #555, transparent 70%); margin: 20px 0; color: color-mix(in srgb, #555, transparent 20%); transition: 0.3s;}

#MainText .services-list a.active { color: var(--heading-color); font-weight: 700; border-color: #F26722;}

#MainText .services-list a:hover { border-color: #F26722;}

#MainText .services-img { margin-bottom: 20px;}

#MainText h2 { font-size: 2rem; font-weight: 500; color: #F26722; margin-bottom:2rem;}
#MainText h3 { font-size: 1.6rem; font-weight: 700; margin-top:2rem; text-transform:capitalize;}
#MainText h4 { font-size: 1.3rem; font-weight: 700; color: #F26722; margin-bottom:2rem;}
#MainText h5 { font-size: 1.1rem; font-weight:500; color: #F26722; margin-top:1rem;}

#MainText p { font-size: 1rem; text-align:justify;}

#MainText ul { list-style: none; padding:1rem 0;}

#MainText ul li { padding: 5px 0; text-align:left;}

#MainText ul i { font-size: 20px; margin-right: 8px; color: #F26722;}

.Values{ padding:0 2rem; border-left:2px solid #F26722; border-right:2px solid #F26722;  text-align:center;}

.Vsion{ padding:0 1rem;text-align:center;}
#MainText .Vsion p{ text-align:center;}

#MainText .Values h2 , #MainText .Vsion h2 { font-size: 1.3rem; font-weight: 500; color: #F26722;}

#MainText .Icons {text-align: center; margin-bottom:1rem;}
#MainText .Icons a img {width:70%; border:2px solid #015E98 ; border-radius:50%;}
#MainText .Icons a h4 { color: #015E98;font-weight:500; font-size:0.9rem; text-align:center; padding:1rem;}
#MainText .Icons a:hover h4 { color:#F26722;}

#MainText table { width: 100%; font-weight:600; padding:10px; color:#000; }
#MainText table thead tr th {border:1px solid #555;padding: 10px 0 13px;}
#MainText table thead tr th { text-align: center;}
#MainText table tbody {border-top: none; border-bottom: none;}
#MainText table tbody tr { }
#MainText table tbody tr:nth-child(even) {}
#MainText table tbody tr td { text-align: center; font-size:0.8rem; padding: 5px 10px; min-width: 130px; border:1px solid #555;}
#MainText table tbody tr td.image {width:25%;}
#MainText table tbody tr td.image img {width:100%;}

/*--------------------------------------------------------------
# Registrations  Section
--------------------------------------------------------------*/
.why-us {padding: 30px 0;}

.why-us .content h3 { font-weight: 400; font-size: 34px;}

.why-us .content p { color: color-mix(in srgb, #555, transparent 30%);}

.why-us .faq-container .faq-item { position: relative; padding: 20px; margin-bottom: 20px; box-shadow: 0px 5px 25px 0px color-mix(in srgb, #555, transparent 90%); overflow: hidden;}

.why-us .faq-container .faq-item:last-child { margin-bottom: 0;}

.why-us .faq-container .faq-item h3 { font-weight: 500; font-size: 17px; line-height: 24px; margin: 0 30px 0 0; transition: 0.3s; cursor: pointer;}

.why-us .faq-container .faq-item h3 span { color: #F26722; padding-right: 5px; font-weight: 600;}

.why-us .faq-container .faq-item h3:hover { color: #F26722;}

.why-us .faq-container .faq-item .faq-content { display: grid; grid-template-rows: 0fr; transition: 0.3s ease-in-out; visibility: hidden; opacity: 0;}

.why-us .faq-container .faq-item .faq-content p { margin-bottom: 0; overflow: hidden;}

.why-us .faq-container .faq-item .faq-icon { position: absolute; top: 22px; left: 20px; font-size: 22px; line-height: 0; transition: 0.3s; color: #F26722;}

.why-us .faq-container .faq-item .faq-toggle { position: absolute; top: 20px; right: 20px; font-size:30px; line-height: 0; transition: 0.3s; cursor: pointer;}

.why-us .faq-container .faq-item .faq-toggle:hover { color: #F26722;}

.why-us .faq-container .faq-active h3 { color: #F26722;}

.why-us .faq-container .faq-active .faq-content { grid-template-rows: 1fr; visibility: visible; opacity: 1; padding-top: 10px;}

.why-us .faq-container .faq-active .faq-toggle { transform: rotate(90deg); color: #F26722;}

.why-us .why-us-img { display: flex; align-items: center; justify-content: center;}

.why-us .why-us-img img { max-height: 70%;}


/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-wrap { box-shadow: 0px 0px 20px color-mix(in srgb, #555, transparent 90%);  padding: 30px; height: 100%; text-align: left;}

@media (max-width: 575px) { .contact .info-wrap {   padding: 20px; }}

.contact .info-item { margin-bottom: 40px;}

.contact .info-item i { font-size:2rem; color: #015E98; background: color-mix(in srgb, #015E98, transparent 92%); width: 60px; height:60px; display: flex; justify-content: center; align-items: center; border-radius: 50px; transition: all 0.3s ease-in-out; margin-right: 15px;}

#MainText .contact .info-item h3 { padding: 0; font-size: 1.1rem; font-weight:500; color: #F26722; margin-bottom: 5px;}

#MainText.contact .info-item p { padding: 0; margin-bottom: 0; font-size: 0.9rem; text-align: left;}

.contact .info-item:hover i { background: #015E98; color:#FFF;}

.contact .TheForm { height: 100%; padding: 30px;}

@media (max-width: 575px) { .contact .TheForm {   padding: 20px; }}

.contact .TheForm .error-message { display: none; background: #df1529; color: #ffffff; text-align: left; padding: 15px; margin-bottom: 24px; font-weight: 600;}

.contact .TheForm .sent-message { display: none; color: #ffffff; background: #059652; text-align: center; padding: 15px; margin-bottom: 24px; font-weight: 600;}

.contact .TheForm .loading { display: none; background: var(--background-color); text-align: center; padding: 15px; margin-bottom: 24px;}

.contact .TheForm .loading:before { content: ""; display: inline-block; border-radius: 50%; width: 24px; height: 24px; margin: 0 10px -6px 0; border: 3px solid #F26722; border-top-color: var(--background-color); animation: animate-loading 1s linear infinite;}

.contact .TheForm input[type=text], .contact .TheForm input[type=email], .contact .TheForm textarea { font-size: 14px; padding: 10px 15px; box-shadow: none; border-radius: 0; color: #555; background-color: color-mix(in srgb, var(--background-color), transparent 50%); border-color: color-mix(in srgb, #555, transparent 80%);}

.contact .TheForm input[type=text]:focus, .contact .TheForm input[type=email]:focus, .contact .TheForm textarea:focus { border-color: #F26722;}

.contact .TheForm input[type=text]::placeholder, .contact .TheForm input[type=email]::placeholder, .contact .TheForm textarea::placeholder { color: color-mix(in srgb, #555, transparent 70%);}

.contact .TheForm button[type=submit] { color: var(--contrast-color); background: #F26722; border: 0; padding: 10px 30px; transition: 0.4s; border-radius: 50px;}

.contact .TheForm button[type=submit]:hover { background: color-mix(in srgb, #F26722, transparent 25%);}

@keyframes animate-loading { 0% {   transform: rotate(0deg); }

100% {   transform: rotate(360deg); }}

/*--------------------------------------------------------------
# T &Cs
--------------------------------------------------------------*/

#MainText #Privacy p {font-size:0.8rem;}
#MainText #Privacy li{font-size:0.8rem; list-style:  circle; margin-left:10px; color:#015E98; text-align:justify;}

#MainText .btn-Privacy{ color:#F26722; background:none; border:2px solid #F26722;  font-weight: 500; font-size:0.9rem; display: inline-block; padding:10px 20px;transition: 0.5s; margin:1rem 2rem; text-transform:uppercase;}
#MainText .btn-Privacy:hover {color:#015E98; background:none; border:2px solid #015E98;}
/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
#footer { color: #FFF; background-color:#015E98; font-size: 0.8rem; padding:2rem 0; position: relative; }

@keyframes subscription-loading { 0% {   transform: rotate(0deg); }

100% {   transform: rotate(360deg); }
}

#footer .social-links i { margin-right: 3px; font-size: 1rem; line-height: 0; color: #F26722; }
#footer .social-links a { display:inline-block; color: #FFF; margin-right: 10px; transition: 0.3s;}

#footer .social-links a:hover { color: #F26722; border-color: #F26722;}

#footer h4 { font-size: 16px; font-weight: bold; position: relative; padding-bottom: 12px;}

#footer .footer-links {}
#footer .footer-links i { margin-right: 3px; font-size: 12px; line-height: 0; color: #F26722;}
#footer .footer-links a { display: inline-block; color: #FFF; line-height: 1;}
#footer .footer-links a:hover { color: #F26722;}

#footer p { margin-bottom: 0;}




/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients { --background-color: color-mix(in srgb, var(--heading-color), transparent 95%); padding: 12px 0;}

.clients .swiper { padding: 10px 0;}

.clients .swiper-wrapper { height: auto;}

.clients .swiper-slide img { transition: 0.3s; padding: 0 10px;}

.clients .swiper-slide img:hover { transform: scale(1.1);}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about ul { list-style: none; padding: 0;}

.about ul li { padding-bottom: 5px; display: flex; align-items: center;}

.about ul i { font-size: 20px; padding-right: 4px; color: #F26722;}

.about .read-more { color: #F26722; font-family: var(--heading-font); font-weight: 500; font-size: 16px; letter-spacing: 1px; padding: 8px 28px; border-radius: 5px; transition: 0.3s; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #F26722;}

.about .read-more i { font-size: 18px; margin-left: 5px; line-height: 0; transition: 0.3s;}

.about .read-more:hover { background: #F26722; color: var(--contrast-color);}

.about .read-more:hover i { transform: translate(5px, 0);}

/*--------------------------------------------------------------
# Why Us Section
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Skills Section
--------------------------------------------------------------*/
.skills .content h3 { font-size: 2rem; font-weight: 700;}

.skills .content p { color: color-mix(in srgb, #555, transparent 30%);}

.skills .content p:last-child { margin-bottom: 0;}

.skills .content ul { list-style: none; padding: 0;}

.skills .content ul li { padding-bottom: 10px;}

.skills .progress { height: 60px; display: block; background: none; border-radius: 0;}

.skills .progress .skill { color: #555; padding: 0; margin: 0 0 6px 0; text-transform: uppercase; display: block; font-weight: 600; font-family: var(--heading-font);}

.skills .progress .skill .val { float: right; font-style: normal;}

.skills .progress-bar-wrap { background: color-mix(in srgb, var(--heading-color), transparent 90%); height: 10px;}

.skills .progress-bar { width: 1px; height: 10px; transition: 0.9s; background-color: var(--heading-color);}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services {}

.services .service-item { box-shadow: 0px 5px 90px 0px color-mix(in srgb, #555, transparent 90%); padding: 50px 30px; transition: all ease-in-out 0.4s; background-color: var(--contrast-color); height: 100%;}

.services .service-item .icon { margin-bottom: 10px;}

.services .service-item .icon i { color: #F26722; font-size: 36px; transition: 0.3s;}

.services .service-item h4 { font-weight: 700; margin-bottom: 15px; font-size: 20px;}

.services .service-item h4 a { color: var(--heading-color); transition: ease-in-out 0.3s;}

.services .service-item p { line-height: 24px; font-size: 14px; margin-bottom: 0;}

.services .service-item:hover { transform: translateY(-10px);}

.services .service-item:hover h4 a { color: #F26722;}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action { --background-color: #000000; --default-color: #ffffff; --contrast-color: #ffffff; padding: 120px 0; position: relative; clip-path: inset(0);}

.call-to-action img { position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; z-index: 1;}

.call-to-action:before { content: ""; background: color-mix(in srgb, var(--background-color), transparent 35%); position: absolute; inset: 0; z-index: 2;}

.call-to-action .container { position: relative; z-index: 3;}

.call-to-action h3 { color: #555; font-size: 28px; font-weight: 700;}

.call-to-action p { color: #555;}

.call-to-action .cta-btn { font-family: var(--heading-font); font-weight: 500; font-size: 16px; letter-spacing: 1px; display: inline-block; padding: 12px 40px; border-radius: 50px; transition: 0.5s; margin: 10px; border: 2px solid var(--contrast-color); color: var(--contrast-color);}

.call-to-action .cta-btn:hover { background: #F26722; border: 2px solid #F26722;}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters { padding: 0; margin: 0 auto 20px auto; list-style: none; text-align: center;}

.portfolio .portfolio-filters li { cursor: pointer; display: inline-block; padding: 8px 20px 10px 20px; margin: 0; font-size: 15px; font-weight: 500; line-height: 1; margin-bottom: 5px; border-radius: 50px; transition: all 0.3s ease-in-out; font-family: var(--heading-font);}

.portfolio .portfolio-filters li:hover, .portfolio .portfolio-filters li.filter-active { color: var(--contrast-color); background-color: #F26722;}

.portfolio .portfolio-filters li:first-child { margin-left: 0;}

.portfolio .portfolio-filters li:last-child { margin-right: 0;}

@media (max-width: 575px) { .portfolio .portfolio-filters li {   font-size: 14px;   margin: 0 0 10px 0; }
}

.portfolio .portfolio-item { position: relative; overflow: hidden;}

.portfolio .portfolio-item .portfolio-info { opacity: 0; position: absolute; left: 12px; right: 12px; bottom: -100%; z-index: 3; transition: all ease-in-out 0.5s; background: color-mix(in srgb, var(--background-color), transparent 10%); padding: 15px;}

.portfolio .portfolio-item .portfolio-info h4 { font-size: 18px; font-weight: 600; padding-right: 50px;}

.portfolio .portfolio-item .portfolio-info p { color: color-mix(in srgb, #555, transparent 30%); font-size: 14px; margin-bottom: 0; padding-right: 50px;}

.portfolio .portfolio-item .portfolio-info .preview-link, .portfolio .portfolio-item .portfolio-info .details-link { position: absolute; right: 50px; font-size: 24px; top: calc(50% - 14px); color: color-mix(in srgb, #555, transparent 30%); transition: 0.3s; line-height: 0;}

.portfolio .portfolio-item .portfolio-info .preview-link:hover, .portfolio .portfolio-item .portfolio-info .details-link:hover { color: #F26722;}

.portfolio .portfolio-item .portfolio-info .details-link { right: 14px; font-size: 28px;}

.portfolio .portfolio-item:hover .portfolio-info { opacity: 1; bottom: 0;}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member { box-shadow: 0px 2px 15px color-mix(in srgb, #555, transparent 90%); position: relative; border-radius: 5px; transition: 0.5s; padding: 30px; height: 100%;}

@media (max-width: 468px) { .team .team-member {   flex-direction: column;   justify-content: center !important;   align-items: center !important; }
}

.team .team-member .pic { overflow: hidden; width: 150px; border-radius: 50%; flex-shrink: 0;}

.team .team-member .pic img { transition: ease-in-out 0.3s;}

.team .team-member:hover { transform: translateY(-10px);}

.team .team-member .member-info { padding-left: 30px;}

@media (max-width: 468px) { .team .team-member .member-info {   padding: 30px 0 0 0;   text-align: center; }
}

.team .team-member h4 { font-weight: 700; margin-bottom: 5px; font-size: 20px;}

.team .team-member span { display: block; font-size: 15px; padding-bottom: 10px; position: relative; font-weight: 500;}

.team .team-member span::after { content: ""; position: absolute; display: block; width: 50px; height: 1px; background: color-mix(in srgb, #555, transparent 85%); bottom: 0; left: 0;}

@media (max-width: 468px) { .team .team-member span::after {   left: calc(50% - 25px); }
}

.team .team-member p { margin: 10px 0 0 0; font-size: 14px;}

.team .team-member .social { margin-top: 12px; display: flex; align-items: center; justify-content: start; width: 100%;}

@media (max-width: 468px) { .team .team-member .social {   justify-content: center; }
}

.team .team-member .social a { background: color-mix(in srgb, #555, transparent 94%); transition: ease-in-out 0.3s; display: flex; align-items: center; justify-content: center; border-radius: 50px; width: 36px; height: 36px;}

.team .team-member .social a i { color: color-mix(in srgb, #555, transparent 20%); font-size: 16px; margin: 0 2px;}

.team .team-member .social a:hover { background: #F26722;}

.team .team-member .social a:hover i { color: var(--contrast-color);}

.team .team-member .social a+a { margin-left: 8px;}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing { --background-color: color-mix(in srgb, var(--heading-color), transparent 95%);}

.pricing .pricing-item { background-color: var(--contrast-color); box-shadow: 0 3px 20px -2px color-mix(in srgb, #555, transparent 90%); border-top: 4px solid var(--background-color); padding: 60px 40px; height: 100%; border-radius: 5px;}

.pricing h3 { font-weight: 600; margin-bottom: 15px; font-size: 20px;}

.pricing h4 { color: #F26722; font-size: 48px; font-weight: 400; font-family: var(--heading-font); margin-bottom: 0;}

.pricing h4 sup { font-size: 28px;}

.pricing h4 span { color: color-mix(in srgb, #555, transparent 50%); font-size: 18px;}

.pricing ul { padding: 20px 0; list-style: none; color: color-mix(in srgb, #555, transparent 30%); text-align: left; line-height: 20px;}

.pricing ul li { padding: 10px 0; display: flex; align-items: center;}

.pricing ul i { color: #059652; font-size: 24px; padding-right: 3px;}

.pricing ul .na { color: color-mix(in srgb, #555, transparent 60%);}

.pricing ul .na i { color: color-mix(in srgb, #555, transparent 60%);}

.pricing ul .na span { text-decoration: line-through;}

.pricing .buy-btn { color: #F26722; background-color: var(--background-color); display: inline-block; padding: 8px 35px 10px 35px; border-radius: 50px; transition: none; font-size: 16px; font-weight: 500; font-family: var(--heading-font); transition: 0.3s; border: 1px solid #F26722;}

.pricing .buy-btn:hover { background: #F26722; color: var(--contrast-color);}

.pricing .featured { border-top-color: #F26722;}

.pricing .featured .buy-btn { background: #F26722; color: var(--contrast-color);}

@media (max-width: 992px) { .pricing .box {   max-width: 60%;   margin: 0 auto 30px auto; }
}

@media (max-width: 767px) { .pricing .box {   max-width: 80%;   margin: 0 auto 30px auto; }
}

@media (max-width: 420px) { .pricing .box {   max-width: 100%;   margin: 0 auto 30px auto; }
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .section-header { margin-bottom: 40px;}

.testimonials .testimonials-carousel, .testimonials .testimonials-slider { overflow: hidden;}

.testimonials .testimonial-item { text-align: center;}

.testimonials .testimonial-item .testimonial-img { width: 120px; border-radius: 50%; border: 4px solid var(--background-color); margin: 0 auto;}

.testimonials .testimonial-item h3 { font-size: 20px; font-weight: bold; margin: 10px 0 5px 0;}

.testimonials .testimonial-item h4 { font-size: 14px; color: color-mix(in srgb, #555, transparent 40%); margin: 0 0 15px 0;}

.testimonials .testimonial-item .stars { margin-bottom: 15px;}

.testimonials .testimonial-item .stars i { color: #ffc107; margin: 0 1px;}

.testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right { color: color-mix(in srgb, #F26722, transparent 50%); font-size: 26px; line-height: 0;}

.testimonials .testimonial-item .quote-icon-left { display: inline-block; left: -5px; position: relative;}

.testimonials .testimonial-item .quote-icon-right { display: inline-block; right: -5px; position: relative; top: 10px; transform: scale(-1, -1);}

.testimonials .testimonial-item p { font-style: italic; margin: 0 auto 15px auto;}

.testimonials .swiper-wrapper { height: auto;}

.testimonials .swiper-pagination { margin-top: 20px; position: relative;}

.testimonials .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; opacity: 1; background-color: color-mix(in srgb, #555, transparent 85%);}

.testimonials .swiper-pagination .swiper-pagination-bullet-active { background-color: #F26722;}

@media (min-width: 992px) { .testimonials .testimonial-item p {   width: 80%; }
}

/*--------------------------------------------------------------
# Faq 2 Section
--------------------------------------------------------------*/
.faq-2 { --background-color: color-mix(in srgb, var(--heading-color), transparent 95%);}

.faq-2 .faq-container { margin-top: 15px;}

.faq-2 .faq-container .faq-item { position: relative; padding: 20px; margin-bottom: 20px; background-color: var(--contrast-color); overflow: hidden;}

.faq-2 .faq-container .faq-item:last-child { margin-bottom: 0;}

.faq-2 .faq-container .faq-item h3 { font-weight: 600; font-size: 18px; line-height: 24px; margin: 0 30px 0 32px; transition: 0.3s; cursor: pointer;}

.faq-2 .faq-container .faq-item h3 span { color: #F26722; padding-right: 5px;}

.faq-2 .faq-container .faq-item h3:hover { color: #F26722;}

.faq-2 .faq-container .faq-item .faq-content { display: grid; grid-template-rows: 0fr; transition: 0.3s ease-in-out; visibility: hidden; opacity: 0;}

.faq-2 .faq-container .faq-item .faq-content p { margin-bottom: 0; overflow: hidden;}

.faq-2 .faq-container .faq-item .faq-icon { position: absolute; top: 22px; left: 20px; font-size: 20px; line-height: 0; transition: 0.3s; color: #F26722;}

.faq-2 .faq-container .faq-item .faq-toggle { position: absolute; top: 20px; right: 20px; font-size: 16px; line-height: 0; transition: 0.3s; cursor: pointer;}

.faq-2 .faq-container .faq-item .faq-toggle:hover { color: #F26722;}

.faq-2 .faq-container .faq-active h3 { color: #F26722;}

.faq-2 .faq-container .faq-active .faq-content { grid-template-rows: 1fr; visibility: visible; opacity: 1; padding-top: 10px;}

.faq-2 .faq-container .faq-active .faq-toggle { transform: rotate(90deg); color: #F26722;}


/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img { width: 100%;}

.portfolio-details .portfolio-details-slider .swiper-pagination { margin-top: 20px; position: relative;}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; background-color: color-mix(in srgb, #555, transparent 85%); opacity: 1;}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active { background-color: #F26722;}

.portfolio-details .portfolio-info { padding: 30px; box-shadow: 0px 0 30px color-mix(in srgb, #555, transparent 90%);}

.portfolio-details .portfolio-info h3 { font-size: 22px; font-weight: 700; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid color-mix(in srgb, #555, transparent 85%);}

.portfolio-details .portfolio-info ul { list-style: none; padding: 0; font-size: 15px;}

.portfolio-details .portfolio-info ul li+li { margin-top: 10px;}

.portfolio-details .portfolio-description { padding-top: 30px;}

.portfolio-details .portfolio-description h2 { font-size: 26px; font-weight: 700; margin-bottom: 20px;}

.portfolio-details .portfolio-description p { padding: 0; color: color-mix(in srgb, #555, transparent 30%);}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list { padding: 10px 30px; border: 1px solid color-mix(in srgb, #555, transparent 90%); margin-bottom: 20px;}

.service-details .services-list a { display: block; line-height: 1; padding: 8px 0 8px 15px; border-left: 3px solid color-mix(in srgb, #555, transparent 70%); margin: 20px 0; color: color-mix(in srgb, #555, transparent 20%); transition: 0.3s;}

.service-details .services-list a.active { color: var(--heading-color); font-weight: 700; border-color: #F26722;}

.service-details .services-list a:hover { border-color: #F26722;}

.service-details .services-img { margin-bottom: 20px;}

.service-details h3 { font-size: 26px; font-weight: 700;}

.service-details h4 { font-size: 20px; font-weight: 700;}

.service-details p { font-size: 15px;}

.service-details ul { list-style: none; padding: 0; font-size: 15px;}

.service-details ul li { padding: 5px 0; display: flex; align-items: center;}

.service-details ul i { font-size: 20px; margin-right: 8px; color: #F26722;}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section { /* Add your styles here */
}



.cookie-consent{  position: fixed;
bottom: 8px;
left: 20px;
width: 300px;
padding-top: 7px;
height: 120px;
color: #fff;

line-height: 20px;
padding-left: 10px;
padding-right: 10px;
font-size: 14px;
background:#015E98 ;
z-index: 120;
cursor: pointer;
border-radius: 3px;
}

.allow-button{
      height: 20px;
    width: 104px;
    color: #fff;
    font-size: 12px;
    line-height: 10px;
    border-radius: 3px;
    border: 1px solid #F26722	;
    background-color:#F26722	;
}

   /* Overlay to dim the background */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
            display: none; /* Hidden by default */
            z-index: 999; /* Ensure it covers other content */
        }

.cookie-banner {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      color: black;
      padding: 16px 16px;
      text-align: center;
      font-size: 15px;
      z-index: 1000;
    }

    .cookie-banner h1 {
      font-size: 25px;
      margin-bottom: 8px;
      margin-left: 0px;
      color: black;
      text-align: center;
    }

    .cookie-banner button {
      background-color: #F26722;
      border: none;
      color: white;
      padding: 8px 16px;
      margin-top: 10px;
      margin-left: 12px;
      cursor: pointer;
      font-size: 14px;
      border-radius: 4px;
    }

    .cookie-banner button:hover {
      background-color: #015E98;
    }