@font-face {
  font-family: 'Effra-Light';
  src: url('../fonts/Effra_Lt.eot');
  src: url('../fonts/Effra_Lt.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Effra_Lt.woff') format('woff'), url('../fonts/Effra_Lt.ttf') format('truetype'), url('../fonts/Effra_Lt.svg#Effra-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Effra-Regular';
  src: url('../fonts/Effra-Regular.eot');
  src: url('../fonts/Effra-Regular.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Effra-Regular.woff') format('woff'), url('../fonts/Effra-Regular.ttf') format('truetype'), url('../fonts/Effra-Regular.svg#Effra-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Effra-Regular';
  src: url('../fonts/Effra_bold.eot');
  src: url('../fonts/Effra_bold.eot?#iefix') format('embedded-opentype'),url('../fonts/Effra_bold.woff') format('woff'), url('../fonts/Effra_bold.ttf') format('truetype'), url('Effra_bold.svg#Effra_bold') format('svg');
  font-weight: bold;
  font-style: normal;
}

*{padding: 0px; margin: 0px;}
h1,h2,h3,h4,h5,h6{padding: 0px; margin: 0px;}

img{max-width:100%; width:auto\9;}

ul,li{list-style: none; margin: 0px; padding: 0px;}
.clearfix:before, .clearFix:before,
.clearfix:after,  .clearFix:after{
    content: " ";
    display: table;
}
.clearfix:after, .clearFix:after {
    clear: both;
}

h1, h2, h3 {font-family: 'Effra-Regular', sans-serif;  color:#333333; font-weight:bold}
h1{ color:#000;}
h2{font-size:2em; margin:0px 0 15px 0; padding:0px;}
h3{font-size:1.5em; margin:0px 0 15px 0; padding:0px;}

body{font-family:'Effra-Light'; margin:0px; padding:0px; color:#333333; font-size:1.1rem;}

.ltr {direction:ltr;}
.rtl {direction: rtl;}

.fntWhite{color:#fff !important;}
.fnt12{font-size:85%;}
.fnt15{font-size:88%;}
/*.fnt20{font-size: 20px;}*/


.fixed {position: fixed; width: 100%; z-index: 999;}
/*Header*/
header{width: 100%; position: relative; z-index:1; background:#0c5ca8; color:#fff; padding:1vw 0px;
 -webkit-transition: all .4s ease; -moz-transition: all .4s ease;  transition: all .4s ease; }
 
header .logo img{-webkit-transition: all .4s ease; -moz-transition: all .4s ease;  transition: all .4s ease;} 

/*Header*/


#back-to-Top, #ctSpeak {position:fixed; bottom:10px; right:10px; z-index:9999999; display:none; outline:none; width:3rem; height:3rem; border-radius: 3px; background:url(../images/up-arrow.png) no-repeat #666666 50% 50%; text-align: center; line-height: 0.54rem; cursor: pointer; background-size:content;}
#back-to-Top a, #ctSpeak a {font-size:0px;}

#ctSpeak{background:url(../images/speaker-icon.png) no-repeat #666666 50% 50%; background-size:60%; display:block; bottom:70px;}

/* Header search css*/
.head_searchbox{position:absolute; z-index:2; right:20px; top:50%; transform: translateY(-50%);}
.head_searchbox .head_search_pc{display:none;}
.head_searchbox.open .head_search_pc{display:block;}
.head_searchbox.open .searchTrigger{display:none;}
.head_search { display: inline-block; vertical-align: middle; box-sizing: border-box;  width: 300px; height: 36px; line-height: 36px; background:rgba(41, 113, 183, 1); border-radius: 2px; position: relative; padding-right: 36px;  padding-left: 14px; border: 1px solid transparent;}
.head_search input {width: 100%;  height: 34px;  line-height: 34px; font-size: 14px; color: #fff; background: transparent; border: none; outline: none;}
.head_search i {display: block; width: 36px; height: 36px; padding-left: 7px; cursor: pointer; position: absolute; top: -1px; right: 0; color: #fff; font-size: 26px;}
.head_search_pc .close_icon {font-size: 24px; color: #fff; margin-left:15px; cursor:pointer;}

.searchTrigger{ position:absolute; right:20px; top:50%; cursor:pointer; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%);}
.head_searchbox .fa{color:#86aed4; font-size:2rem;}
.head_searchbox .head_search_pc .fa{font-size: 1.5rem; vertical-align:middle; line-height: 31px;}
/* Header search css*/


/*Hero Banner*/
.hero_banner{width: 100%;  position: relative;}

.bdrhead{}
.bdrhead:before{content: ""; display:block; background-color: #0c5ca8; height: 5px;width:50px; text-align: center; margin-bottom:1.8vw;} 

.breadcrumb{background-color:transparent; margin-bottom:20px; padding-left:0px; padding-right:0px;}
.breadcrumb ul{display:flex; margin:0px -5px; flex-wrap: wrap;}
.breadcrumb ul li{padding:0px 5px;}
.breadcrumb ul li a{color:#555555; text-decoration:none;}
.breadcrumb ul li+li:before{content: ">"; display:inline-block; vertical-align:middle; margin-right: 10px; color:#555555;}

.stepsWrap ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
.stepsWrap li{background-color:#e8e8e8; padding:20px 20px 30px 20px; width: 24.3%;}
.stepsWrap li .stepColumn{ text-align:center;}
.stepsWrap .subtxt{color:#222; font-size:1.2em; line-height:26px; font-weight:bold; display: block; margin: 10px 0; font-family:'Effra-Regular';}
.stepsWrap .subtxt2{font-size:.9em;}

.size4 ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
.size4 li{width: 24%; text-align:center}
.size4 li img{width:100%; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}

.stepsWrap li, .size4 li{ -webkit-transform:scale(1); -moz-transform:scale(1); transform:scale(1);}
.stepsWrap li:hover, .size4 li:hover{-webkit-box-shadow:0px 2px 10px #ccc; -moz-box-shadow:0px 2px 10px #ccc; box-shadow:0px 2px 10px #ccc; -webkit-transform:scale(1.02); -moz-transform:scale(1.02); transform:scale(1.02); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;}

.hss-Intro h3{font-weight:normal; text-align:center; font-size: 1.2em;}
.hss-Intro h3 span{display:block;}
.hss-Intro figcaption{position:absolute; z-index:1; color:#4d4d4d; text-align:left; padding:2vw 2vw; line-height: 1.2; /*font-size: .95em;*/}
.hss-Intro li a{color:#fff;}

.boxCaptionImg figcaption{min-height:210px; font-weight:bold;}

.countryPoint{background-color:#0f1537; color:#fff;}

/* Map try to use css*/
.mapAreaBox {position: relative;}
.mapPos{position: absolute; cursor: pointer; transform: translate3d(0,0,0); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;}
.mapPos:hover{transform: translate3d(0,-5px,0);}
.pos1{top:36%; left:23%;}
.pos2{top:17%; left:33%;}
.pos3{top:53%; left:38.5%;}
.pos4{top:30%; right:37.6%;}
.pos5{top:21%; right:13.6%;}
/* Map try to use css end*/

/* Country try to use css*/
#countWrap{display:flex; justify-content: space-around;}
.countfull h3{color:#fff; text-transform:uppercase; font-weight:bold; text-align:center; font-size:2.3em;}
.countfull h3 span{display:block; font-size:.5em; font-family:'Effra-Light';}
.counter {display: table-cell; width:24%; vertical-align: middle; color: #fff; font-family: 'Effra-Regular', sans-serif; text-align:center;}
.counter span, .counter .countTxtNormal{font-weight:bold; font-size:3em; line-height: 1;}
.counter .staticTxt{ font-size:3em; }
.counter .staticTxt.k{font-size:1.7em; display: inline-block; vertical-align: super;}
.counter .normalTxt{display:block; font-weight:bold; font-size:1em; font-family:'Effra-Light';}
.counter .normalTxt.noreact{display:inline-block; font-size:1em; vertical-align: initial;}
/* Country try to use css*/

.vdoWrap video{width:100%; height:100%;}

/*Footer CSS*/
/*footer{width: 100%; background-color: #0c5ca8; padding:0px 0px; color:#fff; font-size:.9em; margin-top:5vw;}
footer .footSec{padding:3vw 0px 4vw;}
footer .footSec ul{ list-style:none;}
footer .footSec ul > li .foottle{font-size:1.5em; margin-bottom:1vw; display:block;}
footer .footSec .footer-left > ul > li{ width:18%; float:left; margin-right:2%;}
footer .footSec .footer-left > ul > li:last-child{ margin-right:0px;}

footer .footSec .footer-left > ul > li li{ float:none; width:100%; margin-left:0px; margin-bottom:9px;}
footer .footSec ul li a{ color:#fff; text-decoration:none;}
footer .footSec ul li a:hover, footer .footSec ul li .foottle:hover{ color:#fff; text-decoration:underline;}
footer .terms{background-color: #064c8f; padding:.9em 0px;}


footer .footNavTrig{ display:block; padding:1.2vw 0px ; margin-bottom:0px; color:#fff; font-size:115%; font-weight:bold; 
    text-decoration:none; cursor:pointer; background:#0c5ca8; position:relative; -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; transition: all 0.3s ease; }
footer .footSubmenu{width:100%; clear:both;}

footer .countryIn, footer .countryIn a{color:#fff; text-decoration:none; vertical-align:middle;}
footer .countryIn img{width:25px; margin-right:5px;}

footer .socialIcon span{display:block;}
footer .socialIcon .footlogo img{width:70px; margin-bottom:5px;}
footer .socialIcon ul{display:flex; flex-wrap:wrap; margin-top:15px;}
footer .socialIcon li{margin:0 10% 10% 0%;}
footer .socialIcon li a{ padding:3px; color:#005aaa; background:#3981c5; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; -ms-border-radius:50%; width:30px; height:30px; line-height:23px; font-size:17px; display:block; text-align:center;}
footer .socialIcon li i{ font-style:normal; color:#005aaa;}
footer .socialIcon li .fa-instagram, footer .socialIcon li .fa-whatsapp{font-size:23px;}

footer a{color:#fff; text-decoration:none;}
footer .terms{font-size:.9em;}
footer .navbottom ul{margin-left:-1vw; margin-right:-1vw;}
footer .navbottom li{padding:0px 1vw; display:inline-block; font-weight:normal; line-height: 1;}
footer .navbottom a:hover{background:none; color:#fff;}
footer .navbottom li+li{border-left:1px solid #fff;}
footer .copyright{ text-align:right; color:#4e83ba;}*/

/*Footer CSS*/












 .footer {
        background-color: #0c5ca8;
        color: #fff;
        padding: 20px 0;
    }

    .footer-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .footer-section {
        flex: 1;
        max-width: 200px;
        margin: 10px 0;
    }

    .footer-section h3 {
        margin-bottom: 10px;
        font-size: 1.2em;
    }

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

    .footer-section ul li {
        margin-bottom: 10px;
    }

    .footer-section ul li a {
        color: #fff;
        text-decoration: none;
    }

    .footer-section ul li a:hover {
        text-decoration: underline;
    }

    .social-links {
        display: flex;
        gap: 20px;
    }

    .social-links li {
        margin-bottom: 0; 
    }

    @media (max-width: 768px) {
        .footer-container {
            flex-direction: column;
            align-items: flex-start; /* Align items to the start (left) on mobile */
        }

        .footer-section {
            max-width: 100%; /* Make each section full width */
        }
    }








.card {
background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
   /* flex: 1 1 300px;
    max-width: 300px;*/
    display: flex;
    height:300px;
   
     border: none;

    flex-direction: column; 
    justify-content: space-between; 
 transition: box-shadow 0.4s ease, transform 0.4s ease; /* Smooth transition */
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);/* Larger shadow on hover */
    transform: translateY(-10px); /* Slightly raise the card on hover */
}

.card h2 {
    font-size: 18px;
    margin-bottom: 10px;
}

.card p {
    font-size: 14px;
    margin-bottom: 20px;
    color: #666;
}

/*.card .icon {
    margin-bottom: 20px;
}*/

.card .icon img {
    width: 20px;
    height: 20px;
}

.card button, .card form button {
    background-color: transparent;
    color: black;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    border:  1px solid blue;
    text-transform: uppercase;
}

.card form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card form input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
        align-items: center;
    }
}


.carde {
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: flex;
    height: 300px;
    border: none;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

/* Media query for mobile devices */
@media (max-width: 600px) {
    .carde {
        padding: 15px;  /* Reduce padding for smaller screens */
        height: auto;  /* Allow height to adjust dynamically */
        margin: 10px;  /* Add some margin for spacing */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);  /* Subtle shadow for mobile */
    }
}

.carde:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);/* Larger shadow on hover */
    transform: translateY(-10px); /* Slightly raise the card on hover */
}
   
   
   


    

    .input-groupe {
        display: flex;
        gap: 10px; /* Space between inputs */
        margin-bottom: 15px;
    }

    .input-groupe input {
        width: 50%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
    }

   

    .carde button, .card form button {
    background-color: transparent;
    color: black;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    border:  1px solid blue;
    text-transform: uppercase;
    width: 100%;
}

.carde h2 {
    font-size: 18px;
    margin-bottom: 10px;
}

.carde p {
    font-size: 14px;
    margin-bottom: 20px;
    color: #666;
}

.carde .icon {
    margin-bottom: 20px;
}

.carde .icon img {
    width: 60px;
    height: 60px;
}
@media (max-width: 600px) {
    .input-groupe {
        flex-direction: column; /* Stack inputs vertically */
    }

    .input-groupe input {
        width: 100%; /* Full width for each input */
    }
}




/*.mySlides {display: none;}
img {vertical-align: middle;}*/


/*.slideshow-container {
  max-width:100%;
  position: relative;
  margin: auto;

}



.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}



@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}*/



.slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 2px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
}

.slider-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.slider-item {
    min-width: 25%; /* Show 4 items per page */
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
}

.slider-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
}

.slider-item h2 {
    margin: 15px 0 10px;
}

.slider-item p {
    color: #555;
}

.slider-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    z-index: 1;
    outline: none;
}

.slider-button.prev {
    left: 10px;
}

.slider-button.next {
    right: 10px;
}

@media (max-width: 768px) {
    .slider-item {
        min-width: 50%; /* Show 2 items per page on medium screens */
    }
}

@media (max-width: 480px) {
    .slider-item {
        min-width: 100%; /* Show 1 item per page on small screens */
    }
}


#showFormButton {
    background-color: #0c5ca8;
    color: white;
    border: none;
    padding: 10px 10px;
    cursor: pointer;
    border-radius: 5px;
    align-items: center;
    width: 30%;
}

/* Media query for mobile devices */
@media (max-width: 600px) {
    #showFormButton {
        width: 80%;  /* Increase button width on smaller screens */
        padding: 15px 10px;  /* Adjust padding for a better touch area */
        font-size: 14px;  /* Slightly smaller font size */
    }
}
        #showFormButton:hover {
          /*  background-color: #0056b3;*/
        }
        #myForm {
            display: none;
            background-color: white;
            border: 1px solid #ccc;
            padding: 20px;
            margin-top: -50px;
            position: relative;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        #myForm label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        #myForm input[type="text"],
        #myForm input[type="email"] {
            width: calc(100% - 22px);
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
            width: 100%;
        }
        #myForm input[type="submit"] {
            background-color: #0c5ca8;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
        }
        #myForm input[type="submit"]:hover {
            background-color:#0c5ca8;
        }
        #closeFormButton {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #888;
        }
        #closeFormButton:hover {
            color: #333;
        }











.cardd {
background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
   /* flex: 1 1 300px;
    max-width: 300px;*/
    display: flex;
    height:auto;
   
     border: none;

    flex-direction: column; 
    justify-content: space-between; 
 transition: box-shadow 0.4s ease, transform 0.4s ease; /* Smooth transition */
}

.cardd:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);/* Larger shadow on hover */
    transform: translateY(-10px); /* Slightly raise the card on hover */
}

.cardd h2 {
    font-size: 18px;
    margin-bottom: 10px;
}

.cardd p {
    font-size: 14px;
    margin-bottom: 20px;
    color: #666;
}