:root{
}

.text{
font-weight:500 !important;
}

.contact-info{
padding: 130px 0 90px !important;
}

.flaticon-note-2,
.flaticon-telephone-receiver{
margin-right:10px;
color:var(--red) !important;
}

.hide-on-destop{
display:none;
}

/* ------- Main layout ------- */
.contact-form-section p{
max-width:88% !important;
margin-left:auto;
margin-right:auto;
}

.contact-item:not(.contact-item-first){
margin-top:90px !important;
}

.contact-item-bottom .text{
margin:5px 0;
}

.contact-item-middle p.text{
margin-bottom:0 !important;
}

.our-experience{
max-width:90% !important;
margin:0 auto !important;
}

.contact-main-layout{
display:flex !important;
gap:40px;
margin-bottom:200px;
}

.contact-main-layout-bottom{
margin-bottom:100px !important;
}

.contact-main-layout-bottom p{
max-width:85%;
margin-right:auto !important;
}

.main-layout-bottom-top{
display:flex;
justify-content:space-between;
}

.main-layout-bottom-top a{
min-width:fit-content !important;
max-height:fit-content !important;
}

/* ------- Left layout ------- */
.contact-main-left p.text{
font-size:18px !important;
}

.contact-main-left{
height:100% !important;
width:30%;
padding:50px 50px;
border: 1px solid #00000033;
background:url('/images/contact/left-sidebar-bg.webp');
background-size: cover;
}

/* ------- Right layout ------- */
.contact-main-right{
height:100% !important;
width:70%;
}

.contact-item-heading{
font-size:28px !important;
margin-bottom:35px !important;
color:var(--black) !important;
}

.contact-item-bottom{
color:var(--red) !important;
margin-top: 50px;
display:flex;
flex-direction:column;
}

.contact-item-bottom .flaticon-telephone-receiver{
display: inline-block;
transform: rotate(280deg);
margin-right: 10px;
}

.address-item{
display:flex !important;
align-items:baseline;
gap:10px !important;
}

.address-item .icon,
.flaticon-telephone-receiver.icon{
font-size:18px !important;
}

.address-heading{
font-size:18px !important;
font-family:var(--font-montserrat) !important;
}

/* ---------- contact main right side style ---------- */
.contact-main-subheading{
font-size:32px !important;
margin-bottom:25px !important;
}

.contact-main-right-body {
display:grid;
grid-template-columns: repeat(2, 1fr);
gap: 50px;                     
align-items: start;  
}

/* --------------------- Flip card style ------------------------ */
.card-inner,
.card-front,
.card-back{
cursor:pointer !important;
}

/* Card Container */
.card-inner {
position: relative;
width: 100%;
height: 250px;
transition: transform 0.7s ease-in-out;
transform-style: preserve-3d;
perspective: 1000px;
}

.card-inner .text{
color:#222222 !important;
font-size:18px !important;
font-weight:400 !important;
text-align:center;
padding:0 50px !important;
}

.card-front h2 {
font-size: 26px !important;
margin-bottom: 10px !important;
text-align: center;
}

.card-inner:hover {
transform: rotateY(180deg);
}

.card-front, 
.card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
overflow: hidden;
padding: 0 20px !important;
}

/* Front Side Styling */
.card-front {
background: #EDEFF2;
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
font-weight: 400;
transform: rotateX(0deg);
padding-top:20px !important;
}

/* Back Side Styling - Pre-rotated */
.card-back {
background: #FFFFFF;
transform: rotateY(180deg);
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
font-weight: 400;
box-shadow: 0px 3px 4px 0px #00000040;
border:1px solid var(--red);
}

/*smooth transitions for content inside */
.card-front > *,
.card-back > * {
transition: opacity 0.3s ease;
}

.card-back a.theme-btn{
transition: all 0.9s ease !important;
}

/* ----Responsive adjustments -- */
@media (max-width: 541px) {
.card-inner {
height: 300px;
}

.hide-on-mobile{
display:none;
}

.hide-on-destop{
display:block;
max-width: fit-content;
}

.our-experience a{
padding: 11px 24px !important;
}

.sec-title.centered{
text-align:left !important;
}

.our-experience{
margin-left: 0 !important;
margin-right: 0 !important;
min-width: 100%;
padding-left:15px !important;
padding-right:15px !important;
}
}

@media (max-width: 768px) {
.card-inner {
height: 350px;
}
}

@media (max-width: 991px) {
.contact-item:not(.contact-item-first){
margin-top: 60px !important;
}

.contact-main-right-body{
grid-template-columns: repeat(1, 1fr) !important;
}
}

@media (max-width: 1200px) {
    
.contact-main-layout-bottom p{
max-width:100%;
margin-right:0 0;
}

.contact-form-section p{
max-width:100% !important;
margin-left:0;
margin-right:0;
}

.contact-main-layout{
flex-direction:column-reverse;
}

.contact-main-right,
.contact-main-left{
width:100% !important;
}

.card-inner {
transform: rotateY(180deg);
}

.contact-info{
padding: 90px 0 50px !important;
}

.contact-item-heading{
margin-bottom: 20px !important;
}

.contact-item-bottom{
margin-top: 30px;
}

.contact-item:not(.contact-item-first){
margin-top: 60px !important;
}
}

/*Left Side Freeze*/
@media (min-width: 1201px) {
.contact-main-layout {
display: flex;
align-items: flex-start;
gap: 40px;
}

.contact-main-right {
position: sticky;
top: 120px; 
width: 70%;
align-self: flex-start;
height: auto !important;
z-index: 2;
}

.contact-main-left {
flex: 1;
min-height: 1000px; 
}

section.our-experience,
.contact-main-layout,
body {
overflow: visible !important;
}
}

/* --------------------- Get in Touch on mobile------------------------ */
@media (max-width: 768px) {
.contact-form-section {
display: none;
}

.contact-info {
padding: 40px 0 20px !important;
}

.card-inner {
height: 240px !important;
}

/* 👉 Make text wider inside the cards */
.card-inner .text {
max-width: 90% !important; /* wider text area */
padding: 0 10px !important; /* less side padding */
font-size: 16px !important; /* optional: slightly smaller font for balance */
}
}