@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root{
    --font-family :"Inter", sans-serif ;

    --primary-color: #001525;
    --secondary-color: #F57C00;
    --text-primary-color: #576071;
    --text-secondary-color: #e2e2e2;

    --bg-color-light:#F6F9FC;
    --bg-color-dark:#001525;

    --Font-size-14: 14px;
    --Font-size-16: 16px;
    --Font-size-18: 18px;
    --Font-size-20: 20px;
    --Font-size-22: 22px;
    --Font-size-24: 24px;
    --Font-size-26: 26px;
    --Font-size-28: 28px;
    --Font-size-30: 30px;
    --Font-size-32: 32px;
    --Font-size-34: 34px;
    --Font-size-36: 36px;
    --Font-size-38: 38px;
    --Font-size-40: 40px;
    --Font-size-42: 42px;

    --white:#fff;

}


/********* Reset CSS *********/
*, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;} article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary { display:block } audio, canvas, video { display:inline-block } audio:not([controls]) {display:none;height:0} html {-webkit-text-size-adjust: 100%;-ms-text-size-adjust:  100%;} h1,h2,h3,h4,h5,h6 {font-weight:normal;} b,strong,dt,th {font-weight: bold;} em, i { font-style:italic;} p,h1,h2,h3,h4,h5,h6, ul,ol,dd,table,fieldset,address {margin:0; padding:0;} img {-ms-interpolation-mode: bicubic;border: 0;vertical-align: middle; max-width:100%; height:auto;} figure {margin:0;}legend {white-space:normal;}q { quotes:"\201C" "\201D" "\2018" "\2019" } small { font-size:80% } sub, sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline } sup { top:-0.5em } sub { bottom:-0.25em }
table{border-collapse: separate;border-spacing: 0;width: 100%; empty-cells:show; border:none;} table table { margin:0} th,td {border:none; padding:8px 10px} caption,th,td{font-weight: normal;} a {outline: 0; text-decoration:none;color:var(--text-primary-color); -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} a:focus {outline: 0;}a:hover,a:active {outline: 0;} a:hover {text-decoration:none;color:var(--text-secondary-color);}

/********* Common Classes *********/
* { margin:0; padding:0;}
hr{display:block;height:1px;border:0; border-top:1px solid #ccc; margin:20px 0;padding:0}
body,button,input,select,textarea {font-family:var(--font-family); color:var(--text-primary-color);  font-size:var(--Font-size-18); line-height:26px; font-weight:400;}

h1 {  font-size:52px; font-weight:700; color:var(--primary-color); margin:0 0 0 0; line-height:normal;}
h2 {  font-size:var(--Font-size-30); font-weight:700; color:var(--primary-color); margin:0 0 20px 0; line-height:normal;}
h3 {  font-size:var(--Font-size-26); font-weight:600; color:var(--primary-color); margin:0 0 15px 0; line-height:normal;}
h4 {  font-size:20px; font-weight:400; color:var(--primary-color); margin:0 0 10px 0; line-height:normal;}
p { margin-bottom:25px;}

a, button { cursor: pointer;}

ul, li { list-style:none;}

/********** Form, Input & Button  **********/
::-webkit-input-placeholder { color:var(--textColorLight); font-size: var(--Fonts-size-m);}
::-moz-placeholder { color:var(--textColorLight); font-size: var(--Fonts-size-m);}
:-ms-input-placeholder { color:var(--textColorLight); font-size:  var(--Fonts-size-m);}
::placeholder { color:var(--textColorLight); font-size:  var(--Fonts-size-m);}

::-moz-selection { /* Code for Firefox */
  color: var(--white);
  background: var(--primary-color);
}

::selection {
  color: var(--white);
  background: var(--primary-color);
}

.cForm { width:100%; display: flex; flex-wrap: wrap;}
.cForm li { width:100%; display: flex; flex-wrap: wrap; padding: 0 8px; margin-bottom: 16px;}

.cForm li label { font-size: 14px; font-weight: 500; color: #222; display: block; margin-bottom: 5px; font-weight: 500;}
.cForm li label span { color: var(--redColor);}

.cForm li.btnCenter { text-align: center; justify-content: center; margin-bottom: 0;}

input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="file"], select, textarea
{ width:100%; padding:10px 14px; background:#fff; border:1px solid #fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius:8px; -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s; -o-transition-duration: 0.5s; transition-duration:0.5s; font-size:var(--Font-size-20); outline:0 none;}
input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, input[type="tel"]:hover, input[type="number"]:hover, input[type="file"]:hover, select:hover, textarea:hover { background:rgba(255, 255, 255, 0.9);  color:var(--primaryColor);}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="file"]:focus, select:focus, textarea:focus {background:rgba(255, 255, 255, 0.8); }
input[type="submit"].btn, button.btn { background-color: var(--secondary-color); color: var(--white); padding: 12px 24px; border-radius: 6px; border: 0 none; font-size: var(--Font-size-18); font-weight: 500; transition:0.5s all ease; cursor: pointer;} 
input[type="submit"].btn:hover, button.btn:hover { background-color: var(--white); color: var(--primary-color);}

.lightBgForm input[type="text"], .lightBgForm input[type="password"], .lightBgForm input[type="email"], .lightBgForm input[type="tel"], .lightBgForm input[type="number"], .lightBgForm input[type="file"], .lightBgForm select, .lightBgForm textarea
{ background:#f1f1f1; border:1px solid #eee;}

/*================================================ Main CSS Theme Start ====================================================*/
html { scroll-behavior: smooth;}
input { -webkit-appearance: none; -moz-appearance: none; appearance: none;}

/********** Layout **********/
.fullwidth { width:100%; display: flex; justify-content: center; background-color: var(--white);}
.wrap-inner { display: flex; flex-wrap: wrap; margin:0 auto; width:100%; max-width:1340px; padding:0 15px;}
.wrap-inner-full { display: flex; flex-wrap: wrap; margin:0 auto; width:100%; padding:0 40px;}
.wrap-inner-mid { display: flex; flex-wrap: wrap; margin:0 auto; width:100%; max-width:1440px; padding:0 15px;}
.wrap-inner-small { display: flex; flex-wrap: wrap; margin:0 auto; width:100%; max-width:640px; padding:0 15px;}
.wrap-inner-from { display: flex; flex-wrap: wrap; margin:0 auto; width:100%; max-width:840px; padding:0 15px;}

.boxSpace { padding: 80px 0;}
.boxSpaceT { padding: 80px 0 0 0;}
.boxSpaceB { padding:0 0 80px 0;}

.textCenter { text-align: center;}

.titleBox { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 50px;}
.titleBox label { font-weight: 600; font-size: var(--Font-size-16); text-transform: uppercase; letter-spacing: 2px; padding: 0 40px; margin-bottom: 10px; position: relative;}
.titleBox label::before,
.titleBox label::after { content: ""; width: 32px; height: 3px; background-color: var(--secondary-color); position: absolute; top: 11px; }
.titleBox label::before { left: 0;}
.titleBox label::after { right: 0;}
.titleBox h1 { text-align: center; font-size:var(--Font-size-42);}
.titleBox h2 { text-align: center;}
.titleBox p { width: 100%; max-width: 900px; text-align: center; font-size: var(--Font-size-20); margin: 0;}
.titleBox:has(p) h1 { margin: 0 0 20px 0 ;}
.titleBox:not(:has(p)) h1 { margin: 0 ;}
.titleBox:has(p) h2 { margin: 0 0 20px 0 ;}
.titleBox:not(:has(p)) h2 { margin: 0 ;}

.titleBox.titleLeft { align-items: flex-start; text-align: left;}
.titleBox.titleLeft h2,
.titleBox.titleLeft p { text-align: left;}
.titleBox.titleLeft label { padding-left: 0;}
.titleBox.titleLeft label::before { display: none;}

.titleBox.titleLight { color: var(--white);}
.titleBox.titleLight h2 { color: var(--white);}
.titleBox.titleLight label { color: var(--text-secondary-color);}

.coveBgDark { width: 100%; display: flex; justify-content: center; background-color: var(--primary-color); border-radius: 62px;}
.lightBg { background-color: var(--bg-color-light);}
.darkBg { background-color: var(--primary-color);}

.arrow { width: 18px; height: 18px; background: var(--secondary-color); clip-path: polygon(10% 0%, 60% 50%, 10% 100%, 0% 90%, 40% 50%, 0% 10%); display: inline-block;}

.leftRight { width: 100%; display: flex; flex-wrap: wrap; gap: 50px;}
.leftRight .leftBox { width: calc(50% - 25px);}
.leftRight .rightBox { width: calc(50% - 25px);}

.leftRight .rightBox .imgBox { height: 100%;}

.imgBox img { width:100%; height:100%; object-fit:cover; object-fit: cover; object-position:center; border-radius: 20px; }


a.btn { background-color: var(--secondary-color); color: var(--white); padding: 14px 22px; border-radius: 6px;} 
a.btn:hover { background-color: var(--white); color: var(--primary-color);}

.lightCnt { color: var(--text-secondary-color);}
.lightCnt h2 { color: var(--white);}

ul.list { width: 100%; display: flex; flex-wrap: wrap; margin: 0 !important;}
ul.list li { width: 100% !important; display: block !important; position: relative; padding: 0 0 0 24px !important; margin-bottom: 15px !important;}
ul.list li::before { content: ""; width: 12px; height: 12px; background-color: var(--white); border-radius: 20px; position: absolute; left: 0; top: 8px; border: 2px solid var(--secondary-color);}

.lightCnt ul.list li::before { background-color: transparent;}

/* Overlay */
.popupOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,21,37,0.8); display: flex; justify-content: center; align-items: center; z-index: 9999; } 
.popupBox { background: #fff; border-radius: 8px; width: calc(100% - 15px); max-width: 640px; position: relative; }
.popupHeader { border-top-left-radius: 8px; border-top-right-radius: 8px; display: flex; justify-content: space-between; align-items: center; padding:15px 20px; border-bottom: 1px solid #eee; background-color: var(--bg-color-light);}
.popupHeader h2 { font-size: var(--Font-size-20); color: var(--primary-color); margin: 0; font-weight: 600; }
.popupHeader span { cursor: pointer; color: var(--primary-color); font-size: var(--Font-size-28); }
.popupHeader span:hover { color: var(--secondary-color);}
.popupCnt { padding: 20px;}

.popupOverlayFull { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 9999;
    background: linear-gradient(45deg,#001525e5, #001525);
    background-size: 400% 400%; -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite;
}
.popupOverlayFull .popupBox { background: #fff; border-radius: 0px; width: calc(100% - 15px); max-width: 1024px; position: relative; display: flex; flex-wrap: wrap; flex-direction: row-reverse;}
.popupOverlayFull .popupBox .leftImg { width: 460px;}
.popupOverlayFull .popupBox .leftImg img { object-fit: cover; opacity: 0.75; height: 100%;}
.popupOverlayFull .popupBox .popupCnt { width: calc(100% - 460px); padding: 30px 50px;}
.popupOverlayFull .popupBox .popupCnt h2 { font-size: var(--Font-size-36);}
.popupOverlayFull .popupBox .popupCnt li { padding-left: 0; padding-right: 0;}
.popupOverlayFull .popupBox span.closePopupBtn { position: absolute; right: 10px; top: 10px; cursor: pointer; color: var(--primary-color); font-size: var(--Font-size-28); z-index: 99;}

/* Header */
.header { background-color: var(--white); padding: 10px 0;}
.header .wrap-inner { justify-content: space-between; align-items: center;}
/* Sticky Header */
/* .header { transition: all 0.4s ease; backdrop-filter: none;}
.header.sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; animation: slideDown 0.4s ease forwards; backdrop-filter: blur(8px); background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 8px rgba(0,0,0,0.1);}
@keyframes slideDown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
} */

.header .nav ul { display: flex; gap: 35px; }
.header .nav ul a { font-size: var(--Font-size-16); color: var(--primary-color); font-weight: 500;}
.header .nav ul a:hover { color: var(--secondary-color);}
.header .nav ul li.btnBox a { background-color: var(--primary-color); color: var(--white); padding: 10px 20px; border-radius: 6px;} 
.header .nav ul li.btnBox a:hover { background-color: var(--secondary-color); color: var(--white);}

.header .nav ul li { position: relative;}
.header .nav .submenu { display: none; position: absolute; left: -20px; top: 100%; background: #fff; min-width: 300px; z-index: 999;}
.header .nav .submenu li a { display: block; padding: 10px 20px; font-size: var(--Font-size-16); border-bottom: 1px solid #eee;}

/* Desktop: open on hover */
@media (min-width: 841px) {
    .has-submenu:hover > .submenu { display: block; }

    #toggleBtnMenu {  display: none;}
    .slidNav { position: static; width: auto; height: auto; background: transparent; transform: none; transition: none; }
    .slidNav a.logo { display: none;}
    .slidNav .navFooter { display: none;}
}

/* Mobile slide-in menu */
@media (max-width: 840px) {

    .submenu { display: none; position: static; }

    #toggleBtnMenu { display: flex; justify-content: center; align-items: center; background-color: var(--secondary-color); color: var(--white); line-height: normal; width: 36px; height: 36px; border-radius: 6px;}
    #toggleBtnMenu:hover { color: var(--primary-color);}

    .slidNav a.logo { display: block; padding: 15px;}
    .slidNav { position: fixed; top: 0; left: -310px;  width: 300px; height: 100%; background: #fff; overflow-y: auto; transition: left 0.3s ease; z-index: 9999;  }
    .slidNav.active { left: 0; }
    /* Mobile nav layout */
    
    .slidNav .nav ul { display: block; gap: 0; }
    .slidNav .nav ul li { border-bottom: 1px solid #eee; }
    .slidNav .nav ul a { display: block; padding: 12px 20px; color: var(--primary-color); }
    .header .nav .submenu { min-width: auto; position: relative; left: 0;}
    .slidNav .submenu { display: none; background: none; }
    .header .nav .active .submenu { margin-bottom: 20px;}
    .header .nav .submenu li {border-bottom: 0 none;}
    .header .nav .submenu li a { border-bottom: 0 none; font-size: 15px; font-weight: 500; color: var(--text-primary-color); padding: 5px 10px 5px 40px; position: relative;}
    .header .nav .submenu li a:hover { color: var(--primary-color);}
    .header .nav .submenu li a::before { content: ""; width: 8px; height: 8px; background-color: var(--white); border-radius: 20px; position: absolute; left: 20px; top: 15px; border: 2px solid var(--secondary-color);}

    .slidNav .nav ul li.btnBox { padding: 20px; border: 0 none;}

    .nav .has-submenu::before { content: "+"; font-size: var(--Font-size-24); position: absolute; top: 10px; right: 20px;}
    .nav .has-submenu.active::before { content: "-"; font-size: var(--Font-size-24); position: absolute; top: 10px; right: 22px; }

    .slidNav .navFooter { display: block; background-color: var(--bg-color-light); padding: 20px;}
    .slidNav .navFooter ul.contact { display: block; margin-bottom: 20px;}
    .slidNav .navFooter ul.contact li { display: flex; gap: 10px; align-items: center; margin-bottom: 10px;}
    .slidNav .navFooter ul.contact li a { font-weight: 500; color: var(--primary-color);}
    .slidNav .navFooter ul.contact li a:hover { color: var(--secondary-color);}
    .slidNav .navFooter  ul.social { display: flex; gap: 10px; margin-bottom: 10px;}
    .slidNav .navFooter  ul.social a { width: 42px; height: 42px; display: flex; justify-content: center; align-items: center; background-color: #fff; border-radius: 60px; color: var(--secondary-color);}
    .slidNav .navFooter  ul.social a:hover { color: var(--primary-color);}
}

/* Footer */
.footerTop { background-color: var(--bg-color-light); padding: 60px 0 40px 0;}
.footerTop .cntBox { width: 100%; display: flex; flex-wrap: wrap; gap: 60px;}
.footerTop .cntBox .leftCnt { width: calc(55% - 30px);}
.footerTop .cntBox .rightCnt { width: calc(45% - 30px); margin: -100px 0 -40px 0;
    background: linear-gradient(180deg,#001525, #012d51, #001525, #251d01, #001525);
    background-size: 400% 400%; -webkit-animation: AnimationName 20s ease infinite; -moz-animation: AnimationName 20s ease infinite; animation: AnimationName 20s ease infinite;
    border-top-left-radius: 20px; border-top-right-radius: 20px;
    padding: 60px 60px 30px 60px;
}
.footerTop .cntBox .leftCnt .tit { display: flex; flex-wrap: wrap; margin-bottom: 10px;}
.footerTop .cntBox .leftCnt .tit label { display: flex; align-items: center; line-height: normal; font-size: var(--Font-size-36); font-weight: 700; color: var(--primary-color); margin-bottom: 20px;}

.footerTop .cntBox .leftCnt .tit p { max-width: 600px; font-size: var(--Font-size-22); font-weight: 300; line-height: normal; margin-bottom: 25px;}
.footerTop .cntBox .leftCnt ul { width: 100%; display: flex; flex-wrap: wrap; gap: 30px;}
.footerTop .cntBox .leftCnt ul li { width: calc(50% - 15px); display: flex; flex-wrap: wrap; flex-direction: column; background-color: var(--white); padding: 30px; border-radius: 20px; transition:0.5s all ease;}
.footerTop .cntBox .leftCnt ul li label { display: flex; align-items: center; gap: 8px; font-size: var(--Font-size-14); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px;}
.footerTop .cntBox .leftCnt ul li label img { width: 20px;}
.footerTop .cntBox .leftCnt ul li a { font-size: var(--Font-size-20); font-weight: 500; color: var(--primary-color);}
.footerTop .cntBox .leftCnt ul li a:hover { color: var(--secondary-color);}
.footerTop .cntBox .leftCnt ul li:has(a:hover) { background-color: var(--primary-color);}

@-webkit-keyframes AnimationName {
    0%{background-position:95% 0%}
    50%{background-position:5% 100%}
    100%{background-position:95% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:95% 0%}
    50%{background-position:5% 100%}
    100%{background-position:96% 0%}
}
@keyframes AnimationName {
    0%{background-position:95% 0%}
    50%{background-position:5% 100%}
    100%{background-position:95% 0%}
}

.footer { background-color: var(--primary-color); padding: 60px 0;}
.footer .mFooter { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 50px;}
.footer .copyBox { width: 100%; display: flex; justify-content: space-between;}
.footer ul { display: flex; gap: 15px;}
.footer .mFooter ul.nav { gap: 30px;}
.footer .mFooter ul.nav a { font-weight: 500; color: var(--white);}
.footer .mFooter ul.nav a:hover { color: var(--secondary-color);}
.footer .mFooter ul.social { gap: 10px;}
.footer .mFooter ul.social a { width: 42px; height: 42px; display: flex; justify-content: center; align-items: center; background-color: #011f35; border-radius: 60px; color: var(--white);}
.footer .mFooter ul.social a:hover { color: var(--secondary-color);}

.whatsapp-float { position: fixed; width: 60px; height: 60px; bottom: 20px; right: 20px; background-color: #25D366; color: #fff; border-radius: 50px; text-align: center; font-size: 30px; z-index: 1000; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.3); transition: all 0.3s ease-in-out; }
.whatsapp-float img { width: 35px; height: 35px; }
.whatsapp-float:hover { background-color: #1ebc57; transform: scale(1.1);}

.productBanner { position: relative; overflow: hidden; padding: 60px 0; 
    background: linear-gradient(180deg,#001525, #001525, #022644, #001525);
    background-size: 400% 400%; -webkit-animation: AnimationName 20s ease infinite; -moz-animation: AnimationName 20s ease infinite; animation: AnimationName 20s ease infinite;
}
.productBanner img { display: none;}
.productBanner .cntBox { max-width: 100%; position: relative; z-index: 1;}
.productBanner .cntBox h1 { font-size: 34px; font-weight: 600; letter-spacing: 1px; color: #fff; margin-bottom: 16px; display: block; text-transform: capitalize;}
.productBanner .cntBox label { display: block; font-size: 30px; width: 100%; color: #f57c00; margin-bottom: 24px;font-weight: 300; line-height: normal;}
.productBanner .cntBox p { width: 100%;  font-size: var(--Font-size-20); line-height: 32px; color: var(--text-secondary-color); margin-bottom: 50px;}
.productBanner .cntBox a { background-color: var(--secondary-color); color: var(--white); padding: 14px 22px; border-radius: 6px;} 
.productBanner .cntBox a:hover { background-color: var(--white); color: var(--primary-color);}


/* .blogMain { background-color: #f7f7f7;} */
.blog-list { width: 100%; display: flex; flex-wrap: wrap;}
.blog-list .post-block { width: 33.33%; display: flex; flex-wrap: wrap; padding: 18px;}
/* .blog-list .post-block:first-child { width: 50%;} */
.blog-list .post-block .inner-box { width:100%; box-shadow: 0 0 30px rgba(0,0,0,.06); background-color: var(--white); border-radius: 4px; display: flex; flex-direction: column;}
.blog-list .post-block .image-box { min-height: 245px; max-height: 245px; height: 100%; display: block; box-sizing: border-box; position: relative; overflow: hidden;}
.blog-list .post-block .image-box img { width: 100%; height: 245px; object-fit: cover; border-top-left-radius: 4px; border-top-right-radius: 4px; transition: all 0.4s ease;}
.blog-list .post-block:hover img {/* filter: grayscale(100%); */  transform: scale(1.1);  opacity: 0.95;}
.blog-list .post-block .image-box span { position: absolute; top: 10px; right: 10px; display: flex; flex-wrap: wrap; flex-direction: column; align-items: flex-end; gap: 6px;}
.blog-list .post-block .image-box span a { background-color: var(--white); font-size: var(--Font-size-14); font-weight: 600; color: var(--primary-color); letter-spacing: 0.6px; text-transform: uppercase; line-height: normal; padding: 4px 8px; border-radius: 3px;}
.blog-list .post-block .image-box span a:hover { background-color: var(--primary-color); color: var(--secondary-color);}
.blog-list .post-block .content-box { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 30px;}
.blog-list .post-block .content-box .title { width: 100%; display: block; margin-bottom: 20px;}
.blog-list .post-block .content-box .title a { font-size: var(--Font-size-20); font-weight: 600; color: var(--primary-color);}
.blog-list .post-block .content-box .title a:hover { color: var(--secondary-color);}
.blog-list .post-block .content-box .info { width: 100%; display: flex; justify-content: space-between; align-items: center;}
.blog-list .post-block .content-box .info a {  width: 42px; height: 42px; background-color: #f7f7f7; display: flex; justify-content: center; align-items: center; border-radius: 100px;}
.blog-list .post-block .content-box .info a .arrow { background: var(--primary-color); margin-right: -8px;}
.blog-list .post-block .content-box .info a:hover { background-color: var(--primary-color);}
.blog-list .post-block .content-box .info a:hover .arrow { background: #f7f7f7;}
.blog-list .navigation { width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 20px;}
.blog-list .navigation { width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 40px; gap: 8px;}
.blog-list .navigation a { background-color: var(--white); border: 1px solid #eaeff5; border-radius: 6px; color: var(--primary-color); font-weight: 500; padding: 12px 16px; text-decoration: none; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px;}
.blog-list .navigation a:hover { background-color: var(--primary-color); color: var(--white); border-color: var(--primary-color); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 21, 37, 0.15);}
.blog-list .navigation .current { background-color: var(--white); border: 1px solid #eaeff5; border-radius: 6px; color: var(--secondary-color); font-weight: 500; padding: 12px 16px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px;}
.blog-list .navigation .dots { color: #999; cursor: default; pointer-events: none;}


.blogDtlBanner { position: relative; overflow: hidden; padding: 60px 0; background-attachment: fixed; background-position: center center; background-size: cover; background-repeat: no-repeat; overflow: hidden;}
.blogDtlBanner:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.85;
    background: linear-gradient(180deg,#001525, #001525, #022644, #001525);
    background-size: 400% 400%; -webkit-animation: AnimationName 20s ease infinite; -moz-animation: AnimationName 20s ease infinite; animation: AnimationName 20s ease infinite;
}
.blogDtlBanner .cntBox { width: 100%; max-width: 960px; margin: 0 auto; position: relative; z-index: 1; text-align: center;}
.blogDtlBanner .cntBox h1 { font-size:var(--Font-size-42); font-weight: 600; letter-spacing: 1px; color: #fff; margin-bottom: 0; display: block; text-transform: capitalize;}
.blogDtlBanner .cntBox a { background-color: var(--secondary-color); font-size: var(--Font-size-14); font-weight: 600; color: var(--primary-color); letter-spacing: 0.6px; text-transform: uppercase; line-height: normal; padding: 8px 12px; border-radius: 3px; margin-bottom: 15px; display: inline-block;}
.blogDtlBanner .cntBox a:hover { background-color: var(--white);}


.productBanner .cntBox label { display: block; font-size: 30px; width: 100%; color: #f57c00; margin-bottom: 24px;font-weight: 300;}
.productBanner .cntBox p { width: 100%;  font-size: var(--Font-size-20); line-height: 32px; color: var(--text-secondary-color); margin-bottom: 50px;}
.productBanner .cntBox a { background-color: var(--secondary-color); color: var(--white); padding: 14px 22px; border-radius: 6px;} 
.productBanner .cntBox a:hover { background-color: var(--white); color: var(--primary-color);}


.blog-details .blog-details-img { width: 100%; position: relative; height: 520px; overflow: hidden; background: #f0f0f0; margin-bottom: 30px;}
.blog-details .blog-details-img img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; will-change: top;}

.blog-details .blog-details-content { width: 100%; display: flex; flex-wrap: wrap; padding:30px;}
.blog-details .blog-details-content .blog-details-title { width: 100%; display: flex; flex-wrap: wrap; margin-bottom: 10px;}

.blog-details .blog-details-content .blog-details-title div { width: 100%; display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px;}
.blog-details .blog-details-content .blog-details-title div span { padding-left: 12px; border-left: 1px solid #ccc;}
.blog-details .blog-details-content .blog-details-cnt { width: 100%; display: block; margin-bottom: 10px;}

.blog-details .blog-details-content .blog-details-cnt a { color: var(--primary-color);}
.blog-details .blog-details-content .blog-details-cnt a:hover { color: var(--secondary-color);}

.blog-details .blog-details-content h3 {font-size: var(--Font-size-22);}

.blog-details .blog-details-content ul.list { margin-bottom: 10px !important;}

.blog-details .blog-details-content .space10 { display: flex; height: 10px;}
.blog-details .blog-details-content .space20 { display: flex; height: 20px;}
.blog-details .blog-details-content .space30 { display: flex; height: 30px;}
.blog-details .blog-details-content .space40 { display: flex; height: 40px;}
.blog-details .blog-details-content label { width: 100%; display: block; color: var(--primary-color); font-weight: 600; margin-bottom: 5px;}

.blog-details .blog-details-content .ul-box { width: 100%; display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 25px;}
.blog-details .blog-details-content .ul-box li { width: 100%;  padding: 30px; background-color: var(--bg-color-light); border: 1px solid #eaeff5; border-radius: 10px; background: linear-gradient(90deg,#F6F9FC, #F6F9FC, #ffffff, #F6F9FC, #F6F9FC); background-size: 400% 400%; -webkit-animation: AnimationName 20s ease infinite; -moz-animation: AnimationName 20s ease infinite; animation: AnimationName 20s ease infinite; box-shadow: 0 0 0 0 rgba(0, 21, 37, 0.1); transition:0.5s all ease;}
.blog-details .blog-details-content .ul-box li:hover { border: 1px solid #d5dbe3; box-shadow: 0 0 30px 2px rgba(0, 21, 37, 0.12);}
.blog-details .blog-details-content .ul-box label { margin-bottom: 14px;}
.blog-details .blog-details-content .box-two li { width: calc(50% - 15px);}
.blog-details .blog-details-content .box-three li { width: calc(33.33% - 20px);}
.blog-details .blog-details-content .box-four li { width: calc(25% - 30px);}

.blog-details .nav-links { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px;}
.blog-details .nav-links div {display: flex; flex-wrap: wrap;}
.blog-details .nav-links div a { display: flex; background-color: var(--bg-color-light); border: 1px solid #eaeff5; border-radius: 10px; background: linear-gradient(90deg,#F6F9FC, #F6F9FC, #ffffff, #F6F9FC, #F6F9FC); background-size: 400% 400%; -webkit-animation: AnimationName 20s ease infinite; -moz-animation: AnimationName 20s ease infinite; animation: AnimationName 20s ease infinite; box-shadow: 0 0 0 0 rgba(0, 21, 37, 0.1); transition:0.5s all ease; padding: 20px;}
.blog-details .nav-links div.next a { justify-content: right;}