body {
    user-select: none;
    color: var(--color);
    -ms-user-select: none;
    -webkit-user-select: none;
    font-family: "Roboto", sans-serif;
    font-size: 0.75vw;
    -webkit-font-smoothing: antialiased !important;
    line-height: 1.3020833333333333vw; 
    display: flex;
    flex-direction: column;  
    min-height: 100vh; 
   
          
}
html, body{margin:0; padding:0; }
* {box-sizing: border-box;} 
img {width:100%;max-width: 100%;display: block;-webkit-user-drag: none;object-fit: cover; }

h1,h2,h3,h4,h5,h6,p{ margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6 
{margin: 0px;padding: 0px;font-weight: 600;line-height: 1.2;color: var(--primary); font-family: "Titillium Web";}
h1 {font-size: var(--fsize1);}
h2 {font-size: var(--fsize2);}
h3 {font-size: var(--fsize3);}
h4 {font-size: var(--fsize4);}
h5 {font-size: var(--fsize5);}
h6 {font-size: var(--fsize6);}

svg {min-width: 1.2vw;min-height: 1.2vw; fill: #686868;}

/* Body Content CSS */
.MainContainerMargin {padding-top: calc(var(--responsive) * 2.9296875vw);padding-bottom: calc(var(--responsive) * 2.9296875vw);}
.MainDataContainer { width:94%;margin-left: auto;margin-right: auto;}
.main_heading {width: 100%;display: grid;text-align: center;}
.main_heading h2 {text-transform: uppercase;text-align: center;}
.main_heading p{text-align: center;}

/* Spacing Property */
.separator { height: 0.0625vw;margin: var(--spacing2) 0px;background-color: var(--border);}
.spacer2 {height: 1vw !important;}
.spacer { height: var(--spacing2) !important;}
.vspacer1 {height: var(--spacing2) !important;}
.vspacer2 {height: var(--spacing3) !important;}
.hspacer1 {display: inline-block;width: var(--spacing2) !important;}
.hspacer2 {display: inline-block; width: var(--spacing3) !important;}


/*Table Property*/
table{width: 100%;border:1px solid var(--border); background-color: var(--bgcolor2);border-collapse: collapse;}
tr{border-bottom:1px solid var(--border);}
tr:last-child{border-bottom: none;}
th,td{ padding: var(--spacing2);border-right: 1px solid var(--border);}
th{font-weight:600;color: var(--primary); background-color: var(--bgcolor3);}
th:last-child,td:last-child{border-right: none;}
.table_hover:hover{cursor: pointer; border: 1px solid #ffac4a; background-color: #f5f5f5; box-shadow: 0 0 15px #21212133;transition: 500ms;}

/*Button Property*/
.btn_small i {color: white;}
.btn_small {padding: 0.45vw 0.5vw;}
button i,button svg {fill: white;color: white;}
button:hover,button:disabled {border-color: var(--primary);background-color: var(--primary);}
button:disabled i,button:disabled svg {color: var(--primary) !important;}
button:disabled {cursor: not-allowed;color: var(--color); border-color: var(--border); background-color: var(--bgcolor1);}
button 
{color: white;cursor: pointer;transition: 500ms; align-items: center; gap: var(--spacing1); display: inline-flex;
font-weight: 600; justify-content: center; text-transform: uppercase;border-radius: var(--radius); background-color: var(--secondary);
border: 1px solid var(--secondary); padding: calc(var(--responsive) * 0.65vw) calc(1vw * var(--responsive));}

.view_more, .view_more:hover, .view_more:hover svg {
    cursor: pointer;
    gap: var(--spacing1);
    color: var(--primary);
    transition: 500ms;
}
.view_more:hover {   
    color: var(--secondary);   
}
.view_more:hover svg {   
    fill: var(--secondary);
    
}
   


/*Border Property*/
.border{border: 1px solid var(--border);}
.border_left{border-left: 1px solid var(--border);}
.border_right{border-right: 1px solid var(--border);}
.border_top{border-top: 1px solid var(--border);}
.border_bottom{border-bottom: 1px solid var(--border);}

.border_none{border: none !important;}
.border_left_none{border-left: none !important;}
.border_right_none{border-right: none !important;}
.border_top_none{border-top: none !important;}
.border_bottom_none{border-bottom: none !important;}

/*---Border Radius---*/
.radius_none{ border-radius: none;}
.radius_bottom_none{ border-radius: 5px 5px 0px 0px;}

/*---Text Property---*/
.text_left {text-align:left;}
.text_right {text-align:right;}
.text_center {text-align:center;}
.bold{ font-weight:700; }

/* Color class */
.white{color:#fff;}
.gray{color:#686868;}
.black{color:#383838;}
.yellow{color:#ffac4a;}
.green{color: #008000;}
.red{color:#ff0000}

/*Background color and padding*/
.parallax{width: 100%;height: 100%;background-attachment: fixed;background-position: 50%; background-repeat: no-repeat; background-repeat: repeat;background-size: cover;}
.bg_gray,.bg_white
{padding-top: calc(var(--responsive) * 2.9296875vw); padding-bottom: calc(var(--responsive) * 2.9296875vw);background-color: var(--bgcolor1); clear: both;}
.bg_white{background-color: var(--bgcolor2);}

/* Global Inner page margin*/
.globalMargin-top {margin-top: 1vw;margin-bottom: 2vw;}

/*Container Property*/
.flex{display:flex;gap: var(--spacing2);flex-basis: auto; width:100%;}
.grid{display:grid;align-items: center;}

.flex_row{ flex-direction: row; }
.flex_column{ flex-direction: column;}
.fixWithGrid{display: grid; grid-gap: var(--spacing2);flex-basis: auto;}
.gridTemplateColumns_4 {grid-template-columns:4vw 1fr;}

/*Align Items Property*/
.flex_left    { justify-content: flex-start; }
.flex_right   { justify-content: flex-end; }
.flex_center  { justify-content: center; }
.flex_top  { justify-content:top!important; }
.flex_vcenter { align-items: center;}
.grid_auto_rows {grid-auto-rows: min-content;}
.fixWithFlex {display: flex; gap: 8px;}
.alignRight { justify-content: flex-end;}
.flow_colum{ flex-direction: column;}

/* Flex grow*/
.grow1{flex-grow: 1;}
.grow2{flex-grow: 2;}

/*For left image with text*/
.grid_columns_2 {grid-template-columns: 2vw 1fr;}
.grid_columns_3 {grid-template-columns: 3vw 1fr;}
.grid_columns_4 {grid-template-columns: 4vw 1fr;}

/*Box Gap Property*/
.gap-0 {gap: 0 !important;grid-gap: 0 !important;}
.gap1 {grid-gap: var(--spacing2);gap: var(--spacing2);}
.gap2 {grid-gap: var(--spacing3);gap: var(--spacing3);}

/*Row Propertry*/
.row1 {grid-template-rows: repeat(1, 1fr);}
.row2 {grid-template-rows: repeat(2, 1fr);}
.row3 {grid-template-rows: repeat(3, 1fr);}
.row4 {grid-template-rows: repeat(4, 1fr);}
.row5 {grid-template-rows: repeat(5, 1fr);}
.specor { height: 20px; }

/*Grid Property*/
.col1,.col2,.col3,.col4,.col5,.col6,.col7,.col8,.col9,.col10,.col11{display: grid;grid-gap:var(--spacing2);} 
.col1 {grid-template-columns: 1fr;}
.col2 {grid-template-columns: repeat(2, 1fr) !important;}
.col3 {grid-template-columns: repeat(3, 1fr) !important;}
.col4 {grid-template-columns: repeat(4, 1fr) !important;} 
.col5 {grid-template-columns: repeat(5, 1fr) !important;} 
.col6 {grid-template-columns: repeat(6, 1fr) !important;}
.col7 {grid-template-columns: repeat(7, 1fr) !important;}
.col8 {grid-template-columns: repeat(8, 1fr) !important;}
.col9 {grid-template-columns: repeat(9, 1fr) !important;}
.col10 {grid-template-columns: repeat(10, 1fr) !important;}

/*Box Property*/
.box, .box:hover {transition: 500ms; border-radius:var(--radius2); border: 1px solid #d4d4d4;background-color: white;color:#686868;overflow: hidden;}
.box:hover{cursor: pointer; border: 1px solid #ffac4a; background-color: #f5f5f5; box-shadow: 0 0 15px #21212133;}
.hover_none:hover{border: 1px solid #d4d4d4!important;background-color: var(--bgcolor2)!important;; border-radius: 5px!important;; box-shadow: none !important; cursor: auto;}

/*Padding Property*/

.pad{padding:var(--spacing1);}
.pad{padding:var(--spacing2);}
.pad2{padding:var(--spacing3);}

/*Inner content Grid Property*/
.inner_cal1 { width: 5%;}
.inner_cal2 { width: 10%;}
.inner_cal3 { width: 15%;}
.inner_cal4 { width: 20%;}
.inner_cal5 { width: 25%;}
.inner_cal6 { width: 30%;}
.inner_cal7 { width: 35%;}
.inner_cal8 { width: 40%;}
.inner_cal9	{ width: 45%;}
.inner_cal10{ width: 50%;}
.inner_cal11{ width: 55%;}
.inner_cal12 { width: 60%;}
.inner_cal13 { width: 65%;}
.inner_cal14 { width: 70%;}
.inner_cal15 { width: 75%;}
.inner_cal16 { width: 80%;}
.inner_cal17 { width: 85%;}
.inner_cal18 { width: 90%;}
.inner_cal19 { width: 95%;}
.inner_cal20 { width: 100%;}

.img_big{ grid-template-columns: 60vw 1fr; }
.img_small{ grid-template-columns: 18vw 1fr; }
.img_very_small{ grid-template-columns: 18vw 1fr; }

.square_6x6 {width:6vw; height:6vw;}
.square_4x4 {width:4vw; height:4vw;}
.square_3x3 {width:3vw; height:3vw;}

.vertical_10 {width:10vw; height:auto;}
.vertical_4 {width:4vw; height:auto;}

.rectangle_10 {width:10vw; height:auto;}
.rectangle_6 {width:6vw; height:auto;}
.rectangle_4 {width:4vw; height:auto;}
.rectangle_5{width:5vw; height:auto;}

/*Our Services Inner page css */
.quick_form{background-color:var(--bgcolor1);padding:var(--spacing3);border-radius: var(--radius2);}
.quick_form input {border: 1px solid var(--border);border-radius: var(--radius);padding: var(--spacing2);transition: .5s;width: 100%;}

/*Common sidebar css */
.sidebar{ background-color: white; border: 1px solid var(--border); padding: var(--spacing2); border-radius: var(--radius)}
.sidebar .wrapp{border:1px solid var(--border); border-radius: var(--radius2); margin-bottom: 15px;}
.sidebar  h4{ margin-bottom: var(--spacing1); }

.sidebar .card{display: flex;gap: var(--spacing2);border-bottom:1px solid var(--border);transition: 500ms; margin-bottom:var(--spacing1)}
.sidebar .card:hover{background-color:var(--bgcolor3);transition: 500ms; cursor: pointer;}
.sidebar .card:last-child{ border-bottom: none; }
.sidebar .card:hover:last-child{ border-bottom: none; }
@media screen and (min-device-width: 768px) and (max-device-width: 1023px) { 
    body{font-size: 1.6vw; line-height: 1.5;}
}
@media only screen and (max-width: 1024px)
    {
    body{font-size: 1vw; line-height: 1.5;}
    .four_buttons{display: none!important;} 
    .news_section{height: auto!important;}
    }
@media only screen and (max-width: 768px)
 {
 body{font-size: 1.3vw; line-height: 1.5;}
 .flex-container {flex-direction: column;}
 .four_buttons{display: none!important;} 
 .col2{grid-template-columns: repeat(2, 1fr) !important;}
 .col4{grid-template-columns: repeat(2, 1fr) !important;}
 .col3{grid-template-columns: repeat(1, 1fr) !important;}
 .col6{grid-template-columns: repeat(3, 1fr) !important;}
 .mobile{display: grid; }
 .rectangle_10{width: 100%}
 .rectangle_5{width: 25%}
 .vertical_10{width: 25%}
 .vertical_4{width: 40%}
 .square_6x6, .square_3x3,.square_4x4{width: 10vw; height:10vw;}
 button{font: 600 2vw Roboto;}
 .homepage_container .news_main_container .news_section{height: auto!important; display: flex; align-items: center;}
}