@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root{
    --secondary-font: "Playfair Display", serif;
    --poppins: 'Poppins', sans-serif;
    --jost: 'Jost', sans-serif;
    --common-transition: all 0.3s ease 0s;
    --primary:#000000;  
    --secondary:#435476;
    --white: #ffffff;
}

/* ~-~-~-~-~-~-~-~-~-~ global adjustments ~-~-~-~-~-~-~-~-~-~ */

body { margin: 0; padding: 0; font-family: var(--jost); font-size: 16px; line-height: 1.4; font-weight: 400; overflow-x: hidden; color: var(--primary); }

h1, h2, h3, h4, h5, h6 { margin: 0 0 35px; padding: 0; line-height: 1.2; font-weight: 800; font-family: var(--poppins); }
h1{ font-size: clamp(1.875rem, 1.375rem + 2.5vw, 4.375rem);}
h2{ font-size: clamp(1.875rem, 1.375rem + 2.5vw, 4.375rem); }
h3{ font-size: clamp(1.5rem, 1.113rem + 1.938vw, 3.438rem); }
h4{ font-size: clamp(1.25rem, 1.1rem + 0.75vw, 2rem); font-family: var(--jost); font-weight: 500; }
h6 { font-size: 16px; }

p { margin: 0 0 35px; line-height: 1.6;}

.c-primary-1 * { color: var(--primary-1); }

img { max-width: 100%; }
a, img { border: 0; text-decoration: none; outline: none; }
a, a:link, a:visited, a:focus, a:hover { color: var(--secondary); outline: none; text-decoration: none; transition: var(--common-transition); }
a:hover{  text-decoration: none; transition: var(--common-transition); }

 
textarea, select, .form-control, input { border-radius: 0; font-family: var(--poppins); font-weight: 400; font-size: 16px; outline: none; padding: 12px 25px; border: 0; background-color: #fff; width: 100%; border-radius: 0; margin-bottom: 30px; border-bottom: 2px solid #000; padding-left: 0; padding-right: 45px; }
textarea { padding: 22px 25px; min-height: 230px; resize: none; }
input[type="submit"] { font-family: var(--poppins); font-weight: 400; font-size: 16px; transition: all 0.3s ease 0s; outline: none; }
textarea:focus, select:focus, .form-control:focus { outline: none; box-shadow: inherit; border-bottom: 2px solid #000;}

select { background-image: url(../images/icon-down.svg); background-repeat: no-repeat; background-position: 95% center; }
input:focus, input:focus-visible { border: none; outline: none; box-shadow: none; }
.btn-check:focus+.btn, .btn:focus { box-shadow: inherit;}
/* --- for placeholder color --- */

input::-moz-placeholder , .form-control::-moz-placeholder { color: #555555; opacity: 1; }
input:-ms-input-placeholder, .form-control:-ms-input-placeholder { color: #555555; }
input::-webkit-input-placeholder, .form-control::-webkit-input-placeholder { color: #555555; }

/* --- for placeholder color --- */

/* --- only use for wordpress (Image alignment) --- */
.alignleft, .alignnone { float: left; margin: 0 15px 10px 0; }
.alignright { float: right; margin: 0 0 10px 15px; }
.aligncenter { margin: 10px auto; display: block; }
/* --- only use for wordpress (Image alignment) --- */

/* --- Button Styles --- */
.coolBeans { font-size: 18px; overflow: hidden; position: relative; text-decoration: none; transition: 0.2s transform ease-in-out; will-change: transform; z-index: 0; display: inline-block; font-family: var(--poppins); line-height: 1; color: #FFF !important; text-transform: uppercase; background-color: var(--primary); border-radius: 100px; padding: 20px 35px; }
.coolBeans::after { background-color: #000; border-radius: 100px; content: ''; display: block; height: 100%; width: 100%; position: absolute; left: 0; top: 0; transform: translate(-100%, 0) rotate(10deg); transform-origin: top left; transition: 0.2s transform ease-out; will-change: transform; z-index: -1; }
.coolBeans:hover::after { transform: translate(0, 0); } 
.coolBeans:hover { transform: scale(1.05); will-change: transform; background-color: #000; }
/* --- Button Styles --- */

strong { font-weight: 700; }

/*..............common styles..............*/
.common-padding{ padding-top: 100px; padding-bottom: 100px; }
.common-small-padding{ padding-top: 80px; padding-bottom: 80px; } 
.btn{  font-family: var(--poppins); font-size: 18px; line-height: 1;  color: #FFF !important; text-transform: uppercase; background-color: var(--primary); display: inline-block; border: 1px solid var(--primary); border-radius: 100px; padding: 20px 35px; transition: var(--common-transition); }
.btn:hover{ background-color: #000; color: #FFF !important; border: 1px solid #000;  }
/* ======= section-title ======= */


.container { max-width: 1500px; }


/* ============ header Start ============ */
body.header-sticky { padding-top: 113px; }

.header-sticky .main-header .main-menu ul li a { color: var(--white);}
.header-sticky .logo-block a img{ filter: contrast(1) invert(1); }

.navigation-bar { display: flex; align-items: center;}
.main-menu { margin-left: auto;}

.main-header { padding: 40px 0; position: fixed; top: 0; right: 0;  left: 0; transition: all 0.5s; -ms-transition: all 0.5s; -webkit-transition: all 0.5s;  z-index: 999; }
.header-sticky .main-header{  background-color: #131313; animation: slide-down 0.7s; -ms-animation: slide-down 0.7s; -webkit-animation: slide-down 0.7s; background-color: #131313bb; backdrop-filter: blur(5px);}

.mobile-menu { display:none; transition:all 0.45s ease-in-out; }
.logo-block { width: 280px; }
.logo-block a{ display: block;   }
.logo-block a img{ width: 100%; height: 100%; }
.main-menu ul li:not(:last-child) { margin-right: 65px; } 
.main-menu ul li a{ font-family: var(--poppins); line-height: 1.2; color:var(--primary); font-weight:400; display: inline-block; transition: var(--common-transition); }
.main-menu ul li a:hover{ color: var(--primary);  }
/* dropdown */
li.menu-item-has-children{position: relative;display: inline-block;}
.main-menu ul li.menu-item-has-children a{margin-right: 15px;}
li.menu-item-has-children > a::after { position: absolute; top: 50%; transform: translate(0%, -50%); content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 16px; margin-left: 4px; color: var(--green); transition: var(--common-transition); }
li.menu-item-has-children > ul.sub-menu {display: none;position: absolute;background: #FFF;box-shadow: 0px 4px 6px 0px rgba(46, 45, 45, 0.16);min-width: 460px;z-index: 1;margin-top: -34px;padding: 15px 0px;list-style: none;}
li.menu-item-has-children ul.sub-menu a{display: block;color: #343434;font-weight: 400;margin-right: 0;padding: 10px 15px;font-size: 16px;}
li.menu-item-has-children > ul.sub-menu > li:hover > a{background-color: var(--yellow) !important; font-weight: 500; }
li.menu-item-has-children:hover ul.sub-menu {display: block;}
li.menu-item-has-children:hover a::after { transform: translate(0%, -50%) rotate(180deg); color: var(--green); }
li.menu-item-has-children > ul.sub-menu li { margin: 0; }
li.menu-item-has-children ul.sub-menu li{margin-right: 0;width: 100%;padding: 0;}
li.menu-item-has-children ul.sub-menu li:last-child{border: 0;}
/* dropdown */
.minus, .plus{display: none;} 
.nav_btn { display: none; }
.nav_close { display: none; color: #fff; }



 

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    } 
    100% {
        opacity: 1;
        transform: translateY(0);
    } 
}
/* ============ header End ============ */


/* ============ Hero Banner ============ */
.hero-banner { position: relative;display: flex; align-items: center; padding-bottom: 55%; }
.hero-banner-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.hero-banner-img > * { object-fit: cover; width: 100%; height: 100%;}

.banner-cont { position: absolute; left: 0; right: 0; top: 60%; transform: translateY(-50%); z-index: 5; max-width: 1450px; }
.banner-cont h1 { font-size: clamp(2rem, 0.9rem + 5.5vw, 7.5rem); font-family: var(--secondary-font); text-transform: uppercase;}
.banner-cont h1 strong { display: block; font-family: var(--jost); font-size: clamp(1.875rem, 1rem + 4.375vw, 6.25rem); font-weight: 300;}
.banner-cont p { max-width: 900px; }

.bannner-social { position: absolute; left: 100px; bottom: 150px; z-index: 7; line-height: 1; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.bannner-social ul { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; justify-content: space-between;}
.bannner-social ul li { padding: 15% 0;}
.bannner-social ul li a { font-size: clamp(0.875rem, 0.719rem + 0.781vw, 1.5rem); color: var(--primary);}

/* ============ Hero Banner ============ */


/* ============ About Section ============ */
.abt-right-holder { padding-left: 40px; }
.abt-right-holder p { }
.abt-right-holder h2 { text-transform: uppercase; }
.abt-right-holder h4 { color: var(--secondary);}
.abt-image-holder img { border-radius: 45px;}
.abt-image-holder.btm-img { padding-top: 60px;}
/* ============ About Section ============ */


.yrs-exp h2 { text-transform: uppercase;}
.yrs-exp p { }

.btm-qt { padding-top: 60px;}
.btm-qt h3 { color: var(--secondary); font-family: Georgia, 'Times New Roman', Times, serif; font-weight: 400; text-align: center; font-style: italic; margin: 0 auto; max-width: 1400px; }

.about-us-sec.success .row { align-items: center; flex-direction: row-reverse;}
.about-us-sec.success .abt-right-holder { padding-right: 60px; padding-left: 0;}

.technology-sec { background: var(--primary);}
.technology-sec h2 { color: var(--white);}
.technology-sec ul.nav.nav-pills { justify-content: center; margin: 0 0 65px; } 
.technology-sec ul.nav.nav-pills a.nav-link { color: var(--white); font-size: clamp(0.875rem, 0.719rem + 0.781vw, 1.5rem); padding: 14px 45px; border-radius: 50px; } 
.technology-sec ul.nav.nav-pills li.nav-item { margin: 0 10px; } 
.technology-sec ul.nav.nav-pills a.nav-link.active { background: var(--white); color: var(--primary); }

.tech-langbox { background: var(--white); text-align: center; padding: 70px 20px; margin-top: 24px; border-radius: 35px; } 
.tech-langbox .icon-box {height: 100px;width: 100px;display: flex; align-items: center;justify-content: center;margin: 0 auto 30px;} 
.tech-langbox .icon-box img { height: 100%; width: auto; }
.tech-langbox h4 { margin: 0; } .technology-sec  .tab-content .row { justify-content: center; }


html, body { overflow-x: hidden !important; }

footer { background-color: var(--white); }
.footer-top h2 a { color: var(--primary);}
.ftr-social ul { margin: 0; padding: 30px 0 0; list-style: none; display: flex; flex-wrap: wrap;}
.ftr-social ul li { margin: 0 15px;}
.ftr-social ul li:first-child { margin-left: 0;}
.ftr-social ul li a { display: block; border: 2px solid var(--primary); color: var(--primary); font-weight: 700; padding: 12px 35px; border-radius: 50px;}
.ftr-social ul li a:hover { background: var(--primary); color: var(--white);}

.ftr-btm { border-top: 1px solid var(--primary); padding: 45px 0;}
.ftr-btm p { margin: 0; }


body.home.modal-open { padding-right: 0 !important;}


.modal-form { padding: 60px; } 
.modal-form h2 { text-transform: uppercase;}
.modal-form input[type=submit] { border: 0; background: url(../images/contact-submit-ic.svg) no-repeat right center; width: auto; padding: 20px 90px 20px 0; font-weight: 700; text-transform: uppercase; background-size: 80px; cursor: pointer; margin: 0; }

.modal-form input.name { background: url(../images/ic-name.svg) no-repeat right center; background-size: 18px;}
.modal-form input.phone { background: url(../images/ic-call.svg) no-repeat right center; background-size: 18px;}
.modal-form input.email { background: url(../images/ic-email.svg) no-repeat right center; background-size: 18px;}
.modal-form input.company { background: url(../images/ic-company.svg) no-repeat right center; background-size: 18px;}
.modal-form textarea.msg { background: url(../images/ic-msg.svg) no-repeat right center; background-size: 18px;}

button.btn-close { background: #000 url(../images/close-btn.svg) no-repeat center; opacity: 1; width: 40px; height: 40px; border-radius: 50%; position: absolute; right: 30px; top: 30px; }

.errormsg { position: relative; top: -20px; color: #f00; font-size: 14px; }



@media only screen and (max-width:1799px) { 
    .container { max-width: 1424px; } 

    .bannner-social { left: 30px; bottom: 60px; }
    .bannner-social ul li {  padding: 10% 0; }
}

@media only screen and (max-width:1599px) { 
    .container { max-width: 1244px; } 
    .portfolio-tab-sec .filters-holder ul li { padding: 10px 15px; }

    .abt-image-holder img { border-radius: 25px; }
}

@media only screen and (max-width:1359px) { 

    .common-padding { padding-top: 60px; padding-bottom: 60px; }
    .common-small-padding { padding-top: 40px; padding-bottom: 40px; }

    .container { max-width: 1124px; } 
    .main-menu ul li:not(:last-child) { margin-right: 50px; }
    .portfolio-tab-sec .filters-holder ul li { font-size: 16px; }
    .logo-block { max-width: 300px;}
    
}


@media only screen and (max-width:1279px) {  
    .bannner-social { position: absolute; left: 50px; right: 0; bottom: 50px; writing-mode: inherit; transform: none; white-space: normal; }
    .bannner-social ul {justify-content: flex-start; }
    .bannner-social ul li { padding: 0 5%; }
    .bannner-social ul li:first-child { padding-left: 0;}
}

@media only screen and (max-width:1199px) { 
    .container { max-width: 940px; } 
    .logo-block { max-width: 250px; }
    

    
    .header-sticky { padding-top: inherit; }

    .header-sticky .main-header {background-color: #131313;}
    .main-header { padding-top: 15px; padding-bottom: 15px; } 
    .header-right-btn { margin-left: auto; }
    .header-sticky .main-header{ animation: none; backdrop-filter: none;  }
    .nav_btn { cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; height: 24px; width: 30px; margin-left: 15px; } 
    .nav_btn span { background-color: #000; height: 4px; width: 30px; border-radius: 4px; }  
    .header-sticky .main-header .nav_btn span {background-color: #fff; }
    .main-menu { position: fixed; transform:translateX(320px); right: 0; top: 0; bottom: 0; z-index: 999; max-width: 320px; box-shadow: 4px 0 27px rgba(0, 0, 0, 0.11); background-color: #131313; padding:42px 10px 0; margin:0; display:block; width: 100%; transition: 250ms ease-in;}
    .main-menu ul li { width: 100%; margin: 0; }
    .main-menu ul li:not(:last-child) { margin-right: 0; }
    .main-menu ul li a { display: block; padding: 10px; color: var(--white); }
    .nav_close { display: block; position: absolute; top: 8px; right: 10px; z-index: 999; font-size: 30px; }
    .minus, .plus { display: block; padding: 6px 5px 6px 8px; font-weight: 700; color: #fff; font-size: 20px !important; cursor: pointer; position: absolute; right: 5px; left: 0; top: -1px; font-size: 25px; text-align: right; }
    li.menu-item-has-children > ul.sub-menu {position: relative; margin-top: 0;min-width: 100%;padding: 0px 0px;box-shadow: inherit;background: inherit;} 
    li.menu-item-has-children ul.sub-menu a { color: #FFF; padding: 10px 20px; }
    li.menu-item-has-children:hover ul.sub-menu { display: none; }
    li.menu-item-has-children > a::after{content: none;}
    li.menu-item-has-children.open-sub ul.sub-menu { display: block !important; }
    .minus { display: none; }
    .open-sub .plus { display: none; }
    .open-sub .minus { display: block; }


}

@media only screen and (max-width:991px) {


    .hero-banner { padding-bottom: 0; height: 100vh;}
    .bannner-social { left: 30px; }

    .container { max-width: 740px; } 

    .abt-right-holder { padding-left: 0; padding-top: 30px; }
    .abt-image-holder.btm-img { padding-top: 20px; }
    
    .about-us-sec.success .abt-right-holder { padding-right: 0; }

    .technology-sec ul.nav.nav-pills a.nav-link { padding: 14px 35px; }

    .technology-sec ul.nav.nav-pills { margin: 0 0 25px; }
    .tech-langbox { padding: 40px 20px; border-radius: 20px;}


  
  
}



@media only screen and (max-width:767px) {
    .container { max-width: 95%; } 
    .bannner-social { display: none; }

    .footer-top { text-align: center;}
    .ftr-social ul { padding: 0; justify-content: center; }
    .ftr-social ul li { margin: 0 5px 10px;  width: 46%;   text-align: center; }
    .logo-block { max-width: 160px;}

    .modal-form { padding: 90px 20px 20px;    }
    button.btn-close { width: 30px; height: 30px; border-radius: 50%; position: absolute; right: 20px; top: 20px; background-size: 14px; }

    .technology-sec ul.nav.nav-pills li.nav-item {  margin: 0 10px 15px; width: 43%; }
    .technology-sec ul.nav.nav-pills a.nav-link { border: 1px solid var(--white); text-align: center; }

    .abt-right-holder h2 br { display: none; }


}