/* Westford Immigration Services Template by Technoloxia Bangladesh */

/************ TABLE OF CONTENTS ***************
1. Fonts
2. Reset
3. Global
4. Main Header / Two / Three
5. Slider One / Two / Three
6. Specialist One
7. Services One / Two / Three / Four / Five / Six
8. About One / Two / Three / Four
9. Testimonial One / Two / Three
10. Team One
11. Fluid One
12. Project One
13. Process One
14. News One / Two
15. Clients One
16. CTA One
17. Main Footer
18. Counter One
19. History One
20. Process Two
21. Video One / Two
22. CTA Two
23. Team Two
24. Case One / Two / Three
25. Default One
26. Faq One
27. Price One
28. Map One
29. Page Title
30. Case Detail
31. Service Detail
32. Blog Classic
33. Blog Sidebar
34. Blog Widgets
35. Blog Detail
36. Not Found
37. Contact Form

**********************************************/

/* 

	font-family: 'Lexend', sans-serif;

*/

/*** 

====================================================================
	Root Code Variables
====================================================================

 ***/

.theme_color{
	color:var(--main-color);
}

/* Theme Color */

:root {
	
	/* #dd131a in decimal RGB */
	--main-color: rgb(141,25,32);
	--main-color-rgb:141,25,32;
	
	/* #0D1057 in decimal RGB */
	--color-two: rgb(27,27,27);
	--color-two-rgb:27,27,27;

    /* #141414 in decimal RGB */
	--color-three: rgb(20,20,20);
	--color-three-rgb:20,20,20;

    /* #4F4F4F in decimal RGB */
	--color-four: rgb(79,79,79);
	--color-four-rgb:79,79,79;

    /* #A6A6A6 in decimal RGB */
	--color-five: rgb(166,166,166);
	--color-five-rgb:166,166,166;

    /* #1D1D1D in decimal RGB */
	--color-six: rgb(29,29,29);
	--color-six-rgb:29,29,29;

    /* #960D12 in decimal RGB */
	--color-seven: rgb(150,13,18);
	--color-seven-rgb:150,13,18;

    /* #A3A3A3 in decimal RGB */
	--color-eight: rgb(163,163,163);
	--color-eight-rgb:163,163,163;

    /* #0A0C42 in decimal RGB */
	--color-nine: rgb(10,12,66);
	--color-nine-rgb:10,12,66;

    /* #828282 in decimal RGB */
	--color-ten: rgb(130,130,130);
	--color-ten-rgb:130,130,130;

    /* #EBE6E6 in decimal RGB */
	--color-eleven: rgb(235,230,230);
	--color-eleven-rgb:235,230,230;

    /* #0B0C29 in decimal RGB */
	--color-twelve: rgb(11,12,41);
	--color-twelve-rgb:11,12,41;

    /* #B8B8B8 in decimal RGB */
	--color-thirteen: rgb(184,184,184);
	--color-thirteen-rgb:184,184,184;

	/* #191C5F in decimal RGB */
	--color-fourteen: rgb(25,28,95);
	--color-fourteen-rgb:25,28,95;
	
	/* #FFB800 in decimal RGB */
	--color-fifteen: rgb(255,184,0);
	--color-fifteen-rgb:255,184,0;

	/* #EBEBEB in decimal RGB */
	--color-sixteen: rgb(235,235,235);
	--color-sixteen-rgb:235,235,235;

	/* #424242 in decimal RGB */
	--color-seventeen: rgb(66,66,66);
	--color-seventeen-rgb:66,66,66;

	/* #808080 in decimal RGB */
	--color-eighteen: rgb(128,128,128);
	--color-eighteen-rgb:128,128,128;



    /* #ffffff in decimal RGB */
	--white-color:rgb(255,255,255);
	--white-color-rgb:255,255,255;

	/* #000000 in decimal RGB */
	--black-color:rgb(0,0,0);
	--black-color-rgb:0,0,0;

	/* Westford BD Brand Guidelines v1.0 */
	--brand-primary: rgb(141,25,32);       /* #8D1920 - same as --main-color */
	--brand-hover: rgb(178,32,48);         /* #B22030 */
	--brand-active: rgb(106,17,24);        /* #6A1118 */
	--brand-tint: rgb(245,230,231);        /* #F5E6E7 */
	--brand-off-white: rgb(248,244,244);   /* #F8F4F4 */
	--brand-border: rgb(232,224,224);      /* #E8E0E0 */
	--brand-text-dark: rgb(26,26,26);      /* #1A1A1A - body text, headings */
	--brand-text-muted: rgb(92,92,92);     /* #5C5C5C - captions, metadata */

	/* Fonts */
	font-family: 'Inter', sans-serif;

}

/*** 

====================================================================
	Reset
====================================================================

 ***/
 
* {
	margin:0px;
	padding:0px;
	border:none;
	outline:none;
}

/*** 

====================================================================
	Global Settings
====================================================================

***/


/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-three);
}

body {
	font-family: 'Inter', sans-serif;
	color:var(--brand-text-dark);
	line-height:1.6em;
	font-weight:400;
	font-size:15px;

	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
}

/* Brand-guideline table style (used for reference/comparison data tables) */
.brand-table{
	width:100%;
	border-collapse: collapse;
	margin: 20px 0 25px;
	font-size: 15px;
}
.brand-table caption{
	text-align:left;
	font-weight:600;
	color: var(--brand-text-dark);
	margin-bottom: 10px;
}
.brand-table th{
	background-color: var(--main-color);
	color: var(--white-color);
	text-align:left;
	padding: 12px 16px;
	font-weight:600;
}
.brand-table td{
	padding: 12px 16px;
	border-bottom: 1px solid var(--brand-border);
	color: var(--brand-text-dark);
	vertical-align: top;
}
.brand-table tbody tr:nth-child(even){
	background-color: var(--brand-off-white);
}
.brand-table tbody tr:hover{
	background-color: var(--brand-tint);
}

/* Brand-guideline callout / notice block */
.brand-callout{
	background-color: var(--brand-tint);
	color: var(--brand-active);
	border-left: 4px solid var(--main-color);
	padding: 16px 20px;
	margin: 20px 0;
	border-radius: 4px;
	font-size: 15px;
}
.brand-callout strong{
	color: var(--brand-active);
}

/* Alternate section background utility (zebra sections per brand guide) */
.section-off-white{
	background-color: var(--brand-off-white);
}

/* Fix: detail-page content rows were split heading-left / content-right at 50/50,
   which left a large blank gap under short headings once real (long) content was
   added. Stack the heading above its content, both full width, on every content
   row of a service-detail page (identified by containing .service-detail_subheading).
   The .sec-title intro row at the top of each page is untouched - it isn't wrapped
   in a row that contains .service-detail_subheading. */
.service-detail .row.clearfix > .column:has(> .service-detail_subheading),
.service-detail .row.clearfix > .column:has(> .service-detail_subheading) ~ .column{
	flex: 0 0 100% !important;
	max-width: 100% !important;
	width: 100% !important;
}

.service-detail .row.clearfix > .column:has(> .service-detail_subheading){
	margin-bottom: 16px;
}

.service-detail_subheading{
	padding-left: 18px;
	border-left: 4px solid var(--main-color);
	font-size: 24px;
}

.service-detail .row.clearfix{
	margin-bottom: 10px;
}

.service-detail table.brand-table + .brand-table,
.service-detail p + table.brand-table,
.service-detail ul + table.brand-table{
	margin-top: 10px;
}

/* Fix: the detail-page banner image is a small square icon illustration,
   not a wide photo - stop it from stretching edge-to-edge into a giant
   square. Give it a contained, professional presentation instead: a
   fixed-height off-white band with the icon centered and capped in size. */
.service-detail_image{
	background-color: var(--brand-off-white);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 50px;
}

.service-detail_image img{
	width: auto !important;
	object-fit: contain;
	display: block;
}

@media (max-width: 767px){
	.service-detail_image{
		width: 100%;
	}
	.service-detail_image img{
		
		width: 100%;
	}
}

/* Preloader */

.preloader{ 
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:999999999;
	background-color:#ffffff;
	background-position:center center;
	background-repeat:no-repeat;
	background-image:url(../images/icons/preloader.png);
    background-size: 100px;
}

i{
    font-style: normal;
}

.bordered-layout .page-wrapper{
	padding:0px 50px 0px;
}

a{
	text-decoration:none;
	cursor:pointer;
	transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	color:var(--main-color);
}

button,
a:hover,a:focus,a:visited{
	text-decoration:none;
	outline:none !important;
}

h1,h2,h3,h4,h5,h6 {
	position:relative;
	margin:0px;
	background:none;
	color:var(--color-four);
    font-family: 'Outfit', sans-serif;
}

input,button,select,textarea{
	
}

textarea{
	overflow:hidden;
}

.text,
p{
	position:relative;
	line-height:1.7em;
	color:var(--color-four);
	font-size:16px;
}

/* Typography */

h1{
	line-height:82px;
	font-weight:600;
	font-size:72px;
}

h2{
	line-height:54px;
	font-weight:600;
	font-size:44px;
}

h3{
	line-height:42px;
	font-weight:600;
	font-size:32px;
}

h4{
	line-height:34px;
	font-weight:600;
	font-size:22px;
}

h5{
	line-height:30px;
	font-weight:600;
	font-size:18px;
}

h6{
	line-height:28px;
	font-weight:600;
	font-size:18px;
}

.auto-container{
	position:static;
	max-width:1350px;
	padding:0px 15px;
	margin:0 auto;
}

.page-wrapper{
	position:relative;
	margin:0 auto;
	width:100%;
	min-width:300px;
    overflow: hidden;
}

ul,li{
	list-style:none;
	padding:0px;
	margin:0px;	
}

img{
	display:inline-block;
	max-width:100%;
}

.theme-btn{
	cursor:pointer;
	display:inline-block;
	transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
}

.centered{
	text-align:center;	
}

::-webkit-input-placeholder{color: inherit;}
::-moz-input-placeholder{color: inherit;}
::-ms-input-placeholder{color: inherit;}

/***

====================================================================
	Scroll To Top style
====================================================================

***/

/* backtoup */
.progress-wrap {
  position: fixed;
  right: 30px;
  bottom: 40px;
  height: 35px;
  width: 35px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.20);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
  transform: translateY(15px);
  -webkit-transform: translateY(15px);
  -moz-transform: translateY(15px);
  -ms-transform: translateY(15px);
  -o-transform: translateY(15px); }
  .progress-wrap::after {
    position: absolute;
    content: '\f176';
    font-family: "Font Awesome 5 Free";
    text-align: center;
    line-height: 35px;
    font-size: 15px;
    color: var(--main-color);
    left: 0;
    top: 0;
    height: 35px;
    width: 35px;
    cursor: pointer;
    display: block;
    font-weight: 700;
    z-index: 1;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
    font-size: 13px; }
  .progress-wrap svg path {
    fill: none; }
  .progress-wrap svg.progress-circle path {
    stroke: var(--main-color);
    stroke-width: 4;
    box-sizing: border-box;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear; }
  .progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); }
  .progress-wrap.style2::after {
    color: var(--thm-color-2); }
  .progress-wrap.style2 svg.progress-circle path {
    stroke: var(--thm-color-2); }
  .progress-wrap.style3::after {
    color: var(--thm-color-3); }
  .progress-wrap.style3 svg.progress-circle path {
    stroke: var(--thm-color-3);
}

/* List Style One */

.list-style-one{
	position:relative;
}

.list-style-one li{
	position:relative;
	color:var(--white-color);
	font-size:16px;
	font-weight:400;
	line-height:1.8em;
	margin-bottom:10px;
	padding-left:30px;
}

.list-style-one li a{
	position:relative;
	color:var(--white-color);
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}

.list-style-one li a:hover{
	color:var(--main-color);
}

.list-style-one li .icon{
	position:absolute;
	left:0px;
	top:5px;
	color:var(--main-color);
	font-size:18px;
	line-height:1em;
	font-weight:300;
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}

/* Btn Style One */

.btn-style-one{ 
position: relative;
    font-weight: 500;
    font-size: 15px;
    overflow: hidden;
    text-align: center;
    border-radius: 0px;
    padding: 12px 10px;
    display: inline-block;
    color: var(--white-color);
    text-transform: capitalize;
    font-family: 'Inter', sans-serif;
    background-color: var(--main-color);
}

.btn-style-one:before{
	-webkit-transition-duration: 800ms;
	transition-duration: 800ms;
	position: absolute;
	width: 200%;
	height: 200%;
	content: "";
	top: -200%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	border-radius: 50%;
	z-index: 1;
	background-color: var(--color-three);
}

.btn-style-one:hover:before{
	top: 0%;
}

.btn-style-one .btn-wrap{
	position:relative;
	z-index:1;
	float:left;
    overflow: hidden;
    display: inline-block;
}

.btn-style-one .btn-wrap .text-one{
	position: relative;
	display: block;
	color: var(--white-color);
	transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}

.btn-style-one:hover .btn-wrap  .text-one:first-child{
	-webkit-transform: translateY(-150%);
    -ms-transform: translateY(-150%);
    transform: translateY(-150%);
}

.btn-style-one .btn-wrap .text-two{
	position: absolute;
    top: 100%;
    display: block;
	color: var(--white-color);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.btn-style-one:hover .btn-wrap .text-two{
	top: 50%;
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.btn-style-one:hover .btn-wrap .text-two{
	color: var(--white-color);
}

.btn-style-one:hover{
	
}

.btn-style-one:hover:before{
	top: -40%;
}

/* Btn Style Two */

.btn-style-two{
	position: relative;
	font-weight:500;
    font-size: 18px;
	overflow: hidden;
	text-align:center;
	border-radius:0px;
	padding:21px 28px;
	display:inline-block;
    color: var(--color-six);
	text-transform: capitalize;
    font-family: 'Inter', sans-serif;
	border: 1px solid var(--color-six);
}

.btn-style-two:before{
	-webkit-transition-duration: 800ms;
	transition-duration: 800ms;
	position: absolute;
	width: 200%;
	height: 200%;
	content: "";
	top: -200%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	border-radius: 50%;
	z-index: 1;
	background-color: var(--color-three);
}

.btn-style-two:hover:before{
	top: 0%;
}

.btn-style-two .btn-wrap{
	position:relative;
	z-index:1;
	float:left;
    overflow: hidden;
    display: inline-block;
}

.btn-style-two .btn-wrap .text-one{
	position: relative;
	display: block;
	color: var(--color-six);
	transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}

.btn-style-two:hover .btn-wrap  .text-one:first-child{
	-webkit-transform: translateY(-150%);
    -ms-transform: translateY(-150%);
    transform: translateY(-150%);
}

.btn-style-two .btn-wrap .text-two{
	position: absolute;
    top: 100%;
    display: block;
	color: var(--white-color);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.btn-style-two:hover .btn-wrap .text-two{
	top: 50%;
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.btn-style-two:hover .btn-wrap .text-two{
	color: var(--white-color);
}

.btn-style-two:hover{
	
}

.btn-style-two:hover:before{
	top: -40%;
}

img{
	display:inline-block;
	max-width:100%;
	height:auto;	
}

/*** 

====================================================================
	Section Title
====================================================================

***/

.sec-title{
	position:relative;
    z-index: 2;
	margin-bottom:20px;
}

.sec-title_title{
	position: relative;
    font-weight: 600;
    font-size:16px;
    padding: 7px 18px;
    letter-spacing: 0.5px;
	display: inline-block;
	color:var(--main-color);
	text-transform:uppercase;
    border: 1px dashed var(--main-color);
}

.sec-title_title.style-two{
	border: none;
	padding: 0px 0px 0px 30px;
}

.sec-title_title.style-two::before{
	position: absolute;
	content: '';
	left: 0px;
	top: 0px;
	width: 20px;
	height: 20px;
	background: url(../images/icons/title-icon.png) no-repeat;
}

.sec-title_title.style-three{
	border: none;
	padding: 5px 20px 5px 15px;
}

.sec-title_title.style-three::before{
	position: absolute;
	content: '';
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	opacity: 0.20;
	background: rgba(var(--white-color-rgb), 0);
	background: linear-gradient(to left, rgba(var(--white-color-rgb), 0) 0%, rgba(var(--main-color-rgb), 1) 100%);
}


.sec-title_heading{
    color: var(--color-three);
    text-transform: capitalize; 
    margin-top: 15px;
      margin-bottom: 20px;
}

.sec-title_heading span{
    opacity: 0.50;
}

.sec-title_text{
	line-height:28px; 
	font-size:18px;
	margin-top:20px;
	margin-bottom:20px;
    color:var(--color-four);
}

.sec-title.light .sec-title_title{
    color: var(--white-color);
    border-color: var(--white-color);
}

.sec-title.light .sec-title_text,
.sec-title.light .sec-title_heading{
	color:var(--white-color);
}

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

.sec-title.centered .separator{
	margin:0 auto;
}

/* Custom Select */

.form-group .ui-selectmenu-button.ui-button{
	top:-2px;
	width:100%;
	border:0px;
	padding: 17px 25px;
	font-weight:500;
	line-height:28px;
	font-size:16px;
	color:var(--color-four);
	background-color: var(--white-color);
}

.form-group .ui-button .ui-icon{
	background:none;
	position:relative;
	top:3px;
	text-indent:0px;
	color:#a5a5a5;	
}

.form-group .ui-button .ui-icon:before{
	font-family: 'FontAwesome';
	content: "\f107";
	position:absolute;
	right:0px;
	top:2px !important;
	top:10px;
	height:22px;
	display:block;
	line-height:20px;
	font-size:16px;
	font-weight:normal;
	text-align:center;
	z-index:5;
	color:var(--color-five);
}

.ui-menu .ui-menu-item{
	font-size:14px;
}

.ui-menu .ui-menu-item:last-child{
	border:none;	
}

.ui-state-active, .ui-widget-content .ui-state-active{
	background-color:var(--main-color) !important;
	border-color:var(--main-color) !important;
}

.ui-menu .ui-menu-item-wrapper{
	position:relative;
	display:block;
	padding:8px 20px;
	line-height:24px;
	font-size:14px;
}

.ui-menu-item:hover{
	background-color:var(--color-two);
}

/* Cursor */

.cursor {
    position: fixed;
    background-color: var(--main-color);
    width: 10px;
    height: 10px;
    border-radius: 100%;
    z-index: 1;
    -webkit-transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
    transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
    transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
    transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 10000;
	-webkit-transform: scale(1);
	transform: scale(1);
}
  
.cursor.active {
	opacity: 1;
	-webkit-transform: scale(0);
	transform: scale(0);
}
  
.cursor.menu-active {
	opacity: 1;
	-webkit-transform: scale(0);
	transform: scale(0);
}
  
.cursor.hovered {
	opacity: 1;
}
  
.cursor-follower {
	position: fixed;
	border: 0.5px solid var(--main-color);
	width: 30px;
	height: 30px;
	border-radius: 100%;
	z-index: 1;
	-webkit-transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background, 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
	transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background, 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
	transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background;
	transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background, 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 10000;
	-webkit-transform: translate(2px, 2px);
	transform: translate(2px, 2px);
}

.cursor-follower.active {
	opacity: 1;
	-webkit-transform: scale(2);
	transform: scale(2);
}

.cursor-follower.menu-active {
	opacity: 1;
	-webkit-transform: scale(2);
	transform: scale(2);
}

.cursor-follower.hovered {
	opacity: 1;
}
  
/* Cursor End */

.xs-sidebar-group .close-button{
	font-family: "Flaticon";
}

.newsletter-popup-area-section{
	display: none;
}
/* Fix: several "_image" wrapper components (about-three, about-four, faq-one)
   rely on the <img> having large natural pixel dimensions (like the original
   stock JPGs) to establish their container's height, which downstream
   absolutely-positioned badges (experience counters, awards) then anchor to.
   Our SVG illustrations don't have that same intrinsic sizing behavior, which
   collapsed these containers and made the badges overlap unrelated content.
   Give these images an explicit, professional-looking size. */
.about-three_image img,
.about-four_image img{
width: 100%;
    object-fit: contain;
    background-color: var(--brand-off-white);
    padding: 20px;
    box-sizing: border-box;
}

.faq-one_image img{
	width: 100%;
	object-fit: contain;
	background-color: var(--brand-off-white);
	padding: 16px;
	box-sizing: border-box;
}

.faq-one_image-two{
position: absolute;
    left: 0px;
    bottom: -80px;
    z-index: 1;
    display: inline-block;
    border: 4px solid var(--white-color);
}

.faq-one_image-two img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 767px){
	.about-three_image img,
	.about-four_image img{
		height: stretch;
	}
	.faq-one_image img{
		height: 220px;
	}
}

/* Defensive fallback: guarantee the page-title hero band always shows the
   brand red even if the background SVG fails to load for any reason
   (missing file on deploy, server MIME-type config, etc.). The image (if it
   loads) simply layers on top of this. */
.page-title{
	background-color: var(--main-color);
	background-repeat: no-repeat;
	background-position: center;
}

/* Fix: the reviewer-photo circle (.testimonial-block_three-author span) never had
   an explicit rule sizing the <img> itself - the original template's local author
   images happened to already be pre-cropped to exactly 64x64, so it went unnoticed.
   Live Google review photos come back at other sizes (e.g. 128x128), so without this
   the avatar could render oddly cropped/positioned or effectively invisible depending
   on the browser. Force it to fill and crop cleanly to the circle. */
.testimonial-block_three-author span img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Equal-height testimonial cards: Swiper already makes every .swiper-slide
   the same height (its own base CSS stretches slides to fill the row), but
   the visible white card inside (.testimonial-block_three-inner) only grew
   to fit its own content - via the unsupported "height: stretch" value in
   style.css - so cards with shorter reviews ended up visibly shorter than
   cards with longer ones. Make the card fill its slide with a column flex
   layout, then push the rating/link row to the bottom with margin-top:auto
   so it lines up at the same spot on every card regardless of review length. */
.testimonial-block_three{
	height: 100%;
}
.testimonial-block_three-inner{
	height: 100% !important;
	display: flex;
	flex-direction: column;
}

/* Row holding the star rating + "View Live on Google" link side by side.
   Needs position:relative because the card's hover overlay (.testimonial-block_three-inner::before)
   is position:absolute - non-positioned siblings paint BEHIND absolutely
   positioned ones in the same stacking context, which is why the link was
   getting hidden under the overlay on hover before this was added.
   margin-top:auto pushes this row to the bottom of the now flex-column card. */
.testimonial-block_three-rating-row{
	position: relative;
	margin-top: auto;
	padding-top: 20px;
}

/* "View Live on Google" link, now sitting to the right of the stars */
.testimonial-block_three-live-link{
	position: relative;
}
.testimonial-block_three-live-link a{
	font-size: 13px;
	font-weight: 600;
	color: var(--main-color);
	transition: color 300ms ease;
}
.testimonial-block_three-live-link a:hover{
	color: var(--color-seven);
}
/* Switch to white on hover/active-slide to stay legible against the card's
   dark overlay, matching the pattern already used for the author name. */
.testimonial-three .swiper-slide-active .testimonial-block_three-live-link a,
.testimonial-block_three-inner:hover .testimonial-block_three-live-link a{
	color: var(--white-color);
}

/* The pagination dots row (.testimonial-three_carousel-pagination) uses a
   negative top margin (-14px) to sit snug against the arrow row above it,
   so the two visually overlap on purpose. But the pagination div comes
   later in the DOM, so in that overlapping strip it paints on top of and
   swallows taps/clicks meant for the "next" arrow underneath it - the
   next arrow is fine, it's just unreachable. Give the arrows a higher
   stacking order, and make the pagination div itself (not its dots)
   click-through so it never intercepts anything not meant for it. */
.testimonial-three_carousel-prev,
.testimonial-three_carousel-next{
	z-index: 2;
}
.testimonial-three_carousel-pagination{
	pointer-events: none;
}
.testimonial-three_carousel-pagination .swiper-pagination-bullet{
	pointer-events: auto;
}

/* Contact form success/error message, shown below the reCAPTCHA widget
   after an Ajax submission (assets/js/script.js #contact-form submitHandler). */
.contact-form .form-response{
	margin-top: -10px;
	margin-bottom: 20px;
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
}
.contact-form .form-response.success{
	color: #1f7a3f;
	background: rgba(31, 122, 63, 0.1);
	border: 1px solid rgba(31, 122, 63, 0.3);
}
.contact-form .form-response.error{
	color: var(--main-color);
	background: rgba(var(--main-color-rgb), 0.08);
	border: 1px solid rgba(var(--main-color-rgb), 0.3);
}

/* ====================================================================
   MOBILE-ONLY FIXES (max-width: 767px)
   Desktop is confirmed working correctly and must not be touched -
   every rule below is scoped inside this single media query.
   ==================================================================== */
@media only screen and (max-width: 767px){

	/* Page-title hero banner (used on every interior page): 100px+100px
	   vertical padding left a large empty dead-space gap under the
	   breadcrumb on small screens, since there's much less content to
	   fill that height than on desktop. Also center the real background
	   photo so its subject stays in frame instead of being cropped
	   arbitrarily on a narrow viewport. */
	.page-title{
		padding: 50px 0px 40px;
		background-position: center center !important;
	}

	/* Same 72px desktop heading size used everywhere else - fine for a short
	   title like "About Us", but longer page titles like the FAQ page's
	   "International Student Immigration Guide" wrap into a huge,
	   screen-dominating block of text at that size on a narrow viewport. */
	.page-title h1{
		font-size: 32px !important;
		line-height: 40px !important;
	}

	/* Homepage hero slider: background photo + heading */
	.slider-three_image{
		background-position: center center !important;
	}
	/* The desktop gradient goes fully opaque black on the left, which is
	   fine when text only covers half the width - on mobile the text
	   column spans the full width, so that same gradient blacks out the
	   whole photo. Replace it with a lighter, even tint so the photo is
	   actually visible while text stays legible. */
	.slider-three_image::before{
		background: rgba(var(--black-color-rgb), 0.55) !important;
	}
	.slider-three_content-inner{
		padding-top: 90px;
		padding-bottom: 20px;
	}
	/* 72px desktop heading size doesn't shrink at all on mobile, causing
	   individual words to overflow past the viewport edge. */
	.slider-three_heading{
		font-size: 32px !important;
		line-height: 40px !important;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	/* Each hero slide reserves 200px of bottom padding on desktop for the
	   pagination dots, which is proportionally fine on a tall desktop hero
	   but leaves a large empty gap under the button on a short mobile slide. */
	.slider-three .swiper-slide{
		padding-bottom: 30px !important;
	}

	/* Prev/next arrows are touch-target-sized for desktop pointer use;
	   on mobile, swipe gesture + pagination dots are the expected way to
	   navigate, and the arrows only added clutter and visually spilled
	   past the bottom edge of the slide into the section below it. Keep
	   responsive.css's original mobile behavior of hiding them. */
	.slider-three-arrow{
		display: none !important;
	}

	/* The dots sit 40px up from the bottom of the whole .slider-three
	   section (they're positioned outside the swiper, against the section
	   itself, not each slide) - combined with the slide's own bottom
	   padding above, that left an oversized, uneven-looking gap of empty
	   background between the heading content and the dots/edge of the
	   slide. Now that the arrows are gone too, tighten it up. */
	.slider_three-carousel-pagination{
		bottom: 18px !important;
	}

	/* video-two: background-attachment:fixed (used for the parallax effect)
	   is a long-standing iOS Safari bug - it frequently fails to render, or
	   renders un-centered, on iPhone. Fall back to a normal scrolling
	   background on mobile so the photo actually shows up, correctly
	   centered and cropped. Losing the fixed/parallax effect on mobile is a
	   reasonable trade-off since the effect is barely perceptible on a phone
	   scroll anyway. */
	.video-two{
		background-attachment: scroll !important;
		background-position: center center !important;
		background-size: cover !important;
	}

	/* The equal-card-height fix (.testimonial-block_three-inner { height:100% })
	   relies on flexbox stretching every .swiper-slide to match the tallest
	   one - that works on desktop (3 real slides visibly in the same row),
	   but with slidesPerView:1 + loop:true, Swiper keeps cloned/duplicate
	   slides in the same flex row for the seamless loop, and the browser's
	   stretch calculation was including those duplicates unpredictably,
	   producing a wildly inflated height (much taller than even the longest
	   real review needs) rather than just matching the longest real review.
	   That's what produced the huge empty gap under short reviews.
	   Fix: stop relying on flex-stretch for this on mobile. Use a fixed
	   min-height instead, sized to fit the longest possible review (measured
	   with real webfonts loaded: a full 200-character review - the enforced
	   truncation limit - needs 458px of content height on a 430px-wide card,
	   scrollHeight-measured, not just the visually-apparent boundingBox).
	   Every card gets at least this height so they still all line up the
	   same regardless of review length, without the runaway duplicate-slide
	   stretching bug, and without clipping the longest review's text. */
	.testimonial-block_three-inner{
		height: auto !important;
		min-height: 470px;
	}

	/* Root cause of the persistent iOS-Safari-only carousel gap bug (every
	   carousel: hero slider, testimonials, why-choose-us, etc). Swiper's own
	   base library CSS (assets/css/swiper.min.css) sets
	   .swiper-slide{height:-webkit-fill-available}. That WebKit-only keyword
	   is notorious for resolving to the wrong (oversized) value on iOS
	   Safari specifically, because Safari's collapsing/expanding address
	   bar changes the "available" viewport height mid-scroll - Chrome on
	   Android has no such quirk, which is exactly why this only ever showed
	   up on iPhone and never reproduced in Chromium-based testing here.
	   Override it with a plain, predictable height so every slide just
	   fills its .swiper-wrapper parent (which Swiper already sizes via
	   flex/height:100%) instead of relying on the buggy WebKit value. */
	.swiper-slide{
		height: 100% !important;
	}

}

/* Floated media inserted through the CMS rich text editor (see the
   `formats` override in admin/inc/layout-footer.php that makes TinyMCE's
   align toolbar float img/table/iframe consistently, and the matching
   allow-list in assets/inc/cms/sanitize-html.php). Without this, a
   right/left-aligned image or video embed sits flush against the
   surrounding paragraph text with zero breathing room. Not scoped to a
   specific content wrapper class since richtext blocks are rendered
   inside many different section layouts across the site. */
img[style*="float"], iframe[style*="float"]{
	margin: 6px 15px 15px 15px;
}

/* Author avatar (index About section). The .about-three_author-image box is
   already a 64px circle - border-radius plus the brand-coloured ring - but it
   never clipped its contents, and the <img> inside carried no radius of its
   own. That was invisible while the default was a circular SVG badge (the
   artwork itself was round); the moment a real square photo is uploaded
   through the CMS, its corners overflow the rounded box and the avatar reads
   as a square. Clip to the container and crop rather than squash, so
   non-square uploads still come out as a clean circle. */
.about-three_author-image{
	overflow: hidden;
}

.about-three_author-image img{
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

/* Carousel controls (index: both the Why Choose Us and Services
   carousels, which share the same template pattern). The template sized the pagination
   with a hardcoded `width: 60px !important` - exactly three 12px bullets
   plus their margins - so the moment a 4th service was added the dots
   wrapped onto a second line under the arrows. Arrows and dots now share
   one flex row that sizes to its content, so any number of services keeps
   them on a single line.

   Deliberately does NOT set `display` on .four-item_carousel-pagination:
   responsive.css hides it entirely at the small breakpoint, and global.css
   loads after it, so setting display here would un-hide the dots on
   mobile. Bullets are inline-block by default, so nowrap alone keeps them
   in a row. */
.services-five-arrow,
.services-one-arrow{
	width: auto !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.four-item_carousel-next,
.services-one-arrow .services-one_carousel-next{
	position: static;
}

.four-item_carousel-pagination,
.services-one_carousel-pagination{
	position: relative;
	width: auto !important;
	margin: 0;
	white-space: nowrap;
}

/* Spacing between the pagination dots themselves. Swiper only applies its
   own `margin: 0 4px` through
   `.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet`
   - a DIRECT-child selector. Nesting the pagination inside the arrow row
   above (needed to stop the dots wrapping onto a second line) means it is
   no longer a direct child of the carousel, so that rule stopped matching
   and the dots ended up flush against each other. Setting the gap here
   makes it independent of where the pagination sits in the DOM, and a
   little more generous than Swiper's default. */
.four-item_carousel-pagination .swiper-pagination-bullet,
.services-one_carousel-pagination .swiper-pagination-bullet{
	margin: 0 6px;
}

/* Responsive: wide tables on small screens.
   A brand-table with several columns has a minimum content width of
   ~435px+, well past a 375px phone viewport. Its container had
   overflow-x: visible while something further up the tree clipped, so the
   right-hand columns were simply cut off and unreachable - measured on
   clb-calculator (90px hidden, the whole "Speaking" column) and
   canada-business-migration-service (294px hidden). Making the table its
   own horizontally scrollable box keeps every column reachable by swiping
   without introducing page-level horizontal scroll. Tables that already
   fit are unaffected: overflow-x:auto shows no scrollbar when there is
   nothing to scroll. */
@media (max-width: 767px){
	.brand-table,
	.service-detail table,
	.blog-detail table{
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}